@coorpacademy/app-review 0.1.13 → 0.1.15

package/src/helpers/test/fixtures/select-template.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {Template} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const selectTemplateSlide: SlideFromAPI = {
   id: 'sli_410xZQxrZ',
@@ -52,41 +51,47 @@ export const selectTemplateSlide: SlideFromAPI = {
   tips: 'sli_410xZQxrZ.tips'
 };
 
-export const selectTemplateUISlide: Template = {
-  type: 'template',
-  template: 'sli_410xZQxrZ.template',
-  answers: [
-    {
-      type: 'select',
-      name: 'sel36665',
-      onChange: noop,
-      options: [
-        {name: 'Select an answer', value: '', validOption: false, selected: true},
-        {
-          name: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
-          value: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
-          validOption: true,
-          selected: false
-        },
-        {
-          name: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
-          value: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
-          validOption: true,
-          selected: false
-        },
-        {
-          name: 'sli_410xZQxrZ.choice_VkaH~XgBb',
-          value: 'sli_410xZQxrZ.choice_VkaH~XgBb',
-          validOption: true,
-          selected: false
-        },
+export const selectTemplateUISlide: Partial<UISlide> = {
+  questionText: 'sli_410xZQxrZ.header',
+  answerUI: {
+    help: 'sli_410xZQxrZ.explanation',
+    model: {
+      type: 'template',
+      template: 'sli_410xZQxrZ.template',
+      answers: [
         {
-          name: 'sli_410xZQxrZ.choice_E1uUWXeBb',
-          value: 'sli_410xZQxrZ.choice_E1uUWXeBb',
-          validOption: true,
-          selected: false
+          type: 'select',
+          name: 'sel36665',
+          onChange: noop,
+          options: [
+            {name: 'Select an answer', value: '', validOption: false, selected: true},
+            {
+              name: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+              value: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+              value: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+              value: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+              value: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+              validOption: true,
+              selected: false
+            }
+          ]
         }
       ]
     }
-  ]
+  }
 };

package/src/helpers/test/fixtures/slider.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {QuestionRange} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const sliderSlide: SlideFromAPI = {
   id: 'sli_41D5AovN~',
@@ -20,12 +19,18 @@ export const sliderSlide: SlideFromAPI = {
   tips: 'sli_41D5AovN~.tips'
 };
 
-export const sliderUISlide: QuestionRange = {
-  type: 'slider',
-  placeholder: 'sli_41D5AovN~.explanation',
-  minLabel: '1 undefined',
-  maxLabel: '10 undefined',
-  title: '0 sli_41D5AovN~.unitLabel',
-  value: -0.1111111111111111,
-  onChange: noop
+export const sliderUISlide: Partial<UISlide> = {
+  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/src/helpers/test/fixtures/text-template.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {Template} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const textTemplateSlide: SlideFromAPI = {
   question: {
@@ -37,16 +36,22 @@ export const textTemplateSlide: SlideFromAPI = {
   id: 'sli_VJKQonm2g'
 };
 
-export const textTemplateUISlide: Template = {
-  type: 'template',
-  template: 'Un   {{inp58402}}   model.',
-  answers: [
-    {
-      type: 'text',
-      name: 'inp58402',
-      placeholder: 'Type here',
-      value: undefined,
-      onChange: noop
+export const textTemplateUISlide: Partial<UISlide> = {
+  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/src/helpers/test/map-api-slide-to-ui.test.ts

@@ -1,15 +1,6 @@
 import test from 'ava';
-import {SlideFromAPI} from '../../types/common';
+import {SlideFromAPI, UISlide} from '../../types/common';
 import {mapApiSlideToUi} from '../map-api-slide-to-ui';
-import {
-  QcmDrag,
-  Qcm,
-  QcmGraphic,
-  FreeText,
-  DropDown,
-  QuestionRange,
-  Template
-} from '../../types/slides';
 import {qcmUISlide, qcmSlide} from './fixtures/qcm';
 import {qcmDragUISlide, qcmDragSlide} from './fixtures/qcm-drag';
 import {freeTextSlide, freeTextUISlide} from './fixtures/free-text';
@@ -28,7 +19,7 @@ const macro = test.macro({
     t,
     arg: {
       slide: SlideFromAPI;
-      expectedUiSlide: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;
+      expectedUiSlide: Partial<UISlide>;
     }
   ) {
     t.deepEqual(

package/src/index.tsx

@@ -8,23 +8,21 @@ import {TemplateContext} from '@coorpacademy/components/es/template/app-review/t
 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 type {AppOptions} from './types/common';
 import type {StoreState} from './reducers';
-import {SkillsProps} from './types/views/skills';
 import type {SlidesViewStaticProps} from './types/views/slides';
 
 import {Dispatchers} from './actions';
-import {updateSlidesOnNext, updateSlidesOnValidation, validateSlide} from './actions/data/slides';
+import {validateSlide} from './actions/ui/slides';
+
 import {navigateTo, navigateBack, ViewPath} 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, SkillsProps} from './views/skills';
 
 type StaticProps = {
   viewName: 'skills' | 'onboarding' | 'slides' | 'loader';
@@ -35,74 +33,12 @@ type StaticProps = {
 const mapDispatchToProps: Dispatchers = {
   navigateTo,
   navigateBack,
-  validateSlide,
-  updateSlidesOnValidation,
-  updateSlidesOnNext,
-  updateReviewStatus,
-  updateStepItemsOnValidation,
-  updateStepItemsOnNext,
-  updateFinishedSlides
+  validateSlide
 };
 
 const getCurrentViewName = (storeState: StoreState): ViewPath =>
   storeState.ui.navigation[storeState.ui.navigation.length - 1];
 
-const mapStateToSkillsProps = (state: StoreState): SkillsProps | null => {
-  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: StoreState): SlidesViewStaticProps | null => {
-  if (!state.data.slides) {
-    return null;
-  }
-
-  return {
-    headerProps: {
-      mode: '__revision_mode',
-      skillName: '__agility',
-      onQuitClick: (): void => {
-        // 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: StoreState): StaticProps => {
   return {
     viewName: getCurrentViewName(state),
@@ -115,7 +51,7 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
 const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
-  const [isSlideFetched, setIsSlideFetched] = useState(false);
+  const [isProgressionCreated, setIsProgressionCreated] = useState(false);
 
   useEffect(() => {
     if (store) return;
@@ -125,14 +61,13 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   }, [options, store]);
 
   useEffect(() => {
-    if (!store || isSlideFetched) return;
+    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);
@@ -146,8 +81,8 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
     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));
@@ -158,18 +93,14 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
     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: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
     store.dispatch(navigateTo(initialView));
-  }, [isSlideFetched, options, store]);
+  }, [isProgressionCreated, options, store]);
 
   if (!store) return null;
 

package/src/reducers/data/progression.ts

@@ -1,24 +1,8 @@
-import {getOr} from 'lodash/fp';
-import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/data/slides';
+import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/ui/slides';
 import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../actions/api/post-progression';
+import {ProgressionFromAPI} from '../../types/common';
 
-export type ProgressionState = {
-  _id?: string;
-  state: {
-    isCorrect: boolean;
-    nextContent: {
-      ref: 'successExitNode' | string;
-      type: 'success' | 'slide';
-    };
-    pendingSlides: string[];
-    step: {
-      current: number;
-    };
-  };
-  // TO refactor: (slideNumber)
-  // virtual field
-  slideNumber?: number;
-} | null; // TODO: ça ressemble beaucoup à ProgressionFromAPI et ça devrait l'être
+export type ProgressionState = ProgressionFromAPI | null;
 
 const reducer = (
   // eslint-disable-next-line default-param-last
@@ -27,25 +11,8 @@ const reducer = (
 ): ProgressionState => {
   switch (action.type) {
     case VALIDATE_SLIDE: {
-      const previousSlideNumber: number = 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;
@@ -56,6 +23,4 @@ const reducer = (
   }
 };
 
-// -----------------------------------------------------------------------------
-
 export default reducer;

package/src/reducers/data/slides.ts

@@ -1,140 +1,23 @@
-import map from 'lodash/fp/map';
-import {
-  OnNextPayload,
-  SlidesAction,
-  UPDATE_SLIDES_ON_NEXT,
-  UPDATE_SLIDES_ON_VALIDATION,
-  ValidationPayload
-} from '../../actions/data/slides';
-import {UISlide} from '../../types/slides';
-import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../../common';
-import {slide as qcmSlide} from '../../fixtures/qcm-slide';
-import {SLIDE_FETCH_SUCCESS} from '../../actions/api/fetch-slide';
-import {Slide} from '../../types/common';
+import set from 'lodash/fp/set';
+import {ValidateSlide} from '../../actions/ui/slides';
+import {ReceivedSlide, SLIDE_FETCH_SUCCESS} from '../../actions/api/fetch-slide';
+import {SlideFromAPI} from '../../types/common';
 
-export type SlidesState = {
-  slideNumbers: number[];
-  [key: number]: Slide;
-};
-
-const getInitialState = (): SlidesState => {
-  const state: SlidesState = {
-    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: SlidesState = getInitialState();
-
-// -----------------------------------------------------------------------------
-
-const setFirstSlide = (state: SlidesState, slide: UISlide): SlidesState => {
-  const _state: SlidesState = {
-    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: SlidesState, payload: ValidationPayload): SlidesState => {
-  const {slideNumber, newSlideContent, numberOfFinishedSlides, nextContent} = payload;
-  const _state: SlidesState = {
-    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;
-};
+export type SlidesAction = ReceivedSlide | ValidateSlide;
 
-// ||-------> 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: SlidesState, payload: OnNextPayload): SlidesState => {
-  const {slideNumber, newSlideContent, numberOfFinishedSlides} = payload;
-  const _state: SlidesState = {
-    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, // position shift
-        answerUI,
-        questionText,
-        endReview: newSlideContent.endReview
-      };
-    }
-  }, state.slideNumbers);
-
-  return _state;
-};
-
-// -----------------------------------------------------------------------------
+export type SlidesState = Record<string, SlideFromAPI>;
+export const initialState: SlidesState = {};
 
 // eslint-disable-next-line default-param-last
 const reducer = (state: SlidesState = initialState, action: SlidesAction): SlidesState => {
   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/src/reducers/ui/current-slide-ref.ts

@@ -0,0 +1,19 @@
+import {SET_CURRENT_SLIDE, UISlidesAction} from '../../actions/ui/slides';
+
+export type CurrentSlideRefState = string;
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: CurrentSlideRefState = '',
+  action: UISlidesAction
+): CurrentSlideRefState => {
+  switch (action.type) {
+    case SET_CURRENT_SLIDE: {
+      return action.payload.id;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reducers/ui/index.ts

@@ -1,20 +1,17 @@
 import {combineReducers} from 'redux';
 
-import finishedSlides, {FinishedSlidesState} from './finished-slides';
+import currentSlideRef, {CurrentSlideRefState} from './current-slide-ref';
 import navigation, {NavigationState} from './navigation';
-import reviewStatus, {ReviewStatusState} from './review-status';
-import stepItems, {StepItemsState} from './step-items';
+import slides, {UISlidesState} from './slides';
 
 export type UIState = {
+  currentSlideRef: CurrentSlideRefState;
   navigation: NavigationState;
-  stepItems: StepItemsState;
-  finishedSlides: FinishedSlidesState;
-  reviewStatus: ReviewStatusState;
+  slides: UISlidesState;
 };
 
 export default combineReducers({
-  finishedSlides,
+  currentSlideRef,
   navigation,
-  reviewStatus,
-  stepItems
+  slides
 });

package/src/reducers/ui/slides.ts

@@ -0,0 +1,58 @@
+import pipe from 'lodash/fp/pipe';
+import set from 'lodash/fp/set';
+import type {SlideFromAPI, UISlide} from '../../types/common';
+import {SlideIndexes} from '../../common';
+import {mapApiSlideToUi} from '../../helpers/map-api-slide-to-ui';
+import {SET_CURRENT_SLIDE, UISlidesAction} from '../../actions/ui/slides';
+
+export type UISlidesState = {
+  [key in SlideIndexes]: UISlide;
+};
+
+export const initialState: UISlidesState = {
+  '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: UISlidesState, slideFromAPI: SlideFromAPI): UISlidesState => {
+  const {questionText, answerUI} = mapApiSlideToUi({translate: (text: string) => 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: UISlidesState = initialState, action: UISlidesAction): UISlidesState => {
+  switch (action.type) {
+    case SET_CURRENT_SLIDE: {
+      return setFirstSlide(state, action.payload);
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;