@coorpacademy/app-review 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -40,7 +40,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.7",
+    "@coorpacademy/components": "10.22.9",
     "@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": "0581f6b96f948da672c274c4d233bc853981f4cc"
+  "gitHead": "0f66b53a129b22c69cb3db1f3ae3993903cd8df3"
 }

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

@@ -1,8 +1,12 @@
 import type {AnyAction} from 'redux';
 import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
 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 {Options, SlideFromAPI} from '../../types/common';
+import type {Options, ProgressionFromAPI, 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;
@@ -13,12 +17,29 @@ export interface ReceivedSlide extends AnyAction {
   payload: SlideFromAPI;
 }
 
-export type FetchSlideAction = ThunkAction<Promise<void>, StoreState, Options, AnyAction>;
+export type FetchSlideAction = ThunkAction<Promise<SlideFromAPI>, StoreState, Options, AnyAction>;
 type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
 
-export const fetchSlide = (slideRef: string, token: string): FetchSlideAction =>
+export const fetchSlide = (
+  progressionFromAPI: ProgressionFromAPI,
+  token: string
+): FetchSlideAction =>
   buildTask({
     types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) =>
-      services.fetchSlide(slideRef, token)
+    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;
+      });
+    }
   });

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

@@ -28,8 +28,7 @@ export const postProgression = (skillRef: string, token: string): PostProgressio
     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) => {
-        const {ref} = progression.state.nextContent;
-        dispatch(fetchSlide(ref, token));
+        dispatch(fetchSlide(progression, token));
         return progression;
       });
     }

package/src/actions/index.ts

@@ -1,13 +1,10 @@
-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 {ReceivedSlide} from './api/fetch-slide';
 import {ReceiveProgression} from './api/post-progression';
 import {ReceivedSkills} from './api/fetch-skills';
+import {validateSlide} from './ui/slides';
 
 export type Action =
   | NavigateBack
@@ -22,10 +19,4 @@ 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/actions/ui/is-fetching.ts

@@ -1,10 +1,6 @@
-// -----------------------------------------------------------------------------
-
 export const START_FETCHING = '@@ui/START_FETCHING';
 export const STOP_FETCHING = '@@ui/STOP_FETCHING';
 
-// -----------------------------------------------------------------------------
-
 export type StartFetching = {
   type: typeof START_FETCHING;
 };
@@ -13,7 +9,5 @@ export type StopFetching = {
   type: typeof STOP_FETCHING;
 };
 
-// -----------------------------------------------------------------------------
-
 export const startFetching = (): StartFetching => ({type: START_FETCHING});
 export const stopFetching = (): StopFetching => ({type: STOP_FETCHING});

package/src/actions/ui/slides.ts

@@ -0,0 +1,35 @@
+import {SlideFromAPI} from '../../types/common';
+import {AnswerUI} from '../../types/slides';
+
+type SlideUIAnimations = 'unstack' | 'restack';
+
+export type Slide = {
+  questionText?: string;
+  answerUI?: AnswerUI;
+  hidden?: boolean;
+  position: number;
+  animationType?: SlideUIAnimations;
+  isCorrect?: boolean;
+  endReview?: boolean;
+  nextContent?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextContent'>;
+};
+
+export const SET_CURRENT_SLIDE = '@@slide/SET_CURRENT_SLIDE' as const;
+export type SetCurrentSlide = {
+  type: typeof SET_CURRENT_SLIDE;
+  payload: SlideFromAPI;
+};
+export const setCurrentSlide = (payload: SlideFromAPI): SetCurrentSlide => ({
+  type: SET_CURRENT_SLIDE,
+  payload
+});
+
+export const VALIDATE_SLIDE = '@@slide/VALIDATE';
+export type ValidateSlide = {
+  type: typeof VALIDATE_SLIDE;
+};
+export const validateSlide = (): ValidateSlide => ({
+  type: VALIDATE_SLIDE
+});
+
+export type UISlidesAction = SetCurrentSlide;

package/src/common/index.ts

@@ -1,3 +1,5 @@
+import _toString from 'lodash/fp/toString';
+
 export const TOTAL_SLIDES_STACK = 5;
 export const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;
 
@@ -11,4 +13,8 @@ export const VIEWS: {
   slides: 'slides'
 };
 
-export const slideNumbers: number[] = [0, 1, 2, 3, 4];
+export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
+
+export type SlideIndexes = typeof slideIndexes[number];
+
+export const indexToString = (index: number): SlideIndexes => _toString(index) as SlideIndexes;

package/src/fixtures/qcm-slide.ts

@@ -1,7 +1,7 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../types/slides';
+import {UISlide} from '../types/common';
 
-export const slide: UISlide = {
+export const slide: Pick<UISlide, 'questionText' | 'answerUI'> = {
   questionText: 'QCM',
   answerUI: {
     help: '__help',

package/src/fixtures/temp-fixture.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
-import {SlidesViewProps} from '../types/views/slides';
+import {SlidesViewProps, CorrectionPopinProps} from '../types/views/slides';
 
-export const correctionPopinProps: SlidesViewProps['correctionPopinProps'] = {
+export const correctionPopinProps: CorrectionPopinProps = {
   klf: {
     label: 'Key learning factor',
     tooltip: 'Some tooltip info.',

package/src/helpers/map-api-slide-to-ui.ts

@@ -8,7 +8,6 @@ import {
   indexOf,
   isEmpty,
   map,
-  noop,
   pipe,
   rangeStep,
   size,
@@ -48,7 +47,8 @@ const qcmProps = (question: QcmQuestion): Qcm => {
         title: choice.label,
         selected: includes(choice.label, answers),
         // TODO: EDIT_CHOICES
-        onClick: noop,
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('TODO: on choice click'),
         ariaLabel: choice.label
       }),
       // TODO: EDIT_CHOICES -> getChoices
@@ -58,7 +58,6 @@ const qcmProps = (question: QcmQuestion): Qcm => {
 };
 
 const qcmDragProps = (question: QcmDragQuestion): QcmDrag => {
-  // mock the answers
   // TODO: EDIT_CHOICES -> getAnswerValues
   const answers: string[] = [];
   return {
@@ -70,7 +69,8 @@ const qcmDragProps = (question: QcmDragQuestion): QcmDrag => {
         selected: indexInAnswer !== -1,
         order: indexInAnswer,
         // TODO: EDIT_CHOICES
-        onClick: noop
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('TODO: on choice click')
       };
       // TODO: EDIT_CHOICES -> getChoices
     }, question.content.choices)
@@ -89,7 +89,8 @@ const qcmGraphicProps = (question: QcmGraphicQuestion): QcmGraphic => {
         image: get('media.src.0.url', choice),
         selected: includes(choice.label, answers),
         // TODO: EDIT_CHOICES
-        onClick: noop
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('TODO: on choice click')
       }),
       // TODO: EDIT_CHOICES -> getChoices
       question.content.choices
@@ -109,7 +110,8 @@ const templateTextProps =
       placeholder: translate('Type here'),
       value: get(index, answers),
       // TODO: EDIT_CHOICES
-      onChange: noop
+      // eslint-disable-next-line no-console
+      onChange: () => console.log('TODO: on choice change')
     };
   };
 
@@ -141,7 +143,8 @@ const templateSelectProps = (uiUtils: UiUtils) => {
       type: 'select',
       name: getOr('', 'name', choice),
       // TODO: EDIT_CHOICES
-      onChange: noop,
+      // eslint-disable-next-line no-console
+      onChange: () => console.log('TODO: on choice change'),
       options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
     };
   };
@@ -177,7 +180,8 @@ const basicProps = (uiUtils: UiUtils): (() => FreeText) => {
       placeholder: translate('Type here'),
       value: head(answers),
       // TODO: EDIT_CHOICES
-      onChange: noop
+      // eslint-disable-next-line no-console
+      onChange: () => console.log('TODO: on choice change')
     };
   };
 };
@@ -187,7 +191,7 @@ const sliderProps = (question: SliderQuestion): QuestionRange => {
     getOr(1, 'content.step', question),
     getOr(Number.NaN, 'content.min', question),
     getOr(Number.NaN, 'content.max', question) + 1
-    // Lodash doesn't infere the type very well here
+    // Lodash doesn't infer the type very well here
   ) as unknown as number[];
 
   // TODO: EDIT_CHOICES -> getAnswerValues
@@ -209,23 +213,26 @@ const sliderProps = (question: SliderQuestion): QuestionRange => {
     title: `${currentValue} ${question.content.unitLabel}`,
     value: sliderPosition,
     // TODO: EDIT_CHOICES
-    onChange: noop
+    // eslint-disable-next-line no-console
+    onChange: () => console.log('TODO: on choice change')
   };
 };
 
 export const getQuestionType = (slide: SlideFromAPI): SlideFromAPI['question']['type'] =>
   slide.question.type;
 
-export const mapApiSlideToUi = (
-  uiUtils: UiUtils
-): ((slide: SlideFromAPI) => AnswerUI['model'] | void) => {
+const getHelp =
+  (uiUtils: UiUtils) =>
+  (slide: SlideFromAPI): string => {
+    const {translate} = uiUtils;
+    return get('question.explanation', slide) || translate('Select something below');
+  };
+
+const getAnswerUIModel = (uiUtils: UiUtils): ((slide: SlideFromAPI) => AnswerUI['model']) => {
   const basicProps_ = basicProps(uiUtils);
   const templateProps_ = templateProps(uiUtils);
 
-  return (slide: SlideFromAPI): AnswerUI['model'] | void => {
-    if (!slide) {
-      return;
-    }
+  return slide => {
     const type = getQuestionType(slide);
     switch (type) {
       case 'qcm':
@@ -251,3 +258,22 @@ export const mapApiSlideToUi = (
     }
   };
 };
+
+export const mapApiSlideToUi = (
+  uiUtils: UiUtils
+): ((slide: SlideFromAPI) => {questionText: string; answerUI: AnswerUI}) => {
+  const getAnswerUIModel_ = getAnswerUIModel(uiUtils);
+  const getHelp_ = getHelp(uiUtils);
+
+  return slide => {
+    if (!slide) {
+      throw new Error('no slide was found');
+    }
+    const questionText = pipe<[SlideFromAPI], string, string>(
+      getOr('', 'question.header') as unknown as (_slide: SlideFromAPI) => string,
+      uiUtils.translate
+    )(slide);
+
+    return {questionText, answerUI: {model: getAnswerUIModel_(slide), help: getHelp_(slide)}};
+  };
+};

package/src/helpers/test/fixtures/free-text.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {FreeText} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const freeTextSlide: SlideFromAPI = {
   id: 'sli_E1Pcl-XAYbi',
@@ -20,9 +19,15 @@ export const freeTextSlide: SlideFromAPI = {
   tips: 'sli_E1Pcl-XAYbi.tips'
 };
 
-export const freeTextUISlide: FreeText = {
-  type: 'freeText',
-  placeholder: 'Type here',
-  value: undefined,
-  onChange: noop
+export const freeTextUISlide: Partial<UISlide> = {
+  answerUI: {
+    help: 'sli_E1Pcl-XAYbi.explanation',
+    model: {
+      type: 'freeText',
+      placeholder: 'Type here',
+      value: undefined,
+      onChange: noop
+    }
+  },
+  questionText: 'sli_E1Pcl-XAYbi.header'
 };

package/src/helpers/test/fixtures/qcm-drag.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {QcmDrag} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const qcmDragSlide: SlideFromAPI = {
   id: 'sli_419IlQQnf',
@@ -73,38 +72,44 @@ export const qcmDragSlide: SlideFromAPI = {
   tips: 'sli_419IlQQnf.tips'
 };
 
-export const qcmDragUISlide: QcmDrag = {
-  type: 'qcmDrag',
-  answers: [
-    {
-      title: 'sli_419IlQQnf.choice_4kWwlQXhG',
-      selected: false,
-      order: -1,
-      onClick: noop
-    },
-    {
-      title: 'sli_419IlQQnf.choice_NJxbwgXm2G',
-      selected: false,
-      order: -1,
-      onClick: noop
-    },
-    {
-      title: 'sli_419IlQQnf.choice_41fwgQXnf',
-      selected: false,
-      order: -1,
-      onClick: noop
-    },
-    {
-      title: 'sli_419IlQQnf.choice_VJmweQ7nz',
-      selected: false,
-      order: -1,
-      onClick: noop
-    },
-    {
-      title: 'sli_419IlQQnf.choice_4kDDgXQhz',
-      selected: false,
-      order: -1,
-      onClick: noop
+export const qcmDragUISlide: Partial<UISlide> = {
+  questionText: 'sli_419IlQQnf.header',
+  answerUI: {
+    help: 'sli_419IlQQnf.explanation',
+    model: {
+      type: 'qcmDrag',
+      answers: [
+        {
+          title: 'sli_419IlQQnf.choice_4kWwlQXhG',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: 'sli_419IlQQnf.choice_NJxbwgXm2G',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: 'sli_419IlQQnf.choice_41fwgQXnf',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: 'sli_419IlQQnf.choice_VJmweQ7nz',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: 'sli_419IlQQnf.choice_4kDDgXQhz',
+          selected: false,
+          order: -1,
+          onClick: noop
+        }
+      ]
     }
-  ]
+  }
 };

package/src/helpers/test/fixtures/qcm-graphic.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {QcmGraphic} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const qcmGraphicSlide: SlideFromAPI = {
   id: 'sli_41~RSVclH',
@@ -55,20 +54,26 @@ export const qcmGraphicSlide: SlideFromAPI = {
   tips: 'sli_41~RSVclH.tips'
 };
 
-export const qcmGraphicUISlide: QcmGraphic = {
-  type: 'qcmGraphic',
-  answers: [
-    {
-      title: 'sli_41~RSVclH.choice_V1gN0r4qgS',
-      image: 'med_4JVRrE5gH.mediaUrl_VkBtUV9gB',
-      selected: false,
-      onClick: noop
-    },
-    {
-      title: 'sli_41~RSVclH.choice_4JlLeLE5lS',
-      image: 'med_Ek8gIEqxB.mediaUrl_EkcFUEclH',
-      selected: false,
-      onClick: noop
+export const qcmGraphicUISlide: Partial<UISlide> = {
+  questionText: 'sli_41~RSVclH.header',
+  answerUI: {
+    help: 'sli_41~RSVclH.explanation',
+    model: {
+      type: 'qcmGraphic',
+      answers: [
+        {
+          title: 'sli_41~RSVclH.choice_V1gN0r4qgS',
+          image: 'med_4JVRrE5gH.mediaUrl_VkBtUV9gB',
+          selected: false,
+          onClick: noop
+        },
+        {
+          title: 'sli_41~RSVclH.choice_4JlLeLE5lS',
+          image: 'med_Ek8gIEqxB.mediaUrl_EkcFUEclH',
+          selected: false,
+          onClick: noop
+        }
+      ]
     }
-  ]
+  }
 };

package/src/helpers/test/fixtures/qcm.ts

@@ -1,6 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {Qcm} from '../../../types/slides';
-import {SlideFromAPI} from '../../../types/common';
+import {SlideFromAPI, UISlide} from '../../../types/common';
 
 export const qcmSlide: SlideFromAPI = {
   question: {
@@ -74,35 +73,42 @@ export const qcmSlide: SlideFromAPI = {
   id: 'sli_N1XACJobn'
 };
 
-export const qcmUISlide: Qcm = {
-  type: 'qcm',
-  answers: [
-    {
-      title: 'Le créateur peut fixer un pourcentage pour chaque transaction future',
-      selected: false,
-      onClick: noop,
-      ariaLabel: 'Le créateur peut fixer un pourcentage pour chaque transaction future'
-    },
-    {
-      title:
-        "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente",
-      selected: false,
-      onClick: noop,
-      ariaLabel:
-        "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente"
-    },
-    {
-      title: "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT",
-      selected: false,
-      onClick: noop,
-      ariaLabel:
-        "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT"
-    },
-    {
-      title: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission",
-      selected: false,
-      onClick: noop,
-      ariaLabel: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission"
+export const qcmUISlide: Partial<UISlide> = {
+  questionText: "Après la vente d'un NFT, son créateur peut-il toucher de l'argent ?",
+  answerUI: {
+    help: 'Sélectionnez la bonne réponse.',
+    model: {
+      type: 'qcm',
+      answers: [
+        {
+          title: 'Le créateur peut fixer un pourcentage pour chaque transaction future',
+          selected: false,
+          onClick: noop,
+          ariaLabel: 'Le créateur peut fixer un pourcentage pour chaque transaction future'
+        },
+        {
+          title:
+            "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente",
+          selected: false,
+          onClick: noop,
+          ariaLabel:
+            "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente"
+        },
+        {
+          title:
+            "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT",
+          selected: false,
+          onClick: noop,
+          ariaLabel:
+            "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT"
+        },
+        {
+          title: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission",
+          selected: false,
+          onClick: noop,
+          ariaLabel: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission"
+        }
+      ]
     }
-  ]
+  }
 };