@coorpacademy/app-review 0.1.14 → 0.1.16

package/src/common/index.ts

@@ -1,3 +1,5 @@
+import _toString from 'lodash/fp/toString';
+
 export const TOTAL_SLIDES_STACK = 5;
 export const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;
 
@@ -11,4 +13,8 @@ export const VIEWS: {
   slides: 'slides'
 };
 
-export const slideNumbers: number[] = [0, 1, 2, 3, 4];
+export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
+
+export type SlideIndexes = typeof slideIndexes[number];
+
+export const indexToString = (index: number): SlideIndexes => _toString(index) as SlideIndexes;

package/src/fixtures/qcm-slide.ts

@@ -1,7 +1,7 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../types/slides';
+import {UISlide} from '../types/common';
 
-export const slide: UISlide = {
+export const slide: Pick<UISlide, 'questionText' | 'answerUI'> = {
   questionText: 'QCM',
   answerUI: {
     help: '__help',

package/src/fixtures/temp-fixture.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
-import {SlidesViewProps} from '../types/views/slides';
+import {SlidesViewProps, CorrectionPopinProps} from '../views/slides';
 
-export const correctionPopinProps: SlidesViewProps['correctionPopinProps'] = {
+export const correctionPopinProps: CorrectionPopinProps = {
   klf: {
     label: 'Key learning factor',
     tooltip: 'Some tooltip info.',

package/src/index.tsx

@@ -1,121 +1,42 @@
 import React, {useEffect, useState} from 'react';
 import type {} from 'redux-thunk/extend-redux'; // https://github.com/reduxjs/redux-thunk/issues/333
 import {AnyAction, Store} from 'redux';
-import {connect, Provider} from 'react-redux';
+import {useSelector, useDispatch, 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 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 {navigateTo, navigateBack, ViewPath} from './actions/ui/navigation';
+import {navigateTo, 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';
-
-type StaticProps = {
-  viewName: 'skills' | 'onboarding' | 'slides' | 'loader';
-  slides: SlidesViewStaticProps | null;
-  skills: SkillsProps | null;
-};
-
-const mapDispatchToProps: Dispatchers = {
-  navigateTo,
-  navigateBack,
-  validateSlide,
-  updateSlidesOnValidation,
-  updateSlidesOnNext,
-  updateReviewStatus,
-  updateStepItemsOnValidation,
-  updateStepItemsOnNext,
-  updateFinishedSlides
-};
-
-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')
-    }))
+import {mapStateToSlidesProps} from './views/slides';
+import {mapStateToSkillsProps} from './views/skills';
+
+const ConnectedApp = (): JSX.Element => {
+  const dispatch = useDispatch();
+
+  const props = {
+    viewName: useSelector(
+      (state: StoreState) => state.ui.navigation[state.ui.navigation.length - 1]
+    ),
+    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch)),
+    skills: useSelector((state: StoreState) => mapStateToSkillsProps(state))
   };
-};
 
-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),
-    slides: mapStateToSlidesProps(state),
-    skills: mapStateToSkillsProps(state)
-  };
+  return <AppReviewTemplate {...props} />;
 };
 
-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 +46,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 +66,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 +78,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;
 
@@ -178,7 +94,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   return (
     <Provider store={store}>
       <TemplateContext values={values}>
-        <App />
+        <ConnectedApp />
       </TemplateContext>
     </Provider>
   );

package/src/reducers/data/index.ts

@@ -7,7 +7,7 @@ import token, {TokenState} from './token';
 
 export type DataState = {
   isFetching?: boolean;
-  progression?: ProgressionState;
+  progression: ProgressionState;
   skills: SkillsState;
   slides: SlidesState;
   token?: TokenState;

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,32 @@
-import map from 'lodash/fp/map';
+import set from 'lodash/fp/set';
+import {ValidateSlide} from '../../actions/ui/slides';
 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';
+  ReceivedSlide,
+  FetchSlide,
+  SLIDE_FETCH_REQUEST,
+  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();
-
-// -----------------------------------------------------------------------------
+export type SlidesAction = FetchSlide | ReceivedSlide | ValidateSlide;
 
-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;
-};
-
-// ||-------> 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 SLIDE_FETCH_REQUEST: {
+      const {meta} = action;
+      return set(meta.slideRef, null, state);
     }
-    case UPDATE_SLIDES_ON_NEXT: {
-      return stateUpdateOnNext(state, action.payload);
+    case SLIDE_FETCH_SUCCESS: {
+      const slide = action.payload;
+      return set(slide.id, slide, state);
     }
     default:
       return state;
   }
 };
 
-// -----------------------------------------------------------------------------
-
 export default reducer;

package/src/reducers/data/test/progression.test.ts

@@ -0,0 +1,42 @@
+import test from 'ava';
+import reducer from '../progression';
+import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../../actions/api/post-progression';
+import {ProgressionFromAPI} from '../../../types/common';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as ReceiveProgression);
+  t.is(state, null);
+});
+
+test('should set the value of POST_PROGRESSION_SUCCESS action', t => {
+  const progression: ProgressionFromAPI = {
+    _id: '62b1d1087aa12f00253f40ee',
+    content: {
+      ref: '_skill-ref',
+      type: 'skill'
+    },
+    engine: {
+      ref: 'review'
+    },
+    state: {
+      allAnswers: [],
+      isCorrect: true,
+      nextContent: {
+        ref: 'sli_N1XACJobn',
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [],
+      step: {
+        current: 1
+      },
+      stars: 0
+    }
+  };
+
+  const state = reducer(null, {
+    type: POST_PROGRESSION_SUCCESS,
+    payload: progression
+  });
+  t.deepEqual(state, progression);
+});

package/src/reducers/data/test/skills.test.ts

@@ -0,0 +1,14 @@
+import test from 'ava';
+import reducer from '../skills';
+import {ReceivedSkills, SKILLS_FETCH_SUCCESS} from '../../../actions/api/fetch-skills';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as ReceivedSkills);
+  t.deepEqual(state, []);
+});
+
+test('should set the value of SKILLS_FETCH_SUCCESS action', t => {
+  const skills = [{skillRef: 'skill', name: 'skill name', slidesToReview: 5, custom: false}];
+  const state = reducer([], {type: SKILLS_FETCH_SUCCESS, payload: skills});
+  t.deepEqual(state, skills);
+});

package/src/reducers/data/test/slides.test.ts

@@ -0,0 +1,26 @@
+import test from 'ava';
+import reducer, {type SlidesAction} from '../slides';
+import {SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS} from '../../../actions/api/fetch-slide';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as SlidesAction);
+  t.deepEqual(state, {});
+});
+
+test('should set the value of SLIDE_FETCH_REQUEST action', t => {
+  const state = reducer({}, {type: SLIDE_FETCH_REQUEST, meta: {slideRef: 'slideRef'}});
+  t.deepEqual(state, {
+    slideRef: null
+  });
+});
+
+test('should set the value of SLIDE_FETCH_SUCCESS action', t => {
+  const state = reducer(
+    {},
+    {type: SLIDE_FETCH_SUCCESS, payload: freeTextSlide, meta: {slideRef: 'sli_VJYjJnJhg'}}
+  );
+  t.deepEqual(state, {
+    sli_VJYjJnJhg: freeTextSlide
+  });
+});

package/src/reducers/data/test/token.test.ts

@@ -0,0 +1,13 @@
+import test from 'ava';
+import reducer from '../token';
+import {StoreToken, STORE_TOKEN} from '../../../actions/data/token';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as StoreToken);
+  t.is(state, null);
+});
+
+test('should set the value of STORE_TOKEN action', t => {
+  const state = reducer(null, {type: STORE_TOKEN, payload: 'token'});
+  t.is(state, 'token');
+});

package/src/reducers/ui/answers.ts

@@ -0,0 +1,19 @@
+import {EditBasicAction, EDIT_BASIC} from '../../actions/ui/answers';
+
+export type AnswerState = string[];
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: AnswerState = [],
+  action: EditBasicAction
+): AnswerState => {
+  switch (action.type) {
+    case EDIT_BASIC: {
+      return action.payload;
+    }
+    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 answers, {AnswerState} from './answers';
 
 export type UIState = {
+  currentSlideRef: CurrentSlideRefState;
   navigation: NavigationState;
-  stepItems: StepItemsState;
-  finishedSlides: FinishedSlidesState;
-  reviewStatus: ReviewStatusState;
+  answers: AnswerState;
 };
 
 export default combineReducers({
-  finishedSlides,
+  currentSlideRef,
   navigation,
-  reviewStatus,
-  stepItems
+  answers
 });

package/src/reducers/ui/test/answers.test.ts

@@ -0,0 +1,13 @@
+import test from 'ava';
+import reducer from '../answers';
+import {EditBasicAction, EDIT_BASIC} from '../../../actions/ui/answers';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as EditBasicAction);
+  t.deepEqual(state, []);
+});
+
+test('should set the value of EDIT_BASIC action', t => {
+  const state = reducer([], {type: EDIT_BASIC, payload: ['value']});
+  t.deepEqual(state, ['value']);
+});

package/src/reducers/ui/test/current-slide-ref.test.ts

@@ -0,0 +1,14 @@
+import test from 'ava';
+import reducer from '../current-slide-ref';
+import {SetCurrentSlide, SET_CURRENT_SLIDE} from '../../../actions/ui/slides';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as SetCurrentSlide);
+  t.is(state, '');
+});
+
+test('should set the value of SET_CURRENT_SLIDE action', t => {
+  const state = reducer('', {type: SET_CURRENT_SLIDE, payload: freeTextSlide});
+  t.is(state, 'sli_VJYjJnJhg');
+});