@coorpacademy/app-review 0.1.17 → 0.1.18

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

@@ -1,4 +1,4 @@
-import { concat, divide, get, getOr, head, includes, indexOf, isEmpty, map, multiply, pipe, rangeStep, round, size, toInteger, toString as _toString, __ } 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';
 var qcmProps = function (dispatch) {
     return function (answers, question) {
@@ -10,7 +10,7 @@ var qcmProps = function (dispatch) {
                     title: label,
                     selected: includes(label, answers),
                     onClick: function () {
-                        dispatch(editAnswer(label));
+                        dispatch(editAnswer([label]));
                     },
                     ariaLabel: choice.label
                 };
@@ -30,7 +30,7 @@ var qcmDragProps = function (dispatch) {
                     selected: includes(label, answers),
                     order: indexInAnswer,
                     onClick: function () {
-                        dispatch(editAnswer(label));
+                        dispatch(editAnswer([label]));
                     }
                 };
             }, question.content.choices)
@@ -48,29 +48,30 @@ var qcmGraphicProps = function (dispatch) {
                     image: get('media.src.0.url', choice),
                     selected: includes(label, answers),
                     onClick: function () {
-                        dispatch(editAnswer(label));
+                        dispatch(editAnswer([label]));
                     }
                 };
             }, question.content.choices)
         };
     };
 };
-var templateTextProps = function (choice, index) {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    var answers = [];
+var updateTemplateAnswer = function (text, _answers, index, max) {
+    var answers = isEmpty(_answers) ? times(constant(undefined), max) : _answers;
+    return map(function (a) { return (isNil(a) ? '' : a); }, set(index, text, answers));
+};
+var templateTextProps = function (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: function () { return console.log('TODO: on choice change'); }
+        onChange: function (text) {
+            var newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+            dispatch(editAnswer(newAnswers));
+        }
     };
 };
-var templateSelectProps = function (choice, index) {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    var answers = [];
+var templateSelectProps = function (dispatch, answers, choice, index, maxLength) {
     var answer = get(index, answers);
     var temporaryOption = {
         name: 'Select an answer',
@@ -90,21 +91,26 @@ var templateSelectProps = function (choice, index) {
     return {
         type: 'select',
         name: getOr('', 'name', choice),
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onChange: function () { return console.log('TODO: on choice change'); },
+        onChange: function (text) {
+            var newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+            dispatch(editAnswer(newAnswers));
+        },
         options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
     };
 };
-var templateProps = function (question) {
-    // TODO: EDIT_CHOICES -> getChoices
-    var choices = question.content.choices;
-    return {
-        type: 'template',
-        template: get('content.template', question),
-        answers: choices.map(function (choice, index) {
-            return choice.type === 'text' ? templateTextProps(choice, index) : templateSelectProps(choice, index);
-        })
+var templateProps = function (dispatch) {
+    return function (answers, question) {
+        var choices = question.content.choices;
+        var maxLength = size(choices);
+        return {
+            type: 'template',
+            template: get('content.template', question),
+            answers: choices.map(function (choice, index) {
+                return choice.type === 'text'
+                    ? templateTextProps(dispatch, answers, choice, index, maxLength)
+                    : templateSelectProps(dispatch, answers, choice, index, maxLength);
+            })
+        };
     };
 };
 var basicProps = function (dispatch) {
@@ -114,7 +120,7 @@ var basicProps = function (dispatch) {
             placeholder: question.content.placeholder || '',
             value: answers[0] || '',
             onChange: function (text) {
-                dispatch(editAnswer(text));
+                dispatch(editAnswer([text]));
             }
         };
     };
@@ -139,7 +145,7 @@ var sliderProps = function (dispatch) {
             value: sliderPosition,
             onChange: function (position) {
                 var newValue = pipe(multiply(maxValue), round, get(__, values), _toString)(position);
-                dispatch(editAnswer(newValue));
+                dispatch(editAnswer([newValue]));
             }
         };
     };
@@ -158,7 +164,7 @@ var getAnswerUIModel = function (question, answers, dispatch) {
         case 'basic':
             return basicProps(dispatch)(answers, question);
         case 'template':
-            return templateProps(question);
+            return templateProps(dispatch)(answers, question);
         case 'slider':
             return sliderProps(dispatch)(answers, question);
         default:

package/lib/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 → template.js}

@@ -1,8 +1,8 @@
 import noop from 'lodash/fp/noop';
-export var selectTemplateSlide = {
+export var 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 var 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/lib/views/slides/test/index.test.js

@@ -232,3 +232,242 @@ test('should create initial props when the slide is on the state', function (t)
         }
     });
 });
+test('should create props when the next slide is on the state', function (t) {
+    var state = {
+        data: {
+            progression: {
+                _id: '62b1d1087aa12f00253f40ee',
+                content: {
+                    ref: '_skill-ref',
+                    type: 'skill'
+                },
+                engine: {
+                    ref: 'review'
+                },
+                state: {
+                    allAnswers: [
+                        {
+                            slideRef: 'sli_VJYjJnJhg',
+                            isCorrect: true,
+                            answer: ['Benchmark']
+                        }
+                    ],
+                    isCorrect: true,
+                    nextContent: {
+                        ref: 'sli_VkSQroQnx',
+                        type: 'slide'
+                    },
+                    content: {
+                        ref: 'sli_VJYjJnJhg',
+                        type: 'slide'
+                    },
+                    pendingSlides: [],
+                    slides: ['sli_VJYjJnJhg'],
+                    step: {
+                        current: 2
+                    },
+                    stars: 4
+                }
+            },
+            skills: [],
+            slides: {
+                sli_VJYjJnJhg: {
+                    question: {
+                        content: {
+                            media: {
+                                src: [],
+                                posters: [],
+                                subtitles: []
+                            },
+                            label: '',
+                            placeholder: 'Type here',
+                            id: 'sli_VJYjJnJhg.choice_1'
+                        },
+                        type: 'basic',
+                        header: 'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?',
+                        explanation: 'Type your answer.'
+                    },
+                    klf: 'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.',
+                    tips: 'According to Insee, Paris salaries are 20-25% higher compared with those of the provinces in 2015.',
+                    universalRef: 'sli_VJYjJnJhg',
+                    id: 'sli_VJYjJnJhg',
+                    parentContentTitle: {
+                        title: 'Developing the review app',
+                        type: 'course'
+                    }
+                },
+                sli_VkSQroQnx: {
+                    question: {
+                        content: {
+                            media: {
+                                src: [],
+                                posters: [],
+                                subtitles: []
+                            },
+                            choices: [
+                                {
+                                    media: {
+                                        src: [
+                                            {
+                                                _id: '624efd915948a7013083e986',
+                                                mimeType: 'image/jpeg',
+                                                url: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/true-1512554153232.jpg',
+                                                id: '624efd915948a7013083e986'
+                                            }
+                                        ],
+                                        posters: [],
+                                        subtitles: [],
+                                        type: 'img'
+                                    },
+                                    items: [],
+                                    _id: '624efd915948a7013083e985',
+                                    label: 'Vrai',
+                                    value: 'sli_VkSQroQnx.choice_NJesyUo7nx',
+                                    id: '624efd915948a7013083e985'
+                                },
+                                {
+                                    media: {
+                                        src: [
+                                            {
+                                                _id: '624efd915948a7013083e988',
+                                                mimeType: 'image/jpeg',
+                                                url: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/false-1512554160848.jpg',
+                                                id: '624efd915948a7013083e988'
+                                            }
+                                        ],
+                                        posters: [],
+                                        subtitles: [],
+                                        type: 'img'
+                                    },
+                                    items: [],
+                                    _id: '624efd915948a7013083e987',
+                                    label: 'Faux',
+                                    value: 'sli_VkSQroQnx.choice_VkgayLjX3e',
+                                    id: '624efd915948a7013083e987'
+                                }
+                            ]
+                        },
+                        type: 'qcmGraphic',
+                        header: 'Pour mener une bonne négociation, il ne faut ressentir aucune émotion. Vrai ou faux ?',
+                        explanation: 'Sélectionnez la bonne réponse.'
+                    },
+                    klf: "Il ne faut pas prendre la négociation comme une affaire personnelle, afin de rester centré sur son sujet. Mais cela ne signifie pas être dépourvu de toute émotion, car celles-ci peuvent être de vrais atouts. À condition de réussir à les exprimer sans accuser l'autre d'en être à l'origine.",
+                    tips: "Pour gérer ses émotions, il faut d'abord les identifier, notamment en analysant ses ressentis physiques et en trouvant l'élément déclencheur.",
+                    universalRef: 'sli_VkSQroQnx',
+                    id: 'sli_VkSQroQnx',
+                    parentContentTitle: {
+                        title: 'Developing the review app',
+                        type: 'course'
+                    }
+                }
+            },
+            token: 'undefined'
+        },
+        ui: {
+            currentSlideRef: 'sli_VJYjJnJhg',
+            navigation: ['loader', 'slides'],
+            answers: ['My value'],
+            slide: {
+                validateButton: false
+            }
+        }
+    };
+    var props = mapStateToSlidesProps(state, identity);
+    t.is(props.congratsProps, undefined);
+    t.deepEqual(omit(['onQuitClick'], props.header), {
+        'aria-label': 'aria-header-wrapper',
+        closeButtonAriaLabel: 'aria-close-button',
+        mode: '__revision_mode',
+        skillName: '__agility',
+        steps: [
+            {
+                current: true,
+                icon: 'right',
+                value: '1'
+            },
+            {
+                // FIX ME: update on PR -> https://trello.com/c/qOSDa8Fm/2715-app-review-props-dynamiques-pour-les-step-items-du-header-bas%C3%A9-sur-le-state
+                current: true,
+                icon: 'no-answer',
+                value: '2'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '3'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '4'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '5'
+            }
+        ]
+    });
+    t.deepEqual(omit(['validateButton', 'slides'], props.stack), {
+        correctionPopinProps: undefined,
+        endReview: false
+    });
+    t.true(props.stack.validateButton.disabled);
+    t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+        hidden: false,
+        position: 0,
+        loading: false,
+        parentContentTitle: 'From "Developing the review app" course',
+        questionText: 'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?'
+    });
+    t.deepEqual(omit('model.onChange', props.stack.slides['0'].answerUI), {
+        help: 'Type your answer.',
+        model: {
+            placeholder: 'Type here',
+            type: 'freeText',
+            value: 'My value'
+        }
+    });
+    t.deepEqual(omit(['0', '1.answerUI.model.answers.0.onClick', '1.answerUI.model.answers.1.onClick'], props.stack.slides), {
+        '1': {
+            answerUI: {
+                help: 'Sélectionnez la bonne réponse.',
+                model: {
+                    answers: [
+                        {
+                            image: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/true-1512554153232.jpg',
+                            selected: false,
+                            title: 'Vrai'
+                        },
+                        {
+                            image: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/false-1512554160848.jpg',
+                            selected: false,
+                            title: 'Faux'
+                        }
+                    ],
+                    type: 'qcmGraphic'
+                }
+            },
+            hidden: false,
+            loading: false,
+            position: 1,
+            parentContentTitle: 'From "Developing the review app" course',
+            questionText: 'Pour mener une bonne négociation, il ne faut ressentir aucune émotion. Vrai ou faux ?'
+        },
+        '2': {
+            hidden: false,
+            position: 2,
+            loading: true
+        },
+        '3': {
+            hidden: false,
+            position: 3,
+            loading: true
+        },
+        '4': {
+            hidden: false,
+            position: 4,
+            loading: true
+        }
+    });
+});

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

@@ -16,8 +16,7 @@ import { qcmUISlide, qcmSlide } from './fixtures/qcm';
 import { qcmDragUISlide, qcmDragSlide } from './fixtures/qcm-drag';
 import { freeTextSlide, freeTextUISlide } from './fixtures/free-text';
 import { qcmGraphicUISlide, qcmGraphicSlide } from './fixtures/qcm-graphic';
-import { textTemplateSlide, textTemplateUISlide } from './fixtures/text-template';
-import { selectTemplateSlide, selectTemplateUISlide } from './fixtures/select-template';
+import { templateSlide, templateUISlide } from './fixtures/template';
 import { sliderSlide, sliderUISlide } from './fixtures/slider';
 var _mapApiSlideToUi = mapApiSlideToUi(identity);
 var macro = test.macro({
@@ -35,15 +34,10 @@ test('qcm graphic', macro, {
     answers: [],
     expectedUiSlide: qcmGraphicUISlide
 });
-test('text template', macro, {
-    slide: textTemplateSlide,
+test('template', macro, {
+    slide: templateSlide,
     answers: [],
-    expectedUiSlide: textTemplateUISlide
-});
-test('select template', macro, {
-    slide: selectTemplateSlide,
-    answers: [],
-    expectedUiSlide: selectTemplateUISlide
+    expectedUiSlide: templateUISlide
 });
 test('free text', macro, { slide: freeTextSlide, answers: [], expectedUiSlide: freeTextUISlide });
 test('slider', macro, { slide: sliderSlide, answers: [], expectedUiSlide: sliderUISlide });

package/lib/views/slides/test/slide.template.on-change.test.d.ts

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

package/lib/views/slides/test/slide.template.on-change.test.js

@@ -0,0 +1,82 @@
+var _a;
+import test from 'ava';
+import omit from 'lodash/fp/omit';
+import get from 'lodash/fp/get';
+import { mapStateToSlidesProps } from '..';
+import { services } from '../../../test/util/services.mock';
+import { createTestStore } from '../../../actions/test/create-test-store';
+import { EDIT_TEMPLATE } from '../../../actions/ui/answers';
+import { templateSlide } from './fixtures/template';
+var progression = {
+    _id: '123456789123',
+    content: { type: 'skill', ref: '_skill-ref' },
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+            ref: templateSlide.id,
+            type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        },
+        stars: 0
+    }
+};
+var initialState = {
+    data: {
+        progression: progression,
+        slides: (_a = {},
+            _a[templateSlide.id] = templateSlide,
+            _a),
+        skills: [],
+        token: '1234'
+    },
+    ui: {
+        currentSlideRef: templateSlide.id,
+        navigation: ['skills', 'slides'],
+        answers: [],
+        slide: {
+            validateButton: false
+        }
+    }
+};
+test('should dispatch EDIT_TEMPLATE action via the property onChange of a Template Text slide', function (t) {
+    var _a;
+    t.plan(2);
+    var expectedActions = [{ type: EDIT_TEMPLATE, payload: ['', 'test', ''] }];
+    var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
+    var props = mapStateToSlidesProps(getState(), dispatch);
+    t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+        hidden: false,
+        position: 0,
+        loading: false,
+        parentContentTitle: 'From "Developing the review app" course',
+        questionText: 'Complétez la phrase ci-dessous.'
+    });
+    var SlideProps = (_a = props.stack.slides['0'].answerUI) === null || _a === void 0 ? void 0 : _a.model;
+    var onChange = get(['1', 'onChange'], SlideProps.answers);
+    onChange('test');
+});
+test('should dispatch EDIT_TEMPLATE action via the property onChange of a Template Select slide', function (t) {
+    var _a;
+    t.plan(2);
+    var expectedActions = [{ type: EDIT_TEMPLATE, payload: ['Catalogue', '', ''] }];
+    var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
+    var props = mapStateToSlidesProps(getState(), dispatch);
+    t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+        hidden: false,
+        position: 0,
+        loading: false,
+        parentContentTitle: 'From "Developing the review app" course',
+        questionText: 'Complétez la phrase ci-dessous.'
+    });
+    var SlideProps = (_a = props.stack.slides['0'].answerUI) === null || _a === void 0 ? void 0 : _a.model;
+    var onChange = get(['0', 'onChange'], SlideProps.answers);
+    onChange('Catalogue');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -41,7 +41,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.11",
+    "@coorpacademy/components": "10.22.12",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -78,5 +78,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
   },
-  "gitHead": "7191ac405f4eebce61c459722595014ea973818c"
+  "gitHead": "2b9abf8c945cd56a6a47091836e4961917580782"
 }

package/src/actions/api/post-answer.ts

@@ -1,7 +1,7 @@
 import type {Dispatch} from 'redux';
 import buildTask from '@coorpacademy/redux-task';
 import get from 'lodash/fp/get';
-import type {Options} from '../../types/common';
+import type {Options, ProgressionFromAPI} from '../../types/common';
 import type {StoreState} from '../../reducers';
 import {fetchSlide} from './fetch-slide';
 
@@ -13,6 +13,11 @@ export type PostAnswerRequestAction = {
   type: typeof POST_ANSWER_REQUEST;
 };
 
+export type PostAnswerSuccessAction = {
+  type: typeof POST_ANSWER_SUCCESS;
+  payload: ProgressionFromAPI;
+};
+
 export const postAnswer = async (
   dispatch: Dispatch,
   getState: () => StoreState,