@coorpacademy/app-review 0.1.8 → 0.1.10

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

@@ -0,0 +1,48 @@
+import noop from 'lodash/fp/noop';
+export var 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 var textTemplateUISlide = {
+    type: 'template',
+    template: 'Un   {{inp58402}}   model.',
+    answers: [
+        {
+            type: 'text',
+            name: 'inp58402',
+            placeholder: 'Type here',
+            value: undefined,
+            onChange: noop
+        }
+    ]
+};

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

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

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

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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';
+var _mapApiSlideToUi = mapApiSlideToUi({ translate: function (text) { return text; } });
+var macro = test.macro({
+    title: function (providedTitle) {
+        return "should handle ".concat(providedTitle, " conversion").trim();
+    },
+    exec: function (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', function (t) {
+    var faultySlide = __assign(__assign({}, qcmSlide), { question: { type: 'lol' } });
+    t.throws(function () { return _mapApiSlideToUi(faultySlide); });
+});

package/lib/index.d.ts

@@ -4,7 +4,7 @@ declare const AppReview: ({ options }: {
 }) => JSX.Element | null;
 declare global {
     interface Window {
-        __REDUX_DEVTOOLS_EXTENSION__?: boolean;
+        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: Function;
     }
 }
 export default AppReview;

package/lib/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';
@@ -13,7 +15,6 @@ import { updateStepItemsOnValidation, updateStepItemsOnNext } from './actions/ui
 import { fetchSkills } from './actions/api/fetch-skills';
 import { postProgression } from './actions/api/post-progression';
 import { VIEWS } from './common';
-// -----------------------------------------------------------------------------
 var mapDispatchToProps = {
     navigateTo: navigateTo,
     navigateBack: navigateBack,
@@ -28,7 +29,6 @@ var mapDispatchToProps = {
 var getCurrentViewName = function (storeState) {
     return storeState.ui.navigation[storeState.ui.navigation.length - 1];
 };
-// -----------------------------------------------------------------------------
 var mapStateToSkillsProps = function (state) {
     if (!state.data.skills) {
         return null;
@@ -54,7 +54,6 @@ var mapStateToSkillsProps = function (state) {
         }); })
     };
 };
-// -----------------------------------------------------------------------------
 var mapStateToSlidesProps = function (state) {
     if (!state.data.slides) {
         return null;
@@ -82,7 +81,6 @@ var mapStateToSlidesProps = function (state) {
         progression: state.data.progression
     };
 };
-// -----------------------------------------------------------------------------
 var mapStateToProps = function (state) {
     return {
         viewName: getCurrentViewName(state),
@@ -90,12 +88,11 @@ var mapStateToProps = function (state) {
         skills: mapStateToSkillsProps(state)
     };
 };
-// Props = StaticProps && Dispatchers
 var App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
-// -----------------------------------------------------------------------------
 var AppReview = function (_a) {
     var options = _a.options;
     var _b = useState(null), store = _b[0], setStore = _b[1];
+    var _c = useState(false), isSlideFetched = _c[0], setIsSlideFetched = _c[1];
     useEffect(function () {
         if (store)
             return;
@@ -103,26 +100,45 @@ var AppReview = function (_a) {
         setStore(newStore);
     }, [options, store]);
     useEffect(function () {
-        if (store === null)
+        if (!store || isSlideFetched)
             return;
-        var skillRef = options.skillRef;
-        var initialView = skillRef ? VIEWS.slides : VIEWS.skills;
-        store.dispatch(navigateTo(initialView));
-    }, [options, store]);
+        return store.subscribe(function () {
+            var 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(function () {
-        if (store === null)
+        var token = get('token', options);
+        if (store === null || isEmpty(token))
             return;
-        var token = options.token;
         store.dispatch(storeToken(token));
     }, [options, store]);
     useEffect(function () {
-        if (store === null)
+        var token = get('token', options);
+        if (store === null || isEmpty(token))
             return;
-        var skillRef = options.skillRef, token = options.token;
+        var 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(function () {
+        if (store === null)
+            return;
+        var skillRef = options.skillRef;
+        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
+        var initialView = skillRef ? VIEWS.slides : VIEWS.skills;
+        store.dispatch(navigateTo(initialView));
+    }, [isSlideFetched, options, store]);
     if (!store)
         return null;
     var values = options.templateContext;
@@ -130,5 +146,4 @@ var AppReview = function (_a) {
         React.createElement(TemplateContext, { values: values },
             React.createElement(App, null))));
 };
-// -----------------------------------------------------------------------------
 export default AppReview;

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

@@ -138,29 +138,32 @@ var appOptions = {
     skillRef: 'skill_NJC0jFKoH',
     services: services
 };
-test('should validate all the slides (all correct scenario)', function (t) { return __awaiter(void 0, void 0, void 0, function () {
-    var container, wrapper;
+test('should show the loader while the app is fetching the data', function (t) { return __awaiter(void 0, void 0, void 0, function () {
+    var container, loader;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                // t.plan(13);
                 t.plan(2);
-                container = render(React.createElement(AppReview, { options: appOptions, key: 0 })).container;
+                container = render(React.createElement(AppReview, { options: appOptions })).container;
                 return [4 /*yield*/, waitForChanges(1000)];
             case 1:
                 _a.sent();
-                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);
-                */
+                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();
                 return [2 /*return*/];
         }

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

@@ -1,3 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { qcmSlide } from '../../helpers/test/fixtures/qcm';
 export var services = {
     fetchSkills: function () {
         return Promise.resolve([
@@ -16,38 +28,7 @@ export var services = {
         ]);
     },
     fetchSlide: function (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: function () { return undefined; }
-                        },
-                        {
-                            selected: false,
-                            title: 'choix2',
-                            help: '(help choix2)',
-                            ariaLabel: '__ariaLabel2',
-                            onClick: function () { return undefined; }
-                        },
-                        {
-                            selected: false,
-                            title: 'choix3',
-                            help: '(help choix3)',
-                            ariaLabel: '__ariaLabel3',
-                            onClick: function () { return undefined; }
-                        }
-                    ]
-                }
-            },
-            klf: '___klf',
-            universalRef: ref
-        });
+        return Promise.resolve(__assign(__assign({}, qcmSlide), { universalRef: ref, id: ref }));
     },
     postProgression: function () {
         return Promise.resolve({

package/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -40,7 +40,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.2",
+    "@coorpacademy/components": "10.22.4",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -77,5 +77,5 @@
     "ts-node": "^10.8.1",
     "typescript": "^4.7.4"
   },
-  "gitHead": "b07a280786c4e83e3632779731e62a547d8ba26c"
+  "gitHead": "6a95baa03c98973afdd8d95d1b6959b21c7bb8ee"
 }

package/src/actions/api/fetch-skills.ts

@@ -1,5 +1,6 @@
 import buildTask from '@coorpacademy/redux-task';
-import {Action, Dispatch} from 'redux';
+import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
+import {AnyAction} from 'redux';
 import type {StoreState} from '../../reducers';
 import {Options, Skill} from '../../types/common';
 
@@ -7,12 +8,15 @@ export const SKILLS_FETCH_REQUEST = '@@skills/FETCH_REQUEST' as const;
 export const SKILLS_FETCH_SUCCESS = '@@skills/FETCH_SUCCESS' as const;
 export const SKILLS_FETCH_FAILURE = '@@skills/FETCH_FAILURE' as const;
 
-export type ReceivedSkills = {
+export interface ReceivedSkills extends AnyAction {
   type: '@@skills/FETCH_SUCCESS';
   payload: Skill[];
-};
+}
 
-export const fetchSkills = (token: string): Action =>
+export type FetchSkillsAction = ThunkAction<Promise<void>, StoreState, Options, AnyAction>;
+type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
+
+export const fetchSkills = (token: string): FetchSkillsAction =>
   buildTask({
     types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
     task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) =>

package/src/actions/api/fetch-slide.ts

@@ -1,4 +1,5 @@
-import type {Action, Dispatch} from 'redux';
+import type {AnyAction} from 'redux';
+import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
 import buildTask from '@coorpacademy/redux-task';
 import type {StoreState} from '../../reducers';
 import {Options, SlideFromAPI} from '../../types/common';
@@ -7,12 +8,15 @@ export const SLIDE_FETCH_REQUEST = '@@slides/FETCH_REQUEST' as const;
 export const SLIDE_FETCH_SUCCESS = '@@slides/FETCH_SUCCESS' as const;
 export const SLIDE_FETCH_FAILURE = '@@slides/FETCH_FAILURE' as const;
 
-export type ReceivedSlide = {
+export interface ReceivedSlide extends AnyAction {
   type: typeof SLIDE_FETCH_SUCCESS;
   payload: SlideFromAPI;
-};
+}
 
-export const fetchSlide = (slideRef: string, token: string): Action =>
+export type FetchSlideAction = ThunkAction<Promise<void>, StoreState, Options, AnyAction>;
+type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
+
+export const fetchSlide = (slideRef: string, token: string): FetchSlideAction =>
   buildTask({
     types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
     task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) =>

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

@@ -1,4 +1,5 @@
-import type {Action, Dispatch} from 'redux';
+import type {AnyAction} from 'redux';
+import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
 import buildTask from '@coorpacademy/redux-task';
 import {Options, ProgressionFromAPI} from '../../types/common';
 import type {StoreState} from '../../reducers';
@@ -8,12 +9,21 @@ export const POST_PROGRESSION_REQUEST = '@@progression/POST_REQUEST' as const;
 export const POST_PROGRESSION_SUCCESS = '@@progression/POST_SUCCESS' as const;
 export const POST_PROGRESSION_FAILURE = '@@progression/POST_FAILURE' as const;
 
-export type ReceiveProgression = {
+export interface ReceiveProgression extends AnyAction {
   type: typeof POST_PROGRESSION_SUCCESS;
   payload: ProgressionFromAPI;
-};
+}
 
-export const postProgression = (skillRef: string, token: string): Action =>
+export type PostProgressionAction = ThunkAction<
+  Promise<ProgressionFromAPI>,
+  StoreState,
+  Options,
+  AnyAction
+>;
+
+type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
+
+export const postProgression = (skillRef: string, token: string): PostProgressionAction =>
   buildTask({
     types: [POST_PROGRESSION_REQUEST, POST_PROGRESSION_SUCCESS, POST_PROGRESSION_FAILURE],
     task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) => {

package/src/actions/ui/navigation.ts

@@ -4,7 +4,7 @@ export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
 export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
 export const START_APP = '@@navigation/START_APP';
 
-export type ViewPath = 'skills' | 'onboarding' | 'slides';
+export type ViewPath = 'skills' | 'onboarding' | 'slides' | 'loader';
 
 export type NavigateTo = {
   type: '@@navigation/NAVIGATE_TO';

package/src/fixtures/qcm-slide.ts

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