@coorpacademy/app-review 0.1.16 → 0.1.17

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,26 +17,31 @@ 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);
@@ -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,57 +1,52 @@
-import { concat, divide, get, getOr, head, includes, indexOf, isEmpty, map, rangeStep, size, toInteger } from 'lodash/fp';
+import { concat, divide, get, getOr, head, includes, indexOf, isEmpty, map, multiply, pipe, rangeStep, round, size, 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) => {
@@ -110,22 +105,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));
         }
     };
 };
-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 +126,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 +138,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);
         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/select-template.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const selectTemplateSlide: SlideFromAPI;
 export declare const selectTemplateUISlide: 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/text-template.d.ts

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

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

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

package/es/views/slides/test/index.test.js

@@ -0,0 +1,234 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import omit from 'lodash/fp/omit';
+import { mapStateToSlidesProps } from '..';
+import { freeTextSlide } from './fixtures/free-text';
+test('should create initial props when fetched slide is still not received', t => {
+    const state = {
+        data: {
+            progression: {
+                _id: '62b1d1087aa12f00253f40ee',
+                content: {
+                    ref: '_skillref',
+                    type: 'skill'
+                },
+                engine: {
+                    ref: 'review'
+                },
+                state: {
+                    allAnswers: [],
+                    isCorrect: true,
+                    nextContent: {
+                        ref: 'sli_N1XACJobn',
+                        type: 'slide'
+                    },
+                    pendingSlides: [],
+                    slides: [],
+                    step: {
+                        current: 1
+                    },
+                    stars: 0
+                }
+            },
+            skills: [],
+            slides: {
+                sli_N1XACJobn: null
+            },
+            token: '1234'
+        },
+        ui: {
+            currentSlideRef: '',
+            navigation: ['loader', 'slides'],
+            answers: [],
+            slide: {
+                validateButton: false
+            }
+        }
+    };
+    const 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: 'no-answer',
+                value: '1'
+            },
+            {
+                current: false,
+                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'], props.stack), {
+        correctionPopinProps: undefined,
+        endReview: false,
+        slides: {
+            '0': {
+                hidden: false,
+                position: 0,
+                loading: true
+            },
+            '1': {
+                hidden: false,
+                position: 1,
+                loading: true
+            },
+            '2': {
+                hidden: false,
+                position: 2,
+                loading: true
+            },
+            '3': {
+                hidden: false,
+                position: 3,
+                loading: true
+            },
+            '4': {
+                hidden: false,
+                position: 4,
+                loading: true
+            }
+        }
+    });
+});
+test('should create initial props when the slide is on the state', t => {
+    const state = {
+        data: {
+            progression: {
+                _id: '62b1d1087aa12f00253f40ee',
+                content: {
+                    ref: '_skillref',
+                    type: 'skill'
+                },
+                engine: {
+                    ref: 'review'
+                },
+                state: {
+                    allAnswers: [],
+                    isCorrect: true,
+                    nextContent: {
+                        ref: 'sli_N1XACJobn',
+                        type: 'slide'
+                    },
+                    pendingSlides: [],
+                    slides: [],
+                    step: {
+                        current: 1
+                    },
+                    stars: 0
+                }
+            },
+            skills: [],
+            slides: {
+                sli_N1XACJobn: freeTextSlide
+            },
+            token: '1234'
+        },
+        ui: {
+            currentSlideRef: 'sli_N1XACJobn',
+            navigation: ['loader', 'slides'],
+            answers: ['My value'],
+            slide: {
+                validateButton: true
+            }
+        }
+    };
+    const 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: 'no-answer',
+                value: '1'
+            },
+            {
+                current: false,
+                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.false(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'], props.stack.slides), {
+        '1': {
+            hidden: false,
+            position: 1,
+            loading: true
+        },
+        '2': {
+            hidden: false,
+            position: 2,
+            loading: true
+        },
+        '3': {
+            hidden: false,
+            position: 3,
+            loading: true
+        },
+        '4': {
+            hidden: false,
+            position: 4,
+            loading: true
+        }
+    });
+});

package/lib/actions/api/fetch-skills.d.ts

@@ -1,6 +1,6 @@
-import { Dispatch } from 'redux';
+import type { Dispatch } from 'redux';
 import type { StoreState } from '../../reducers';
-import { Options, Skill } from '../../types/common';
+import type { Options, Skill } from '../../types/common';
 export declare const SKILLS_FETCH_REQUEST: "@@skills/FETCH_REQUEST";
 export declare const SKILLS_FETCH_SUCCESS: "@@skills/FETCH_SUCCESS";
 export declare const SKILLS_FETCH_FAILURE: "@@skills/FETCH_FAILURE";
@@ -8,4 +8,4 @@ export declare type ReceivedSkills = {
     type: '@@skills/FETCH_SUCCESS';
     payload: Skill[];
 };
-export declare const fetchSkills: (token: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;
+export declare const fetchSkills: (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;

package/lib/actions/api/fetch-skills.js

@@ -35,27 +35,30 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import buildTask from '@coorpacademy/redux-task';
+import get from 'lodash/fp/get';
 export var SKILLS_FETCH_REQUEST = '@@skills/FETCH_REQUEST';
 export var SKILLS_FETCH_SUCCESS = '@@skills/FETCH_SUCCESS';
 export var SKILLS_FETCH_FAILURE = '@@skills/FETCH_FAILURE';
-export var fetchSkills = function (token) {
-    return function (dispatch, getState, _a) {
-        var services = _a.services;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var action;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        action = buildTask({
-                            types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
-                            task: function () { return services.fetchSkills(token); }
-                        });
-                        return [4 /*yield*/, dispatch(action)];
-                    case 1:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
+export var fetchSkills = function (dispatch, getState, _a) {
+    var services = _a.services;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var action;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    action = buildTask({
+                        types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
+                        task: function () {
+                            var state = getState();
+                            var token = get('data.token', state);
+                            return services.fetchSkills(token);
+                        }
+                    });
+                    return [4 /*yield*/, dispatch(action)];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
         });
-    };
+    });
 };

package/lib/actions/api/fetch-slide.d.ts

@@ -17,4 +17,4 @@ export declare type ReceivedSlide = {
         slideRef: string;
     };
 };
-export declare const fetchSlide: (slideRef: string, token: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;
+export declare const fetchSlide: (slideRef: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;

package/lib/actions/api/fetch-slide.js

@@ -42,7 +42,7 @@ import { setCurrentSlide } from '../ui/slides';
 export var SLIDE_FETCH_REQUEST = '@@slides/FETCH_REQUEST';
 export var SLIDE_FETCH_SUCCESS = '@@slides/FETCH_SUCCESS';
 export var SLIDE_FETCH_FAILURE = '@@slides/FETCH_FAILURE';
-export var fetchSlide = function (slideRef, token) {
+export var fetchSlide = function (slideRef) {
     return function (dispatch, getState, _a) {
         var services = _a.services;
         return __awaiter(void 0, void 0, void 0, function () {
@@ -56,6 +56,8 @@ export var fetchSlide = function (slideRef, token) {
                                 return has("data.slide.".concat(slideRef), state);
                             },
                             task: function () {
+                                var state = getState();
+                                var token = get('data.token', state);
                                 return services.fetchSlide(slideRef, token);
                             },
                             meta: { slideRef: slideRef }

package/lib/actions/api/post-answer.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch } from 'redux';
+import type { Options } from '../../types/common';
+import type { StoreState } from '../../reducers';
+export declare const POST_ANSWER_REQUEST: "@@answer/POST_REQUEST";
+export declare const POST_ANSWER_SUCCESS: "@@answer/POST_SUCCESS";
+export declare const POST_ANSWER_FAILURE: "@@answer/POST_FAILURE";
+export declare type PostAnswerRequestAction = {
+    type: typeof POST_ANSWER_REQUEST;
+};
+export declare const postAnswer: (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;