@coorpacademy/app-review 0.1.15 → 0.1.16

package/lib/{helpers → views/slides}/test/map-api-slide-to-ui.test.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import test from 'ava';
+import identity from 'lodash/fp/identity';
 import { mapApiSlideToUi } from '../map-api-slide-to-ui';
 import { qcmUISlide, qcmSlide } from './fixtures/qcm';
 import { qcmDragUISlide, qcmDragSlide } from './fixtures/qcm-drag';
@@ -18,26 +19,35 @@ import { qcmGraphicUISlide, qcmGraphicSlide } from './fixtures/qcm-graphic';
 import { textTemplateSlide, textTemplateUISlide } from './fixtures/text-template';
 import { selectTemplateSlide, selectTemplateUISlide } from './fixtures/select-template';
 import { sliderSlide, sliderUISlide } from './fixtures/slider';
-var _mapApiSlideToUi = mapApiSlideToUi({ translate: function (text) { return text; } });
+var _mapApiSlideToUi = mapApiSlideToUi(identity);
 var macro = test.macro({
     title: function (providedTitle) {
         return "should handle ".concat(providedTitle, " conversion").trim();
     },
     exec: function (t, arg) {
-        t.deepEqual(JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide))), JSON.parse(JSON.stringify(arg.expectedUiSlide)));
+        t.deepEqual(JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide, arg.answers))), JSON.parse(JSON.stringify(arg.expectedUiSlide)));
     }
 });
-test('qcm', macro, { slide: qcmSlide, expectedUiSlide: qcmUISlide });
-test('qcm drag', macro, { slide: qcmDragSlide, expectedUiSlide: qcmDragUISlide });
-test('qcm graphic', macro, { slide: qcmGraphicSlide, expectedUiSlide: qcmGraphicUISlide });
-test('text template', macro, { slide: textTemplateSlide, expectedUiSlide: textTemplateUISlide });
+test('qcm', macro, { slide: qcmSlide, answers: [], expectedUiSlide: qcmUISlide });
+test('qcm drag', macro, { slide: qcmDragSlide, answers: [], expectedUiSlide: qcmDragUISlide });
+test('qcm graphic', macro, {
+    slide: qcmGraphicSlide,
+    answers: [],
+    expectedUiSlide: qcmGraphicUISlide
+});
+test('text template', macro, {
+    slide: textTemplateSlide,
+    answers: [],
+    expectedUiSlide: textTemplateUISlide
+});
 test('select template', macro, {
     slide: selectTemplateSlide,
+    answers: [],
     expectedUiSlide: selectTemplateUISlide
 });
-test('free text', macro, { slide: freeTextSlide, expectedUiSlide: freeTextUISlide });
-test('slider', macro, { slide: sliderSlide, expectedUiSlide: sliderUISlide });
+test('free text', macro, { slide: freeTextSlide, answers: [], expectedUiSlide: freeTextUISlide });
+test('slider', macro, { slide: sliderSlide, answers: [], expectedUiSlide: sliderUISlide });
 test('should throw an error if the question type can not be handled', function (t) {
     var faultySlide = __assign(__assign({}, qcmSlide), { question: { type: 'lol' } });
-    t.throws(function () { return _mapApiSlideToUi(faultySlide); });
+    t.throws(function () { return _mapApiSlideToUi(faultySlide, []); });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -40,7 +40,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.9",
+    "@coorpacademy/components": "10.22.10",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -77,5 +77,5 @@
     "ts-node": "^10.8.1",
     "typescript": "^4.7.4"
   },
-  "gitHead": "0f66b53a129b22c69cb3db1f3ae3993903cd8df3"
+  "gitHead": "508e3fdb30d727840bd9b13e9402c2970eb17731"
 }

package/src/actions/api/fetch-skills.ts

@@ -1,6 +1,5 @@
 import buildTask from '@coorpacademy/redux-task';
-import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
-import {AnyAction} from 'redux';
+import {Dispatch} from 'redux';
 import type {StoreState} from '../../reducers';
 import {Options, Skill} from '../../types/common';
 
@@ -8,17 +7,18 @@ export const SKILLS_FETCH_REQUEST = '@@skills/FETCH_REQUEST' as const;
 export const SKILLS_FETCH_SUCCESS = '@@skills/FETCH_SUCCESS' as const;
 export const SKILLS_FETCH_FAILURE = '@@skills/FETCH_FAILURE' as const;
 
-export interface ReceivedSkills extends AnyAction {
+export type ReceivedSkills = {
   type: '@@skills/FETCH_SUCCESS';
   payload: Skill[];
-}
+};
 
-export type FetchSkillsAction = ThunkAction<Promise<void>, StoreState, Options, AnyAction>;
-type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
+export const fetchSkills =
+  (token: string) =>
+  async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
+    const action = buildTask({
+      types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
+      task: () => services.fetchSkills(token)
+    });
 
-export const fetchSkills = (token: string): FetchSkillsAction =>
-  buildTask({
-    types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) =>
-      services.fetchSkills(token)
-  });
+    await dispatch(action);
+  };

package/src/actions/api/fetch-slide.ts

@@ -1,45 +1,49 @@
-import type {AnyAction} from 'redux';
-import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
+import type {Dispatch} from 'redux';
 import buildTask from '@coorpacademy/redux-task';
 import get from 'lodash/fp/get';
 import has from 'lodash/fp/has';
 import isEmpty from 'lodash/fp/isEmpty';
 import type {StoreState} from '../../reducers';
-import type {Options, ProgressionFromAPI, SlideFromAPI} from '../../types/common';
+import type {Options, SlideFromAPI} from '../../types/common';
 import {setCurrentSlide} from '../ui/slides';
 
 export const SLIDE_FETCH_REQUEST = '@@slides/FETCH_REQUEST' as const;
 export const SLIDE_FETCH_SUCCESS = '@@slides/FETCH_SUCCESS' as const;
 export const SLIDE_FETCH_FAILURE = '@@slides/FETCH_FAILURE' as const;
 
-export interface ReceivedSlide extends AnyAction {
+export type FetchSlide = {
+  type: typeof SLIDE_FETCH_REQUEST;
+  meta: {slideRef: string};
+};
+
+export type ReceivedSlide = {
   type: typeof SLIDE_FETCH_SUCCESS;
   payload: SlideFromAPI;
-}
+  meta: {slideRef: string};
+};
 
-export type FetchSlideAction = ThunkAction<Promise<SlideFromAPI>, StoreState, Options, AnyAction>;
-type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
+export const fetchSlide =
+  (slideRef: string, token: string) =>
+  async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
+    const action = buildTask({
+      types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
+      bailout: (state: StoreState): boolean => {
+        return has(`data.slide.${slideRef}`, state);
+      },
+      task: () => {
+        return services.fetchSlide(slideRef, token);
+      },
+      meta: {slideRef}
+    });
+    const response = await dispatch(action);
 
-export const fetchSlide = (
-  progressionFromAPI: ProgressionFromAPI,
-  token: string
-): FetchSlideAction =>
-  buildTask({
-    types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
-    bailout: (state: StoreState): boolean => {
-      const {ref: slideRef} = get('state.nextContent', progressionFromAPI);
-      return has(`data.slide.${slideRef}`, state);
-    },
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) => {
-      const {ref: slideRef} = get('state.nextContent', progressionFromAPI);
-      return services.fetchSlide(slideRef, token).then((slideFromAPI: SlideFromAPI | void) => {
-        if (!slideFromAPI) throw new Error('Slide not found');
-        const state = getState();
-        const slides = get('data.progression.state.slides', state);
-        if (isEmpty(slides)) {
-          dispatch(setCurrentSlide(slideFromAPI));
-        }
-        return slideFromAPI;
-      });
+    if (response.type === SLIDE_FETCH_SUCCESS) {
+      const slideFromAPI = response.payload;
+      if (!slideFromAPI) throw new Error('Slide not found');
+      const state = getState();
+      const slides = get('data.progression.state.slides', state);
+      if (isEmpty(slides)) {
+        dispatch(setCurrentSlide(slideFromAPI));
+      }
     }
-  });
+  };

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

@@ -1,5 +1,4 @@
-import type {AnyAction} from 'redux';
-import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
+import type {Dispatch} from 'redux';
 import buildTask from '@coorpacademy/redux-task';
 import {Options, ProgressionFromAPI} from '../../types/common';
 import type {StoreState} from '../../reducers';
@@ -9,27 +8,25 @@ export const POST_PROGRESSION_REQUEST = '@@progression/POST_REQUEST' as const;
 export const POST_PROGRESSION_SUCCESS = '@@progression/POST_SUCCESS' as const;
 export const POST_PROGRESSION_FAILURE = '@@progression/POST_FAILURE' as const;
 
-export interface ReceiveProgression extends AnyAction {
+export type ReceiveProgression = {
   type: typeof POST_PROGRESSION_SUCCESS;
   payload: ProgressionFromAPI;
-}
+};
 
-export type PostProgressionAction = ThunkAction<
-  Promise<ProgressionFromAPI>,
-  StoreState,
-  Options,
-  AnyAction
->;
+export const postProgression =
+  (skillRef: string, token: string) =>
+  async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
+    const action = buildTask({
+      types: [POST_PROGRESSION_REQUEST, POST_PROGRESSION_SUCCESS, POST_PROGRESSION_FAILURE],
+      task: () => {
+        return services.postProgression(skillRef, token);
+      }
+    });
+    const response = await dispatch(action);
 
-type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
-
-export const postProgression = (skillRef: string, token: string): PostProgressionAction =>
-  buildTask({
-    types: [POST_PROGRESSION_REQUEST, POST_PROGRESSION_SUCCESS, POST_PROGRESSION_FAILURE],
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) => {
-      return services.postProgression(skillRef, token).then((progression: ProgressionFromAPI) => {
-        dispatch(fetchSlide(progression, token));
-        return progression;
-      });
+    if (response.type === POST_PROGRESSION_SUCCESS) {
+      const progression = response.payload;
+      const slideRef = progression.state.nextContent.ref;
+      await dispatch(fetchSlide(slideRef, token));
     }
-  });
+  };

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

@@ -0,0 +1,25 @@
+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 rootReducer, {StoreState} from '../../../reducers';
+import {Services} from '../../../types/common';
+
+const assertActionsMiddleware = (t: ExecutionContext, ACTIONS: AnyAction[]): Middleware =>
+  constant((next: Dispatch) => (action: AnyAction): unknown => {
+    const expectedAction = ACTIONS.shift();
+    if (!expectedAction) throw new Error(`Missing {type: "${action.type}"} action`);
+    t.deepEqual(action, expectedAction);
+    return next(action);
+  });
+
+export const createTestStore = (
+  t: ExecutionContext,
+  initialState: StoreState,
+  services: Services,
+  actions: AnyAction[]
+): Store => {
+  const thunkMiddleware = thunk.withExtraArgument({services});
+  const enhancer = compose(applyMiddleware(thunkMiddleware, assertActionsMiddleware(t, actions)));
+  return createStore(rootReducer, initialState, enhancer);
+};

package/src/actions/api/test/fetch-skills.test.ts

@@ -0,0 +1,70 @@
+import test from 'ava';
+import {Services} from '../../../types/common';
+import {
+  fetchSkills,
+  SKILLS_FETCH_FAILURE,
+  SKILLS_FETCH_REQUEST,
+  SKILLS_FETCH_SUCCESS
+} from '../fetch-skills';
+import {services as mockedServices} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {createTestStore} from './create-test-store';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: []
+  }
+};
+
+test('should dispatch SKILLS_FETCH_SUCCESS actions when fetchSkills return a list of skills', async t => {
+  const services: Services = {
+    ...mockedServices,
+    fetchSkills: token => {
+      t.is(token, '1234');
+      return Promise.resolve([]);
+    }
+  };
+
+  const expectedActions = [
+    {type: SKILLS_FETCH_REQUEST},
+    {
+      type: SKILLS_FETCH_SUCCESS,
+      payload: []
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchSkills('1234'));
+});
+
+test('should dispatch SKILLS_FETCH_FAILURE action when fetchSkills fails', async t => {
+  const services: Services = {
+    ...mockedServices,
+    fetchSkills: token => {
+      t.is(token, '1234');
+      return Promise.reject(new Error('unexpected'));
+    }
+  };
+
+  const expectedActions = [
+    {type: SKILLS_FETCH_REQUEST},
+    {
+      type: SKILLS_FETCH_FAILURE,
+      payload: new Error('unexpected'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchSkills('1234'));
+});

package/src/actions/api/test/fetch-slide.test.ts

@@ -0,0 +1,77 @@
+import test from 'ava';
+import {Services} from '../../../types/common';
+import {
+  fetchSlide,
+  SLIDE_FETCH_FAILURE,
+  SLIDE_FETCH_REQUEST,
+  SLIDE_FETCH_SUCCESS
+} from '../fetch-slide';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+import {services as mockedServices} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {SET_CURRENT_SLIDE} from '../../ui/slides';
+import {createTestStore} from './create-test-store';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: []
+  }
+};
+
+test('should dispatch FETCH_SUCCESS and SET_CURRENT_SLIDE actions when fetchSlide return a slide', async t => {
+  const services: Services = {
+    ...mockedServices,
+    fetchSlide: (slideRef, token) => {
+      t.is(token, '1234');
+      t.is(slideRef, 'sli_VJYjJnJhg');
+      return Promise.resolve(freeTextSlide);
+    }
+  };
+
+  const expectedActions = [
+    {type: SLIDE_FETCH_REQUEST, meta: {slideRef: 'sli_VJYjJnJhg'}},
+    {
+      type: SLIDE_FETCH_SUCCESS,
+      meta: {slideRef: 'sli_VJYjJnJhg'},
+      payload: freeTextSlide
+    },
+    {type: SET_CURRENT_SLIDE, payload: freeTextSlide}
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchSlide('sli_VJYjJnJhg', '1234'));
+});
+
+test('should dispatch SLIDE_FETCH_FAILURE action when fetchSlide fails', async t => {
+  const services: Services = {
+    ...mockedServices,
+    fetchSlide: (slideRef, token) => {
+      t.is(token, '1234');
+      t.is(slideRef, 'slide_ref');
+      return Promise.reject(new Error('error'));
+    }
+  };
+
+  const expectedActions = [
+    {type: SLIDE_FETCH_REQUEST, meta: {slideRef: 'slide_ref'}},
+    {
+      type: SLIDE_FETCH_FAILURE,
+      meta: {slideRef: 'slide_ref'},
+      payload: new Error('error'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchSlide('slide_ref', '1234'));
+});

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

@@ -0,0 +1,119 @@
+import test from 'ava';
+import {ProgressionFromAPI, Services} from '../../../types/common';
+import {
+  postProgression,
+  POST_PROGRESSION_REQUEST,
+  POST_PROGRESSION_SUCCESS,
+  POST_PROGRESSION_FAILURE
+} from '../post-progression';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+import {services as mockedServices} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS} from '../fetch-slide';
+import {SET_CURRENT_SLIDE} from '../../ui/slides';
+import {createTestStore} from './create-test-store';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: []
+  }
+};
+
+test('should dispatch POST_PROGRESSION_SUCCESS and SLIDE_FETCH_REQUEST actions when postProgression return a progression', async t => {
+  const progression: ProgressionFromAPI = {
+    _id: '62b1d1087aa12f00253f40ee',
+    content: {
+      ref: '_skill-ref',
+      type: 'skill'
+    },
+    engine: {
+      ref: 'review'
+    },
+    state: {
+      allAnswers: [],
+      isCorrect: true,
+      nextContent: {
+        ref: 'sli_VJYjJnJhg',
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [],
+      step: {
+        current: 1
+      },
+      stars: 0
+    }
+  };
+
+  const services: Services = {
+    ...mockedServices,
+    postProgression: (skillRef, token) => {
+      t.is(token, '1234');
+      t.is(skillRef, 'skill_12345');
+      return Promise.resolve(progression);
+    },
+    fetchSlide: (slideRef, token) => {
+      t.is(token, '1234');
+      t.is(slideRef, 'sli_VJYjJnJhg');
+      return Promise.resolve(freeTextSlide);
+    }
+  };
+
+  const expectedActions = [
+    {type: POST_PROGRESSION_REQUEST},
+    {
+      type: POST_PROGRESSION_SUCCESS,
+      payload: progression
+    },
+    {
+      type: SLIDE_FETCH_REQUEST,
+      meta: {
+        slideRef: 'sli_VJYjJnJhg'
+      }
+    },
+    {
+      type: SLIDE_FETCH_SUCCESS,
+      meta: {
+        slideRef: 'sli_VJYjJnJhg'
+      },
+      payload: freeTextSlide
+    },
+    {type: SET_CURRENT_SLIDE, payload: freeTextSlide}
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(postProgression('skill_12345', '1234'));
+});
+
+test('should dispatch POST_PROGRESSION_FAILURE action when postProgression fails', async t => {
+  const services: Services = {
+    ...mockedServices,
+    postProgression: (skillRef, token) => {
+      t.is(token, '1234');
+      t.is(skillRef, 'skill_12345');
+      return Promise.reject(new Error('error'));
+    }
+  };
+
+  const expectedActions = [
+    {type: POST_PROGRESSION_REQUEST},
+    {
+      type: POST_PROGRESSION_FAILURE,
+      payload: new Error('error'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(postProgression('skill_12345', '1234'));
+});

package/src/actions/ui/answers.ts

@@ -0,0 +1,16 @@
+import {Dispatch} from 'redux';
+
+export const EDIT_BASIC = '@@answer/EDIT_BASIC' as const;
+export type EditBasicAction = {
+  type: typeof EDIT_BASIC;
+  payload: string[];
+};
+
+export const editAnswer =
+  (answer: string) =>
+  (dispatch: Dispatch): EditBasicAction => {
+    return dispatch({
+      type: EDIT_BASIC,
+      payload: [answer]
+    });
+  };

package/src/fixtures/temp-fixture.ts

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

package/src/index.tsx

@@ -1,7 +1,7 @@
 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';
 
@@ -11,43 +11,28 @@ import configureStore from './configure-store';
 
 import type {AppOptions} from './types/common';
 import type {StoreState} from './reducers';
-import type {SlidesViewStaticProps} from './types/views/slides';
 
-import {Dispatchers} from './actions';
-import {validateSlide} from './actions/ui/slides';
-
-import {navigateTo, navigateBack, ViewPath} from './actions/ui/navigation';
+import {navigateTo, ViewPath} 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, SkillsProps} from './views/skills';
-
-type StaticProps = {
-  viewName: 'skills' | 'onboarding' | 'slides' | 'loader';
-  slides: SlidesViewStaticProps | null;
-  skills: SkillsProps | null;
-};
+import {mapStateToSkillsProps} from './views/skills';
 
-const mapDispatchToProps: Dispatchers = {
-  navigateTo,
-  navigateBack,
-  validateSlide
-};
+const ConnectedApp = (): JSX.Element => {
+  const dispatch = useDispatch();
 
-const getCurrentViewName = (storeState: StoreState): ViewPath =>
-  storeState.ui.navigation[storeState.ui.navigation.length - 1];
-
-const mapStateToProps = (state: StoreState): StaticProps => {
-  return {
-    viewName: getCurrentViewName(state),
-    slides: mapStateToSlidesProps(state),
-    skills: mapStateToSkillsProps(state)
+  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 App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
+  return <AppReviewTemplate {...props} />;
+};
 
 const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
@@ -109,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;