@coorpacademy/app-review 0.0.21-alpha.4 → 0.1.1

package/src/reducers/slides.ts

@@ -0,0 +1,136 @@
+import map from 'lodash/fp/map';
+import {
+  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';
+
+// -----------------------------------------------------------------------------
+
+export type State = Slides;
+
+const getInitialState = (): State => {
+  const state: State = {
+    slideNumbers
+  };
+  // eslint-disable-next-line fp/no-loops
+  for (let index = 0; index < TOTAL_SLIDES_STACK; index++) {
+    state[index] = {hidden: false, position: index};
+  }
+  return state;
+};
+
+export const initialState: State = getInitialState();
+
+// -----------------------------------------------------------------------------
+
+const setFirstSlide = (state, slide: Slide): State => {
+  const _state: State = {
+    slideNumbers
+  };
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
+    // Only update the 1st one
+    const content = index === 0 ? {...previousValue, ...slide} : {...previousValue};
+    _state[index] = {...content};
+  }, state.slideNumbers);
+
+  return _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 {slideNumber, newSlideContent, numberOfFinishedSlides, nextSlide} = payload;
+  const _state: State = {
+    slideNumbers
+  };
+
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
+    // the current slide
+    if (index === slideNumber) {
+      // only one slide remaining, presets the next value
+      if (numberOfFinishedSlides === HIGHEST_INDEX) {
+        _state[index] = {
+          ...previousValue,
+          nextSlide,
+          position: newSlideContent.position,
+          validationResult: newSlideContent.validationResult
+        };
+      } else _state[slideNumber] = {...previousValue, ...newSlideContent};
+    } else {
+      // updates the rest of the slides here
+      const {hidden, position} = previousValue;
+      _state[index] = {...nextSlide, endReview: newSlideContent.endReview, hidden, position};
+    }
+  }, state.slideNumbers);
+
+  return _state;
+};
+
+// ||-------> 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 {slideNumber, newSlideContent, numberOfFinishedSlides} = payload;
+  const _state: State = {
+    slideNumbers
+  };
+
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
+    // 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};
+      } else _state[slideNumber] = newSlideContent;
+    } else {
+      // updates the rest of the slides here
+      const {hidden, position, answerUI, questionText} = previousValue;
+      _state[index] = {
+        hidden,
+        position: position - 1, // position shift
+        answerUI,
+        questionText,
+        endReview: newSlideContent.endReview
+      };
+    }
+  }, state.slideNumbers);
+
+  return _state;
+};
+
+// -----------------------------------------------------------------------------
+
+// eslint-disable-next-line default-param-last
+const reducer = (state: State = initialState, action: SlidesAction): State => {
+  switch (action.type) {
+    case STORE_FIRST_SLIDE: {
+      return setFirstSlide(state, action.payload);
+    }
+    case UPDATE_SLIDES_ON_VALIDATION: {
+      return stateUpdateOnValidation(state, action.payload);
+    }
+    case UPDATE_SLIDES_ON_NEXT: {
+      return stateUpdateOnNext(state, action.payload);
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

package/src/reducers/step-items.ts

@@ -0,0 +1,112 @@
+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 {
+  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';
+
+// -----------------------------------------------------------------------------
+
+export type State = StepItems;
+
+const getInitialState = (): State => {
+  const state: StepItems = {
+    slideNumbers
+  };
+
+  // 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};
+  }
+  return state;
+};
+
+export const initialState: State = getInitialState();
+
+// -----------------------------------------------------------------------------
+
+// ||-------> aux function, finds the next consecutive index
+// to loop from 0 to HIGHEST_INDEX (4) & again to 0
+const getNextIndex = (currentIndex: number): number =>
+  currentIndex === HIGHEST_INDEX ? 0 : currentIndex + 1;
+
+// ||-------> calculates which should be the next step to visit (as there can be already answered slides &&
+// they have to be skipped)
+const calculateNextStepIndex = (
+  currentStepNumber: number,
+  finishedSlides: FinishedSlides,
+  lastVisitedIndex: number | null = null
+): 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);
+
+  // 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)
+    ? calculateNextStepIndex(currentStepNumber, finishedSlides, indexToVisit)
+    : indexToVisit;
+};
+
+type StepItemToUpdateProps =
+  | Pick<StepItem, 'icon'>
+  | (Pick<StepItem, 'current'> & {nextIndex: SlideNumber});
+
+const recalculateStepItemsState = (
+  state: State,
+  stepNumber,
+  stepItemToUpdateProps: StepItemToUpdateProps
+): State => {
+  const nextIndex: number | null = get('nextIndex', stepItemToUpdateProps);
+  const _state: State = {
+    slideNumbers
+  };
+
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
+    if (stepNumber === index)
+      _state[stepNumber] = {
+        ...previousValue,
+        ...stepItemToUpdateProps
+      };
+    /* only for UPDATE_STEP_ITEMS_ON_NEXT -> */ else if (nextIndex === index) {
+      _state[index] = {...previousValue, current: true};
+    } else _state[index] = previousValue;
+  }, state.slideNumbers);
+
+  return _state;
+};
+
+// -----------------------------------------------------------------------------
+
+// eslint-disable-next-line default-param-last
+const reducer = (state: State = initialState, action: StepItemsAction): State => {
+  switch (action.type) {
+    case UPDATE_STEP_ITEMS_ON_VALIDATION: {
+      const {stepNumber, icon} = action.payload;
+      return recalculateStepItemsState(state, stepNumber, {icon});
+    }
+    case UPDATE_STEP_ITEMS_ON_NEXT: {
+      const {stepNumber, finishedSlides, current} = action.payload;
+      const nextIndex = !current ? calculateNextStepIndex(stepNumber, finishedSlides) : null;
+      return recalculateStepItemsState(state, stepNumber, {current, nextIndex});
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

package/src/reducers/token.ts

@@ -1,26 +1,17 @@
-import {StoreToken, STORE_TOKEN} from '../actions';
+import set from 'lodash/fp/set';
+import {StoreState} from '../types/store-state';
+import {DataState} from '../types/data';
 
 // -----------------------------------------------------------------------------
 
-export type State = string;
-export const initialState: State = null;
+export const initialState: DataState['token'] = null;
 
 // -----------------------------------------------------------------------------
 
-const reducer = (state: State = initialState, action: StoreToken): State => {
-  switch (action.type) {
-    case STORE_TOKEN: {
-      return action.payload;
-    }
-    default:
-      return state;
-  }
-};
+export const setToken = (token: string, state: DataState): DataState => set('token', token, state);
 
 // -----------------------------------------------------------------------------
 
-export const getToken = appState => appState.token;
+export const getToken = (appState: StoreState): StoreState['data']['token'] => appState.data.token;
 
 // -----------------------------------------------------------------------------
-
-export default reducer;

package/src/services/fetch-demo.ts

@@ -18,7 +18,7 @@ type QueryParams = {
   [key: string]: string | number | boolean;
 };
 
-const buildUrlQueryParams = (params: QueryParams) =>
+const buildUrlQueryParams = (params: QueryParams): string =>
   Object.keys(params)
     .map(key => {
       const value = params[key].toString();
@@ -28,22 +28,24 @@ const buildUrlQueryParams = (params: QueryParams) =>
 
 // -----------------------------------------------------------------------------
 
-const fetchCourse = (fetch: Fetch) => async (token, language, universalRef): Promise<Course> => {
-  const jwt: JWT = decode(token);
-  const query = {
-    type: 'course',
-    universalRef,
-    lang: language
+const fetchCourse =
+  (fetch: Fetch) =>
+  async (token, language, universalRef): Promise<Course> => {
+    const jwt: JWT = decode(token);
+    const query = {
+      type: 'course',
+      universalRef,
+      lang: language
+    };
+
+    const response = await fetch(`${jwt.host}/api/v2/contents?${buildUrlQueryParams(query)}`, {
+      headers: {authorization: token}
+    });
+
+    const {hits} = (await toJSON(response)) as CatalogHits;
+    return hits?.[0];
   };
 
-  const response = await fetch(`${jwt.host}/api/v2/contents?${buildUrlQueryParams(query)}`, {
-    headers: {authorization: token}
-  });
-
-  const {hits} = (await toJSON(response)) as CatalogHits;
-  return hits?.[0];
-};
-
 // -----------------------------------------------------------------------------
 
 export type Course = {title};

package/src/services/fetch-responses.ts

@@ -1,4 +1,4 @@
-export type Response = {
+export type _Response = {
   ok: boolean;
   status: number;
   statusText: string;
@@ -9,19 +9,19 @@ export type Response = {
 export type Fetch = (
   url?: string,
   options?: {headers: {authorization: string}}
-) => Promise<Response>;
+) => Promise<_Response>;
 
 export class ResponseError extends Error {
   public statusCode: number;
 
-  public constructor(status: number, statusText: string, body = '') {
+  public constructor(statusCode: number, statusText: string, body = '') {
     super(`${statusText} ${body}`.trim());
     this.name = 'ResponseError';
-    this.statusCode = status;
+    this.statusCode = statusCode;
   }
 }
 
-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 +34,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 +44,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);

package/src/services/fetch.mocks.ts

@@ -1,26 +1,41 @@
-import {Response} from './fetch-responses';
+import {_Response} from './fetch-responses';
 
-export const toResponse = (status: number, statusText: string, body: string): Promise<Response> =>
+export const toResponse = (
+  statusCode: number,
+  statusText: string,
+  body: string
+): Promise<_Response> =>
   Promise.resolve({
-    ok: status < 400,
-    status,
+    ok: statusCode < 400,
+    status: statusCode,
     statusText,
     json: (): Promise<unknown> => Promise.resolve(body).then(JSON.parse),
     text: (): Promise<string> => Promise.resolve(body)
   });
 
-type FetchFunction = () => Promise<Response>;
+type FetchFunction = () => Promise<_Response>;
 
-export const okJSONResponse = (body: unknown): FetchFunction => () =>
-  toResponse(200, 'OK', JSON.stringify(body));
+export const okJSONResponse =
+  (body: unknown): FetchFunction =>
+  () =>
+    toResponse(200, 'OK', JSON.stringify(body));
 
-export const internalServerErrorJSONResponse = (body: unknown): FetchFunction => () =>
-  toResponse(500, 'InternalServerError', JSON.stringify(body));
+export const internalServerErrorJSONResponse =
+  (body: unknown): FetchFunction =>
+  () =>
+    toResponse(500, 'InternalServerError', JSON.stringify(body));
 
-export const notFoundJSONResponse = (body: unknown): FetchFunction => () =>
-  toResponse(404, 'Not Found', JSON.stringify(body));
+export const notFoundJSONResponse =
+  (body: unknown): FetchFunction =>
+  () =>
+    toResponse(404, 'Not Found', JSON.stringify(body));
 
-export const okTextResponse = (body: string): FetchFunction => () => toResponse(200, 'OK', body);
+export const okTextResponse =
+  (body: string): FetchFunction =>
+  () =>
+    toResponse(200, 'OK', body);
 
-export const internalServerErrorTextResponse = (body: string): FetchFunction => () =>
-  toResponse(500, 'InternalServerError', body);
+export const internalServerErrorTextResponse =
+  (body: string): FetchFunction =>
+  () =>
+    toResponse(500, 'InternalServerError', body);

package/src/types/common.ts

@@ -0,0 +1,8 @@
+import {Slide} from './slides';
+
+export type AppOptions = {
+  token: string;
+  theme?: unknown;
+  translations?: unknown;
+  slide?: Slide;
+};

package/src/types/data/index.ts

@@ -0,0 +1,16 @@
+import {AnswerUI} from '../slides';
+
+export type DataState = {
+  isFetching?: boolean;
+  slideValidationResult?: {
+    slideNumber: number;
+    result: 'success' | 'failure';
+    // pass down the successExitNode if all slides are finished, not before
+    exitNode?: 'successExitNode' | 'failExitNode';
+    nextSlide: {
+      questionText?: string;
+      answerUI?: AnswerUI;
+    };
+  };
+  token?: string;
+};

package/src/types/dispatchers.ts

@@ -0,0 +1,18 @@
+import {validateSlide} from '../actions/data/validate-slide';
+import {updateFinishedSlides} from '../actions/finished-slides';
+import {navigateBack, navigateTo} from '../actions/navigation';
+import {updateReviewStatus} from '../actions/review-status';
+import {updateSlidesOnValidation, updateSlidesOnNext} from '../actions/slides';
+import {updateStepItemsOnValidation, updateStepItemsOnNext} from '../actions/step-items';
+
+export type Dispatchers = {
+  navigateTo: typeof navigateTo;
+  navigateBack: typeof navigateBack;
+  validateSlide: typeof validateSlide;
+  updateSlidesOnValidation: typeof updateSlidesOnValidation;
+  updateSlidesOnNext: typeof updateSlidesOnNext;
+  updateReviewStatus: typeof updateReviewStatus;
+  updateStepItemsOnValidation: typeof updateStepItemsOnValidation;
+  updateStepItemsOnNext: typeof updateStepItemsOnNext;
+  updateFinishedSlides: typeof updateFinishedSlides;
+};

package/src/types/finished-slides.ts

@@ -0,0 +1,9 @@
+import {SlideNumber} from './slides';
+
+// Stores only successful slides
+export type FinishedSlides = {
+  slideNumbers: SlideNumber[];
+  [key: SlideNumber]: true;
+};
+
+export type UpdateFinishedSlidesPayload = {slideNumber: SlideNumber; value: true};

package/src/types/globals.d.ts

@@ -0,0 +1,6 @@
+declare module '*.css';
+
+// eslint-disable-next-line no-shadow
+declare interface Window {
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: Function;
+}

package/src/types/review-status.ts

@@ -0,0 +1 @@
+export type UpdateReviewStatusPayload = 'finished';

package/src/types/slides.ts

@@ -0,0 +1,107 @@
+import {WithRequired} from './utils';
+
+export type Choice = {
+  order?: number;
+  selected: boolean;
+  title: string;
+  help: string;
+};
+
+export type QcmDrag = {
+  type: 'qcmDrag';
+  choices: Choice[];
+  help: string;
+};
+
+export type Qcm = {
+  type: 'qcm';
+  choices: (Choice & {ariaLabel: string})[];
+};
+
+export type QcmGraphic = {
+  type: 'qcmGraphic';
+  choices: (Choice & {image: string})[];
+};
+
+export type FreeText = {
+  type: 'freeText';
+  placeholder: string;
+  value: string;
+  onChange: Function;
+  ariaLabel: string;
+};
+
+export type DropDownOption = {
+  name: string;
+  value: string | number;
+  selected: boolean;
+  validOption: boolean;
+};
+
+export type DropDown = {
+  type: 'dropDown';
+  onChange: Function;
+  options: DropDownOption[];
+  theme:
+    | 'filter'
+    | 'invalid'
+    | 'header'
+    | 'mooc'
+    | 'question'
+    | 'sort'
+    | 'thematiques'
+    | 'player'
+    | 'template'
+    | 'coorpmanager';
+};
+
+export type QuestionRange = {
+  type: 'slider';
+  onChange: Function;
+  onChangeEnd: Function;
+  multi: boolean;
+  value: number | number[];
+  title: string;
+  minLabel: string;
+  maxLabel: string;
+};
+
+export type Template = {
+  type: 'template';
+  template: string;
+  choices: (DropDown & {type?: string})[];
+};
+
+export type AnswerUI = {
+  model: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;
+  help: string;
+};
+
+export type SlideNumber = number;
+
+export type SlideUIAnimations = 'unstack' | 'restack';
+
+export type Slide = {
+  hidden?: boolean;
+  position?: number;
+  animationType?: SlideUIAnimations;
+  validationResult?: 'success' | 'failure';
+  endReview?: boolean;
+  questionText?: string;
+  answerUI?: AnswerUI;
+  nextSlide?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextSlide'>;
+};
+
+export type Slides = {
+  slideNumbers: SlideNumber[];
+  [key: SlideNumber]: Slide;
+};
+
+export type UpdateSlidesOnValidationPayload = {
+  slideNumber: SlideNumber;
+  newSlideContent: Slide;
+  numberOfFinishedSlides: number;
+  nextSlide: WithRequired<Slide['nextSlide'], 'answerUI' | 'questionText'>;
+};
+
+export type UpdateSlidesOnNextPayload = Omit<UpdateSlidesOnValidationPayload, 'nextSlide'>;

package/src/types/states.ts

@@ -0,0 +1,6 @@
+export {Slides as SlidesState} from './slides';
+export {DataState} from './data';
+export {StepItems as StepItemsState} from './step-items';
+export {FinishedSlides as FinishedSlidesState} from './finished-slides';
+export {State as ReviewStatusState} from '../reducers/review-status';
+export type NavigationState = Array<'home' | 'onboarding' | 'slides'>;

package/src/types/step-items.ts

@@ -0,0 +1,31 @@
+import {SlideNumber} from './slides';
+import {FinishedSlides} from './finished-slides';
+
+const ICON_VALUES = {
+  right: 'right',
+  wrong: 'wrong'
+} as const;
+
+type IconValue = keyof typeof ICON_VALUES;
+
+export type StepItem = {
+  current: boolean;
+  icon: IconValue;
+  value: string;
+};
+
+export type StepItems = {
+  slideNumbers: SlideNumber[];
+  [key: SlideNumber]: StepItem;
+};
+
+export type UpdateStepItemsOnValidationClickPayload = {
+  stepNumber: SlideNumber;
+  icon: IconValue;
+};
+
+export type UpdateStepItemsOnNextClickPayload = {
+  stepNumber: SlideNumber;
+  finishedSlides: FinishedSlides;
+  current: boolean;
+};

package/src/types/store-state.ts

@@ -0,0 +1,20 @@
+import {
+  DataState,
+  FinishedSlidesState,
+  NavigationState,
+  ReviewStatusState,
+  SlidesState,
+  StepItemsState
+} from './states';
+
+export type StoreState = {
+  ui: {
+    courses: unknown;
+    navigation: NavigationState;
+    slides: SlidesState;
+    stepItems: StepItemsState;
+    finishedSlides: FinishedSlidesState;
+    reviewStatus: ReviewStatusState;
+  };
+  data: DataState;
+};

package/src/types/utils.ts

@@ -0,0 +1,4 @@
+export type WithRequired<T, K extends keyof T> = T & {
+  // the "-" is a Mapping Modifier, removes optionality from a prop
+  [P in K]-?: T[P];
+};