@coorpacademy/app-review 0.1.2 → 0.1.4

package/src/reducers/data/progression.ts

@@ -0,0 +1,106 @@
+import {getOr, noop} from 'lodash/fp';
+import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/data/slides';
+import {AnswerUI} from '../../types/slides';
+
+// -----------------------------------------------------------------------------
+
+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;
+  };
+} | null;
+
+// -----------------------------------------------------------------------------
+
+export const initialState: ProgressionState = null;
+
+// -----------------------------------------------------------------------------
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: ProgressionState = initialState,
+  action: ValidateSlide
+): ProgressionState => {
+  switch (action.type) {
+    case VALIDATE_SLIDE: {
+      const previousSlideNumber: number = getOr(-1, 'slideNumber', state);
+      // hard coded for now
+      return {
+        // 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'
+          }
+        }
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

package/src/reducers/data/skills.ts

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

package/src/reducers/{slides.ts → data/slides.ts}

@@ -1,24 +1,27 @@
 import map from 'lodash/fp/map';
 import {
+  OnNextPayload,
+  Slide,
   SlidesAction,
   STORE_FIRST_SLIDE,
   UPDATE_SLIDES_ON_NEXT,
-  UPDATE_SLIDES_ON_VALIDATION
-} from '../actions/slides';
-import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../common';
-import {
-  Slide,
-  Slides,
-  UpdateSlidesOnNextPayload,
-  UpdateSlidesOnValidationPayload
-} from '../types/slides';
+  UPDATE_SLIDES_ON_VALIDATION,
+  ValidationPayload
+} from '../../actions/data/slides';
+import {Slide as SlideFromAPI} from '../../types/slides';
+import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../../common';
 
 // -----------------------------------------------------------------------------
 
-export type State = Slides;
+export type SlidesState = {
+  slideNumbers: number[];
+  [key: number]: Slide;
+};
+
+// -----------------------------------------------------------------------------
 
-const getInitialState = (): State => {
-  const state: State = {
+const getInitialState = (): SlidesState => {
+  const state: SlidesState = {
     slideNumbers
   };
   // eslint-disable-next-line fp/no-loops
@@ -28,12 +31,12 @@ const getInitialState = (): State => {
   return state;
 };
 
-export const initialState: State = getInitialState();
+export const initialState: SlidesState = getInitialState();
 
 // -----------------------------------------------------------------------------
 
-const setFirstSlide = (state, slide: Slide): State => {
-  const _state: State = {
+const setFirstSlide = (state: SlidesState, slide: SlideFromAPI): SlidesState => {
+  const _state: SlidesState = {
     slideNumbers
   };
   // eslint-disable-next-line lodash-fp/no-unused-result
@@ -49,9 +52,9 @@ const setFirstSlide = (state, slide: Slide): State => {
 
 // ||-------> 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: State, payload: UpdateSlidesOnValidationPayload): State => {
+const stateUpdateOnValidation = (state: SlidesState, payload: ValidationPayload): SlidesState => {
   const {slideNumber, newSlideContent, numberOfFinishedSlides, nextSlide} = payload;
-  const _state: State = {
+  const _state: SlidesState = {
     slideNumbers
   };
 
@@ -66,7 +69,7 @@ const stateUpdateOnValidation = (state: State, payload: UpdateSlidesOnValidation
           ...previousValue,
           nextSlide,
           position: newSlideContent.position,
-          validationResult: newSlideContent.validationResult
+          isCorrect: newSlideContent.isCorrect
         };
       } else _state[slideNumber] = {...previousValue, ...newSlideContent};
     } else {
@@ -81,9 +84,9 @@ const stateUpdateOnValidation = (state: State, payload: UpdateSlidesOnValidation
 
 // ||-------> Handles the updates of a given slide on correction popin's next click,
 // & then updates de remaining slides (updates position to trigger animations)
-const stateUpdateOnNext = (state: State, payload: UpdateSlidesOnNextPayload): State => {
+const stateUpdateOnNext = (state: SlidesState, payload: OnNextPayload): SlidesState => {
   const {slideNumber, newSlideContent, numberOfFinishedSlides} = payload;
-  const _state: State = {
+  const _state: SlidesState = {
     slideNumbers
   };
 
@@ -115,7 +118,7 @@ const stateUpdateOnNext = (state: State, payload: UpdateSlidesOnNextPayload): St
 // -----------------------------------------------------------------------------
 
 // eslint-disable-next-line default-param-last
-const reducer = (state: State = initialState, action: SlidesAction): State => {
+const reducer = (state: SlidesState = initialState, action: SlidesAction): SlidesState => {
   switch (action.type) {
     case STORE_FIRST_SLIDE: {
       return setFirstSlide(state, action.payload);

package/src/reducers/{review-status.ts → data/token.ts}

@@ -1,18 +1,20 @@
-import {UpdateReviewStatus, UPDATE_REVIEW_STATUS} from '../actions/review-status';
+import {StoreToken, STORE_TOKEN} from '../../actions/data/token';
 
 // -----------------------------------------------------------------------------
 
-export type State = 'finished' | 'ongoing';
-export const initialState: State = 'ongoing';
+export type TokenState = string | null;
+
+// -----------------------------------------------------------------------------
+
+export const initialState: TokenState = null;
 
 // -----------------------------------------------------------------------------
 
 // eslint-disable-next-line default-param-last
-const reducer = (state: State = initialState, action: UpdateReviewStatus): State => {
+const reducer = (state: TokenState = initialState, action: StoreToken): TokenState => {
   switch (action.type) {
-    case UPDATE_REVIEW_STATUS: {
+    case STORE_TOKEN:
       return action.payload;
-    }
     default:
       return state;
   }

package/src/reducers/index.ts

@@ -1,23 +1,9 @@
 import {combineReducers} from 'redux';
 
 import data from './data';
-import courses from './courses';
-import finishedSlides from './finished-slides';
-import navigation from './navigation';
-import reviewStatus from './review-status';
-import slides from './slides';
-import stepItems from './step-items';
-
-const ui = combineReducers({
-  courses,
-  finishedSlides,
-  navigation,
-  reviewStatus,
-  slides,
-  stepItems
-});
+import ui from './ui';
 
 export default combineReducers({
-  ui,
-  data
+  data,
+  ui
 });

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

@@ -1,7 +1,21 @@
 import forEach from 'lodash/fp/forEach';
-import {UpdateFinishedSlides, UPDATE_FINISHED_SLIDES} from '../actions/finished-slides';
-import {slideNumbers} from '../common';
-import {FinishedSlides} from '../types/finished-slides';
+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 = {
+  slideNumbers
+};
+
+// -----------------------------------------------------------------------------
 
 const _forEach: <T>(
   iteratee: (value: T[keyof T], index: number) => void,
@@ -13,24 +27,20 @@ const _forEach: <T>(
 
 // -----------------------------------------------------------------------------
 
-export type State = FinishedSlides;
-export const initialState: State = {
-  slideNumbers
-};
-
-// -----------------------------------------------------------------------------
-
-// eslint-disable-next-line default-param-last
-const reducer = (state: State = initialState, action: UpdateFinishedSlides): State => {
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: FinishedSlidesState = initialState,
+  action: UpdateFinishedSlides
+): FinishedSlidesState => {
   switch (action.type) {
     case UPDATE_FINISHED_SLIDES: {
       const {slideNumbers: _slideNumbers, ...rest} = state;
       const {slideNumber, value} = action.payload;
-      const _state: State = {
+      const _state: FinishedSlidesState = {
         slideNumbers: _slideNumbers
       };
 
-      _forEach<Omit<State, 'slideNumbers'>>((finishedSlide, index) => {
+      _forEach<Omit<FinishedSlidesState, 'slideNumbers'>>((finishedSlide, index) => {
         const previousValue = finishedSlide;
         _state[index] = previousValue;
       }, rest);

package/src/reducers/ui/index.ts

@@ -0,0 +1,13 @@
+import {combineReducers} from 'redux';
+
+import finishedSlides from './finished-slides';
+import navigation from './navigation';
+import reviewStatus from './review-status';
+import stepItems from './step-items';
+
+export default combineReducers({
+  finishedSlides,
+  navigation,
+  reviewStatus,
+  stepItems
+});

package/src/reducers/ui/navigation.ts

@@ -0,0 +1,36 @@
+import {
+  type NavigateTo,
+  type NavigateBack,
+  NAVIGATE_BACK,
+  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,
+  action: NavigateTo | NavigateBack
+): NavigationState => {
+  switch (action.type) {
+    case NAVIGATE_TO: {
+      return [...state, action.payload];
+    }
+    case NAVIGATE_BACK: {
+      const newState = [...state];
+      newState.pop();
+      return newState;
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

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

@@ -0,0 +1,26 @@
+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,
+  action: UpdateReviewStatus
+): ReviewStatusState => {
+  switch (action.type) {
+    case UPDATE_REVIEW_STATUS: {
+      return action.payload;
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

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

@@ -1,22 +1,35 @@
-import isNil from 'lodash/fp/isNil';
 import get from 'lodash/fp/get';
 import has from 'lodash/fp/has';
 import map from 'lodash/fp/map';
 import {
+  IconValue,
   StepItemsAction,
   UPDATE_STEP_ITEMS_ON_NEXT,
   UPDATE_STEP_ITEMS_ON_VALIDATION
-} from '../actions/step-items';
-import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../common';
-import {SlideNumber} from '../types/slides';
-import {FinishedSlides} from '../types/finished-slides';
-import {StepItem, StepItems} from '../types/step-items';
+} from '../../actions/ui/step-items';
+import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../../common';
+import {FinishedSlidesState} from './finished-slides';
 
 // -----------------------------------------------------------------------------
 
-export type State = StepItems;
+type StepItem = {
+  current: boolean;
+  icon: IconValue;
+  value: string;
+};
+
+export type StepItems = {
+  slideNumbers: number[];
+  [key: number]: StepItem;
+};
+
+// -----------------------------------------------------------------------------
+
+export type StepItemsState = StepItems;
+
+// -----------------------------------------------------------------------------
 
-const getInitialState = (): State => {
+const getInitialState = (): StepItemsState => {
   const state: StepItems = {
     slideNumbers
   };
@@ -24,12 +37,12 @@ const getInitialState = (): State => {
   // eslint-disable-next-line fp/no-loops
   for (let index = 0; index < TOTAL_SLIDES_STACK; index++) {
     const current = index === 0;
-    state[index] = {current, value: `${index + 1}`, icon: null};
+    state[index] = {current, value: `${index + 1}`, icon: 'no-answer'};
   }
   return state;
 };
 
-export const initialState: State = getInitialState();
+export const initialState: StepItemsState = getInitialState();
 
 // -----------------------------------------------------------------------------
 
@@ -42,15 +55,15 @@ const getNextIndex = (currentIndex: number): number =>
 // they have to be skipped)
 const calculateNextStepIndex = (
   currentStepNumber: number,
-  finishedSlides: FinishedSlides,
-  lastVisitedIndex: number | null = null
+  finishedSlides: FinishedSlidesState,
+  lastVisitedIndex = -1
 ): number => {
   // only one slide remaining, the step should stay on the same number
   if (lastVisitedIndex === currentStepNumber) {
     return currentStepNumber;
   }
 
-  const indexToVisit = getNextIndex(isNil(lastVisitedIndex) ? currentStepNumber : lastVisitedIndex);
+  const indexToVisit = getNextIndex(lastVisitedIndex === -1 ? currentStepNumber : lastVisitedIndex);
 
   // if the index is already included in the correctly answered (finished) slides, then we proceed to check for the next one
   return has(indexToVisit, finishedSlides)
@@ -60,15 +73,15 @@ const calculateNextStepIndex = (
 
 type StepItemToUpdateProps =
   | Pick<StepItem, 'icon'>
-  | (Pick<StepItem, 'current'> & {nextIndex: SlideNumber});
+  | (Pick<StepItem, 'current'> & {nextIndex: number});
 
 const recalculateStepItemsState = (
-  state: State,
-  stepNumber,
+  state: StepItemsState,
+  stepNumber: number,
   stepItemToUpdateProps: StepItemToUpdateProps
-): State => {
-  const nextIndex: number | null = get('nextIndex', stepItemToUpdateProps);
-  const _state: State = {
+): StepItemsState => {
+  const nextIndex: number = get('nextIndex', stepItemToUpdateProps);
+  const _state: StepItemsState = {
     slideNumbers
   };
 
@@ -91,7 +104,7 @@ const recalculateStepItemsState = (
 // -----------------------------------------------------------------------------
 
 // eslint-disable-next-line default-param-last
-const reducer = (state: State = initialState, action: StepItemsAction): State => {
+const reducer = (state: StepItemsState = initialState, action: StepItemsAction): StepItemsState => {
   switch (action.type) {
     case UPDATE_STEP_ITEMS_ON_VALIDATION: {
       const {stepNumber, icon} = action.payload;
@@ -99,7 +112,7 @@ const reducer = (state: State = initialState, action: StepItemsAction): State =>
     }
     case UPDATE_STEP_ITEMS_ON_NEXT: {
       const {stepNumber, finishedSlides, current} = action.payload;
-      const nextIndex = !current ? calculateNextStepIndex(stepNumber, finishedSlides) : null;
+      const nextIndex = !current ? calculateNextStepIndex(stepNumber, finishedSlides) : -1;
       return recalculateStepItemsState(state, stepNumber, {current, nextIndex});
     }
     default:

package/src/services/fetch-skills.mock.ts

@@ -0,0 +1,21 @@
+import crossFetch from 'cross-fetch';
+import {Skills} from '../types/skills';
+import {okJSONResponse} from './tools/fetch.mocks';
+
+const result: Skills = [
+  {
+    skillRef: '_skill-ref',
+    slidesToReview: 2,
+    name: 'skill-test',
+    custom: false
+  },
+  {
+    skillRef: '_skill-ref-2',
+    slidesToReview: 2,
+    name: 'skill-test-2',
+    custom: true
+  }
+];
+
+const mockFetchSkills: typeof crossFetch = okJSONResponse(result);
+export default mockFetchSkills;

package/src/services/fetch-skills.test.ts

@@ -0,0 +1,32 @@
+import test from 'ava';
+import {Skills} from '../types/skills';
+import {fetchSkills} from './fetch-skills';
+import {okJSONResponse, token} from './tools/fetch.mocks';
+
+test('should fetch skills with success', async t => {
+  const result: Skills = [
+    {
+      slidesToReview: 1,
+      name: 'skill-test',
+      custom: false,
+      skillRef: '_skill-ref'
+    }
+  ];
+
+  const mockedFetchSkills = fetchSkills(okJSONResponse(result));
+  const skills = await mockedFetchSkills(token);
+
+  t.deepEqual(result, skills);
+});
+
+test('should reject bad token', async t => {
+  const badToken = 'token is not a jwt';
+  const mockedFetchSkills = fetchSkills(okJSONResponse([]));
+
+  const error = await t.throwsAsync(() => mockedFetchSkills(badToken));
+
+  t.is(
+    error?.message,
+    "Invalid token specified: Cannot read properties of undefined (reading 'replace')"
+  );
+});

package/src/services/fetch-skills.ts

@@ -0,0 +1,40 @@
+import crossFetch from 'cross-fetch';
+import decode from 'jwt-decode';
+
+import {JWT} from '../types/common';
+import {Skills} from '../types/skills';
+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 => {
+  const {user: userId, host}: JWT = decode(token);
+  const response = await fetch(`${host}/api/v2/skills/review/user/${userId}`, {
+    headers: {authorization: token}
+  });
+
+  const skills = (await toJSON(response)) as Skills;
+  return skills;
+};
+
+// -----------------------------------------------------------------------------
+
+const createFetchSkills: CreateDefaultFetchSkills = () => {
+  if (process.env.SERVICES !== 'mocks') {
+    return fetchSkills(crossFetch);
+  }
+
+  return fetchSkills(mockFetchSkills);
+};
+
+// -----------------------------------------------------------------------------
+
+export {fetchSkills};
+export default createFetchSkills();

package/src/services/{fetch-responses.ts → tools/fetch-responses.ts}

@@ -1,16 +1,3 @@
-export type _Response = {
-  ok: boolean;
-  status: number;
-  statusText: string;
-  json: () => Promise<unknown>;
-  text: () => Promise<string>;
-};
-
-export type Fetch = (
-  url?: string,
-  options?: {headers: {authorization: string}}
-) => Promise<_Response>;
-
 export class ResponseError extends Error {
   public statusCode: number;
 
@@ -21,7 +8,7 @@ export class ResponseError extends Error {
   }
 }
 
-export const toJSON = async (response: _Response): Promise<unknown> => {
+export const toJSON = async (response: Response): Promise<unknown> => {
   if (!response.ok) {
     const body = await response.text();
     throw new ResponseError(response.status, response.statusText, body);
@@ -34,7 +21,7 @@ export const toJSON = async (response: _Response): Promise<unknown> => {
   }
 };
 
-export const toText = async (response: _Response): Promise<string> => {
+export const toText = async (response: Response): Promise<string> => {
   const body = await response.text();
 
   if (!response.ok) {
@@ -44,7 +31,7 @@ export const toText = async (response: _Response): Promise<string> => {
   return body;
 };
 
-export const toVoid = async (response: _Response): Promise<void> => {
+export const toVoid = async (response: Response): Promise<void> => {
   if (!response.ok) {
     const body = await response.text();
     throw new ResponseError(response.status, response.statusText, body);