@coorpacademy/app-review 0.1.2 → 0.1.4

package/src/actions/data/slides.ts

@@ -0,0 +1,89 @@
+import {Slide as SlideFromAPI} from '../../types/slides';
+
+// -----------------------------------------------------------------------------
+
+export const STORE_FIRST_SLIDE = '@@slide/STORE_FIRST_SLIDE';
+export const UPDATE_SLIDES_ON_VALIDATION = '@@slide/UPDATE_SLIDES_ON_VALIDATION';
+export const UPDATE_SLIDES_ON_NEXT = '@@slide/UPDATE_SLIDES_ON_NEXT';
+export const VALIDATE_SLIDE = '@@slide/VALIDATE';
+export const FETCH_NEXT_CONTENT = '@@slide/FETCH_NEXT_CONTENT';
+
+// -----------------------------------------------------------------------------
+
+type SlideUIAnimations = 'unstack' | 'restack';
+
+export type Slide = SlideFromAPI & {
+  hidden?: boolean;
+  position: number;
+  animationType?: SlideUIAnimations;
+  isCorrect?: boolean;
+  endReview?: boolean;
+  nextSlide?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextSlide'>;
+};
+
+export type ValidationPayload = {
+  slideNumber: number;
+  newSlideContent: Slide;
+  numberOfFinishedSlides: number;
+  nextSlide: Slide;
+};
+
+export type OnNextPayload = Omit<ValidationPayload, 'nextSlide'>;
+
+export type FetchNextPayload = {
+  answer: string[];
+  content: {
+    ref: string;
+    type: string;
+  };
+};
+
+// -----------------------------------------------------------------------------
+
+export type StoreFirstSlide = {
+  type: typeof STORE_FIRST_SLIDE;
+  payload: SlideFromAPI;
+};
+
+export type UpdateSlidesOnValidation = {
+  type: typeof UPDATE_SLIDES_ON_VALIDATION;
+  payload: ValidationPayload;
+};
+
+export type UpdateSlidesOnNext = {
+  type: typeof UPDATE_SLIDES_ON_NEXT;
+  payload: OnNextPayload;
+};
+
+export type ValidateSlide = {
+  type: typeof VALIDATE_SLIDE;
+};
+
+// TODO
+export type FetchNextContent = {
+  type: typeof FETCH_NEXT_CONTENT;
+  payload: FetchNextPayload;
+};
+
+export type SlidesAction = StoreFirstSlide | UpdateSlidesOnValidation | UpdateSlidesOnNext;
+
+// -----------------------------------------------------------------------------
+
+export const storeFirstSlide = (slide: SlideFromAPI): StoreFirstSlide => ({
+  type: STORE_FIRST_SLIDE,
+  payload: slide
+});
+
+export const updateSlidesOnValidation = (payload: ValidationPayload): UpdateSlidesOnValidation => ({
+  type: UPDATE_SLIDES_ON_VALIDATION,
+  payload
+});
+
+export const updateSlidesOnNext = (payload: OnNextPayload): UpdateSlidesOnNext => ({
+  type: UPDATE_SLIDES_ON_NEXT,
+  payload
+});
+
+export const validateSlide = (): ValidateSlide => ({
+  type: VALIDATE_SLIDE
+});

package/src/actions/index.ts

@@ -1,12 +1,34 @@
-import {ReceivedCourse} from './courses';
-import {NavigateBack, NavigateTo, StartApp} from './navigation';
-import {StoreToken} from './token';
-import {StoreFirstSlide} from './slides';
+import {
+  StoreFirstSlide,
+  updateSlidesOnValidation,
+  updateSlidesOnNext,
+  validateSlide
+} from './data/slides';
+import {ErrorFetchingSkills, ReceivedSkills} from './data/skills';
+import {StoreToken} from './data/token';
+
+import {updateFinishedSlides} from './ui/finished-slides';
+import {navigateBack, navigateTo, NavigateBack, NavigateTo, StartApp} from './ui/navigation';
+import {updateReviewStatus} from './ui/review-status';
+import {updateStepItemsOnValidation, updateStepItemsOnNext} from './ui/step-items';
 
 export type Action =
   | NavigateBack
   | NavigateTo
-  | ReceivedCourse
+  | ReceivedSkills
+  | ErrorFetchingSkills
   | StartApp
   | StoreFirstSlide
   | StoreToken;
+
+export type Dispatchers = {
+  navigateTo: typeof navigateTo;
+  navigateBack: typeof navigateBack;
+  validateSlide: typeof validateSlide;
+  updateSlidesOnValidation: typeof updateSlidesOnValidation;
+  updateSlidesOnNext: typeof updateSlidesOnNext;
+  updateReviewStatus: typeof updateReviewStatus;
+  updateStepItemsOnValidation: typeof updateStepItemsOnValidation;
+  updateStepItemsOnNext: typeof updateStepItemsOnNext;
+  updateFinishedSlides: typeof updateFinishedSlides;
+};

package/src/actions/{finished-slides.ts → ui/finished-slides.ts}

@@ -1,4 +1,6 @@
-import {UpdateFinishedSlidesPayload} from '../types/finished-slides';
+// Stores only successful slides
+
+export type FinishedSlide = {slideNumber: number; value: true};
 
 // -----------------------------------------------------------------------------
 
@@ -8,14 +10,12 @@ export const UPDATE_FINISHED_SLIDES = '@@finished-slides/UPDATE_FINISHED_SLIDES'
 
 export type UpdateFinishedSlides = {
   type: typeof UPDATE_FINISHED_SLIDES;
-  payload: UpdateFinishedSlidesPayload;
+  payload: FinishedSlide;
 };
 
 // -----------------------------------------------------------------------------
 
-export const updateFinishedSlides = (
-  payload: UpdateFinishedSlidesPayload
-): UpdateFinishedSlides => ({
+export const updateFinishedSlides = (payload: FinishedSlide): UpdateFinishedSlides => ({
   type: UPDATE_FINISHED_SLIDES,
   payload
 });

package/src/actions/ui/is-fetching.ts

@@ -0,0 +1,19 @@
+// -----------------------------------------------------------------------------
+
+export const START_FETCHING = '@@ui/START_FETCHING';
+export const STOP_FETCHING = '@@ui/STOP_FETCHING';
+
+// -----------------------------------------------------------------------------
+
+export type StartFetching = {
+  type: typeof START_FETCHING;
+};
+
+export type StopFetching = {
+  type: typeof STOP_FETCHING;
+};
+
+// -----------------------------------------------------------------------------
+
+export const startFetching = (): StartFetching => ({type: START_FETCHING});
+export const stopFetching = (): StopFetching => ({type: STOP_FETCHING});

package/src/actions/{navigation.ts → ui/navigation.ts}

@@ -1,10 +1,10 @@
-import {AppOptions} from '../types/common';
+import {AppOptions} from '../../types/common';
 
 export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
 export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
 export const START_APP = '@@navigation/START_APP';
 
-export type ViewPath = 'home' | 'onboarding' | 'slides';
+export type ViewPath = 'skills' | 'onboarding' | 'slides';
 
 export type NavigateTo = {
   type: '@@navigation/NAVIGATE_TO';

package/src/actions/{review-status.ts → ui/review-status.ts}

@@ -1,19 +1,19 @@
-import {UpdateReviewStatusPayload} from '../types/review-status';
-
 // -----------------------------------------------------------------------------
 
 export const UPDATE_REVIEW_STATUS = '@@review-status/UPDATE_REVIEW_STATUS';
 
 // -----------------------------------------------------------------------------
 
+export type FinishedStatus = 'finished';
+
 export type UpdateReviewStatus = {
   type: typeof UPDATE_REVIEW_STATUS;
-  payload: UpdateReviewStatusPayload;
+  payload: FinishedStatus;
 };
 
 // -----------------------------------------------------------------------------
 
-export const updateReviewStatus = (payload: UpdateReviewStatusPayload): UpdateReviewStatus => ({
+export const updateReviewStatus = (payload: FinishedStatus): UpdateReviewStatus => ({
   type: UPDATE_REVIEW_STATUS,
   payload
 });

package/src/actions/{step-items.ts → ui/step-items.ts}

@@ -1,13 +1,31 @@
-import {
-  UpdateStepItemsOnNextClickPayload,
-  UpdateStepItemsOnValidationClickPayload
-} from '../types/step-items';
+import {FinishedSlidesState} from '../../reducers/ui/finished-slides';
 
 // -----------------------------------------------------------------------------
 
 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;
+};
+
+type UpdateStepItemsOnNextClickPayload = {
+  stepNumber: number;
+  finishedSlides: FinishedSlidesState;
+  current: boolean;
+};
+
 // -----------------------------------------------------------------------------
 
 export type UpdateStepItemsOnValidation = {

package/src/common/index.ts

@@ -2,11 +2,11 @@ export const TOTAL_SLIDES_STACK = 5;
 export const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;
 
 export const VIEWS: {
-  readonly home: 'home';
+  readonly skills: 'skills';
   readonly onboarding: 'onboarding';
   readonly slides: 'slides';
 } = {
-  home: 'home',
+  skills: 'skills',
   onboarding: 'onboarding',
   slides: 'slides'
 };

package/src/configure-store.ts

@@ -1,19 +1,51 @@
-import {AnyAction, applyMiddleware, compose, createStore, EmptyObject, Store} from 'redux';
+import {AnyAction, applyMiddleware, compose, createStore, Store} from 'redux';
 import thunk from 'redux-thunk';
 
 import rootReducer from './reducers';
-
 import onStartApp from './middlewares/on-start-app';
 
-import {StoreState} from './types/store-state';
+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';
+
+// -----------------------------------------------------------------------------
 
-const preloadedState: unknown = undefined;
+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<EmptyObject & StoreState, AnyAction> & {
-  dispatch: {};
-} {
+export default function configureStore(): Store<StoreState, AnyAction> {
   const _compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
         name: 'app-review',
@@ -23,7 +55,7 @@ export default function configureStore(): Store<EmptyObject & StoreState, AnyAct
     : compose;
 
   const enhancer = _compose(applyMiddleware(thunk, onStartApp));
-  const store = createStore(rootReducer, preloadedState, enhancer);
+  const store = createStore(rootReducer, undefined, enhancer);
 
   return store;
 }

package/src/fixtures/qcm-slide.ts

@@ -1,3 +1,4 @@
+import noop from 'lodash/fp/noop';
 import {Slide} from '../types/slides';
 
 export const slide: Slide = {
@@ -11,19 +12,22 @@ export const slide: Slide = {
           selected: false,
           title: 'choix1',
           help: '(help choix1)',
-          ariaLabel: '__ariaLabel1'
+          ariaLabel: '__ariaLabel1',
+          onClick: noop
         },
         {
           selected: false,
           title: 'choix2',
           help: '(help choix2)',
-          ariaLabel: '__ariaLabel2'
+          ariaLabel: '__ariaLabel2',
+          onClick: noop
         },
         {
           selected: false,
           title: 'choix3',
           help: '(help choix3)',
-          ariaLabel: '__ariaLabel3'
+          ariaLabel: '__ariaLabel3',
+          onClick: noop
         }
       ]
     }

package/src/fixtures/temp-fixture.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import {SlidesViewProps} from '../types/views';
+import {SlidesViewProps} from '../types/views/slides';
 
 export const correctionPopinProps: SlidesViewProps['correctionPopinProps'] = {
   klf: {

package/src/index.test.tsx

@@ -72,7 +72,7 @@ test('should validate all the slides (all correct scenario)', async t => {
   const wrapper = container.querySelector('[data-name="slides-revision-container"]');
   t.truthy(wrapper);
 
-  const stackedSlidesContainer = wrapper.querySelector('[data-name="stacked-slides-container"]');
+  const stackedSlidesContainer = wrapper?.querySelector('[data-name="stacked-slides-container"]');
 
   t.truthy(stackedSlidesContainer);
 

package/src/index.tsx

@@ -1,26 +1,28 @@
 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 configureStore from './configure-store';
-import {navigateTo, navigateBack, startApp} from './actions/navigation';
-import {updateSlidesOnNext, updateSlidesOnValidation} from './actions/slides';
-import {getCurrentViewName} from './reducers/navigation';
-import type {SlidesViewStaticProps} from './types/views';
-import type {AppOptions} from './types/common';
-import type {StoreState} from './types/store-state';
+import configureStore, {StoreState} from './configure-store';
 import {congratsProps, correctionPopinProps} from './fixtures/temp-fixture';
-import {updateFinishedSlides} from './actions/finished-slides';
-import {updateReviewStatus} from './actions/review-status';
-import {updateStepItemsOnValidation, updateStepItemsOnNext} from './actions/step-items';
-import type {Dispatchers} from './types/dispatchers';
-import {validateSlide} from './actions/data/validate-slide';
+
+import type {AppOptions} from './types/common';
+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 {updateFinishedSlides} from './actions/ui/finished-slides';
+import {updateReviewStatus} from './actions/ui/review-status';
+import {updateStepItemsOnValidation, updateStepItemsOnNext} from './actions/ui/step-items';
 
 // -----------------------------------------------------------------------------
 
 type StaticProps = {
-  viewName: 'home' | 'onboarding' | 'slides';
+  viewName: 'skills' | 'onboarding' | 'slides';
   slides: SlidesViewStaticProps;
+  skills: SkillsProps;
 };
 
 // -----------------------------------------------------------------------------
@@ -37,33 +39,56 @@ const mapDispatchToProps: Dispatchers = {
   updateFinishedSlides
 };
 
-const mapStateToProps = (state: StoreState): StaticProps => {
-  return {
-    viewName: getCurrentViewName(state),
-    slides: {
-      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'
+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: {
+    headerProps: {
+      mode: '__revision_mode',
+      skillName: '__agility',
+      onQuitClick: (): void => {
+        // eslint-disable-next-line no-console
+        console.log('onQuitClick');
       },
-      slides: state.ui.slides,
-      validate: {
-        label: '__validate'
-      },
-      finishedSlides: state.ui.finishedSlides,
-      stepItems: state.ui.stepItems,
-      reviewStatus: state.ui.reviewStatus,
-      correctionPopinProps,
-      congratsProps,
-      slideValidationResult: state.data.slideValidationResult
-    }
-  };
-};
+      '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
+  },
+  skills: mapStateToSkillsProps(state)
+});
 
 // Props = StaticProps && Dispatchers
 
@@ -72,8 +97,8 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 // -----------------------------------------------------------------------------
 
 const AppReview = ({options}: {options: AppOptions}): JSX.Element => {
-  const [store, setStore] = useState(null);
-  const [appStarted, setAppStarted] = useState(false);
+  const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
+  const [appStarted, setAppStarted] = useState<boolean>(false);
 
   useEffect(() => {
     if (store) {
@@ -81,14 +106,14 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element => {
       setAppStarted(true);
     } else {
       const _configure = async (): Promise<void> => {
-        const _store = await configureStore();
-        setStore(_store);
+        const newStore = await configureStore();
+        setStore(newStore);
       };
       _configure();
     }
   }, [options, store]);
 
-  if (!store || !appStarted) return null;
+  if (!store || !appStarted) return <div />;
 
   return (
     <Provider store={store}>

package/src/middlewares/on-start-app.ts

@@ -1,42 +1,39 @@
-import type {Middleware} from 'redux';
+import type {Middleware, Store} from 'redux';
 import {Dispatch} from 'redux';
 
-import {Action} from '../actions';
-// import fetchCourse from '../services/fetch-demo';
 import {VIEWS} from '../common';
-import {navigateTo, START_APP, ViewPath} from '../actions/navigation';
-import {storeToken} from '../actions/token';
-import {storeFirstSlide} from '../actions/slides';
-// import {receivedCourse} from '../actions/courses';
-import {StoreState} from '../types/store-state';
+import {Action} from '../actions';
+import {storeToken} from '../actions/data/token';
+import {receivedSkills, errorFetchingSkills} from '../actions/data/skills';
+import {storeFirstSlide} from '../actions/data/slides';
+import {navigateTo, START_APP, ViewPath} from '../actions/ui/navigation';
+
+// eslint-disable-next-line import/no-named-as-default
+import fetchSkills from '../services/fetch-skills';
 
-const onStartApp: Middleware<{}, StoreState, Dispatch<Action>> =
+const onStartApp: Middleware<{}, Store, Dispatch<Action>> =
   ({dispatch}) =>
   next =>
   (action: Action) => {
     if (action.type === START_APP) {
-      // eslint-disable-next-line no-warning-comments
-      // TODO: fetchProgression + fetchSlide à partir de la progression passée dans les options de l'app
-      const {slide} = action.payload;
+      const {slide, token} = action.payload;
+
+      dispatch(storeToken(token));
+
       if (slide) {
-        const {token} = action.payload;
-        dispatch(storeToken(token));
         dispatch(storeFirstSlide(slide));
+      } else {
+        fetchSkills(token)
+          .then(skills => {
+            return dispatch(receivedSkills(skills));
+          })
+          .catch(err => {
+            return dispatch(errorFetchingSkills(err));
+          });
       }
 
-      const initialView: ViewPath = slide ? VIEWS.slides : VIEWS.onboarding;
-
+      const initialView: ViewPath = slide ? VIEWS.slides : VIEWS.skills;
       dispatch(navigateTo(initialView));
-
-      // --------------
-      // demo service
-
-      // const language = 'fr';
-      // const universalRef = 'dis_xxx15';
-
-      // fetchCourse(token, language, universalRef).then(course => {
-      //   dispatch(receivedCourse(course));
-      // });
     }
 
     return next(action);

package/src/reducers/data/index.ts

@@ -0,0 +1,13 @@
+import {combineReducers} from 'redux';
+
+import progression from './progression';
+import skills from './skills';
+import slides from './slides';
+import token from './token';
+
+export default combineReducers({
+  progression,
+  skills,
+  slides,
+  token
+});