@coorpacademy/app-review 0.1.5 → 0.1.8

package/src/actions/ui/step-items.ts

@@ -1,20 +1,8 @@
-import {FinishedSlidesState} from '../../reducers/ui/finished-slides';
-
-// -----------------------------------------------------------------------------
+import {FinishedSlides, IconValue} from '../../types/common';
 
 export const UPDATE_STEP_ITEMS_ON_VALIDATION = '@@step-items/UPDATE_STEP_ITEMS_ON_VALIDATION';
 export const UPDATE_STEP_ITEMS_ON_NEXT = '@@step-items/UPDATE_STEP_ITEMS_ON_NEXT';
 
-const ICON_VALUES = {
-  right: 'right',
-  wrong: 'wrong',
-  'no-answer': 'no-answer'
-} as const;
-
-// -----------------------------------------------------------------------------
-
-export type IconValue = keyof typeof ICON_VALUES;
-
 type UpdateStepItemsOnValidationClickPayload = {
   stepNumber: number;
   icon: IconValue;
@@ -22,7 +10,7 @@ type UpdateStepItemsOnValidationClickPayload = {
 
 type UpdateStepItemsOnNextClickPayload = {
   stepNumber: number;
-  finishedSlides: FinishedSlidesState;
+  finishedSlides: FinishedSlides;
   current: boolean;
 };
 

package/src/configure-store.ts

@@ -1,51 +1,11 @@
 import {AnyAction, applyMiddleware, compose, createStore, Store} from 'redux';
 import thunk from 'redux-thunk';
+import rootReducer, {StoreState} from './reducers';
+import {getServices} from './services';
 
-import rootReducer from './reducers';
-import onStartApp from './middlewares/on-start-app';
+import {AppOptions} from './types/common';
 
-import {SkillsState} from './reducers/data/skills';
-import {SlidesState} from './reducers/data/slides';
-import {TokenState} from './reducers/data/token';
-import {NavigationState} from './reducers/ui/navigation';
-import {ReviewStatusState} from './reducers/ui/review-status';
-import {StepItemsState} from './reducers/ui/step-items';
-import {FinishedSlidesState} from './reducers/ui/finished-slides';
-
-import {AnswerUI} from './types/slides';
-
-// -----------------------------------------------------------------------------
-
-type DataState = {
-  isFetching?: boolean;
-  progression?: {
-    slideNumber: number;
-    isCorrect?: boolean;
-    // pass down the successExitNode if all slides are finished, not before
-    exitNode?: 'successExitNode' | 'failExitNode';
-    nextSlide?: {
-      questionText?: string;
-      answerUI?: AnswerUI;
-    };
-  } | null;
-  skills: SkillsState;
-  slides: SlidesState;
-  token?: TokenState;
-};
-
-export type StoreState = {
-  ui: {
-    navigation: NavigationState;
-    stepItems: StepItemsState;
-    finishedSlides: FinishedSlidesState;
-    reviewStatus: ReviewStatusState;
-  };
-  data: DataState;
-};
-
-// -----------------------------------------------------------------------------
-
-export default function configureStore(): Store<StoreState, AnyAction> {
+export default function configureStore(options: AppOptions): Store<StoreState, AnyAction> {
   const _compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
         name: 'app-review',
@@ -54,7 +14,8 @@ export default function configureStore(): Store<StoreState, AnyAction> {
       })
     : compose;
 
-  const enhancer = _compose(applyMiddleware(thunk, onStartApp));
+  const thunkMiddleware = thunk.withExtraArgument({services: options.services || getServices()});
+  const enhancer = _compose(applyMiddleware(thunkMiddleware));
   const store = createStore(rootReducer, undefined, enhancer);
 
   return store;

package/src/fixtures/qcm-slide.ts

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

package/src/index.tsx

@@ -2,27 +2,33 @@ import React, {useEffect, useState} from 'react';
 import {AnyAction, Store} from 'redux';
 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 configureStore, {StoreState} from './configure-store';
+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, startApp, ViewPath} from './actions/ui/navigation';
+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';
 
 // -----------------------------------------------------------------------------
 
 type StaticProps = {
   viewName: 'skills' | 'onboarding' | 'slides';
-  slides: SlidesViewStaticProps;
-  skills: SkillsProps;
+  slides: SlidesViewStaticProps | null;
+  skills: SkillsProps | null;
 };
 
 // -----------------------------------------------------------------------------
@@ -42,30 +48,43 @@ const mapDispatchToProps: Dispatchers = {
 const getCurrentViewName = (storeState: StoreState): ViewPath =>
   storeState.ui.navigation[storeState.ui.navigation.length - 1];
 
-const mapStateToSkillsProps = (state: StoreState): SkillsProps => ({
-  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 mapStateToProps = (state: StoreState): StaticProps => ({
-  viewName: getCurrentViewName(state),
-  slides: {
+// -----------------------------------------------------------------------------
+
+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',
@@ -86,9 +105,18 @@ const mapStateToProps = (state: StoreState): StaticProps => ({
     correctionPopinProps,
     congratsProps,
     progression: state.data.progression
-  },
-  skills: mapStateToSkillsProps(state)
-});
+  };
+};
+
+// -----------------------------------------------------------------------------
+
+const mapStateToProps = (state: StoreState): StaticProps => {
+  return {
+    viewName: getCurrentViewName(state),
+    slides: mapStateToSlidesProps(state),
+    skills: mapStateToSkillsProps(state)
+  };
+};
 
 // Props = StaticProps && Dispatchers
 
@@ -96,28 +124,49 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
 // -----------------------------------------------------------------------------
 
-const AppReview = ({options}: {options: AppOptions}): JSX.Element => {
+const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
-  const [appStarted, setAppStarted] = useState<boolean>(false);
 
   useEffect(() => {
-    if (store) {
-      store.dispatch(startApp(options));
-      setAppStarted(true);
-    } else {
-      const _configure = async (): Promise<void> => {
-        const newStore = await configureStore();
-        setStore(newStore);
-      };
-      _configure();
-    }
+    if (store) return;
+
+    const newStore = configureStore(options);
+    setStore(newStore);
+  }, [options, store]);
+
+  useEffect(() => {
+    if (store === null) return;
+
+    const {skillRef} = options;
+    const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
+    store.dispatch(navigateTo(initialView));
+  }, [options, store]);
+
+  useEffect(() => {
+    if (store === null) return;
+
+    const {token} = options;
+    store.dispatch(storeToken(token));
   }, [options, store]);
 
-  if (!store || !appStarted) return <div />;
+  useEffect(() => {
+    if (store === null) return;
+
+    const {skillRef, token} = options;
+    skillRef
+      ? store.dispatch(postProgression(skillRef, token))
+      : store.dispatch(fetchSkills(token));
+  }, [options, store]);
+
+  if (!store) return null;
+
+  const {templateContext: values} = options;
 
   return (
     <Provider store={store}>
-      <App />
+      <TemplateContext values={values}>
+        <App />
+      </TemplateContext>
     </Provider>
   );
 };

package/src/reducers/data/index.ts

@@ -1,9 +1,17 @@
 import {combineReducers} from 'redux';
 
-import progression from './progression';
-import skills from './skills';
-import slides from './slides';
-import token from './token';
+import progression, {ProgressionState} from './progression';
+import skills, {SkillsState} from './skills';
+import slides, {SlidesState} from './slides';
+import token, {TokenState} from './token';
+
+export type DataState = {
+  isFetching?: boolean;
+  progression?: ProgressionState;
+  skills: SkillsState;
+  slides: SlidesState;
+  token?: TokenState;
+};
 
 export default combineReducers({
   progression,

package/src/reducers/data/progression.ts

@@ -1,101 +1,56 @@
-import {getOr, noop} from 'lodash/fp';
+import {getOr} from 'lodash/fp';
 import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/data/slides';
-import {AnswerUI} from '../../types/slides';
-
-// -----------------------------------------------------------------------------
+import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../actions/api/post-progression';
 
 export type ProgressionState = {
-  // virtual field
-  slideNumber: number;
-  isCorrect?: boolean;
-  // pass down the successExitNode if all slides are finished, not before
-  exitNode?: 'successExitNode' | 'failExitNode';
-  // TODO: create another action, to retrieve the next slide
-  // nextSlide should be renamed as nextContent when this new action is created
-  // ex: nextContent: {ref: "sli_E1n2i2sBo", type: "slide"}
-  // the middleware should trigger a nextSlide request once the result is
-  // received && update the state accordingly
-  nextSlide?: {
-    questionText?: string;
-    answerUI?: AnswerUI;
+  _id?: string;
+  state: {
+    isCorrect: boolean;
+    nextContent: {
+      ref: 'successExitNode' | string;
+      type: 'success' | 'slide';
+    };
+    pendingSlides: string[];
+    step: {
+      current: number;
+    };
   };
-} | null;
-
-// -----------------------------------------------------------------------------
-
-export const initialState: ProgressionState = null;
-
-// -----------------------------------------------------------------------------
+  // TO refactor: (slideNumber)
+  // virtual field
+  slideNumber?: number;
+} | null; // TODO: ça ressemble beaucoup à ProgressionFromAPI et ça devrait l'être
 
 const reducer = (
   // eslint-disable-next-line default-param-last
-  state: ProgressionState = initialState,
-  action: ValidateSlide
+  state: ProgressionState = null,
+  action: ValidateSlide | ReceiveProgression
 ): 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,
-        isCorrect: true,
-        // exitNode
-        // TODO: create another action, to retrieve the next slide
-        // nextSlide should be corrected to nextContent, when this new action is created
-        // ex: nextContent: {ref: "sli_E1n2i2sBo", type: "slide"}
-        // the middleware should trigger a next content request once the result is
-        // received && update the state accordingly,
-        //
-        nextSlide: {
-          questionText: 'Test',
-          answerUI: {
-            model: {
-              answers: [
-                {
-                  title: 'There is no need for a password',
-                  // TODO: onClick of each answer should use a dispatcher to
-                  // update selected answers (in order to use them on validation)
-                  // in each retrieval, the answers of answerUI need to be augmented
-                  // for the onClick prop to achieve this.
-                  onClick: noop,
-                  selected: false,
-                  help: 'help'
-                },
-                {
-                  title: 'Lorem ipsum',
-                  onClick: noop,
-                  selected: false,
-                  help: 'help'
-                },
-                {
-                  title: 'Lorem',
-                  onClick: noop,
-                  selected: true,
-                  order: 1,
-                  help: 'help'
-                },
-                {
-                  title: 'You need to have a password',
-                  onClick: noop,
-                  selected: false,
-                  help: 'help'
-                },
-                {
-                  title: 'Pouet',
-                  onClick: noop,
-                  selected: true,
-                  order: 0,
-                  help: 'help'
-                }
-              ],
-              type: 'qcmDrag'
-            },
-            help: 'Help text will appear here'
+        state: {
+          pendingSlides: [],
+          step: {
+            current: Number.NaN
+          },
+          isCorrect: true,
+          nextContent: {
+            ref: 'sli_V1gKpYYZ2',
+            type: 'slide'
           }
         }
       };
     }
+    case POST_PROGRESSION_SUCCESS: {
+      const progression = action.payload;
+      return progression;
+    }
     default:
       return state;
   }

package/src/reducers/data/skills.ts

@@ -1,21 +1,16 @@
-import {ReceivedSkills, RECEIVED_SKILLS} from '../../actions/data/skills';
-import {Skills} from '../../types/skills';
+import {Skill} from '../../types/common';
+import {ReceivedSkills, SKILLS_FETCH_SUCCESS} from '../../actions/api/fetch-skills';
 
-export type SkillsState = Skills;
-export const initialState: SkillsState = [];
-
-// -----------------------------------------------------------------------------
+export type SkillsState = Skill[];
 
 // eslint-disable-next-line default-param-last
-const reducer = (state: SkillsState = initialState, action: ReceivedSkills): SkillsState => {
+const reducer = (state: SkillsState = [], action: ReceivedSkills): SkillsState => {
   switch (action.type) {
-    case RECEIVED_SKILLS:
+    case SKILLS_FETCH_SUCCESS:
       return action.payload;
     default:
       return state;
   }
 };
 
-// -----------------------------------------------------------------------------
-
 export default reducer;

package/src/reducers/data/slides.ts

@@ -1,25 +1,22 @@
 import map from 'lodash/fp/map';
 import {
   OnNextPayload,
-  Slide,
   SlidesAction,
-  STORE_FIRST_SLIDE,
   UPDATE_SLIDES_ON_NEXT,
   UPDATE_SLIDES_ON_VALIDATION,
   ValidationPayload
 } from '../../actions/data/slides';
-import {Slide as SlideFromAPI} from '../../types/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';
 
 export type SlidesState = {
   slideNumbers: number[];
   [key: number]: Slide;
 };
 
-// -----------------------------------------------------------------------------
-
 const getInitialState = (): SlidesState => {
   const state: SlidesState = {
     slideNumbers
@@ -35,7 +32,7 @@ export const initialState: SlidesState = getInitialState();
 
 // -----------------------------------------------------------------------------
 
-const setFirstSlide = (state: SlidesState, slide: SlideFromAPI): SlidesState => {
+const setFirstSlide = (state: SlidesState, slide: UISlide): SlidesState => {
   const _state: SlidesState = {
     slideNumbers
   };
@@ -53,7 +50,7 @@ const setFirstSlide = (state: SlidesState, slide: SlideFromAPI): SlidesState =>
 // ||-------> 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, nextSlide} = payload;
+  const {slideNumber, newSlideContent, numberOfFinishedSlides, nextContent} = payload;
   const _state: SlidesState = {
     slideNumbers
   };
@@ -67,7 +64,7 @@ const stateUpdateOnValidation = (state: SlidesState, payload: ValidationPayload)
       if (numberOfFinishedSlides === HIGHEST_INDEX) {
         _state[index] = {
           ...previousValue,
-          nextSlide,
+          nextContent,
           position: newSlideContent.position,
           isCorrect: newSlideContent.isCorrect
         };
@@ -75,7 +72,7 @@ const stateUpdateOnValidation = (state: SlidesState, payload: ValidationPayload)
     } else {
       // updates the rest of the slides here
       const {hidden, position} = previousValue;
-      _state[index] = {...nextSlide, endReview: newSlideContent.endReview, hidden, position};
+      _state[index] = {...nextContent, endReview: newSlideContent.endReview, hidden, position};
     }
   }, state.slideNumbers);
 
@@ -96,8 +93,8 @@ const stateUpdateOnNext = (state: SlidesState, payload: OnNextPayload): SlidesSt
     // the current slide
     if (index === slideNumber) {
       // when there is only one slide remaining, updates the slide value
-      if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextSlide) {
-        _state[index] = {...previousValue.nextSlide, position: previousValue.position};
+      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
@@ -120,8 +117,12 @@ const stateUpdateOnNext = (state: SlidesState, payload: OnNextPayload): SlidesSt
 // eslint-disable-next-line default-param-last
 const reducer = (state: SlidesState = initialState, action: SlidesAction): SlidesState => {
   switch (action.type) {
-    case STORE_FIRST_SLIDE: {
-      return setFirstSlide(state, action.payload);
+    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);

package/src/reducers/data/token.ts

@@ -1,17 +1,9 @@
 import {StoreToken, STORE_TOKEN} from '../../actions/data/token';
 
-// -----------------------------------------------------------------------------
-
 export type TokenState = string | null;
 
-// -----------------------------------------------------------------------------
-
-export const initialState: TokenState = null;
-
-// -----------------------------------------------------------------------------
-
 // eslint-disable-next-line default-param-last
-const reducer = (state: TokenState = initialState, action: StoreToken): TokenState => {
+const reducer = (state: TokenState = null, action: StoreToken): TokenState => {
   switch (action.type) {
     case STORE_TOKEN:
       return action.payload;
@@ -20,6 +12,4 @@ const reducer = (state: TokenState = initialState, action: StoreToken): TokenSta
   }
 };
 
-// -----------------------------------------------------------------------------
-
 export default reducer;

package/src/reducers/index.ts

@@ -1,7 +1,12 @@
 import {combineReducers} from 'redux';
 
-import data from './data';
-import ui from './ui';
+import data, {DataState} from './data';
+import ui, {UIState} from './ui';
+
+export type StoreState = {
+  ui: UIState;
+  data: DataState;
+};
 
 export default combineReducers({
   data,

package/src/reducers/ui/finished-slides.ts

@@ -2,21 +2,15 @@ import forEach from 'lodash/fp/forEach';
 import {UpdateFinishedSlides, UPDATE_FINISHED_SLIDES} from '../../actions/ui/finished-slides';
 import {slideNumbers} from '../../common';
 
-// -----------------------------------------------------------------------------
-// Stores only successful slides
 export type FinishedSlidesState = {
   slideNumbers: number[];
   [key: number]: true;
 };
 
-// -----------------------------------------------------------------------------
-
-export const initialState: FinishedSlidesState = {
+const initialState: FinishedSlidesState = {
   slideNumbers
 };
 
-// -----------------------------------------------------------------------------
-
 const _forEach: <T>(
   iteratee: (value: T[keyof T], index: number) => void,
   collection: T

package/src/reducers/ui/index.ts

@@ -1,9 +1,16 @@
 import {combineReducers} from 'redux';
 
-import finishedSlides from './finished-slides';
-import navigation from './navigation';
-import reviewStatus from './review-status';
-import stepItems from './step-items';
+import finishedSlides, {FinishedSlidesState} from './finished-slides';
+import navigation, {NavigationState} from './navigation';
+import reviewStatus, {ReviewStatusState} from './review-status';
+import stepItems, {StepItemsState} from './step-items';
+
+export type UIState = {
+  navigation: NavigationState;
+  stepItems: StepItemsState;
+  finishedSlides: FinishedSlidesState;
+  reviewStatus: ReviewStatusState;
+};
 
 export default combineReducers({
   finishedSlides,