@coorpacademy/app-review 0.1.16 → 0.1.18

package/es/views/slides/index.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch } from 'redux';
-import { UISlide } from '../../types/common';
 import { SlideIndexes } from '../../common';
 import { StoreState } from '../../reducers';
+import { AnswerUI } from '../../types/slides';
 declare const ICON_VALUES: {
     readonly right: "right";
     readonly wrong: "wrong";
@@ -13,6 +13,17 @@ declare type StepItem = {
     icon: IconValue;
     value: string;
 };
+declare type SlideUIAnimations = 'unstack' | 'restack';
+export declare type UISlide = {
+    questionText?: string;
+    answerUI?: AnswerUI;
+    hidden?: boolean;
+    position: number;
+    animationType?: SlideUIAnimations;
+    isCorrect?: boolean;
+    endReview?: boolean;
+    loading: boolean;
+};
 declare type SlidesStack = {
     [key in SlideIndexes]: UISlide;
 };
@@ -75,5 +86,5 @@ export declare type SlidesViewProps = {
     };
 };
 export declare const initialState: SlidesStack;
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch) => SlidesViewProps | null;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch) => SlidesViewProps;
 export {};

package/es/views/slides/index.js

@@ -7,6 +7,7 @@ import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
+import { postAnswer } from '../../actions/api/post-answer';
 import { mapApiSlideToUi } from './map-api-slide-to-ui';
 const ICON_VALUES = {
     right: 'right',
@@ -16,29 +17,34 @@ const ICON_VALUES = {
 export const initialState = {
     '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) => {
+const getProgressionSlidesRefs = (progression) => {
     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);
 };
@@ -47,18 +53,20 @@ const buildStackSlides = (state, dispatch) => {
     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 })((acc, uiSlide, index) => {
         const slideRef = slideRefs[toInteger(index)];
         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-
+        const updatedUiSlide = pipe(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);
         return set(index, updatedUiSlide, acc);
@@ -118,9 +126,6 @@ const buildStepItems = (state) => {
     return steps;
 };
 export const mapStateToSlidesProps = (state, dispatch) => {
-    if (!state.data.slides) {
-        return null;
-    }
     return {
         header: {
             mode: '__revision_mode',
@@ -137,10 +142,9 @@ export const mapStateToSlidesProps = (state, dispatch) => {
             slides: buildStackSlides(state, dispatch),
             validateButton: {
                 label: '__validate',
-                disabled: true,
+                disabled: !get('ui.slide.validateButton', state),
                 onClick: () => {
-                    // eslint-disable-next-line no-console
-                    console.log('TODO: validate question');
+                    dispatch(postAnswer);
                 }
             },
             correctionPopinProps: undefined,

package/es/views/slides/map-api-slide-to-ui.js

@@ -1,75 +1,71 @@
-import { concat, divide, get, getOr, head, includes, indexOf, isEmpty, map, rangeStep, size, toInteger } from 'lodash/fp';
+import { concat, constant, divide, get, getOr, head, includes, indexOf, isEmpty, isNil, map, multiply, pipe, rangeStep, round, set, size, times, toInteger, toString as _toString, __ } from 'lodash/fp';
 import { editAnswer } from '../../actions/ui/answers';
-const qcmProps = (question) => {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
+const qcmProps = (dispatch) => (answers, question) => {
     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)
+        answers: map(choice => {
+            const label = choice.label || '';
+            return {
+                title: label,
+                selected: includes(label, answers),
+                onClick: () => {
+                    dispatch(editAnswer([label]));
+                },
+                ariaLabel: choice.label
+            };
+        }, question.content.choices)
     };
 };
-const qcmDragProps = (question) => {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
+const qcmDragProps = (dispatch) => (answers, question) => {
     return {
         type: 'qcmDrag',
         answers: map(choice => {
-            const indexInAnswer = indexOf(choice.label, answers);
+            const label = choice.label || '';
+            const indexInAnswer = indexOf(label, answers);
             return {
-                title: choice.label,
-                selected: includes(choice.label, answers),
+                title: label,
+                selected: includes(label, answers),
                 order: indexInAnswer,
-                // TODO: EDIT_CHOICES
-                // eslint-disable-next-line no-console
-                onClick: () => console.log('TODO: on choice click')
+                onClick: () => {
+                    dispatch(editAnswer([label]));
+                }
             };
-            // TODO: EDIT_CHOICES -> getChoices
         }, question.content.choices)
     };
 };
-const qcmGraphicProps = (question) => {
-    // mock the answers
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
+const qcmGraphicProps = (dispatch) => (answers, question) => {
     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)
+        answers: map(choice => {
+            const label = choice.label || '';
+            return {
+                title: label,
+                image: get('media.src.0.url', choice),
+                selected: includes(label, answers),
+                onClick: () => {
+                    dispatch(editAnswer([label]));
+                }
+            };
+        }, question.content.choices)
     };
 };
-const templateTextProps = (choice, index) => {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
+const updateTemplateAnswer = (text, _answers, index, max) => {
+    const answers = isEmpty(_answers) ? times(constant(undefined), max) : _answers;
+    return map(a => (isNil(a) ? '' : a), set(index, text, answers));
+};
+const templateTextProps = (dispatch, answers, choice, index, maxLength) => {
     return {
         type: 'text',
         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) => {
+            const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+            dispatch(editAnswer(newAnswers));
+        }
     };
 };
-const templateSelectProps = (choice, index) => {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
+const templateSelectProps = (dispatch, answers, choice, index, maxLength) => {
     const answer = get(index, answers);
     const temporaryOption = {
         name: 'Select an answer',
@@ -89,19 +85,22 @@ const templateSelectProps = (choice, index) => {
     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) => {
+            const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+            dispatch(editAnswer(newAnswers));
+        },
         options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
     };
 };
-const templateProps = (question) => {
-    // TODO: EDIT_CHOICES -> getChoices
+const templateProps = (dispatch) => (answers, question) => {
     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(choice, index) : templateSelectProps(choice, index))
+        answers: choices.map((choice, index) => choice.type === 'text'
+            ? templateTextProps(dispatch, answers, choice, index, maxLength)
+            : templateSelectProps(dispatch, answers, choice, index, maxLength))
     };
 };
 const basicProps = (dispatch) => (answers, question) => {
@@ -110,22 +109,19 @@ const basicProps = (dispatch) => (answers, question) => {
         placeholder: question.content.placeholder || '',
         value: answers[0] || '',
         onChange: (text) => {
-            // eslint-disable-next-line no-console
-            console.log(text);
-            dispatch(editAnswer(text));
+            dispatch(editAnswer([text]));
         }
     };
 };
-const sliderProps = (question) => {
+const sliderProps = (dispatch) => (answers, question) => {
     const values = rangeStep(getOr(1, 'content.step', question), get('content.min', question), get('content.max', question) + 1
     // Lodash doesn't infer the type very well here
     );
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
     const stateValue = head(answers) || question.content.min;
     const currentValue = toInteger(stateValue);
     const indexValue = indexOf(currentValue, values);
-    const sliderPosition = divide(indexValue, size(values) - 1);
+    const maxValue = size(values) - 1;
+    const sliderPosition = divide(indexValue, maxValue);
     const unitLabel = get('content.unitLabel', question);
     return {
         type: 'slider',
@@ -134,9 +130,10 @@ const sliderProps = (question) => {
         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')
+        onChange: (position) => {
+            const newValue = pipe(multiply(maxValue), round, get(__, values), _toString)(position);
+            dispatch(editAnswer([newValue]));
+        }
     };
 };
 export const getQuestionType = (question) => question.type;
@@ -145,17 +142,17 @@ const getAnswerUIModel = (question, answers, dispatch) => {
     const type = getQuestionType(question);
     switch (type) {
         case 'qcm':
-            return qcmProps(question);
+            return qcmProps(dispatch)(answers, question);
         case 'qcmGraphic':
-            return qcmGraphicProps(question);
+            return qcmGraphicProps(dispatch)(answers, question);
         case 'qcmDrag':
-            return qcmDragProps(question);
+            return qcmDragProps(dispatch)(answers, question);
         case 'basic':
             return basicProps(dispatch)(answers, question);
         case 'template':
-            return templateProps(question);
+            return templateProps(dispatch)(answers, question);
         case 'slider':
-            return sliderProps(question);
+            return sliderProps(dispatch)(answers, question);
         default:
             throw new Error(`${type} is not an handled question.type`);
     }

package/es/views/slides/test/fixtures/free-text.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const freeTextSlide: SlideFromAPI;
 export declare const freeTextUISlide: Partial<UISlide>;

package/es/views/slides/test/fixtures/qcm-drag.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmDragSlide: SlideFromAPI;
 export declare const qcmDragUISlide: Partial<UISlide>;

package/es/views/slides/test/fixtures/qcm-graphic.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmGraphicSlide: SlideFromAPI;
 export declare const qcmGraphicUISlide: Partial<UISlide>;

package/es/views/slides/test/fixtures/qcm.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmSlide: SlideFromAPI;
 export declare const qcmUISlide: Partial<UISlide>;

package/es/views/slides/test/fixtures/slider.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const sliderSlide: SlideFromAPI;
 export declare const sliderUISlide: Partial<UISlide>;

package/es/views/slides/test/fixtures/template.d.ts

@@ -0,0 +1,4 @@
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
+export declare const templateSlide: SlideFromAPI;
+export declare const templateUISlide: Partial<UISlide>;

package/{lib/views/slides/test/fixtures/select-template.js → es/views/slides/test/fixtures/template.js}

@@ -1,8 +1,8 @@
 import noop from 'lodash/fp/noop';
-export var selectTemplateSlide = {
+export const templateSlide = {
     question: {
         content: {
-            template: 'La vue {{sel80495}} présente la liste des utilisateurs ayant le plus grand nombre d’étoiles cumulées.',
+            template: 'La vue {{sel80495}} présente la liste des   {{inp58402}}   ayant le plus grand nombre d’{{sel80496}} cumulées.',
             choices: [
                 {
                     items: [
@@ -30,6 +30,45 @@ export var selectTemplateSlide = {
                     _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'
                 }
             ]
         },
@@ -46,13 +85,13 @@ export var selectTemplateSlide = {
         type: 'course'
     }
 };
-export var selectTemplateUISlide = {
+export const templateUISlide = {
     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.',
+            template: 'La vue {{sel80495}} présente la liste des   {{inp58402}}   ayant le plus grand nombre d’{{sel80496}} cumulées.',
             answers: [
                 {
                     type: 'select',
@@ -85,6 +124,45 @@ export var selectTemplateUISlide = {
                             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
+                        }
+                    ]
                 }
             ]
         }

package/es/views/slides/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};