@coorpacademy/app-review 0.5.7-alpha.0 → 0.6.0

package/src/actions/api/test/post-progression.test.ts

@@ -96,7 +96,7 @@ test('should dispatch POST_PROGRESSION_SUCCESS and SLIDE_FETCH_REQUEST actions w
     {type: SET_CURRENT_SLIDE, payload: freeTextSlide}
   ];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedActions);
 
   await dispatch(postProgression('skill_12345'));
 });
@@ -121,7 +121,7 @@ test('should dispatch POST_PROGRESSION_FAILURE action when postProgression fails
     }
   ];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedActions);
 
   await dispatch(postProgression('skill_12345'));
 });

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

@@ -27,6 +27,6 @@ const initialState: StoreState = {
 test('should dispatch STORE_TOKEN action when storeToken is called', async t => {
   const expectedActions = [{type: STORE_TOKEN, payload: 'JWT.token'}];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedActions);
   await dispatch(storeToken('JWT.token'));
 });

package/src/actions/test/create-test-store.ts

@@ -2,8 +2,8 @@ import type {ExecutionContext} from 'ava';
 import constant from 'lodash/fp/constant';
 import {AnyAction, applyMiddleware, compose, createStore, Dispatch, Middleware, Store} from 'redux';
 import thunk from 'redux-thunk';
+import {ThunkOptions} from '../../types/common';
 import rootReducer, {StoreState} from '../../reducers';
-import {Services} from '../../types/common';
 
 const assertActionsMiddleware = (t: ExecutionContext, ACTIONS: AnyAction[]): Middleware =>
   constant((next: Dispatch) => (action: AnyAction): unknown => {
@@ -16,10 +16,10 @@ const assertActionsMiddleware = (t: ExecutionContext, ACTIONS: AnyAction[]): Mid
 export const createTestStore = (
   t: ExecutionContext,
   initialState: StoreState,
-  services: Services,
+  thunkOptions: ThunkOptions,
   actions: AnyAction[]
 ): Store<StoreState, AnyAction> => {
-  const thunkMiddleware = thunk.withExtraArgument({services});
+  const thunkMiddleware = thunk.withExtraArgument(thunkOptions);
   const enhancer = compose(applyMiddleware(thunkMiddleware, assertActionsMiddleware(t, actions)));
   return createStore(rootReducer, initialState, enhancer);
 };

package/src/actions/ui/navigation.ts

@@ -1,17 +1,13 @@
-import {AppOptions} from '../../types/common';
+import {Dispatch} from 'redux';
+import type {StoreState} from '../../reducers';
+import {ThunkOptions, AppOptions, ViewName} 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 = 'skills' | 'onboarding' | 'slides' | 'loader';
-
-export type NavigateTo = {
+export type NavigateToAction = {
   type: '@@navigation/NAVIGATE_TO';
-  payload: ViewPath;
+  payload: ViewName;
 };
 
-export type NavigateBack = {
+export type NavigateBackAction = {
   type: '@@navigation/NAVIGATE_BACK';
 };
 
@@ -20,11 +16,47 @@ export type StartApp = {
   payload: AppOptions;
 };
 
-export const navigateTo = (newPath: ViewPath): NavigateTo => ({
-  type: NAVIGATE_TO,
-  payload: newPath
-});
+export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
+export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
+export const START_APP = '@@navigation/START_APP';
+
+export const navigateTo =
+  (newViewName: ViewName) =>
+  async (
+    dispatch: Dispatch,
+    getState: () => StoreState,
+    {callbackOnViewChanged}: ThunkOptions
+  ): Promise<NavigateToAction> => {
+    const action: NavigateToAction = {
+      type: NAVIGATE_TO,
+      payload: newViewName
+    };
+
+    const res = await dispatch(action);
+
+    if (callbackOnViewChanged) {
+      callbackOnViewChanged(newViewName);
+    }
+
+    return res;
+  };
 
-export const navigateBack = (): NavigateBack => ({
-  type: NAVIGATE_BACK
-});
+export const navigateBack = async (
+  dispatch: Dispatch,
+  getState: () => StoreState,
+  {callbackOnViewChanged}: ThunkOptions
+): Promise<NavigateBackAction> => {
+  const action: NavigateBackAction = {
+    type: NAVIGATE_BACK
+  };
+
+  const res = await dispatch(action);
+
+  if (callbackOnViewChanged) {
+    const storeState: StoreState = getState();
+    const viewName = storeState.ui.navigation[storeState.ui.navigation.length - 1];
+    callbackOnViewChanged(viewName);
+  }
+
+  return res;
+};

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

@@ -73,7 +73,7 @@ test('editAnswer should throw an Error if the slide is not found', async t => {
   const {dispatch} = createTestStore(
     t,
     omit(['data', 'slides'], state) as StoreState,
-    services,
+    {services},
     expectedActions
   );
   await t.throws(
@@ -88,7 +88,7 @@ test('editAnswer should throw an Error for unsupported questions', async t => {
     ...freeTextSlide,
     question: {...freeTextSlide.question, type: 'unsupportedType'} as unknown as Question
   });
-  const {dispatch} = createTestStore(t, state, services, []);
+  const {dispatch} = createTestStore(t, state, {services}, []);
   await t.throws(
     () => dispatch(editAnswer(['Some kind of answer'])),
     undefined,
@@ -101,7 +101,7 @@ test('should dispatch EDIT_BASIC action when editAnswer is called', async t => {
   const expectedActions = [
     {type: ANSWER_EDIT.basic, meta: {slideRef: freeTextSlide.universalRef}, payload: ['My Answer']}
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   await dispatch(editAnswer(['My Answer']));
 });
 
@@ -112,7 +112,7 @@ test('should dispatch EDIT_QCM action when editAnswer is called', async t => {
   const expectedActions = [
     {type: ANSWER_EDIT.qcm, meta: {slideRef: qcmSlide.universalRef}, payload: ['My First Answer']}
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   await dispatch(editAnswer(['My Second Answer']));
 });
 
@@ -131,7 +131,7 @@ test('should dispatch EDIT_QCM_GRAPHIC action when editAnswer is called', async
       payload: ['My First Answer', 'My Third Answer']
     }
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   await dispatch(editAnswer(['My Second Answer']));
 });
 
@@ -146,7 +146,7 @@ test('should dispatch EDIT_QCM_DRAG action when editAnswer is called', async t =
       payload: ['My First Answer', 'My Second Answer', 'My Third Answer']
     }
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   await dispatch(editAnswer(['My Third Answer']));
 });
 
@@ -155,7 +155,7 @@ test('should dispatch EDIT_SLIDER action when editAnswer is called', async t =>
   const expectedActions = [
     {type: ANSWER_EDIT.slider, meta: {slideRef: sliderSlide.universalRef}, payload: ['5']}
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   await dispatch(editAnswer(['5']));
 });
 
@@ -169,6 +169,6 @@ test('should dispatch EDIT_TEMPLATE action when editAnswer is called', async t =
       payload: ['Catalogue', 'My Answer', 'étoiles']
     }
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   await dispatch(editAnswer(['Catalogue', 'My Answer', 'étoiles']));
 });

package/src/actions/ui/test/navigation.test.ts

@@ -0,0 +1,95 @@
+import test from 'ava';
+import {createTestStore} from '../../test/create-test-store';
+import type {StoreState} from '../../../reducers';
+import {services} from '../../../test/util/services.mock';
+import {navigateBack, navigateTo} from '../navigation';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234',
+    corrections: {},
+    rank: {start: 10, end: Number.NaN}
+  },
+  ui: {
+    positions: [0, 1, 2, 3, 4],
+    currentSlideRef: '',
+    navigation: ['loader', 'skills'],
+    answers: {},
+    slide: {},
+    showCongrats: false,
+    showQuitPopin: false
+  }
+};
+
+test('should dispatch NAVIGATE_TO', async t => {
+  const expectedActions = [
+    {
+      type: '@@navigation/NAVIGATE_TO',
+      payload: 'slides'
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedActions);
+  await dispatch(navigateTo('slides'));
+});
+
+test('should dispatch NAVIGATE_BACK', t => {
+  const expectedActions = [
+    {
+      type: '@@navigation/NAVIGATE_BACK'
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedActions);
+  dispatch(navigateBack);
+});
+
+test('should dispatch NAVIGATE_TO with callbackOnViewChanged', async t => {
+  t.plan(2);
+
+  const callbackOnViewChanged = (viewName: string): void => {
+    t.is(viewName, 'slides');
+  };
+
+  const expectedActions = [
+    {
+      type: '@@navigation/NAVIGATE_TO',
+      payload: 'slides'
+    }
+  ];
+
+  const {dispatch} = createTestStore(
+    t,
+    initialState,
+    {callbackOnViewChanged, services},
+    expectedActions
+  );
+
+  await dispatch(navigateTo('slides'));
+});
+
+test('should dispatch NAVIGATE_BACK with callbackOnViewChanged', async t => {
+  t.plan(2);
+
+  const callbackOnViewChanged = (viewName: string): void => {
+    t.is(viewName, 'loader');
+  };
+
+  const expectedActions = [
+    {
+      type: '@@navigation/NAVIGATE_BACK'
+    }
+  ];
+
+  const {dispatch} = createTestStore(
+    t,
+    initialState,
+    {callbackOnViewChanged, services},
+    expectedActions
+  );
+
+  await dispatch(navigateBack);
+});

package/src/actions/ui/test/next-slide.test.ts

@@ -60,7 +60,7 @@ test('should dispatch NEXT_SLIDE action when nextSlide is called and the progres
       }
     }
   ];
-  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  const {dispatch} = createTestStore(t, state, {services}, expectedActions);
   dispatch(nextSlide);
 });
 
@@ -82,6 +82,6 @@ test('should dispatch NEXT_SLIDE action when nextSlide is called and the progres
       }
     }
   ];
-  const {dispatch} = createTestStore(t, stateWithWrongAnswer, services, expectedActions);
+  const {dispatch} = createTestStore(t, stateWithWrongAnswer, {services}, expectedActions);
   dispatch(nextSlide);
 });

package/src/actions/ui/test/quit-popin.test.ts

@@ -27,13 +27,13 @@ const initialState: StoreState = {
 test('should dispatch OPEN_POPIN when openQuitPopin action is called', async t => {
   const expectedAction = [{type: OPEN_POPIN}];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedAction);
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedAction);
   await dispatch(openQuitPopin);
 });
 
 test('should dispatch CLOSE_POPIN when closeQuitPopin action is called', async t => {
   const expectedAction = [{type: CLOSE_POPIN}];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedAction);
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedAction);
   await dispatch(closeQuitPopin);
 });

package/src/actions/ui/test/slides.test.ts

@@ -28,6 +28,6 @@ const initialState: StoreState = {
 test('should dispatch SET_CURRENT_SLIDE action when setCurrentSlide is called', async t => {
   const expectedActions = [{type: SET_CURRENT_SLIDE, payload: freeTextSlide}];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  const {dispatch} = createTestStore(t, initialState, {services}, expectedActions);
   await dispatch(setCurrentSlide(freeTextSlide));
 });

package/src/common/index.ts

@@ -2,16 +2,6 @@ import concat from 'lodash/fp/concat';
 import slice from 'lodash/fp/slice';
 import type {ProgressionFromAPI} from '../types/common';
 
-export const VIEWS: {
-  readonly skills: 'skills';
-  readonly onboarding: 'onboarding';
-  readonly slides: 'slides';
-} = {
-  skills: 'skills',
-  onboarding: 'onboarding',
-  slides: 'slides'
-};
-
 export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
 
 export type SlideIndexes = typeof slideIndexes[number];

package/src/configure-store.ts

@@ -3,7 +3,7 @@ import thunk from 'redux-thunk';
 import rootReducer, {StoreState} from './reducers';
 import {getServices} from './services';
 
-import {AppOptions} from './types/common';
+import {AppOptions, ThunkOptions} from './types/common';
 
 export default function configureStore(options: AppOptions): Store<StoreState, AnyAction> {
   const _compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -14,7 +14,13 @@ export default function configureStore(options: AppOptions): Store<StoreState, A
       })
     : compose;
 
-  const thunkMiddleware = thunk.withExtraArgument({services: options.services || getServices()});
+  const thunkOptions: ThunkOptions = {
+    services: options.services || getServices(),
+    callbackOnViewChanged: options.callbackOnViewChanged
+  };
+
+  const thunkMiddleware = thunk.withExtraArgument(thunkOptions);
+
   const enhancer = _compose(applyMiddleware(thunkMiddleware));
   const store = createStore(rootReducer, undefined, enhancer);
 

package/src/index.tsx

@@ -3,26 +3,27 @@ import type {} from 'redux-thunk/extend-redux'; // https://github.com/reduxjs/re
 import {AnyAction, Store} from 'redux';
 import {useSelector, useDispatch, Provider} from 'react-redux';
 import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
+import {AppReviewProps} from '@coorpacademy/components/es/template/app-review/prop-types';
 
 import isEmpty from 'lodash/fp/isEmpty';
 import get from 'lodash/fp/get';
 import configureStore from './configure-store';
 
-import type {AppOptions} from './types/common';
+import type {AppOptions, ViewName} from './types/common';
 import type {StoreState} from './reducers';
 
-import {navigateTo, ViewPath} from './actions/ui/navigation';
+import {navigateBack, navigateTo} from './actions/ui/navigation';
 import {storeToken} from './actions/data/token';
 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 ConnectedApp = ({onQuitClick}: {onQuitClick: Function}): JSX.Element => {
+const ConnectedApp = ({onQuitClick}: {onQuitClick: () => void}): JSX.Element => {
   const dispatch = useDispatch();
 
-  const props = {
+  const props: AppReviewProps = {
+    navigateBack: () => dispatch(navigateBack),
     viewName: useSelector(
       (state: StoreState) => state.ui.navigation[state.ui.navigation.length - 1]
     ),
@@ -30,6 +31,7 @@ const ConnectedApp = ({onQuitClick}: {onQuitClick: Function}): JSX.Element => {
     skills: useSelector((state: StoreState) => mapStateToSkillsProps(state)),
     onboarding: {}
   };
+
   return <AppReviewTemplate {...props} />;
 };
 
@@ -82,7 +84,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
       return;
     }
 
-    const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
+    const initialView: ViewName = skillRef ? 'slides' : 'skills';
     store.dispatch(navigateTo(initialView));
   }, [isProgressionCreated, options, store]);
 

package/src/reducers/ui/navigation.ts

@@ -1,8 +1,8 @@
 import {
-  type NavigateTo,
-  type NavigateBack,
-  NAVIGATE_BACK,
-  NAVIGATE_TO
+  NavigateToAction,
+  NavigateBackAction,
+  NAVIGATE_TO,
+  NAVIGATE_BACK
 } from '../../actions/ui/navigation';
 
 export type NavigationState = Array<'skills' | 'onboarding' | 'slides' | 'loader'>;
@@ -10,7 +10,7 @@ export type NavigationState = Array<'skills' | 'onboarding' | 'slides' | 'loader
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: NavigationState = [],
-  action: NavigateTo | NavigateBack
+  action: NavigateToAction | NavigateBackAction
 ): NavigationState => {
   switch (action.type) {
     case NAVIGATE_TO: {

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

@@ -1,19 +1,19 @@
 import test from 'ava';
 import reducer from '../navigation';
-import {NavigateTo, navigateBack, navigateTo} from '../../../actions/ui/navigation';
+import {NavigateToAction, NAVIGATE_BACK, NAVIGATE_TO} from '../../../actions/ui/navigation';
 
 test('should have initial value', t => {
-  const state = reducer(undefined, {} as NavigateTo);
+  const state = reducer(undefined, {} as NavigateToAction);
   t.deepEqual(state, []);
 });
 
 test('should set the value of NAVIGATE_TO and NAVIGATE_BACK action', t => {
-  const state = reducer([], navigateTo('loader'));
+  const state = reducer([], {type: NAVIGATE_TO, payload: 'loader'});
   t.deepEqual(state, ['loader']);
 
-  const updatedState = reducer(state, navigateTo('skills'));
+  const updatedState = reducer(state, {type: NAVIGATE_TO, payload: 'skills'});
   t.deepEqual(updatedState, ['loader', 'skills']);
 
-  const _updatedState = reducer(updatedState, navigateBack());
+  const _updatedState = reducer(updatedState, {type: NAVIGATE_BACK});
   t.deepEqual(_updatedState, ['loader']);
 });

package/src/types/common.ts

@@ -1,3 +1,5 @@
+export type ViewName = 'skills' | 'onboarding' | 'slides' | 'loader';
+
 export type ChoiceFromAPI = {
   _id: string;
   id?: string;
@@ -175,16 +177,18 @@ export type Services = {
   ): Promise<SlideIdFromAPI[]>;
 };
 
-export type Options = {
-  services: Services;
-};
-
 export type AppOptions = {
   token: string;
   skillRef?: string;
   services: Services;
-  onQuitClick: Function;
+  onQuitClick: () => void;
   url: string;
+  callbackOnViewChanged?: (viewName: ViewName) => void;
+};
+
+export type ThunkOptions = {
+  callbackOnViewChanged?: AppOptions['callbackOnViewChanged'];
+  services: Services;
 };
 
 export type JWT = {

package/src/views/skills/index.ts

@@ -9,12 +9,10 @@ type SkillCard = {
   reviseLabel: string;
   reviseAriaLabel: string;
   isCustom: boolean;
-  onClick: Function;
+  onClick: () => void;
 };
 
 type NoSkillsProps = {
-  titleNoSkills: string;
-  textNoSkills: string;
   iconSkillAriaLabel: string;
 };
 
@@ -31,8 +29,6 @@ export {SkillsProps};
 export const mapStateToSkillsProps = (state: StoreState): SkillsProps => {
   return {
     title: '@todo title',
-    titleNoSkills: '@todo titleNoSkills',
-    textNoSkills: '@todo textNoSkills',
     iconSkillAriaLabel: '@todo iconSkillAriaLabel',
     isLoading: false,
     isLoadingAriaLabel: '@todo loading',

package/src/views/skills/test/skills.test.ts

@@ -29,8 +29,6 @@ test('should create initial props when there are no skills on the state', t => {
 
   t.deepEqual(props, {
     title: '@todo title',
-    titleNoSkills: '@todo titleNoSkills',
-    textNoSkills: '@todo textNoSkills',
     iconSkillAriaLabel: '@todo iconSkillAriaLabel',
     isLoading: false,
     isLoadingAriaLabel: '@todo loading',
@@ -76,8 +74,6 @@ test('should create initial props when skills on the state', t => {
 
   t.deepEqual(omit('listSkills', props), {
     title: '@todo title',
-    titleNoSkills: '@todo titleNoSkills',
-    textNoSkills: '@todo textNoSkills',
     iconSkillAriaLabel: '@todo iconSkillAriaLabel',
     isLoading: false,
     isLoadingAriaLabel: '@todo loading'