@coorpacademy/app-review 0.1.7 → 0.1.8

package/src/actions/index.ts

@@ -1,27 +1,21 @@
-import {
-  StoreFirstSlide,
-  updateSlidesOnValidation,
-  updateSlidesOnNext,
-  validateSlide
-} from './data/slides';
-import {ErrorFetchingSkills, ReceivedSkills} from './data/skills';
+import {updateSlidesOnValidation, updateSlidesOnNext, validateSlide} from './data/slides';
 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';
-import {ErrorCreatingProgression, ReceiveProgression} from './data/progression';
+import {ReceivedSlide} from './api/fetch-slide';
+import {ReceiveProgression} from './api/post-progression';
+import {ReceivedSkills} from './api/fetch-skills';
 
 export type Action =
   | NavigateBack
   | NavigateTo
   | ReceivedSkills
-  | ErrorFetchingSkills
   | StartApp
-  | StoreFirstSlide
+  | ReceivedSlide
   | StoreToken
-  | ErrorCreatingProgression
   | ReceiveProgression;
 
 export type Dispatchers = {

package/src/actions/ui/navigation.ts

@@ -28,8 +28,3 @@ export const navigateTo = (newPath: ViewPath): NavigateTo => ({
 export const navigateBack = (): NavigateBack => ({
   type: NAVIGATE_BACK
 });
-
-export const startApp = (options: AppOptions): StartApp => ({
-  type: START_APP,
-  payload: options
-});

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,43 +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 onReceiveProgression from './middlewares/on-receive-progression';
+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 {ProgressionState} from './reducers/data/progression';
-
-// -----------------------------------------------------------------------------
-
-type DataState = {
-  isFetching?: boolean;
-  progression?: ProgressionState;
-  skills: SkillsState;
-  slides: SlidesState;
-  token?: TokenState;
-};
-
-export type StoreState = {
-  ui: {
-    navigation: NavigationState;
-    stepItems: StepItemsState;
-    finishedSlides: FinishedSlidesState;
-    reviewStatus: ReviewStatusState;
-    // progression: UiProgression;
-  };
-  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',
@@ -46,7 +14,8 @@ export default function configureStore(): Store<StoreState, AnyAction> {
       })
     : compose;
 
-  const enhancer = _compose(applyMiddleware(thunk, onStartApp, onReceiveProgression));
+  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

@@ -4,19 +4,24 @@ 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';
 
 // -----------------------------------------------------------------------------
 
@@ -105,11 +110,13 @@ const mapStateToSlidesProps = (state: StoreState): SlidesViewStaticProps | null
 
 // -----------------------------------------------------------------------------
 
-const mapStateToProps = (state: StoreState): StaticProps => ({
-  viewName: getCurrentViewName(state),
-  slides: mapStateToSlidesProps(state),
-  skills: mapStateToSkillsProps(state)
-});
+const mapStateToProps = (state: StoreState): StaticProps => {
+  return {
+    viewName: getCurrentViewName(state),
+    slides: mapStateToSlidesProps(state),
+    skills: mapStateToSkillsProps(state)
+  };
+};
 
 // Props = StaticProps && Dispatchers
 
@@ -119,22 +126,39 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
 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]);
+
+  useEffect(() => {
+    if (store === null) return;
+
+    const {skillRef, token} = options;
+    skillRef
+      ? store.dispatch(postProgression(skillRef, token))
+      : store.dispatch(fetchSkills(token));
   }, [options, store]);
 
-  if (!store || !appStarted) return null;
+  if (!store) return null;
 
   const {templateContext: values} = options;
 

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,11 +1,7 @@
 import {getOr} from 'lodash/fp';
-import {ReceiveProgression, RECEIVE_PROGRESSION} from '../../actions/data/progression';
 import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/data/slides';
+import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../actions/api/post-progression';
 
-// -----------------------------------------------------------------------------
-
-// TODO: transform this into UI data / fix on components' repo when
-// fetch slide is addressed
 export type ProgressionState = {
   _id?: string;
   state: {
@@ -22,17 +18,11 @@ export type ProgressionState = {
   // TO refactor: (slideNumber)
   // virtual field
   slideNumber?: number;
-} | null;
-
-// -----------------------------------------------------------------------------
-
-export const initialState: ProgressionState = null;
-
-// -----------------------------------------------------------------------------
+} | null; // TODO: ça ressemble beaucoup à ProgressionFromAPI et ça devrait l'être
 
 const reducer = (
   // eslint-disable-next-line default-param-last
-  state: ProgressionState = initialState,
+  state: ProgressionState = null,
   action: ValidateSlide | ReceiveProgression
 ): ProgressionState => {
   switch (action.type) {
@@ -57,8 +47,8 @@ const reducer = (
         }
       };
     }
-    case RECEIVE_PROGRESSION: {
-      const {progression} = action.payload;
+    case POST_PROGRESSION_SUCCESS: {
+      const progression = action.payload;
       return progression;
     }
     default:

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,26 +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 UISlide} 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
@@ -121,7 +117,7 @@ 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: {
+    case SLIDE_FETCH_SUCCESS: {
       // TODO: An intermediate slide transform is needed here (or in fetchSlide)
       // const apiSlide = action.payload;
       // apiSlide adapt to uiSlide

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,

package/src/reducers/ui/navigation.ts

@@ -5,16 +5,11 @@ import {
   NAVIGATE_TO
 } from '../../actions/ui/navigation';
 
-// -----------------------------------------------------------------------------
-
 export type NavigationState = Array<'skills' | 'onboarding' | 'slides'>;
-export const initialState: NavigationState = [];
-
-// -----------------------------------------------------------------------------
 
 const reducer = (
   // eslint-disable-next-line default-param-last
-  state: NavigationState = initialState,
+  state: NavigationState = [],
   action: NavigateTo | NavigateBack
 ): NavigationState => {
   switch (action.type) {

package/src/reducers/ui/review-status.ts

@@ -1,15 +1,10 @@
 import {UpdateReviewStatus, UPDATE_REVIEW_STATUS} from '../../actions/ui/review-status';
 
-// -----------------------------------------------------------------------------
-
 export type ReviewStatusState = 'finished' | 'ongoing';
-export const initialState: ReviewStatusState = 'ongoing';
-
-// -----------------------------------------------------------------------------
 
 const reducer = (
   // eslint-disable-next-line default-param-last
-  state: ReviewStatusState = initialState,
+  state: ReviewStatusState = 'ongoing',
   action: UpdateReviewStatus
 ): ReviewStatusState => {
   switch (action.type) {
@@ -21,6 +16,4 @@ const reducer = (
   }
 };
 
-// -----------------------------------------------------------------------------
-
 export default reducer;

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

@@ -1,36 +1,27 @@
 import get from 'lodash/fp/get';
 import has from 'lodash/fp/has';
 import map from 'lodash/fp/map';
+import {IconValue, FinishedSlides} from '../../types/common';
 import {
-  IconValue,
   StepItemsAction,
   UPDATE_STEP_ITEMS_ON_NEXT,
   UPDATE_STEP_ITEMS_ON_VALIDATION
 } from '../../actions/ui/step-items';
 import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../../common';
-import {FinishedSlidesState} from './finished-slides';
 
-// -----------------------------------------------------------------------------
-
-type StepItem = {
+export type StepItem = {
   current: boolean;
   icon: IconValue;
   value: string;
 };
 
-export type StepItems = {
+export type StepItemsState = {
   slideNumbers: number[];
   [key: number]: StepItem;
 };
 
-// -----------------------------------------------------------------------------
-
-export type StepItemsState = StepItems;
-
-// -----------------------------------------------------------------------------
-
 const getInitialState = (): StepItemsState => {
-  const state: StepItems = {
+  const state: StepItemsState = {
     slideNumbers
   };
 
@@ -55,7 +46,7 @@ const getNextIndex = (currentIndex: number): number =>
 // they have to be skipped)
 const calculateNextStepIndex = (
   currentStepNumber: number,
-  finishedSlides: FinishedSlidesState,
+  finishedSlides: FinishedSlides,
   lastVisitedIndex = -1
 ): number => {
   // only one slide remaining, the step should stay on the same number

package/src/services/fetch-skills.ts

@@ -1,39 +1,14 @@
 import crossFetch from 'cross-fetch';
 import decode from 'jwt-decode';
 
-import {JWT} from '../types/common';
-import {Skills} from '../types/skills';
+import {JWT, Skill} from '../types/common';
 import {toJSON} from './tools/fetch-responses';
-import mockFetchSkills from './fetch-skills.mock';
 
-// -----------------------------------------------------------------------------
-
-type FetchSkills = (token: string) => Promise<Skills>;
-type CreateFetchSkills = (fetch: typeof crossFetch) => FetchSkills;
-type CreateDefaultFetchSkills = () => FetchSkills;
-
-// -----------------------------------------------------------------------------
-
-const fetchSkills: CreateFetchSkills = fetch => async token => {
+export const fetchSkills = async (token: string): Promise<Skill[]> => {
   const {user: userId, host}: JWT = decode(token);
-  const response = await fetch(`${host}/api/v2/skills/review/user/${userId}`, {
+  const response = await crossFetch(`${host}/api/v2/skills/review/user/${userId}`, {
     headers: {authorization: token}
   });
 
-  return toJSON<Skills>(response);
+  return toJSON<Skill[]>(response);
 };
-
-// -----------------------------------------------------------------------------
-
-const createFetchSkills: CreateDefaultFetchSkills = () => {
-  if (process.env.SERVICES !== 'mocks') {
-    return fetchSkills(crossFetch);
-  }
-
-  return fetchSkills(mockFetchSkills);
-};
-
-// -----------------------------------------------------------------------------
-
-export {fetchSkills};
-export default createFetchSkills();

package/src/services/fetch-slide.ts

@@ -1,43 +1,15 @@
 import crossFetch from 'cross-fetch';
-// import decode from 'jwt-decode';
+import decode from 'jwt-decode';
 
-import {SlideFromAPI} from '../actions/data/slides';
-// import {JWT} from '../types/common';
-// import {toJSON} from './tools/fetch-responses';
-import {okJSONResponse} from './tools/fetch.mocks';
+import {JWT, SlideFromAPI} from '../types/common';
+import {toJSON} from './tools/fetch-responses';
 
-// -----------------------------------------------------------------------------
+export const fetchSlide = async (slideRef: string, token: string): Promise<SlideFromAPI | void> => {
+  const {host}: JWT = decode(token);
+  const response = await crossFetch(`${host}/api/v2/slide/${slideRef}`, {
+    headers: {authorization: token}
+  });
 
-type FetchSlide = (slideRef: string, token: string) => Promise<SlideFromAPI>;
-type FetchSlideBuilder = (fetch: typeof crossFetch) => FetchSlide;
-type DefaultFetchSlideBuilder = () => FetchSlide;
-
-// -----------------------------------------------------------------------------
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unicorn/consistent-function-scoping, require-await
-const fetchSlide: FetchSlideBuilder = fetch => async (slideRef: string, token: string) => {
-  // const {host}: JWT = decode(token);
-  // const response = await fetch(`${host}/api/v2/slide/${slideRef}`, {
-  //   headers: {authorization: token}
-  // });
-
-  // const slide = (await toJSON(response)) as SlideFromAPI;
-  // return slide;
-  return {} as SlideFromAPI;
+  const slide = (await toJSON(response)) as SlideFromAPI;
+  return slide;
 };
-
-// -----------------------------------------------------------------------------
-
-const createFetchSlide: DefaultFetchSlideBuilder = () => {
-  if (process.env.SERVICES !== 'mocks') {
-    return fetchSlide(crossFetch);
-  }
-
-  // TODO: use an appropriate mock
-  return fetchSlide(okJSONResponse({}));
-};
-
-// -----------------------------------------------------------------------------
-
-export {fetchSlide};
-export default createFetchSlide();