@coorpacademy/app-review 0.1.16 → 0.1.18

package/src/views/slides/index.ts

@@ -9,9 +9,11 @@ import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
 import {Dispatch} from 'redux';
-import {ProgressionFromAPI, UISlide} from '../../types/common';
+import {ProgressionFromAPI} from '../../types/common';
 import {SlideIndexes} from '../../common';
 import {StoreState} from '../../reducers';
+import {AnswerUI} from '../../types/slides';
+import {postAnswer} from '../../actions/api/post-answer';
 import {mapApiSlideToUi} from './map-api-slide-to-ui';
 
 const ICON_VALUES = {
@@ -28,6 +30,19 @@ type StepItem = {
   value: string;
 };
 
+type SlideUIAnimations = 'unstack' | 'restack';
+
+export type UISlide = {
+  questionText?: string;
+  answerUI?: AnswerUI;
+  hidden?: boolean;
+  position: number;
+  animationType?: SlideUIAnimations;
+  isCorrect?: boolean;
+  endReview?: boolean;
+  loading: boolean;
+};
+
 type SlidesStack = {
   [key in SlideIndexes]: UISlide;
 };
@@ -95,30 +110,35 @@ export type SlidesViewProps = {
 export const initialState: SlidesStack = {
   '0': {
     hidden: false,
-    position: 0
+    position: 0,
+    loading: true
   },
   '1': {
     hidden: false,
-    position: 1
+    position: 1,
+    loading: true
   },
   '2': {
     hidden: false,
-    position: 2
+    position: 2,
+    loading: true
   },
   '3': {
     hidden: false,
-    position: 3
+    position: 3,
+    loading: true
   },
   '4': {
     hidden: false,
-    position: 4
+    position: 4,
+    loading: true
   }
 };
 
-const getProgressionSlidesRef = (progression: ProgressionFromAPI): string[] => {
+const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
   if (progression.state.step.current < 5) {
     const slideRef = progression.state.nextContent.ref;
-    return concat([slideRef], progression.state.slides);
+    return concat(progression.state.slides, [slideRef]);
   }
   return slice(0, 5, progression.state.slides);
 };
@@ -128,7 +148,7 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
   const progression = state.data.progression;
 
   if (!currentSlideRef || !progression) return initialState;
-  const slideRefs = getProgressionSlidesRef(progression);
+  const slideRefs = getProgressionSlidesRefs(progression);
 
   // @ts-expect-error typescript does not support capped versions of lodash functions
   const stack = reduce.convert({cap: false})(
@@ -137,15 +157,18 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
       if (!slideRef) return set(index, uiSlide, acc);
 
       const slideFromAPI = get(slideRef, state.data.slides);
+      if (!slideFromAPI) return set(index, uiSlide, acc);
+
       const answers = state.ui.answers;
       const {questionText, answerUI} = mapApiSlideToUi(dispatch)(slideFromAPI, answers);
       const parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
       const parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
 
       const updatedUiSlide = pipe(
-        set(['questionText'], questionText),
-        set(['answerUI'], answerUI),
-        set(['parentContentTitle'], `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
+        set('loading', false),
+        set('questionText', questionText),
+        set('answerUI', answerUI),
+        set('parentContentTitle', `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
         // TODO: Set position according to currentSlideRef et slideRefs (or maybe a value on the state ui.slidePositions !!)
       )(uiSlide);
 
@@ -213,14 +236,7 @@ const buildStepItems = (state: StoreState): StepItem[] => {
   return steps;
 };
 
-export const mapStateToSlidesProps = (
-  state: StoreState,
-  dispatch: Dispatch
-): SlidesViewProps | null => {
-  if (!state.data.slides) {
-    return null;
-  }
-
+export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): SlidesViewProps => {
   return {
     header: {
       mode: '__revision_mode',
@@ -237,10 +253,9 @@ export const mapStateToSlidesProps = (
       slides: buildStackSlides(state, dispatch),
       validateButton: {
         label: '__validate',
-        disabled: true,
+        disabled: !get('ui.slide.validateButton', state),
         onClick: (): void => {
-          // eslint-disable-next-line no-console
-          console.log('TODO: validate question');
+          dispatch(postAnswer);
         }
       },
       correctionPopinProps: undefined,

package/src/views/slides/map-api-slide-to-ui.ts

@@ -1,5 +1,6 @@
 import {
   concat,
+  constant,
   divide,
   get,
   getOr,
@@ -7,10 +8,18 @@ import {
   includes,
   indexOf,
   isEmpty,
+  isNil,
   map,
+  multiply,
+  pipe,
   rangeStep,
+  round,
+  set,
   size,
-  toInteger
+  times,
+  toInteger,
+  toString as _toString,
+  __
 } from 'lodash/fp';
 import {Dispatch} from 'redux';
 import {
@@ -37,85 +46,100 @@ import {
 } from '../../types/common';
 import {editAnswer} from '../../actions/ui/answers';
 
-const qcmProps = (question: QcmQuestion): Qcm => {
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
-
-  return {
-    type: 'qcm',
-    answers: map(
-      choice => ({
-        title: choice.label,
-        selected: includes(choice.label, answers),
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onClick: () => console.log('TODO: on choice click'),
-        ariaLabel: choice.label
-      }),
-      // TODO: EDIT_CHOICES -> getChoices
-      question.content.choices
-    )
+const qcmProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: QcmQuestion): Qcm => {
+    return {
+      type: 'qcm',
+      answers: map(choice => {
+        const label = choice.label || '';
+        return {
+          title: label,
+          selected: includes(label, answers),
+          onClick: (): void => {
+            dispatch(editAnswer([label]));
+          },
+          ariaLabel: choice.label
+        };
+      }, question.content.choices)
+    };
   };
-};
 
-const qcmDragProps = (question: QcmDragQuestion): QcmDrag => {
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
-  return {
-    type: 'qcmDrag',
-    answers: map(choice => {
-      const indexInAnswer = indexOf(choice.label, answers);
-      return {
-        title: choice.label,
-        selected: includes(choice.label, answers),
-        order: indexInAnswer,
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onClick: () => console.log('TODO: on choice click')
-      };
-      // TODO: EDIT_CHOICES -> getChoices
-    }, question.content.choices)
+const qcmDragProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: QcmDragQuestion): QcmDrag => {
+    return {
+      type: 'qcmDrag',
+      answers: map(choice => {
+        const label = choice.label || '';
+        const indexInAnswer = indexOf(label, answers);
+        return {
+          title: label,
+          selected: includes(label, answers),
+          order: indexInAnswer,
+          onClick: (): void => {
+            dispatch(editAnswer([label]));
+          }
+        };
+      }, question.content.choices)
+    };
   };
-};
 
-const qcmGraphicProps = (question: QcmGraphicQuestion): QcmGraphic => {
-  // mock the answers
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
-  return {
-    type: 'qcmGraphic',
-    answers: map(
-      choice => ({
-        title: choice.label,
-        image: get('media.src.0.url', choice),
-        selected: includes(choice.label, answers),
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onClick: () => console.log('TODO: on choice click')
-      }),
-      // TODO: EDIT_CHOICES -> getChoices
-      question.content.choices
-    )
+const qcmGraphicProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: QcmGraphicQuestion): QcmGraphic => {
+    return {
+      type: 'qcmGraphic',
+      answers: map(choice => {
+        const label = choice.label || '';
+        return {
+          title: label,
+          image: get('media.src.0.url', choice),
+          selected: includes(label, answers),
+          onClick: (): void => {
+            dispatch(editAnswer([label]));
+          }
+        };
+      }, question.content.choices)
+    };
   };
+
+const updateTemplateAnswer = (
+  text: string,
+  _answers: string[],
+  index: number,
+  max: number
+): string[] => {
+  const answers = isEmpty(_answers) ? times(constant(undefined), max) : _answers;
+  return map(a => (isNil(a) ? '' : a), set(index, text, answers)) as string[];
 };
 
-const templateTextProps = (choice: ChoiceFromAPI, index: number): TextTemplate => {
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
+const templateTextProps = (
+  dispatch: Dispatch,
+  answers: string[],
+  choice: ChoiceFromAPI,
+  index: number,
+  maxLength: number
+): TextTemplate => {
   return {
     type: 'text',
-    name: getOr('', 'name', choice), // TODO prendre valeur depuis les données de l'api
+    name: getOr('', 'name', choice),
     placeholder: 'Type here',
     value: get(index, answers),
-    // TODO: EDIT_CHOICES
-    // eslint-disable-next-line no-console
-    onChange: () => console.log('TODO: on choice change')
+    onChange: (text: string): void => {
+      const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+      dispatch(editAnswer(newAnswers));
+    }
   };
 };
 
-const templateSelectProps = (choice: ChoiceFromAPI, index: number): SelectionTemplate => {
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
+const templateSelectProps = (
+  dispatch: Dispatch,
+  answers: string[],
+  choice: ChoiceFromAPI,
+  index: number,
+  maxLength: number
+): SelectionTemplate => {
   const answer = get(index, answers);
   const temporaryOption = {
     name: 'Select an answer', // TODO translate
@@ -136,24 +160,29 @@ const templateSelectProps = (choice: ChoiceFromAPI, index: number): SelectionTem
   return {
     type: 'select',
     name: getOr('', 'name', choice),
-    // TODO: EDIT_CHOICES
-    // eslint-disable-next-line no-console
-    onChange: () => console.log('TODO: on choice change'),
+    onChange: (text: string): void => {
+      const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+      dispatch(editAnswer(newAnswers));
+    },
     options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
   };
 };
 
-const templateProps = (question: TemplateQuestion): Template => {
-  // TODO: EDIT_CHOICES -> getChoices
-  const choices = question.content.choices;
-  return {
-    type: 'template',
-    template: get('content.template', question),
-    answers: choices.map((choice, index) =>
-      choice.type === 'text' ? templateTextProps(choice, index) : templateSelectProps(choice, index)
-    )
+const templateProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: TemplateQuestion): Template => {
+    const choices = question.content.choices;
+    const maxLength = size(choices);
+    return {
+      type: 'template',
+      template: get('content.template', question),
+      answers: choices.map((choice, index) =>
+        choice.type === 'text'
+          ? templateTextProps(dispatch, answers, choice, index, maxLength)
+          : templateSelectProps(dispatch, answers, choice, index, maxLength)
+      )
+    };
   };
-};
 
 const basicProps =
   (dispatch: Dispatch) =>
@@ -163,44 +192,48 @@ const basicProps =
       placeholder: question.content.placeholder || '',
       value: answers[0] || '',
       onChange: (text: string): void => {
-        // eslint-disable-next-line no-console
-        console.log(text);
-        dispatch(editAnswer(text));
+        dispatch(editAnswer([text]));
       }
     };
   };
 
-const sliderProps = (question: SliderQuestion): QuestionRange => {
-  const values: number[] = rangeStep(
-    getOr(1, 'content.step', question),
-    get('content.min', question),
-    get('content.max', question) + 1
-    // Lodash doesn't infer the type very well here
-  ) as unknown as number[];
-
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
+const sliderProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: SliderQuestion): QuestionRange => {
+    const values: number[] = rangeStep(
+      getOr(1, 'content.step', question),
+      get('content.min', question),
+      get('content.max', question) + 1
+      // Lodash doesn't infer the type very well here
+    ) as unknown as number[];
 
-  const stateValue = head(answers) || question.content.min;
-  const currentValue = toInteger(stateValue);
+    const stateValue = head(answers) || question.content.min;
+    const currentValue = toInteger(stateValue);
 
-  const indexValue = indexOf(currentValue, values);
-  const sliderPosition = divide(indexValue, size(values) - 1);
+    const indexValue = indexOf(currentValue, values);
+    const maxValue = size(values) - 1;
+    const sliderPosition = divide(indexValue, maxValue);
 
-  const unitLabel = get('content.unitLabel', question);
+    const unitLabel = get('content.unitLabel', question);
 
-  return {
-    type: 'slider',
-    placeholder: question.explanation,
-    minLabel: `${question.content.min} ${unitLabel}`,
-    maxLabel: `${question.content.max} ${unitLabel}`,
-    title: `${currentValue} ${question.content.unitLabel}`,
-    value: sliderPosition,
-    // TODO: EDIT_CHOICES
-    // eslint-disable-next-line no-console
-    onChange: () => console.log('TODO: on choice change')
+    return {
+      type: 'slider',
+      placeholder: question.explanation,
+      minLabel: `${question.content.min} ${unitLabel}`,
+      maxLabel: `${question.content.max} ${unitLabel}`,
+      title: `${currentValue} ${question.content.unitLabel}`,
+      value: sliderPosition,
+      onChange: (position: number): void => {
+        const newValue: string = pipe(
+          multiply(maxValue),
+          round,
+          get(__, values),
+          _toString
+        )(position);
+        dispatch(editAnswer([newValue]));
+      }
+    };
   };
-};
 
 export const getQuestionType = (question: Question): Question['type'] => question.type;
 
@@ -214,22 +247,22 @@ const getAnswerUIModel = (
   const type = getQuestionType(question);
   switch (type) {
     case 'qcm':
-      return qcmProps(question as QcmQuestion);
+      return qcmProps(dispatch)(answers, question as QcmQuestion);
 
     case 'qcmGraphic':
-      return qcmGraphicProps(question as QcmGraphicQuestion);
+      return qcmGraphicProps(dispatch)(answers, question as QcmGraphicQuestion);
 
     case 'qcmDrag':
-      return qcmDragProps(question as QcmDragQuestion);
+      return qcmDragProps(dispatch)(answers, question as QcmDragQuestion);
 
     case 'basic':
       return basicProps(dispatch)(answers, question as BasicQuestion);
 
     case 'template':
-      return templateProps(question as TemplateQuestion);
+      return templateProps(dispatch)(answers, question as TemplateQuestion);
 
     case 'slider':
-      return sliderProps(question as SliderQuestion);
+      return sliderProps(dispatch)(answers, question as SliderQuestion);
 
     default:
       throw new Error(`${type} is not an handled question.type`);

package/src/views/slides/test/fixtures/free-text.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const freeTextSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/qcm-drag.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmDragSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/qcm-graphic.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmGraphicSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/qcm.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/slider.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const sliderSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/{select-template.ts → template.ts}

@@ -1,11 +1,12 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
-export const selectTemplateSlide: SlideFromAPI = {
+export const templateSlide: SlideFromAPI = {
   question: {
     content: {
       template:
-        'La vue {{sel80495}} présente la liste des utilisateurs ayant le plus grand nombre d’étoiles cumulées.',
+        'La vue {{sel80495}} présente la liste des   {{inp58402}}   ayant le plus grand nombre d’{{sel80496}} cumulées.',
       choices: [
         {
           items: [
@@ -33,6 +34,45 @@ export const selectTemplateSlide: SlideFromAPI = {
           _id: '5b57464e3b594d002e8829f3',
           name: 'sel80495',
           type: 'select'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62433c2c58920f02c4950de0',
+          type: 'text',
+          name: 'inp58402',
+          id: '62433c2c58920f02c4950de0'
+        },
+        {
+          items: [
+            {
+              _id: '5b57464e3b594d002e8829f7',
+              value: 'sli_N13-hG3kX.choice_NJgC3aznJm',
+              text: 'étoiles'
+            },
+            {
+              _id: '5b57464e3b594d002e8829f6',
+              value: 'sli_N13-hG3kX.choice_EJZ02aMny7',
+              text: 'idées'
+            },
+            {
+              _id: '5b57464e3b594d002e8829f5',
+              value: 'sli_N13-hG3kX.choice_4keCaf21Q',
+              text: 'envies'
+            },
+            {
+              _id: '5b57464e3b594d002e8829f4',
+              value: 'sli_N13-hG3kX.choice_NkbJAMn17',
+              text: 'images'
+            }
+          ],
+          _id: '5b57464e3b594d002e8829f3',
+          name: 'sel80496',
+          type: 'select'
         }
       ]
     },
@@ -51,14 +91,14 @@ export const selectTemplateSlide: SlideFromAPI = {
   }
 };
 
-export const selectTemplateUISlide: Partial<UISlide> = {
+export const templateUISlide: Partial<UISlide> = {
   questionText: 'Complétez la phrase ci-dessous.',
   answerUI: {
     help: 'Saisissez votre réponse ou sélectionnez la bonne réponse dans le(s) menu(s) déroulant(s).',
     model: {
       type: 'template',
       template:
-        'La vue {{sel80495}} présente la liste des utilisateurs ayant le plus grand nombre d’étoiles cumulées.',
+        'La vue {{sel80495}} présente la liste des   {{inp58402}}   ayant le plus grand nombre d’{{sel80496}} cumulées.',
       answers: [
         {
           type: 'select',
@@ -91,6 +131,45 @@ export const selectTemplateUISlide: Partial<UISlide> = {
               selected: false
             }
           ]
+        },
+        {
+          type: 'text',
+          name: 'inp58402',
+          placeholder: 'Type here',
+          value: undefined,
+          onChange: noop
+        },
+        {
+          type: 'select',
+          name: 'sel80496',
+          onChange: noop,
+          options: [
+            {name: 'Select an answer', value: '', validOption: false, selected: true},
+            {
+              name: 'étoiles',
+              value: 'étoiles',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'idées',
+              value: 'idées',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'envies',
+              value: 'envies',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'images',
+              value: 'images',
+              validOption: true,
+              selected: false
+            }
+          ]
         }
       ]
     }