@coorpacademy/app-review 0.1.15 → 0.1.17

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

@@ -9,53 +9,97 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { qcmSlide } from '../../helpers/test/fixtures/qcm';
-export var services = {
-    fetchSkills: function () {
-        return Promise.resolve([
-            {
-                skillRef: '_skill-ref',
-                slidesToReview: 2,
-                name: 'skill-test',
-                custom: false
-                // TODO parentContentTitle
-            },
-            {
-                skillRef: '_skill-ref-2',
-                slidesToReview: 2,
-                name: 'skill-test-2',
-                custom: true,
-                parentContentTitle: 'parentContentTitle 2'
-                // TODO parentContentTitle
-            }
-        ]);
+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';
+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
+    },
+    {
+        skillRef: '_skill-ref-2',
+        slidesToReview: 2,
+        name: 'skill-test-2',
+        custom: true
+    }
+];
+var postProgressionResponse = {
+    _id: '62b1d1087aa12f00253f40ee',
+    content: {
+        ref: '_skill-ref',
+        type: 'skill'
     },
-    fetchSlide: function (ref) {
-        return Promise.resolve(__assign(__assign({}, qcmSlide), { universalRef: ref, id: ref }));
+    engine: {
+        ref: 'review'
     },
-    postProgression: function () {
-        return Promise.resolve({
-            _id: '62b1d1087aa12f00253f40ee',
-            content: {
-                ref: '_skill-ref',
-                type: 'skill'
-            },
-            engine: {
-                ref: 'review'
-            },
-            state: {
-                allAnswers: [],
+    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'
+    },
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [
+            {
+                slideRef: 'sli_VJYjJnJhg',
                 isCorrect: true,
-                nextContent: {
-                    ref: 'sli_N1XACJobn',
-                    type: 'slide'
-                },
-                pendingSlides: [],
-                slides: [],
-                step: {
-                    current: 1
-                }
+                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;
@@ -23,21 +21,21 @@ declare type BaseContent = {
     media?: unknown;
     choices: ChoiceFromAPI[];
 };
-declare type Question = {
+declare type BaseQuestion = {
     header?: string;
     content: BaseContent;
     explanation?: string;
 };
-export declare type QcmQuestion = Question & {
+export declare type QcmQuestion = BaseQuestion & {
     type: 'qcm';
 };
-export declare type QcmGraphicQuestion = Question & {
+export declare type QcmGraphicQuestion = BaseQuestion & {
     type: 'qcmGraphic';
 };
-export declare type QcmDragQuestion = Question & {
+export declare type QcmDragQuestion = BaseQuestion & {
     type: 'qcmDrag';
 };
-export declare type BasicQuestion = Omit<Question, 'content'> & {
+export declare type BasicQuestion = Omit<BaseQuestion, 'content'> & {
     type: 'basic';
     content: {
         media?: unknown;
@@ -46,7 +44,7 @@ export declare type BasicQuestion = Omit<Question, 'content'> & {
         id: string;
     };
 };
-export declare type SliderQuestion = Omit<Question, 'content'> & {
+export declare type SliderQuestion = Omit<BaseQuestion, 'content'> & {
     content: {
         media?: unknown;
         unitLabel: string;
@@ -56,20 +54,25 @@ export declare type SliderQuestion = Omit<Question, 'content'> & {
     };
     type: 'slider';
 };
-export declare type TemplateQuestion = Omit<Question, 'content'> & {
+export declare type TemplateQuestion = Omit<BaseQuestion, 'content'> & {
     content: BaseContent & {
         template: string;
     };
     type: 'template';
 };
+export declare type Question = QcmQuestion | QcmGraphicQuestion | QcmDragQuestion | BasicQuestion | SliderQuestion | TemplateQuestion;
 export declare type SlideFromAPI = {
-    question: QcmQuestion | QcmGraphicQuestion | QcmDragQuestion | BasicQuestion | SliderQuestion | TemplateQuestion;
+    question: Question;
     klf: string;
     universalRef: string;
     tips?: string;
     clue?: string;
     hasClue?: boolean;
     id: string;
+    parentContentTitle: {
+        title: string;
+        type: 'chapter' | 'course';
+    };
 };
 declare type ProgressionAnswerItem = {
     isCorrect: boolean;
@@ -92,9 +95,17 @@ export declare type ProgressionState = {
     step: {
         current: number;
     };
+    stars: number;
 };
 export declare type ProgressionFromAPI = {
     _id: string;
+    content: {
+        type: 'skill';
+        ref: string;
+    };
+    engine: {
+        ref: 'review';
+    };
     state: ProgressionState;
 };
 export declare type Skill = {
@@ -107,6 +118,7 @@ export declare type Services = {
     fetchSkills(token: string): Promise<Skill[]>;
     fetchSlide(slideRef: string, token: string): Promise<SlideFromAPI | void>;
     postProgression(skillRef: string, token: string): Promise<ProgressionFromAPI>;
+    postAnswer(skillRef: string, token: string, progressionId: string, answer: string[]): Promise<ProgressionFromAPI>;
 };
 export declare type Options = {
     services: Services;
@@ -128,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,3 +1,90 @@
+import { Dispatch } from 'redux';
+import { SlideIndexes } from '../../common';
 import { StoreState } from '../../reducers';
-import { SlidesViewStaticProps } from '../../types/views/slides';
-export declare const mapStateToSlidesProps: (state: StoreState) => SlidesViewStaticProps | null;
+import { AnswerUI } from '../../types/slides';
+declare const ICON_VALUES: {
+    readonly right: "right";
+    readonly wrong: "wrong";
+    readonly 'no-answer': "no-answer";
+};
+declare type IconValue = keyof typeof ICON_VALUES;
+declare type StepItem = {
+    current: boolean;
+    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;
+};
+export declare type CorrectionPopinProps = {
+    klf: {
+        label: string;
+        onClick: Function;
+        tooltip: string;
+    };
+    information: {
+        label: string;
+        message: string;
+    };
+    next: {
+        label: string;
+        ariaLabel: string;
+    };
+    successLabel: string;
+    failureLabel: string;
+};
+export declare type SlidesViewProps = {
+    header: {
+        mode: string;
+        skillName: string;
+        onQuitClick: Function;
+        'aria-label'?: string;
+        closeButtonAriaLabel: string;
+        steps: StepItem[];
+    };
+    stack: {
+        slides: SlidesStack;
+        validateButton: {
+            label: string;
+            disabled: boolean;
+            onClick: Function;
+        };
+        correctionPopinProps?: CorrectionPopinProps;
+        endReview: boolean;
+    };
+    reviewBackgroundAriaLabel?: string;
+    congratsProps?: {
+        'aria-label'?: string;
+        'data-name'?: string;
+        animationLottie: unknown;
+        title: string;
+        cardCongratsStar: unknown;
+        cardCongratsRank: unknown;
+        buttonRevising: {
+            'aria-label'?: string;
+            label: string;
+            onClick: Function;
+            type: string;
+        };
+        buttonRevisingSkill: {
+            'aria-label'?: string;
+            label: string;
+            onClick: Function;
+            type: string;
+        };
+    };
+};
+export declare const initialState: SlidesStack;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch) => SlidesViewProps;
+export {};

package/lib/views/slides/index.js

@@ -9,8 +9,82 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import concat from 'lodash/fp/concat';
+import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 import isEmpty from 'lodash/fp/isEmpty';
-var buildStepItemps = function (state) {
+import pipe from 'lodash/fp/pipe';
+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',
+    wrong: 'wrong',
+    'no-answer': 'no-answer'
+};
+export var initialState = {
+    '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
+    }
+};
+var getProgressionSlidesRefs = function (progression) {
+    if (progression.state.step.current < 5) {
+        var slideRef = progression.state.nextContent.ref;
+        return concat([slideRef], progression.state.slides);
+    }
+    return slice(0, 5, progression.state.slides);
+};
+var buildStackSlides = function (state, dispatch) {
+    var currentSlideRef = state.ui.currentSlideRef;
+    var progression = state.data.progression;
+    if (!currentSlideRef || !progression)
+        return initialState;
+    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('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);
+    }, initialState, initialState);
+    return stack;
+};
+var buildStepItems = function (state) {
     var progression = state.data.progression;
     var currentSlideRef = state.ui.currentSlideRef;
     if (!progression)
@@ -55,10 +129,7 @@ var buildStepItemps = function (state) {
     });
     return steps;
 };
-export var mapStateToSlidesProps = function (state) {
-    if (!state.data.slides) {
-        return null;
-    }
+export var mapStateToSlidesProps = function (state, dispatch) {
     return {
         header: {
             mode: '__revision_mode',
@@ -69,16 +140,15 @@ export var mapStateToSlidesProps = function (state) {
             },
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
-            steps: buildStepItemps(state)
+            steps: buildStepItems(state)
         },
         stack: {
-            slides: state.ui.slides,
+            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.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch } from 'redux';
+import { AnswerUI } from '../../types/slides';
+import { Question, SlideFromAPI } from '../../types/common';
+export declare const getQuestionType: (question: Question) => Question['type'];
+export declare const mapApiSlideToUi: (dispatch: Dispatch) => (slide: SlideFromAPI, answers: string[]) => {
+    questionText: string;
+    answerUI: AnswerUI;
+};