@coorpacademy/app-review 0.1.9 → 0.1.11

package/es/helpers/test/fixtures/text-template.js

@@ -0,0 +1,48 @@
+import noop from 'lodash/fp/noop';
+export const textTemplateSlide = {
+    question: {
+        content: {
+            media: {
+                src: [],
+                posters: [],
+                subtitles: []
+            },
+            template: 'Un   {{inp58402}}   model.',
+            choices: [
+                {
+                    media: {
+                        src: [],
+                        posters: [],
+                        subtitles: []
+                    },
+                    items: [],
+                    _id: '62433c2c58920f02c4950de0',
+                    type: 'text',
+                    name: 'inp58402',
+                    id: '62433c2c58920f02c4950de0'
+                }
+            ]
+        },
+        type: 'template',
+        header: 'Comment le protégé doit-il percevoir son mentor ?',
+        explanation: 'Saisissez votre réponse (en anglais).'
+    },
+    klf: "Le mentoré voit dans son mentor un <i>role model</i>, c'est-à-dire un exemple inspirant qui lui permet de se projeter dans un poste à responsabilité.",
+    tips: "L'origine de l'expression <i>role model</i> est attribué au sociologue Robert K. Merton.",
+    universalRef: 'sli_VJKQonm2g',
+    hasClue: true,
+    id: 'sli_VJKQonm2g'
+};
+export const textTemplateUISlide = {
+    type: 'template',
+    template: 'Un   {{inp58402}}   model.',
+    answers: [
+        {
+            type: 'text',
+            name: 'inp58402',
+            placeholder: 'Type here',
+            value: undefined,
+            onChange: noop
+        }
+    ]
+};

package/es/helpers/test/map-api-slide-to-ui.test.d.ts

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

package/es/helpers/test/map-api-slide-to-ui.test.js

@@ -0,0 +1,32 @@
+import test from 'ava';
+import { mapApiSlideToUi } from '../map-api-slide-to-ui';
+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 { sliderSlide, sliderUISlide } from './fixtures/slider';
+const _mapApiSlideToUi = mapApiSlideToUi({ translate: (text) => text });
+const macro = test.macro({
+    title(providedTitle) {
+        return `should handle ${providedTitle} conversion`.trim();
+    },
+    exec(t, arg) {
+        t.deepEqual(JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide))), JSON.parse(JSON.stringify(arg.expectedUiSlide)));
+    }
+});
+test('qcm', macro, { slide: qcmSlide, expectedUiSlide: qcmUISlide });
+test('qcm drag', macro, { slide: qcmDragSlide, expectedUiSlide: qcmDragUISlide });
+test('qcm graphic', macro, { slide: qcmGraphicSlide, expectedUiSlide: qcmGraphicUISlide });
+test('text template', macro, { slide: textTemplateSlide, expectedUiSlide: textTemplateUISlide });
+test('select template', macro, {
+    slide: selectTemplateSlide,
+    expectedUiSlide: selectTemplateUISlide
+});
+test('free text', macro, { slide: freeTextSlide, expectedUiSlide: freeTextUISlide });
+test('slider', macro, { slide: sliderSlide, expectedUiSlide: sliderUISlide });
+test('should throw an error if the question type can not be handled', t => {
+    const faultySlide = { ...qcmSlide, question: { type: 'lol' } };
+    t.throws(() => _mapApiSlideToUi(faultySlide));
+});

package/es/index.js

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { connect, Provider } from 'react-redux';
 import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
 import { TemplateContext } from '@coorpacademy/components/es/template/app-review/template-context';
+import isEmpty from 'lodash/fp/isEmpty';
+import get from 'lodash/fp/get';
 import configureStore from './configure-store';
 import { congratsProps, correctionPopinProps } from './fixtures/temp-fixture';
 import { updateSlidesOnNext, updateSlidesOnValidation, validateSlide } from './actions/data/slides';
@@ -87,6 +89,7 @@ const mapStateToProps = (state) => {
 const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 const AppReview = ({ options }) => {
     const [store, setStore] = useState(null);
+    const [isSlideFetched, setIsSlideFetched] = useState(false);
     useEffect(() => {
         if (store)
             return;
@@ -94,28 +97,45 @@ const AppReview = ({ options }) => {
         setStore(newStore);
     }, [options, store]);
     useEffect(() => {
-        if (store === null)
+        if (!store || isSlideFetched)
             return;
-        const { skillRef } = options;
-        const initialView = skillRef ? VIEWS.slides : VIEWS.skills;
-        store.dispatch(navigateTo(initialView));
-    }, [options, store]);
+        return store.subscribe(() => {
+            const isSlidePresent = !isEmpty(store.getState().data.slides[0].questionText);
+            return isSlidePresent && setIsSlideFetched(isSlidePresent);
+        }); // using the first slide questionText for now, should only check for a slide's presence
+        // when the refactor is done (slides will be feed one by one on api's side)
+    }, [isSlideFetched, options, store]);
     useEffect(() => {
-        if (store === null)
+        const token = get('token', options);
+        if (store === null || isEmpty(token))
             return;
-        const { token } = options;
         store.dispatch(storeToken(token));
     }, [options, store]);
     useEffect(() => {
-        if (store === null)
+        const token = get('token', options);
+        if (store === null || isEmpty(token))
             return;
-        const { skillRef, token } = options;
+        const skillRef = get('skillRef', options);
         // ThunkAction is not assignable to parameter of type 'AnyAction'
         // ts problem describre here = https://github.com/reduxjs/redux-thunk/issues/333
         skillRef
             ? store.dispatch(postProgression(skillRef, token))
             : store.dispatch(fetchSkills(token));
     }, [options, store]);
+    useEffect(() => {
+        if (store === null)
+            return;
+        const { skillRef } = options;
+        if (skillRef && !isSlideFetched) {
+            store.dispatch(navigateTo('loader')); // use loader while posting progression
+            return;
+        }
+        // TODO: when slides state is refactored (data + mapping),
+        // use loader in case a skillRef is found && no slides from the API
+        // are found
+        const initialView = skillRef ? VIEWS.slides : VIEWS.skills;
+        store.dispatch(navigateTo(initialView));
+    }, [isSlideFetched, options, store]);
     if (!store)
         return null;
     const { templateContext: values } = options;

package/es/reducers/ui/navigation.d.ts

@@ -1,4 +1,4 @@
 import { type NavigateTo, type NavigateBack } from '../../actions/ui/navigation';
-export declare type NavigationState = Array<'skills' | 'onboarding' | 'slides'>;
+export declare type NavigationState = Array<'skills' | 'onboarding' | 'slides' | 'loader'>;
 declare const reducer: (state: NavigationState | undefined, action: NavigateTo | NavigateBack) => NavigationState;
 export default reducer;

package/es/test/index.test.js

@@ -42,22 +42,25 @@ const appOptions = {
     skillRef: 'skill_NJC0jFKoH',
     services
 };
-test('should validate all the slides (all correct scenario)', async (t) => {
-    // t.plan(13);
+test('should show the loader while the app is fetching the data', async (t) => {
     t.plan(2);
-    const { container } = render(React.createElement(AppReview, { options: appOptions, key: 0 }));
+    const { container } = render(React.createElement(AppReview, { options: appOptions }));
     await waitForChanges(1000);
-    const wrapper = container.querySelector('[data-name="loader"]');
-    t.truthy(wrapper);
-    /*
-    const wrapper = container.querySelector('[data-name="slides-revision-container"]');
-    t.truthy(wrapper);
-  
-    const stackedSlidesContainer = wrapper?.querySelector('[data-name="stacked-slides-container"]');
-  
-    t.truthy(stackedSlidesContainer);
-  
-    await clickAllSlides(t, container);
-    */
+    const loader = container.querySelector('[data-name="loader"]');
+    t.truthy(loader);
+    // await waitFor(async () => {
+    //   // await sleep(500);
+    //   const result = await t.try(tt => {
+    //     // rerender(<AppReview options={appOptions} />);
+    //     const slidesContainer = container.querySelector('[data-name="slides-revision-container"]');
+    //     tt.truthy(slidesContainer);
+    //   });
+    //   if (result.passed) return result.commit();
+    //   result.discard();
+    //   throw result.errors;
+    // });
+    // const stackedSlidesContainer = container.querySelector('[data-name="stacked-slides-container"]');
+    // t.truthy(stackedSlidesContainer);
+    // await clickAllSlides(t, container);
     t.pass();
 });

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

@@ -1,3 +1,4 @@
+import { qcmSlide } from '../../helpers/test/fixtures/qcm';
 export const services = {
     fetchSkills: () => {
         return Promise.resolve([
@@ -16,38 +17,7 @@ export const services = {
         ]);
     },
     fetchSlide: ref => {
-        // return Promise.resolve(qcm); // why qcm does not look like a slide returned from mooc ?
-        return Promise.resolve({
-            question: {
-                content: {
-                    choices: [
-                        {
-                            selected: false,
-                            title: 'choix1',
-                            help: '(help choix1)',
-                            ariaLabel: '__ariaLabel1',
-                            onClick: () => undefined
-                        },
-                        {
-                            selected: false,
-                            title: 'choix2',
-                            help: '(help choix2)',
-                            ariaLabel: '__ariaLabel2',
-                            onClick: () => undefined
-                        },
-                        {
-                            selected: false,
-                            title: 'choix3',
-                            help: '(help choix3)',
-                            ariaLabel: '__ariaLabel3',
-                            onClick: () => undefined
-                        }
-                    ]
-                }
-            },
-            klf: '___klf',
-            universalRef: ref
-        });
+        return Promise.resolve({ ...qcmSlide, universalRef: ref, id: ref });
     },
     postProgression: () => {
         return Promise.resolve({

package/es/types/common.d.ts

@@ -4,14 +4,71 @@ declare type TemplateContextValues = {
     theme?: unknown;
     translations?: unknown;
 };
-export declare type SlideFromAPI = {
-    question: {
-        content: {
-            choices: Record<string, unknown>[];
-        };
+export declare type ChoiceFromAPI = {
+    _id: string;
+    id?: string;
+    value?: string;
+    name?: string;
+    type?: 'text' | 'select';
+    label?: string;
+    items: {
+        text: string;
+        value: string;
+        _id: string;
+    }[];
+    media?: unknown;
+};
+declare type BaseContent = {
+    media?: unknown;
+    choices: ChoiceFromAPI[];
+};
+declare type Question = {
+    header?: string;
+    content: BaseContent;
+    explanation?: string;
+};
+export declare type QcmQuestion = Question & {
+    type: 'qcm';
+};
+export declare type QcmGraphicQuestion = Question & {
+    type: 'qcmGraphic';
+};
+export declare type QcmDragQuestion = Question & {
+    type: 'qcmDrag';
+};
+export declare type BasicQuestion = Omit<Question, 'content'> & {
+    type: 'basic';
+    content: {
+        media?: unknown;
+        label?: string;
+        placeholder?: string;
+        id: string;
+    };
+};
+export declare type SliderQuestion = Omit<Question, 'content'> & {
+    content: {
+        media?: unknown;
+        unitLabel: string;
+        min: number;
+        max: number;
+        step?: number;
     };
+    type: 'slider';
+};
+export declare type TemplateQuestion = Omit<Question, 'content'> & {
+    content: BaseContent & {
+        template: string;
+    };
+    type: 'template';
+};
+export declare type SlideFromAPI = {
+    question: QcmQuestion | QcmGraphicQuestion | QcmDragQuestion | BasicQuestion | SliderQuestion | TemplateQuestion;
     klf: string;
     universalRef: string;
+    tips?: string;
+    clue?: string;
+    hasClue?: boolean;
+    id?: string;
 };
 export declare type ProgressionFromAPI = {
     _id: string;

package/es/types/slides.d.ts

@@ -1,9 +1,10 @@
 export declare type Choice = {
     order?: number;
     selected: boolean;
-    title: string;
-    help: string;
+    title?: string;
+    help?: string;
     onClick: Function;
+    ariaLabel?: string;
 };
 export declare type QcmDrag = {
     type: 'qcmDrag';
@@ -12,22 +13,20 @@ export declare type QcmDrag = {
 };
 export declare type Qcm = {
     type: 'qcm';
-    choices: (Choice & {
-        ariaLabel: string;
-    })[];
+    answers: Choice[];
 };
 export declare type QcmGraphic = {
     type: 'qcmGraphic';
-    choices: (Choice & {
+    answers: (Choice & {
         image: string;
     })[];
 };
 export declare type FreeText = {
     type: 'freeText';
     placeholder: string;
-    value: string;
+    value?: string;
     onChange: Function;
-    ariaLabel: string;
+    ariaLabel?: string;
 };
 export declare type DropDownOption = {
     name: string;
@@ -37,26 +36,38 @@ export declare type DropDownOption = {
 };
 export declare type DropDown = {
     type: 'dropDown';
-    onChange: Function;
+    onChange?: Function;
     options: DropDownOption[];
-    theme: 'filter' | 'invalid' | 'header' | 'mooc' | 'question' | 'sort' | 'thematiques' | 'player' | 'template' | 'coorpmanager';
+    theme?: 'filter' | 'invalid' | 'header' | 'mooc' | 'question' | 'sort' | 'thematiques' | 'player' | 'template' | 'coorpmanager';
 };
 export declare type QuestionRange = {
     type: 'slider';
-    onChange: Function;
-    onChangeEnd: Function;
-    multi: boolean;
+    placeholder?: string;
+    onChange?: Function;
+    onChangeEnd?: Function;
+    multi?: boolean;
     value: number | number[];
     title: string;
     minLabel: string;
     maxLabel: string;
 };
+export declare type TextTemplate = {
+    type: 'text';
+    name: string;
+    placeholder: string;
+    value?: string;
+    onChange: Function;
+};
+export declare type SelectionTemplate = {
+    type: 'select';
+    name: string;
+    onChange?: Function;
+    options?: DropDownOption[];
+};
 export declare type Template = {
     type: 'template';
     template: string;
-    choices: (DropDown & {
-        type?: string;
-    })[];
+    answers: (TextTemplate | SelectionTemplate)[];
 };
 export declare type AnswerUI = {
     model: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;

package/lib/actions/ui/navigation.d.ts

@@ -2,7 +2,7 @@ import { AppOptions } from '../../types/common';
 export declare const NAVIGATE_TO = "@@navigation/NAVIGATE_TO";
 export declare const NAVIGATE_BACK = "@@navigation/NAVIGATE_BACK";
 export declare const START_APP = "@@navigation/START_APP";
-export declare type ViewPath = 'skills' | 'onboarding' | 'slides';
+export declare type ViewPath = 'skills' | 'onboarding' | 'slides' | 'loader';
 export declare type NavigateTo = {
     type: '@@navigation/NAVIGATE_TO';
     payload: ViewPath;

package/lib/fixtures/qcm-slide.js

@@ -5,7 +5,7 @@ export var slide = {
         help: '__help',
         model: {
             type: 'qcm',
-            choices: [
+            answers: [
                 {
                     selected: false,
                     title: 'choix1',

package/lib/helpers/map-api-slide-to-ui.d.ts

@@ -0,0 +1,8 @@
+import { AnswerUI } from '../types/slides';
+import { SlideFromAPI } from '../types/common';
+declare type UiUtils = {
+    translate: (text: string) => string;
+};
+export declare const getQuestionType: (slide: SlideFromAPI) => SlideFromAPI['question']['type'];
+export declare const mapApiSlideToUi: (uiUtils: UiUtils) => (slide: SlideFromAPI) => AnswerUI['model'] | void;
+export {};

package/lib/helpers/map-api-slide-to-ui.js

@@ -0,0 +1,181 @@
+import { concat, divide, get, getOr, head, includes, indexOf, isEmpty, map, noop, pipe, rangeStep, size, toInteger } from 'lodash/fp';
+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
+            onClick: noop,
+            ariaLabel: choice.label
+        }); }, 
+        // TODO: EDIT_CHOICES -> getChoices
+        question.content.choices)
+    };
+};
+var qcmDragProps = function (question) {
+    // mock the answers
+    // TODO: EDIT_CHOICES -> getAnswerValues
+    var answers = [];
+    return {
+        type: 'qcmDrag',
+        answers: map(function (choice) {
+            var indexInAnswer = indexOf(choice.label, answers);
+            return {
+                title: choice.label,
+                selected: indexInAnswer !== -1,
+                order: indexInAnswer,
+                // TODO: EDIT_CHOICES
+                onClick: noop
+            };
+            // TODO: EDIT_CHOICES -> getChoices
+        }, 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
+            onClick: noop
+        }); }, 
+        // TODO: EDIT_CHOICES -> getChoices
+        question.content.choices)
+    };
+};
+var templateTextProps = function (uiUtils) {
+    return function (choice, index) {
+        var translate = uiUtils.translate;
+        // TODO: EDIT_CHOICES -> getAnswerValues
+        var answers = [];
+        return {
+            type: 'text',
+            name: getOr('', 'name', choice),
+            placeholder: translate('Type here'),
+            value: get(index, answers),
+            // TODO: EDIT_CHOICES
+            onChange: noop
+        };
+    };
+};
+// const getItemText = (item: ChoiceFromAPI['items'][0]): item['text'] is string =>
+var templateSelectProps = function (uiUtils) {
+    return function (choice, index) {
+        var translate = uiUtils.translate;
+        // TODO: EDIT_CHOICES -> getAnswerValues
+        var answers = [];
+        var answer = get(index, answers);
+        var temporaryOption = {
+            name: translate('Select an answer'),
+            value: '',
+            validOption: false,
+            selected: true
+        };
+        var selectOptions = choice.items.map(function (item) {
+            var itemText = getOr('', 'text', item);
+            return {
+                name: itemText,
+                value: itemText,
+                validOption: true,
+                selected: itemText === answer
+            };
+        });
+        return {
+            type: 'select',
+            name: getOr('', 'name', choice),
+            // TODO: EDIT_CHOICES
+            onChange: noop,
+            options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
+        };
+    };
+};
+var templateProps = function (uiUtils) {
+    var templateTextProps_ = templateTextProps(uiUtils);
+    var templateSelectProps_ = templateSelectProps(uiUtils);
+    return 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 basicProps = function (uiUtils) {
+    var translate = uiUtils.translate;
+    // TODO: EDIT_CHOICES -> getAnswerValues
+    var answers = [];
+    return function () {
+        return {
+            type: 'freeText',
+            placeholder: translate('Type here'),
+            value: head(answers),
+            // TODO: EDIT_CHOICES
+            onChange: noop
+        };
+    };
+};
+var sliderProps = function (question) {
+    var values = rangeStep(getOr(1, 'content.step', question), getOr(Number.NaN, 'content.min', question), getOr(Number.NaN, 'content.max', question) + 1
+    // Lodash doesn't infere the type very well here
+    );
+    // TODO: EDIT_CHOICES -> getAnswerValues
+    var answers = [];
+    var stateValue = head(answers);
+    var currentValue = toInteger(stateValue);
+    var indexValue = indexOf(currentValue, values);
+    var sliderPosition = divide(indexValue, size(values) - 1);
+    var unitLabel = get('question.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
+        onChange: noop
+    };
+};
+export var getQuestionType = function (slide) {
+    return slide.question.type;
+};
+export var mapApiSlideToUi = function (uiUtils) {
+    var basicProps_ = basicProps(uiUtils);
+    var templateProps_ = templateProps(uiUtils);
+    return function (slide) {
+        if (!slide) {
+            return;
+        }
+        var type = getQuestionType(slide);
+        switch (type) {
+            case 'qcm':
+                return pipe(get('question'), qcmProps)(slide);
+            case 'qcmGraphic':
+                return pipe(get('question'), qcmGraphicProps)(slide);
+            case 'qcmDrag':
+                return pipe(get('question'), qcmDragProps)(slide);
+            case 'basic':
+                return basicProps_();
+            case 'template':
+                return pipe(get('question'), templateProps_)(slide);
+            case 'slider':
+                return pipe(get('question'), sliderProps)(slide);
+            default:
+                throw new Error("".concat(type, " is not an handled question.type"));
+        }
+    };
+};

package/lib/helpers/test/fixtures/free-text.d.ts

@@ -0,0 +1,4 @@
+import { FreeText } from '../../../types/slides';
+import { SlideFromAPI } from '../../../types/common';
+export declare const freeTextSlide: SlideFromAPI;
+export declare const freeTextUISlide: FreeText;

package/lib/helpers/test/fixtures/free-text.js

@@ -0,0 +1,24 @@
+import noop from 'lodash/fp/noop';
+export var freeTextSlide = {
+    id: 'sli_E1Pcl-XAYbi',
+    universalRef: 'sli_E1Pcl-XAYbi',
+    question: {
+        type: 'basic',
+        header: 'sli_E1Pcl-XAYbi.header',
+        explanation: 'sli_E1Pcl-XAYbi.explanation',
+        content: {
+            label: 'sli_E1Pcl-XAYbi.label',
+            placeholder: 'sli_E1Pcl-XAYbi.placeholder',
+            id: 'sli_E1Pcl-XAYbi.choice_1'
+        }
+    },
+    clue: 'sli_E1Pcl-XAYbi.clue',
+    klf: 'sli_E1Pcl-XAYbi.klf',
+    tips: 'sli_E1Pcl-XAYbi.tips'
+};
+export var freeTextUISlide = {
+    type: 'freeText',
+    placeholder: 'Type here',
+    value: undefined,
+    onChange: noop
+};

package/lib/helpers/test/fixtures/qcm-drag.d.ts

@@ -0,0 +1,4 @@
+import { QcmDrag } from '../../../types/slides';
+import { SlideFromAPI } from '../../../types/common';
+export declare const qcmDragSlide: SlideFromAPI;
+export declare const qcmDragUISlide: QcmDrag;