@coorpacademy/app-review 0.1.16 → 0.1.17

package/lib/test/util/services.mock.js

@@ -9,83 +9,97 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { qcmSlide } from '../../views/slides/test/fixtures/qcm';
+import { qcmGraphicSlide } from '../../views/slides/test/fixtures/qcm-graphic';
 import { freeTextSlide } from '../../views/slides/test/fixtures/free-text';
-export var services = {
-    fetchSkills: function () {
-        return Promise.resolve([
-            {
-                skillRef: '_skill-ref',
-                slidesToReview: 2,
-                name: 'skill-test',
-                custom: false
-            },
-            {
-                skillRef: '_skill-ref-2',
-                slidesToReview: 2,
-                name: 'skill-test-2',
-                custom: true
-            }
-        ]);
+import { sliderSlide } from '../../views/slides/test/fixtures/slider';
+var getSlideFixture = function (ref) {
+    switch (ref) {
+        case qcmSlide.universalRef:
+            return qcmSlide;
+        case qcmGraphicSlide.universalRef:
+            return qcmGraphicSlide;
+        case freeTextSlide.universalRef:
+            return freeTextSlide;
+        default:
+            return sliderSlide;
+    }
+};
+var fetchSkillsResponse = [
+    {
+        skillRef: '_skill-ref',
+        slidesToReview: 2,
+        name: 'skill-test',
+        custom: false
     },
-    fetchSlide: function (ref) {
-        return Promise.resolve(__assign(__assign({}, freeTextSlide), { universalRef: ref, id: ref }));
+    {
+        skillRef: '_skill-ref-2',
+        slidesToReview: 2,
+        name: 'skill-test-2',
+        custom: true
+    }
+];
+var postProgressionResponse = {
+    _id: '62b1d1087aa12f00253f40ee',
+    content: {
+        ref: '_skill-ref',
+        type: 'skill'
     },
-    postProgression: function () {
-        return Promise.resolve({
-            _id: '62b1d1087aa12f00253f40ee',
-            content: {
-                ref: '_skill-ref',
-                type: 'skill'
-            },
-            engine: {
-                ref: 'review'
-            },
-            state: {
-                allAnswers: [],
-                isCorrect: true,
-                nextContent: {
-                    ref: 'sli_N1XACJobn',
-                    type: 'slide'
-                },
-                pendingSlides: [],
-                slides: [],
-                step: {
-                    current: 1
-                },
-                stars: 0
-            }
-        });
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+            ref: 'sli_VJYjJnJhg',
+            type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        },
+        stars: 0
+    }
+};
+export var postAnswerResponse = {
+    _id: '62b1d1087aa12f00253f40ee',
+    content: {
+        ref: '_skill-ref',
+        type: 'skill'
     },
-    postAnswer: function () {
-        return Promise.resolve({
-            _id: '62b1d1087aa12f00253f40ee',
-            content: {
-                ref: '_skill-ref',
-                type: 'skill'
-            },
-            engine: {
-                ref: 'review'
-            },
-            state: {
-                allAnswers: [
-                    {
-                        slideRef: 'sli_N1XACJobn',
-                        isCorrect: true,
-                        answer: ['Le créateur peut fixer un pourcentage pour chaque transaction future']
-                    }
-                ],
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [
+            {
+                slideRef: 'sli_VJYjJnJhg',
                 isCorrect: true,
-                nextContent: {
-                    ref: 'sli_VkSQroQnx',
-                    type: 'slide'
-                },
-                pendingSlides: [],
-                slides: ['sli_N1XACJobn'],
-                step: {
-                    current: 2
-                },
-                stars: 4
+                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
     }
 };
+export var services = {
+    fetchSkills: function () { return Promise.resolve(fetchSkillsResponse); },
+    fetchSlide: function (ref) { return Promise.resolve(__assign(__assign({}, getSlideFixture(ref)), { universalRef: ref, id: ref })); },
+    postProgression: function () { return Promise.resolve(postProgressionResponse); },
+    postAnswer: function () { return Promise.resolve(postAnswerResponse); }
+};

package/lib/types/common.d.ts

@@ -1,5 +1,3 @@
-import { SlideIndexes } from '../common';
-import { AnswerUI } from './slides';
 declare type TemplateContextValues = {
     brandTheme?: unknown;
     theme?: unknown;
@@ -142,29 +140,6 @@ export declare type JWT = {
     usage: string;
     host: string;
 };
-declare type SlideUIAnimations = 'unstack' | 'restack';
-export declare type NextUISlide = {
-    questionText?: string;
-    answerUI?: AnswerUI;
-    hidden?: boolean;
-    position?: number;
-    animationType?: SlideUIAnimations;
-    isCorrect?: boolean;
-    endReview?: boolean;
-};
-export declare type UISlide = {
-    questionText?: string;
-    answerUI?: AnswerUI;
-    hidden?: boolean;
-    position: number;
-    animationType?: SlideUIAnimations;
-    isCorrect?: boolean;
-    endReview?: boolean;
-    nextContent?: NextUISlide;
-};
-export declare type FinishedSlides = {
-    [key in SlideIndexes]?: true;
-};
 export declare type WithRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };

package/lib/views/skills/index.d.ts

@@ -23,4 +23,4 @@ declare type SkillsProps = NoSkillsProps & {
     listSkills: SkillCard[];
 };
 export { SkillsProps };
-export declare const mapStateToSkillsProps: (state: StoreState) => SkillsProps | null;
+export declare const mapStateToSkillsProps: (state: StoreState) => SkillsProps;

package/lib/views/skills/index.js

@@ -1,7 +1,4 @@
 export var mapStateToSkillsProps = function (state) {
-    if (!state.data.skills) {
-        return null;
-    }
     return {
         title: '@todo title',
         titleNoSkills: '@todo titleNoSkills',

package/lib/views/skills/test/skills.test.d.ts

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

package/lib/views/skills/test/skills.test.js

@@ -0,0 +1,94 @@
+import test from 'ava';
+import map from 'lodash/fp/map';
+import omit from 'lodash/fp/omit';
+import { mapStateToSkillsProps } from '..';
+test('should create initial props when there are no skills on the state', function (t) {
+    var state = {
+        data: {
+            progression: null,
+            skills: [],
+            slides: {},
+            token: '1234'
+        },
+        ui: {
+            currentSlideRef: '',
+            navigation: ['loader', 'skills'],
+            answers: [],
+            slide: {
+                validateButton: false
+            }
+        }
+    };
+    var props = mapStateToSkillsProps(state);
+    t.deepEqual(props, {
+        title: '@todo title',
+        titleNoSkills: '@todo titleNoSkills',
+        textNoSkills: '@todo textNoSkills',
+        iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+        isLoading: false,
+        isLoadingAriaLabel: '@todo loading',
+        listSkills: []
+    });
+});
+test('should create initial props when skills on the state', function (t) {
+    var state = {
+        data: {
+            progression: null,
+            skills: [
+                {
+                    skillRef: '_skill-ref',
+                    slidesToReview: 2,
+                    name: 'skill-test',
+                    custom: false
+                },
+                {
+                    skillRef: '_skill-ref-2',
+                    slidesToReview: 5,
+                    name: 'skill-test-2',
+                    custom: true
+                }
+            ],
+            slides: {},
+            token: '1234'
+        },
+        ui: {
+            currentSlideRef: '',
+            navigation: ['loader', 'skills'],
+            answers: [],
+            slide: {
+                validateButton: false
+            }
+        }
+    };
+    var props = mapStateToSkillsProps(state);
+    t.deepEqual(omit('listSkills', props), {
+        title: '@todo title',
+        titleNoSkills: '@todo titleNoSkills',
+        textNoSkills: '@todo textNoSkills',
+        iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+        isLoading: false,
+        isLoadingAriaLabel: '@todo loading'
+    });
+    t.deepEqual(map(omit('onClick'), props.listSkills), [
+        {
+            'aria-label': '',
+            isCustom: false,
+            skillTitle: 'skill-test',
+            skillAriaLabel: '@todo skill aria label',
+            buttonLabel: '@todo button',
+            buttonAriaLabel: '@todo button aria label',
+            reviseLabel: '@todo revise',
+            reviseAriaLabel: '@todo revise aria label'
+        },
+        {
+            'aria-label': '',
+            isCustom: true,
+            skillTitle: 'skill-test-2',
+            skillAriaLabel: '@todo skill aria label',
+            buttonLabel: '@todo button',
+            buttonAriaLabel: '@todo button aria label',
+            reviseLabel: '@todo revise',
+            reviseAriaLabel: '@todo revise aria label'
+        }
+    ]);
+});

package/lib/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/lib/views/slides/index.js

@@ -18,6 +18,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';
 var ICON_VALUES = {
     right: 'right',
@@ -27,26 +28,31 @@ var ICON_VALUES = {
 export var 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
     }
 };
-var getProgressionSlidesRef = function (progression) {
+var getProgressionSlidesRefs = function (progression) {
     if (progression.state.step.current < 5) {
         var slideRef = progression.state.nextContent.ref;
         return concat([slideRef], progression.state.slides);
@@ -58,18 +64,20 @@ var buildStackSlides = function (state, dispatch) {
     var progression = state.data.progression;
     if (!currentSlideRef || !progression)
         return initialState;
-    var slideRefs = getProgressionSlidesRef(progression);
+    var slideRefs = getProgressionSlidesRefs(progression);
     // @ts-expect-error typescript does not support capped versions of lodash functions
     var stack = reduce.convert({ cap: false })(function (acc, uiSlide, index) {
         var slideRef = slideRefs[toInteger(index)];
         if (!slideRef)
             return set(index, uiSlide, acc);
         var slideFromAPI = get(slideRef, state.data.slides);
+        if (!slideFromAPI)
+            return set(index, uiSlide, acc);
         var answers = state.ui.answers;
         var _a = mapApiSlideToUi(dispatch)(slideFromAPI, answers), questionText = _a.questionText, answerUI = _a.answerUI;
         var parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
         var parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
-        var updatedUiSlide = pipe(set(['questionText'], questionText), set(['answerUI'], answerUI), set(['parentContentTitle'], "From \"".concat(parentContentTitle, "\" ").concat(parentContentType)) // TODO translate: -From- .... -Course/chapter-
+        var updatedUiSlide = pipe(set('loading', false), set('questionText', questionText), set('answerUI', answerUI), set('parentContentTitle', "From \"".concat(parentContentTitle, "\" ").concat(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);
@@ -122,9 +130,6 @@ var buildStepItems = function (state) {
     return steps;
 };
 export var mapStateToSlidesProps = function (state, dispatch) {
-    if (!state.data.slides) {
-        return null;
-    }
     return {
         header: {
             mode: '__revision_mode',
@@ -141,10 +146,9 @@ export var mapStateToSlidesProps = function (state, dispatch) {
             slides: buildStackSlides(state, dispatch),
             validateButton: {
                 label: '__validate',
-                disabled: true,
+                disabled: !get('ui.slide.validateButton', state),
                 onClick: function () {
-                    // eslint-disable-next-line no-console
-                    console.log('TODO: validate question');
+                    dispatch(postAnswer);
                 }
             },
             correctionPopinProps: undefined,

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

@@ -1,57 +1,58 @@
-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';
-var qcmProps = function (question) {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    var answers = [];
-    return {
-        type: 'qcm',
-        answers: map(function (choice) { return ({
-            title: choice.label,
-            selected: includes(choice.label, answers),
-            // TODO: EDIT_CHOICES
-            // eslint-disable-next-line no-console
-            onClick: function () { return console.log('TODO: on choice click'); },
-            ariaLabel: choice.label
-        }); }, 
-        // TODO: EDIT_CHOICES -> getChoices
-        question.content.choices)
+var qcmProps = function (dispatch) {
+    return function (answers, question) {
+        return {
+            type: 'qcm',
+            answers: map(function (choice) {
+                var label = choice.label || '';
+                return {
+                    title: label,
+                    selected: includes(label, answers),
+                    onClick: function () {
+                        dispatch(editAnswer(label));
+                    },
+                    ariaLabel: choice.label
+                };
+            }, question.content.choices)
+        };
     };
 };
-var qcmDragProps = function (question) {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    var answers = [];
-    return {
-        type: 'qcmDrag',
-        answers: map(function (choice) {
-            var 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: function () { return console.log('TODO: on choice click'); }
-            };
-            // TODO: EDIT_CHOICES -> getChoices
-        }, question.content.choices)
+var qcmDragProps = function (dispatch) {
+    return function (answers, question) {
+        return {
+            type: 'qcmDrag',
+            answers: map(function (choice) {
+                var label = choice.label || '';
+                var indexInAnswer = indexOf(label, answers);
+                return {
+                    title: label,
+                    selected: includes(label, answers),
+                    order: indexInAnswer,
+                    onClick: function () {
+                        dispatch(editAnswer(label));
+                    }
+                };
+            }, question.content.choices)
+        };
     };
 };
-var qcmGraphicProps = function (question) {
-    // mock the answers
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    var answers = [];
-    return {
-        type: 'qcmGraphic',
-        answers: map(function (choice) { return ({
-            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: function () { return console.log('TODO: on choice click'); }
-        }); }, 
-        // TODO: EDIT_CHOICES -> getChoices
-        question.content.choices)
+var qcmGraphicProps = function (dispatch) {
+    return function (answers, question) {
+        return {
+            type: 'qcmGraphic',
+            answers: map(function (choice) {
+                var label = choice.label || '';
+                return {
+                    title: label,
+                    image: get('media.src.0.url', choice),
+                    selected: includes(label, answers),
+                    onClick: function () {
+                        dispatch(editAnswer(label));
+                    }
+                };
+            }, question.content.choices)
+        };
     };
 };
 var templateTextProps = function (choice, index) {
@@ -113,34 +114,34 @@ var basicProps = function (dispatch) {
             placeholder: question.content.placeholder || '',
             value: answers[0] || '',
             onChange: function (text) {
-                // eslint-disable-next-line no-console
-                console.log(text);
                 dispatch(editAnswer(text));
             }
         };
     };
 };
-var sliderProps = function (question) {
-    var 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
-    var answers = [];
-    var stateValue = head(answers) || question.content.min;
-    var currentValue = toInteger(stateValue);
-    var indexValue = indexOf(currentValue, values);
-    var sliderPosition = divide(indexValue, size(values) - 1);
-    var unitLabel = get('content.unitLabel', question);
-    return {
-        type: 'slider',
-        placeholder: question.explanation,
-        minLabel: "".concat(question.content.min, " ").concat(unitLabel),
-        maxLabel: "".concat(question.content.max, " ").concat(unitLabel),
-        title: "".concat(currentValue, " ").concat(question.content.unitLabel),
-        value: sliderPosition,
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onChange: function () { return console.log('TODO: on choice change'); }
+var sliderProps = function (dispatch) {
+    return function (answers, question) {
+        var 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
+        );
+        var stateValue = head(answers) || question.content.min;
+        var currentValue = toInteger(stateValue);
+        var indexValue = indexOf(currentValue, values);
+        var maxValue = size(values) - 1;
+        var sliderPosition = divide(indexValue, maxValue);
+        var unitLabel = get('content.unitLabel', question);
+        return {
+            type: 'slider',
+            placeholder: question.explanation,
+            minLabel: "".concat(question.content.min, " ").concat(unitLabel),
+            maxLabel: "".concat(question.content.max, " ").concat(unitLabel),
+            title: "".concat(currentValue, " ").concat(question.content.unitLabel),
+            value: sliderPosition,
+            onChange: function (position) {
+                var newValue = pipe(multiply(maxValue), round, get(__, values), _toString)(position);
+                dispatch(editAnswer(newValue));
+            }
+        };
     };
 };
 export var getQuestionType = function (question) { return question.type; };
@@ -149,17 +150,17 @@ var getAnswerUIModel = function (question, answers, dispatch) {
     var 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("".concat(type, " is not an handled question.type"));
     }

package/lib/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/lib/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/lib/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/lib/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>;