@coorpacademy/app-review 0.1.13 → 0.1.15

package/es/helpers/test/fixtures/slider.js

@@ -17,11 +17,17 @@ export const sliderSlide = {
     tips: 'sli_41D5AovN~.tips'
 };
 export const sliderUISlide = {
-    type: 'slider',
-    placeholder: 'sli_41D5AovN~.explanation',
-    minLabel: '1 undefined',
-    maxLabel: '10 undefined',
-    title: '0 sli_41D5AovN~.unitLabel',
-    value: -0.1111111111111111,
-    onChange: noop
+    questionText: 'sli_41D5AovN~.header',
+    answerUI: {
+        help: 'sli_41D5AovN~.explanation',
+        model: {
+            type: 'slider',
+            placeholder: 'sli_41D5AovN~.explanation',
+            minLabel: '1 undefined',
+            maxLabel: '10 undefined',
+            title: '0 sli_41D5AovN~.unitLabel',
+            value: -0.1111111111111111,
+            onChange: noop
+        }
+    }
 };

package/es/helpers/test/fixtures/text-template.d.ts

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

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

@@ -34,15 +34,21 @@ export const textTemplateSlide = {
     id: 'sli_VJKQonm2g'
 };
 export const textTemplateUISlide = {
-    type: 'template',
-    template: 'Un   {{inp58402}}   model.',
-    answers: [
-        {
-            type: 'text',
-            name: 'inp58402',
-            placeholder: 'Type here',
-            value: undefined,
-            onChange: noop
+    questionText: 'Comment le protégé doit-il percevoir son mentor ?',
+    answerUI: {
+        help: 'Saisissez votre réponse (en anglais).',
+        model: {
+            type: 'template',
+            template: 'Un   {{inp58402}}   model.',
+            answers: [
+                {
+                    type: 'text',
+                    name: 'inp58402',
+                    placeholder: 'Type here',
+                    value: undefined,
+                    onChange: noop
+                }
+            ]
         }
-    ]
+    }
 };

package/es/index.js

@@ -5,80 +5,20 @@ import { TemplateContext } from '@coorpacademy/components/es/template/app-review
 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';
+import { validateSlide } from './actions/ui/slides';
 import { navigateTo, navigateBack } from './actions/ui/navigation';
 import { storeToken } from './actions/data/token';
-import { updateFinishedSlides } from './actions/ui/finished-slides';
-import { updateReviewStatus } from './actions/ui/review-status';
-import { updateStepItemsOnValidation, updateStepItemsOnNext } from './actions/ui/step-items';
 import { fetchSkills } from './actions/api/fetch-skills';
 import { postProgression } from './actions/api/post-progression';
 import { VIEWS } from './common';
+import { mapStateToSlidesProps } from './views/slides';
+import { mapStateToSkillsProps } from './views/skills';
 const mapDispatchToProps = {
     navigateTo,
     navigateBack,
-    validateSlide,
-    updateSlidesOnValidation,
-    updateSlidesOnNext,
-    updateReviewStatus,
-    updateStepItemsOnValidation,
-    updateStepItemsOnNext,
-    updateFinishedSlides
+    validateSlide
 };
 const getCurrentViewName = (storeState) => storeState.ui.navigation[storeState.ui.navigation.length - 1];
-const mapStateToSkillsProps = (state) => {
-    if (!state.data.skills) {
-        return null;
-    }
-    return {
-        title: '@todo title',
-        titleNoSkills: '@todo titleNoSkills',
-        textNoSkills: '@todo textNoSkills',
-        iconSkillAriaLabel: '@todo iconSkillAriaLabel',
-        isLoading: false,
-        isLoadingAriaLabel: '@todo loading',
-        listSkills: state.data.skills.map(skill => ({
-            'aria-label': '',
-            isCustom: skill.custom,
-            skillTitle: skill.name,
-            skillAriaLabel: '@todo skill aria label',
-            buttonLabel: '@todo button',
-            buttonAriaLabel: '@todo button aria label',
-            reviseLabel: '@todo revise',
-            reviseAriaLabel: '@todo revise aria label',
-            // eslint-disable-next-line no-console
-            onClick: () => console.log('@todo plug dispatcher select skill')
-        }))
-    };
-};
-const mapStateToSlidesProps = (state) => {
-    if (!state.data.slides) {
-        return null;
-    }
-    return {
-        headerProps: {
-            mode: '__revision_mode',
-            skillName: '__agility',
-            onQuitClick: () => {
-                // eslint-disable-next-line no-console
-                console.log('onQuitClick');
-            },
-            'aria-label': 'aria-header-wrapper',
-            closeButtonAriaLabel: 'aria-close-button'
-        },
-        slides: state.data.slides,
-        validate: {
-            label: '__validate'
-        },
-        finishedSlides: state.ui.finishedSlides,
-        stepItems: state.ui.stepItems,
-        reviewStatus: state.ui.reviewStatus,
-        correctionPopinProps,
-        congratsProps,
-        progression: state.data.progression
-    };
-};
 const mapStateToProps = (state) => {
     return {
         viewName: getCurrentViewName(state),
@@ -89,7 +29,7 @@ const mapStateToProps = (state) => {
 const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 const AppReview = ({ options }) => {
     const [store, setStore] = useState(null);
-    const [isSlideFetched, setIsSlideFetched] = useState(false);
+    const [isProgressionCreated, setIsProgressionCreated] = useState(false);
     useEffect(() => {
         if (store)
             return;
@@ -97,14 +37,13 @@ const AppReview = ({ options }) => {
         setStore(newStore);
     }, [options, store]);
     useEffect(() => {
-        if (!store || isSlideFetched)
+        if (!store || isProgressionCreated)
             return;
         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]);
+            const isProgressionPresent = !isEmpty(store.getState().data.progression);
+            return isProgressionPresent && setIsProgressionCreated(isProgressionPresent);
+        });
+    }, [isProgressionCreated, options, store]);
     useEffect(() => {
         const token = get('token', options);
         if (store === null || isEmpty(token))
@@ -116,8 +55,8 @@ const AppReview = ({ options }) => {
         if (store === null || isEmpty(token))
             return;
         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
+        /* ThunkAction is not assignable to parameter of type 'AnyAction'
+          ts problem is described here = https://github.com/reduxjs/redux-thunk/issues/333 */
         skillRef
             ? store.dispatch(postProgression(skillRef, token))
             : store.dispatch(fetchSkills(token));
@@ -126,16 +65,13 @@ const AppReview = ({ options }) => {
         if (store === null)
             return;
         const { skillRef } = options;
-        if (skillRef && !isSlideFetched) {
+        if (skillRef && !isProgressionCreated) {
             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]);
+    }, [isProgressionCreated, options, store]);
     if (!store)
         return null;
     const { templateContext: values } = options;

package/es/reducers/data/index.d.ts

@@ -14,5 +14,5 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     skills: SkillsState;
     slides: SlidesState;
     token: TokenState;
-}>, import("../../actions/data/slides").ValidateSlide | import("../../actions/data/slides").SlidesAction | import("../../actions/api/post-progression").ReceiveProgression | import("../../actions/api/fetch-skills").ReceivedSkills | import("../../actions/data/token").StoreToken>;
+}>, import("../../actions/api/post-progression").ReceiveProgression | import("../../actions/api/fetch-skills").ReceivedSkills | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
 export default _default;

package/es/reducers/data/progression.d.ts

@@ -1,19 +1,6 @@
-import { ValidateSlide } from '../../actions/data/slides';
+import { ValidateSlide } from '../../actions/ui/slides';
 import { ReceiveProgression } from '../../actions/api/post-progression';
-export declare type ProgressionState = {
-    _id?: string;
-    state: {
-        isCorrect: boolean;
-        nextContent: {
-            ref: 'successExitNode' | string;
-            type: 'success' | 'slide';
-        };
-        pendingSlides: string[];
-        step: {
-            current: number;
-        };
-    };
-    slideNumber?: number;
-} | null;
+import { ProgressionFromAPI } from '../../types/common';
+export declare type ProgressionState = ProgressionFromAPI | null;
 declare const reducer: (state: ProgressionState | undefined, action: ValidateSlide | ReceiveProgression) => ProgressionState;
 export default reducer;

package/es/reducers/data/progression.js

@@ -1,30 +1,12 @@
-import { getOr } from 'lodash/fp';
-import { VALIDATE_SLIDE } from '../../actions/data/slides';
+import { VALIDATE_SLIDE } from '../../actions/ui/slides';
 import { POST_PROGRESSION_SUCCESS } from '../../actions/api/post-progression';
 const reducer = (
 // eslint-disable-next-line default-param-last
 state = null, action) => {
     switch (action.type) {
         case VALIDATE_SLIDE: {
-            const previousSlideNumber = getOr(-1, 'slideNumber', state);
-            // hard coded for now
-            // TODO: fix on VALIDATE ticket
-            return {
-                _id: '1234',
-                // virtual field
-                slideNumber: previousSlideNumber + 1,
-                state: {
-                    pendingSlides: [],
-                    step: {
-                        current: Number.NaN
-                    },
-                    isCorrect: true,
-                    nextContent: {
-                        ref: 'sli_V1gKpYYZ2',
-                        type: 'slide'
-                    }
-                }
-            };
+            // TODO: fix on VALIDATE ticket -> launch a POST PROGRESSION
+            return state;
         }
         case POST_PROGRESSION_SUCCESS: {
             const progression = action.payload;
@@ -34,5 +16,4 @@ state = null, action) => {
             return state;
     }
 };
-// -----------------------------------------------------------------------------
 export default reducer;

package/es/reducers/data/slides.d.ts

@@ -1,9 +1,8 @@
-import { SlidesAction } from '../../actions/data/slides';
-import { Slide } from '../../types/common';
-export declare type SlidesState = {
-    slideNumbers: number[];
-    [key: number]: Slide;
-};
+import { ValidateSlide } from '../../actions/ui/slides';
+import { ReceivedSlide } from '../../actions/api/fetch-slide';
+import { SlideFromAPI } from '../../types/common';
+export declare type SlidesAction = ReceivedSlide | ValidateSlide;
+export declare type SlidesState = Record<string, SlideFromAPI>;
 export declare const initialState: SlidesState;
 declare const reducer: (state: SlidesState | undefined, action: SlidesAction) => SlidesState;
 export default reducer;

package/es/reducers/data/slides.js

@@ -1,118 +1,15 @@
-import map from 'lodash/fp/map';
-import { UPDATE_SLIDES_ON_NEXT, UPDATE_SLIDES_ON_VALIDATION } from '../../actions/data/slides';
-import { HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK } from '../../common';
-import { slide as qcmSlide } from '../../fixtures/qcm-slide';
+import set from 'lodash/fp/set';
 import { SLIDE_FETCH_SUCCESS } from '../../actions/api/fetch-slide';
-const getInitialState = () => {
-    const state = {
-        slideNumbers
-    };
-    // eslint-disable-next-line fp/no-loops
-    for (let index = 0; index < TOTAL_SLIDES_STACK; index++) {
-        state[index] = { hidden: false, position: index };
-    }
-    return state;
-};
-export const initialState = getInitialState();
-// -----------------------------------------------------------------------------
-const setFirstSlide = (state, slide) => {
-    const _state = {
-        slideNumbers
-    };
-    // eslint-disable-next-line lodash-fp/no-unused-result
-    map(index => {
-        const previousValue = state[index];
-        // Only update the 1st one
-        const content = index === 0 ? { ...previousValue, ...slide } : { ...previousValue };
-        _state[index] = { ...content };
-    }, state.slideNumbers);
-    return _state;
-};
-// ||-------> Handles the updates of a given slide on validation,
-// & then updates de remaining slides if this given change should impact their content
-const stateUpdateOnValidation = (state, payload) => {
-    const { slideNumber, newSlideContent, numberOfFinishedSlides, nextContent } = payload;
-    const _state = {
-        slideNumbers
-    };
-    // eslint-disable-next-line lodash-fp/no-unused-result
-    map(index => {
-        const previousValue = state[index];
-        // the current slide
-        if (index === slideNumber) {
-            // only one slide remaining, presets the next value
-            if (numberOfFinishedSlides === HIGHEST_INDEX) {
-                _state[index] = {
-                    ...previousValue,
-                    nextContent,
-                    position: newSlideContent.position,
-                    isCorrect: newSlideContent.isCorrect
-                };
-            }
-            else
-                _state[slideNumber] = { ...previousValue, ...newSlideContent };
-        }
-        else {
-            // updates the rest of the slides here
-            const { hidden, position } = previousValue;
-            _state[index] = { ...nextContent, endReview: newSlideContent.endReview, hidden, position };
-        }
-    }, state.slideNumbers);
-    return _state;
-};
-// ||-------> Handles the updates of a given slide on correction popin's next click,
-// & then updates de remaining slides (updates position to trigger animations)
-const stateUpdateOnNext = (state, payload) => {
-    const { slideNumber, newSlideContent, numberOfFinishedSlides } = payload;
-    const _state = {
-        slideNumbers
-    };
-    // eslint-disable-next-line lodash-fp/no-unused-result
-    map(index => {
-        const previousValue = state[index];
-        // the current slide
-        if (index === slideNumber) {
-            // when there is only one slide remaining, updates the slide value
-            if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextContent) {
-                _state[index] = { ...previousValue.nextContent, position: previousValue.position };
-            }
-            else
-                _state[slideNumber] = newSlideContent;
-        }
-        else {
-            // updates the rest of the slides here
-            const { hidden, position, answerUI, questionText } = previousValue;
-            _state[index] = {
-                hidden,
-                position: position - 1,
-                answerUI,
-                questionText,
-                endReview: newSlideContent.endReview
-            };
-        }
-    }, state.slideNumbers);
-    return _state;
-};
-// -----------------------------------------------------------------------------
+export const initialState = {};
 // eslint-disable-next-line default-param-last
 const reducer = (state = initialState, action) => {
     switch (action.type) {
         case SLIDE_FETCH_SUCCESS: {
-            // TODO: An intermediate slide transform is needed here (or in fetchSlide)
-            // const apiSlide = action.payload;
-            // apiSlide adapt to uiSlide
-            const uiSlide = qcmSlide;
-            return setFirstSlide(state, uiSlide);
-        }
-        case UPDATE_SLIDES_ON_VALIDATION: {
-            return stateUpdateOnValidation(state, action.payload);
-        }
-        case UPDATE_SLIDES_ON_NEXT: {
-            return stateUpdateOnNext(state, action.payload);
+            const slide = action.payload;
+            return set(slide.id, slide, state);
         }
         default:
             return state;
     }
 };
-// -----------------------------------------------------------------------------
 export default reducer;

package/es/reducers/index.d.ts

@@ -12,10 +12,9 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         token: import("./data/token").TokenState;
     }>;
     ui: import("redux").CombinedState<{
-        finishedSlides: import("./ui/finished-slides").FinishedSlidesState;
+        currentSlideRef: string;
         navigation: import("./ui/navigation").NavigationState;
-        reviewStatus: import("./ui/review-status").ReviewStatusState;
-        stepItems: import("./ui/step-items").StepItemsState;
+        slides: import("./ui/slides").UISlidesState;
     }>;
-}>, import("../actions/data/slides").ValidateSlide | import("../actions/data/slides").SlidesAction | import("../actions/api/post-progression").ReceiveProgression | import("../actions/api/fetch-skills").ReceivedSkills | import("../actions/data/token").StoreToken | import("../actions/ui/finished-slides").UpdateFinishedSlides | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/review-status").UpdateReviewStatus | import("../actions/ui/step-items").StepItemsAction>;
+}>, import("../actions/ui/slides").SetCurrentSlide | import("../actions/api/post-progression").ReceiveProgression | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack>;
 export default _default;

package/es/reducers/ui/current-slide-ref.d.ts

@@ -0,0 +1,4 @@
+import { UISlidesAction } from '../../actions/ui/slides';
+export declare type CurrentSlideRefState = string;
+declare const reducer: (state: string | undefined, action: UISlidesAction) => CurrentSlideRefState;
+export default reducer;

package/es/reducers/ui/{review-status.js → current-slide-ref.js}

@@ -1,10 +1,10 @@
-import { UPDATE_REVIEW_STATUS } from '../../actions/ui/review-status';
+import { SET_CURRENT_SLIDE } from '../../actions/ui/slides';
 const reducer = (
 // eslint-disable-next-line default-param-last
-state = 'ongoing', action) => {
+state = '', action) => {
     switch (action.type) {
-        case UPDATE_REVIEW_STATUS: {
-            return action.payload;
+        case SET_CURRENT_SLIDE: {
+            return action.payload.id;
         }
         default:
             return state;

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

@@ -1,17 +1,14 @@
-import { FinishedSlidesState } from './finished-slides';
+import { CurrentSlideRefState } from './current-slide-ref';
 import { NavigationState } from './navigation';
-import { ReviewStatusState } from './review-status';
-import { StepItemsState } from './step-items';
+import { UISlidesState } from './slides';
 export declare type UIState = {
+    currentSlideRef: CurrentSlideRefState;
     navigation: NavigationState;
-    stepItems: StepItemsState;
-    finishedSlides: FinishedSlidesState;
-    reviewStatus: ReviewStatusState;
+    slides: UISlidesState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
-    finishedSlides: FinishedSlidesState;
+    currentSlideRef: string;
     navigation: NavigationState;
-    reviewStatus: ReviewStatusState;
-    stepItems: StepItemsState;
-}>, import("../../actions/ui/finished-slides").UpdateFinishedSlides | import("../../actions/ui/navigation").NavigateTo | import("../../actions/ui/navigation").NavigateBack | import("../../actions/ui/review-status").UpdateReviewStatus | import("../../actions/ui/step-items").StepItemsAction>;
+    slides: UISlidesState;
+}>, import("../../actions/ui/slides").SetCurrentSlide | import("../../actions/ui/navigation").NavigateTo | import("../../actions/ui/navigation").NavigateBack>;
 export default _default;

package/es/reducers/ui/index.js

@@ -1,11 +1,9 @@
 import { combineReducers } from 'redux';
-import finishedSlides from './finished-slides';
+import currentSlideRef from './current-slide-ref';
 import navigation from './navigation';
-import reviewStatus from './review-status';
-import stepItems from './step-items';
+import slides from './slides';
 export default combineReducers({
-    finishedSlides,
+    currentSlideRef,
     navigation,
-    reviewStatus,
-    stepItems
+    slides
 });

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

@@ -0,0 +1,9 @@
+import type { UISlide } from '../../types/common';
+import { SlideIndexes } from '../../common';
+import { UISlidesAction } from '../../actions/ui/slides';
+export declare type UISlidesState = {
+    [key in SlideIndexes]: UISlide;
+};
+export declare const initialState: UISlidesState;
+declare const reducer: (state: UISlidesState | undefined, action: UISlidesAction) => UISlidesState;
+export default reducer;

package/es/reducers/ui/slides.js

@@ -0,0 +1,42 @@
+import pipe from 'lodash/fp/pipe';
+import set from 'lodash/fp/set';
+import { mapApiSlideToUi } from '../../helpers/map-api-slide-to-ui';
+import { SET_CURRENT_SLIDE } from '../../actions/ui/slides';
+export const initialState = {
+    '0': {
+        hidden: false,
+        position: 0
+    },
+    '1': {
+        hidden: false,
+        position: 1
+    },
+    '2': {
+        hidden: false,
+        position: 2
+    },
+    '3': {
+        hidden: false,
+        position: 3
+    },
+    '4': {
+        hidden: false,
+        position: 4
+    }
+};
+const setFirstSlide = (state, slideFromAPI) => {
+    const { questionText, answerUI } = mapApiSlideToUi({ translate: (text) => text })(slideFromAPI);
+    return pipe(set(['0', 'questionText'], questionText), set(['0', 'answerUI'], answerUI), set(['0', 'parentContentTitle'], 'Parent Title') // TODO parentContentTitle + translate
+    )(state);
+};
+// eslint-disable-next-line default-param-last
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case SET_CURRENT_SLIDE: {
+            return setFirstSlide(state, action.payload);
+        }
+        default:
+            return state;
+    }
+};
+export default reducer;

package/es/services/test/post-progression.test.js

@@ -5,15 +5,17 @@ const skillRef = '_skill-ref';
 const result = {
     _id: '123456123456',
     state: {
+        allAnswers: [],
         isCorrect: true,
-        step: {
-            current: 1
-        },
         nextContent: {
             type: 'slide',
             ref: 'sli_NJ3m5KtWh'
         },
-        pendingSlides: []
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        }
     }
 };
 test.before(() => {

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

@@ -7,12 +7,15 @@ export const services = {
                 slidesToReview: 2,
                 name: 'skill-test',
                 custom: false
+                // TODO parentContentTitle
             },
             {
                 skillRef: '_skill-ref-2',
                 slidesToReview: 2,
                 name: 'skill-test-2',
-                custom: true
+                custom: true,
+                parentContentTitle: 'parentContentTitle 2'
+                // TODO parentContentTitle
             }
         ]);
     },
@@ -22,15 +25,24 @@ export const services = {
     postProgression: () => {
         return Promise.resolve({
             _id: '62b1d1087aa12f00253f40ee',
+            content: {
+                ref: '_skill-ref',
+                type: 'skill'
+            },
+            engine: {
+                ref: 'review'
+            },
             state: {
-                pendingSlides: [],
-                step: {
-                    current: 1
-                },
+                allAnswers: [],
                 isCorrect: true,
                 nextContent: {
                     ref: 'sli_N1XACJobn',
                     type: 'slide'
+                },
+                pendingSlides: [],
+                slides: [],
+                step: {
+                    current: 1
                 }
             }
         });