@coorpacademy/app-review 0.1.4 → 0.1.7

package/src/middlewares/on-receive-progression.ts

@@ -0,0 +1,42 @@
+import type {Middleware, Store} from 'redux';
+import {Dispatch} from 'redux';
+import get from 'lodash/fp/get';
+
+// eslint-disable-next-line import/no-named-as-default
+import fetchSlide from '../services/fetch-slide';
+
+import {
+  ErrorFetchingSlide,
+  errorFetchingSlide,
+  StoreFirstSlide,
+  storeFirstSlide
+} from '../actions/data/slides';
+import {ReceiveProgression, RECEIVE_PROGRESSION} from '../actions/data/progression';
+
+const onReceiveProgression: Middleware<
+  {},
+  Store,
+  Dispatch<ReceiveProgression | StoreFirstSlide | ErrorFetchingSlide>
+> =
+  ({dispatch}) =>
+  next =>
+  (action: ReceiveProgression) => {
+    if (action.type === RECEIVE_PROGRESSION) {
+      const {progression, token} = action.payload;
+      const slideRef: string = get('state.nextContent.ref', progression);
+      // TOASK: do we need to check for exit nodes before fetching??
+
+      // TODO: To implement fetchSlide in next ticket
+      fetchSlide(slideRef, token)
+        .then(slide => {
+          return dispatch(storeFirstSlide(slide));
+        })
+        .catch(err => {
+          return dispatch(errorFetchingSlide(err));
+        });
+    }
+
+    return next(action);
+  };
+
+export default onReceiveProgression;

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

@@ -0,0 +1,68 @@
+import test from 'ava';
+import {AnyAction, Dispatch, MiddlewareAPI} from 'redux';
+import {STORE_TOKEN} from '../actions/data/token';
+import {RECEIVE_PROGRESSION} from '../actions/data/progression';
+import {Action} from '../actions';
+import {AppOptions} from '../types/common';
+import {NAVIGATE_TO, startApp} from '../actions/ui/navigation';
+import {mockedProgression} from '../services/post-progression.mock';
+import {VIEWS} from '../common';
+import {sleep} from '../services/tools/sleep';
+import onStartApp from './on-start-app';
+
+const appOptions: AppOptions = {
+  token: process.env.API_TEST_TOKEN || '',
+  skillRef: 'skill_NJC0jFKoH'
+};
+
+const otherAction = (
+  payload: string
+): {
+  type: string;
+  payload: string;
+} => ({
+  type: '@@other/OTHER',
+  payload
+});
+
+test('should not dispatch anything if action is not START_APP', t => {
+  t.plan(1);
+  const dispatch = (): void => {
+    t.fail();
+  };
+  const next = (): boolean => {
+    return t.pass();
+  };
+
+  onStartApp({dispatch} as unknown as MiddlewareAPI)(next as Dispatch<AnyAction>)(
+    otherAction('other')
+  );
+});
+
+test('should dispatch actions: STORE_TOKEN && RECEIVE_PROGRESSION if an skillRef is given, on a successful response', async t => {
+  t.plan(5);
+  const dispatch = (action: Action): void => {
+    switch (action.type) {
+      case STORE_TOKEN:
+        t.is(action.payload, appOptions.token);
+        return;
+      case RECEIVE_PROGRESSION: {
+        const {token, progression} = action.payload;
+        t.is(token, appOptions.token);
+        t.deepEqual(progression, JSON.parse(JSON.stringify(mockedProgression)));
+        return;
+      }
+      case NAVIGATE_TO:
+        t.is(action.payload, VIEWS.slides);
+        return;
+      default:
+        t.fail();
+        break;
+    }
+  };
+  const next = (): boolean => {
+    return t.pass();
+  };
+  onStartApp({dispatch} as MiddlewareAPI)(next as Dispatch<AnyAction>)(startApp(appOptions));
+  await sleep(1000); // wait for the .then to fire
+});

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

@@ -5,23 +5,31 @@ import {VIEWS} from '../common';
 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';
+// eslint-disable-next-line import/no-named-as-default
+import postProgression from '../services/post-progression';
+import {errorCreatingProgression, receiveProgression} from '../actions/data/progression';
 
 const onStartApp: Middleware<{}, Store, Dispatch<Action>> =
   ({dispatch}) =>
   next =>
   (action: Action) => {
     if (action.type === START_APP) {
-      const {slide, token} = action.payload;
+      const {skillRef, token} = action.payload;
 
       dispatch(storeToken(token));
 
-      if (slide) {
-        dispatch(storeFirstSlide(slide));
+      if (skillRef) {
+        postProgression(skillRef, token)
+          .then(progression => {
+            return dispatch(receiveProgression({progression, token}));
+          })
+          .catch(err => {
+            return dispatch(errorCreatingProgression(err));
+          });
       } else {
         fetchSkills(token)
           .then(skills => {
@@ -32,7 +40,7 @@ const onStartApp: Middleware<{}, Store, Dispatch<Action>> =
           });
       }
 
-      const initialView: ViewPath = slide ? VIEWS.slides : VIEWS.skills;
+      const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
       dispatch(navigateTo(initialView));
     }
 

package/src/reducers/data/progression.ts

@@ -1,24 +1,27 @@
-import {getOr, noop} from 'lodash/fp';
+import {getOr} from 'lodash/fp';
+import {ReceiveProgression, RECEIVE_PROGRESSION} from '../../actions/data/progression';
 import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/data/slides';
-import {AnswerUI} from '../../types/slides';
 
 // -----------------------------------------------------------------------------
 
+// TODO: transform this into UI data / fix on components' repo when
+// fetch slide is addressed
 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;
+  _id?: string;
+  state: {
+    isCorrect: boolean;
+    nextContent: {
+      ref: 'successExitNode' | string;
+      type: 'success' | 'slide';
+    };
+    pendingSlides: string[];
+    step: {
+      current: number;
+    };
   };
+  // TO refactor: (slideNumber)
+  // virtual field
+  slideNumber?: number;
 } | null;
 
 // -----------------------------------------------------------------------------
@@ -30,72 +33,34 @@ export const initialState: ProgressionState = null;
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: ProgressionState = initialState,
-  action: ValidateSlide
+  action: ValidateSlide | ReceiveProgression
 ): ProgressionState => {
   switch (action.type) {
     case VALIDATE_SLIDE: {
       const previousSlideNumber: number = getOr(-1, 'slideNumber', state);
       // hard coded for now
+      // TODO: fix on VALIDATE ticket
       return {
+        _id: '1234',
         // 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'
+        state: {
+          pendingSlides: [],
+          step: {
+            current: Number.NaN
+          },
+          isCorrect: true,
+          nextContent: {
+            ref: 'sli_V1gKpYYZ2',
+            type: 'slide'
           }
         }
       };
     }
+    case RECEIVE_PROGRESSION: {
+      const {progression} = action.payload;
+      return progression;
+    }
     default:
       return state;
   }

package/src/reducers/data/slides.ts

@@ -8,8 +8,9 @@ import {
   UPDATE_SLIDES_ON_VALIDATION,
   ValidationPayload
 } from '../../actions/data/slides';
-import {Slide as SlideFromAPI} from '../../types/slides';
+import {Slide as UISlide} from '../../types/slides';
 import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../../common';
+import {slide as qcmSlide} from '../../fixtures/qcm-slide';
 
 // -----------------------------------------------------------------------------
 
@@ -35,7 +36,7 @@ export const initialState: SlidesState = getInitialState();
 
 // -----------------------------------------------------------------------------
 
-const setFirstSlide = (state: SlidesState, slide: SlideFromAPI): SlidesState => {
+const setFirstSlide = (state: SlidesState, slide: UISlide): SlidesState => {
   const _state: SlidesState = {
     slideNumbers
   };
@@ -53,7 +54,7 @@ const setFirstSlide = (state: SlidesState, slide: SlideFromAPI): SlidesState =>
 // ||-------> 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: SlidesState, payload: ValidationPayload): SlidesState => {
-  const {slideNumber, newSlideContent, numberOfFinishedSlides, nextSlide} = payload;
+  const {slideNumber, newSlideContent, numberOfFinishedSlides, nextContent} = payload;
   const _state: SlidesState = {
     slideNumbers
   };
@@ -67,7 +68,7 @@ const stateUpdateOnValidation = (state: SlidesState, payload: ValidationPayload)
       if (numberOfFinishedSlides === HIGHEST_INDEX) {
         _state[index] = {
           ...previousValue,
-          nextSlide,
+          nextContent,
           position: newSlideContent.position,
           isCorrect: newSlideContent.isCorrect
         };
@@ -75,7 +76,7 @@ const stateUpdateOnValidation = (state: SlidesState, payload: ValidationPayload)
     } else {
       // updates the rest of the slides here
       const {hidden, position} = previousValue;
-      _state[index] = {...nextSlide, endReview: newSlideContent.endReview, hidden, position};
+      _state[index] = {...nextContent, endReview: newSlideContent.endReview, hidden, position};
     }
   }, state.slideNumbers);
 
@@ -96,8 +97,8 @@ const stateUpdateOnNext = (state: SlidesState, payload: OnNextPayload): SlidesSt
     // the current slide
     if (index === slideNumber) {
       // when there is only one slide remaining, updates the slide value
-      if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextSlide) {
-        _state[index] = {...previousValue.nextSlide, position: previousValue.position};
+      if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextContent) {
+        _state[index] = {...previousValue.nextContent, position: previousValue.position};
       } else _state[slideNumber] = newSlideContent;
     } else {
       // updates the rest of the slides here
@@ -121,7 +122,11 @@ const stateUpdateOnNext = (state: SlidesState, payload: OnNextPayload): SlidesSt
 const reducer = (state: SlidesState = initialState, action: SlidesAction): SlidesState => {
   switch (action.type) {
     case STORE_FIRST_SLIDE: {
-      return setFirstSlide(state, action.payload);
+      // TODO: An intermediate slide transform is needed here (or in fetchSlide)
+      // const apiSlide = action.payload;
+      // apiSlide adapt to uiSlide
+      const uiSlide = qcmSlide;
+      return setFirstSlide(state, uiSlide);
     }
     case UPDATE_SLIDES_ON_VALIDATION: {
       return stateUpdateOnValidation(state, action.payload);

package/src/services/fetch-skills.ts

@@ -20,8 +20,7 @@ const fetchSkills: CreateFetchSkills = fetch => async token => {
     headers: {authorization: token}
   });
 
-  const skills = (await toJSON(response)) as Skills;
-  return skills;
+  return toJSON<Skills>(response);
 };
 
 // -----------------------------------------------------------------------------

package/src/services/fetch-slide.ts

@@ -0,0 +1,43 @@
+import crossFetch from 'cross-fetch';
+// 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';
+
+// -----------------------------------------------------------------------------
+
+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 createFetchSlide: DefaultFetchSlideBuilder = () => {
+  if (process.env.SERVICES !== 'mocks') {
+    return fetchSlide(crossFetch);
+  }
+
+  // TODO: use an appropriate mock
+  return fetchSlide(okJSONResponse({}));
+};
+
+// -----------------------------------------------------------------------------
+
+export {fetchSlide};
+export default createFetchSlide();

package/src/services/post-progression.mock.ts

@@ -0,0 +1,35 @@
+import crossFetch from 'cross-fetch';
+import {ProgressionFromAPI} from '../actions/data/progression';
+import {okJSONResponse} from './tools/fetch.mocks';
+
+export const mockedProgression: ProgressionFromAPI = {
+  _id: '62b1d1087aa12f00253f40ee',
+  state: {
+    // ------------------------------------------------------
+    // unused for now / to decide whether to use it when the
+    // validation-progression is plugged in
+    pendingSlides: [],
+    step: {
+      current: Number.NaN
+    },
+    // ------------------------------------------------------
+    isCorrect: true,
+    nextContent: {
+      ref: 'sli_N1XACJobn',
+      type: 'slide'
+    }
+    // slides: [
+    //   'sli_NJ3m5KtWh',
+    //   'sli_V1gKpYYZ2',
+    //   'sli_VJzOgotbh',
+    //   'sli_V1ug-dtZn',
+    //   'sli_VyZU-ejW3',
+    //   'sli_Vy8ChgjZh',
+    //   'sli_V1ijS1oWh',
+    //   'sli_N1XACJobn'
+    // ],
+  }
+};
+
+const mockCreateProgression: typeof crossFetch = okJSONResponse(mockedProgression);
+export default mockCreateProgression;

package/src/services/post-progression.test.ts

@@ -0,0 +1,41 @@
+import test from 'ava';
+import {ProgressionFromAPI} from '../actions/data/progression';
+import {postProgression} from './post-progression';
+import {okJSONResponse, token} from './tools/fetch.mocks';
+
+const skillRef = '_skill-ref';
+
+test('should create progression with success', async t => {
+  const result: ProgressionFromAPI = {
+    _id: '123456123456',
+    state: {
+      // is "isCorrect" always true for a 1st progression?
+      isCorrect: true,
+      step: {
+        current: 1
+      },
+      nextContent: {
+        type: 'slide',
+        ref: 'sli_NJ3m5KtWh'
+      },
+      pendingSlides: []
+    }
+  };
+
+  const mockedPostProgression = postProgression(okJSONResponse(result));
+  const progression = await mockedPostProgression(skillRef, token);
+
+  t.deepEqual(result, progression);
+});
+
+test('should reject bad token', async t => {
+  const badToken = 'token is not a jwt';
+  const mockedPostProgression = postProgression(okJSONResponse(null));
+
+  const error = await t.throwsAsync(() => mockedPostProgression(skillRef, badToken));
+
+  t.is(
+    error?.message,
+    "Invalid token specified: Cannot read properties of undefined (reading 'replace')"
+  );
+});

package/src/services/post-progression.ts

@@ -0,0 +1,50 @@
+import crossFetch from 'cross-fetch';
+import decode from 'jwt-decode';
+
+import {ProgressionFromAPI} from '../actions/data/progression';
+import {JWT} from '../types/common';
+import {toJSON} from './tools/fetch-responses';
+import mockPostProgression from './post-progression.mock';
+
+// -----------------------------------------------------------------------------
+
+type PostProgression = (skillRef: string, token: string) => Promise<ProgressionFromAPI>;
+type CreatePostProgression = (fetch: typeof crossFetch) => PostProgression;
+type DefaultCreatePostProgression = () => PostProgression;
+
+// -----------------------------------------------------------------------------
+
+const postProgression: CreatePostProgression = fetch => async (skillRef, token) => {
+  const {host}: JWT = decode(token);
+  const response = await fetch(`${host}/api/v2/progressions`, {
+    method: 'post',
+    headers: {authorization: token},
+    body: JSON.stringify({
+      content: {
+        ref: skillRef,
+        type: 'slide'
+      },
+      engine: {
+        ref: 'review',
+        version: '1'
+      }
+    })
+  });
+
+  return toJSON<ProgressionFromAPI>(response);
+};
+
+// -----------------------------------------------------------------------------
+
+const createPostProgression: DefaultCreatePostProgression = () => {
+  if (process.env.SERVICES !== 'mocks') {
+    return postProgression(crossFetch);
+  }
+
+  return postProgression(mockPostProgression);
+};
+
+// -----------------------------------------------------------------------------
+
+export {postProgression};
+export default createPostProgression();

package/src/services/tools/fetch-responses.ts

@@ -8,7 +8,7 @@ export class ResponseError extends Error {
   }
 }
 
-export const toJSON = async (response: Response): Promise<unknown> => {
+export const toJSON = async <T = unknown>(response: Response): Promise<T> => {
   if (!response.ok) {
     const body = await response.text();
     throw new ResponseError(response.status, response.statusText, body);

package/src/services/tools/sleep.ts

@@ -0,0 +1,4 @@
+export const sleep = (msToSleep: number): Promise<void> =>
+  new Promise(resolve => {
+    setTimeout(resolve, msToSleep);
+  });

package/src/types/common.ts

@@ -1,10 +1,16 @@
-import {Slide} from './slides';
+// TODO use type from components
+type TemplateContextValues = {
+  brandTheme?: unknown;
+  theme?: unknown; // TODO type Theme
+  translations?: unknown; // TODO type Translations
+};
 
 export type AppOptions = {
   token: string;
   theme?: unknown;
   translations?: unknown;
-  slide?: Slide;
+  templateContext?: TemplateContextValues;
+  skillRef?: string;
 };
 
 export type JWT = {

package/src/types/globals.d.ts

@@ -1,6 +1,7 @@
 declare module '*.css';
 declare module 'browser-env';
 declare module '@coorpacademy/components/es/template/app-review';
+declare module '@coorpacademy/components/es/template/app-review/template-context';
 
 // eslint-disable-next-line no-shadow
 declare interface Window {

package/src/types/ui-progression.ts

@@ -0,0 +1,25 @@
+export type UiProgression = {
+  _id?: string;
+  // 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
+  // ex: nextContent: {ref: "sli_E1n2i2sBo", type: "slide"}
+  // the middleware should trigger a nextContent request once the result is
+  // received && update the state accordingly
+  // nextContent?: {
+  //   questionText?: string;
+  //   answerUI?: AnswerUI;
+  // };
+  nextContent?: {
+    ref: 'successExitNode' | string;
+    type: 'success' | 'slide';
+  };
+  // unused for now / to decide whether to use it when the
+  // validation-progression is plugged in
+  // step: {
+  //   current: number;
+  // };
+} | null;