@coorpacademy/app-review 0.1.15 → 0.1.17

package/src/test/util/services.mock.ts

@@ -1,52 +1,100 @@
-import {qcmSlide} from '../../helpers/test/fixtures/qcm';
-import {Services} from '../../types/common';
+import {qcmSlide} from '../../views/slides/test/fixtures/qcm';
+import {qcmGraphicSlide} from '../../views/slides/test/fixtures/qcm-graphic';
+import {freeTextSlide} from '../../views/slides/test/fixtures/free-text';
+import {sliderSlide} from '../../views/slides/test/fixtures/slider';
+import {ProgressionFromAPI, Services, SlideFromAPI} from '../../types/common';
 
-export const services: Services = {
-  fetchSkills: () => {
-    return Promise.resolve([
-      {
-        skillRef: '_skill-ref',
-        slidesToReview: 2,
-        name: 'skill-test',
-        custom: false
-        // TODO parentContentTitle
-      },
-      {
-        skillRef: '_skill-ref-2',
-        slidesToReview: 2,
-        name: 'skill-test-2',
-        custom: true,
-        parentContentTitle: 'parentContentTitle 2'
-        // TODO parentContentTitle
-      }
-    ]);
+const getSlideFixture = (ref: string): SlideFromAPI => {
+  switch (ref) {
+    case qcmSlide.universalRef:
+      return qcmSlide;
+    case qcmGraphicSlide.universalRef:
+      return qcmGraphicSlide;
+    case freeTextSlide.universalRef:
+      return freeTextSlide;
+    default:
+      return sliderSlide;
+  }
+};
+
+const fetchSkillsResponse = [
+  {
+    skillRef: '_skill-ref',
+    slidesToReview: 2,
+    name: 'skill-test',
+    custom: false
+  },
+  {
+    skillRef: '_skill-ref-2',
+    slidesToReview: 2,
+    name: 'skill-test-2',
+    custom: true
+  }
+];
+
+const postProgressionResponse: ProgressionFromAPI = {
+  _id: '62b1d1087aa12f00253f40ee',
+  content: {
+    ref: '_skill-ref',
+    type: 'skill'
   },
-  fetchSlide: ref => {
-    return Promise.resolve({...qcmSlide, universalRef: ref, id: ref});
+  engine: {
+    ref: 'review'
   },
-  postProgression: () => {
-    return Promise.resolve({
-      _id: '62b1d1087aa12f00253f40ee',
-      content: {
-        ref: '_skill-ref',
-        type: 'skill'
-      },
-      engine: {
-        ref: 'review'
-      },
-      state: {
-        allAnswers: [],
+  state: {
+    allAnswers: [],
+    isCorrect: true,
+    nextContent: {
+      ref: 'sli_VJYjJnJhg',
+      type: 'slide'
+    },
+    pendingSlides: [],
+    slides: [],
+    step: {
+      current: 1
+    },
+    stars: 0
+  }
+};
+
+export const postAnswerResponse: ProgressionFromAPI = {
+  _id: '62b1d1087aa12f00253f40ee',
+  content: {
+    ref: '_skill-ref',
+    type: 'skill'
+  },
+  engine: {
+    ref: 'review'
+  },
+  state: {
+    allAnswers: [
+      {
+        slideRef: 'sli_VJYjJnJhg',
         isCorrect: true,
-        nextContent: {
-          ref: 'sli_N1XACJobn',
-          type: 'slide'
-        },
-        pendingSlides: [],
-        slides: [],
-        step: {
-          current: 1
-        }
+        answer: ['Benchmark']
       }
-    });
+    ],
+    isCorrect: true,
+    nextContent: {
+      ref: 'sli_VkSQroQnx',
+      type: 'slide'
+    },
+    content: {
+      ref: 'sli_VJYjJnJhg',
+      type: 'slide'
+    },
+    pendingSlides: [],
+    slides: ['sli_VJYjJnJhg'],
+    step: {
+      current: 2
+    },
+    stars: 4
   }
 };
+
+export const services: Services = {
+  fetchSkills: () => Promise.resolve(fetchSkillsResponse),
+  fetchSlide: ref => Promise.resolve({...getSlideFixture(ref), universalRef: ref, id: ref}),
+  postProgression: () => Promise.resolve(postProgressionResponse),
+  postAnswer: () => Promise.resolve(postAnswerResponse)
+};

package/src/types/common.ts

@@ -1,6 +1,3 @@
-import {SlideIndexes} from '../common';
-import {AnswerUI} from './slides';
-
 // TODO use type from components
 type TemplateContextValues = {
   brandTheme?: unknown;
@@ -25,25 +22,25 @@ type BaseContent = {
   choices: ChoiceFromAPI[];
 };
 
-type Question = {
+type BaseQuestion = {
   header?: string;
   content: BaseContent;
   explanation?: string;
 };
 
-export type QcmQuestion = Question & {
+export type QcmQuestion = BaseQuestion & {
   type: 'qcm';
 };
 
-export type QcmGraphicQuestion = Question & {
+export type QcmGraphicQuestion = BaseQuestion & {
   type: 'qcmGraphic';
 };
 
-export type QcmDragQuestion = Question & {
+export type QcmDragQuestion = BaseQuestion & {
   type: 'qcmDrag';
 };
 
-export type BasicQuestion = Omit<Question, 'content'> & {
+export type BasicQuestion = Omit<BaseQuestion, 'content'> & {
   type: 'basic';
   content: {
     media?: unknown;
@@ -53,7 +50,7 @@ export type BasicQuestion = Omit<Question, 'content'> & {
   };
 };
 
-export type SliderQuestion = Omit<Question, 'content'> & {
+export type SliderQuestion = Omit<BaseQuestion, 'content'> & {
   content: {
     media?: unknown;
     unitLabel: string;
@@ -64,27 +61,33 @@ export type SliderQuestion = Omit<Question, 'content'> & {
   type: 'slider';
 };
 
-export type TemplateQuestion = Omit<Question, 'content'> & {
+export type TemplateQuestion = Omit<BaseQuestion, 'content'> & {
   content: BaseContent & {
     template: string;
   };
   type: 'template';
 };
 
+export type Question =
+  | QcmQuestion
+  | QcmGraphicQuestion
+  | QcmDragQuestion
+  | BasicQuestion
+  | SliderQuestion
+  | TemplateQuestion;
+
 export type SlideFromAPI = {
-  question:
-    | QcmQuestion
-    | QcmGraphicQuestion
-    | QcmDragQuestion
-    | BasicQuestion
-    | SliderQuestion
-    | TemplateQuestion;
+  question: Question;
   klf: string;
   universalRef: string;
   tips?: string;
   clue?: string;
   hasClue?: boolean;
   id: string;
+  parentContentTitle: {
+    title: string;
+    type: 'chapter' | 'course';
+  };
 };
 
 type ProgressionAnswerItem = {
@@ -109,10 +112,18 @@ export type ProgressionState = {
   step: {
     current: number;
   };
+  stars: number;
 };
 
 export type ProgressionFromAPI = {
   _id: string;
+  content: {
+    type: 'skill';
+    ref: string;
+  };
+  engine: {
+    ref: 'review';
+  };
   state: ProgressionState;
 };
 
@@ -127,6 +138,12 @@ export type Services = {
   fetchSkills(token: string): Promise<Skill[]>;
   fetchSlide(slideRef: string, token: string): Promise<SlideFromAPI | void>;
   postProgression(skillRef: string, token: string): Promise<ProgressionFromAPI>;
+  postAnswer(
+    skillRef: string,
+    token: string,
+    progressionId: string,
+    answer: string[]
+  ): Promise<ProgressionFromAPI>;
 };
 
 export type Options = {
@@ -152,33 +169,6 @@ export type JWT = {
   host: string;
 };
 
-type SlideUIAnimations = 'unstack' | 'restack';
-
-export type NextUISlide = {
-  questionText?: string;
-  answerUI?: AnswerUI;
-  hidden?: boolean;
-  position?: number;
-  animationType?: SlideUIAnimations;
-  isCorrect?: boolean;
-  endReview?: boolean;
-};
-
-export type UISlide = {
-  questionText?: string;
-  answerUI?: AnswerUI;
-  hidden?: boolean;
-  position: number;
-  animationType?: SlideUIAnimations;
-  isCorrect?: boolean;
-  endReview?: boolean;
-  nextContent?: NextUISlide;
-};
-
-export type FinishedSlides = {
-  [key in SlideIndexes]?: true;
-};
-
 export type WithRequired<T, K extends keyof T> = T & {
   // the "-" is a Mapping Modifier, removes optionality from a prop
   [P in K]-?: T[P];

package/src/views/skills/index.ts

@@ -28,11 +28,7 @@ type SkillsProps = NoSkillsProps & {
 
 export {SkillsProps};
 
-export const mapStateToSkillsProps = (state: StoreState): SkillsProps | null => {
-  if (!state.data.skills) {
-    return null;
-  }
-
+export const mapStateToSkillsProps = (state: StoreState): SkillsProps => {
   return {
     title: '@todo title',
     titleNoSkills: '@todo titleNoSkills',

package/src/views/skills/test/skills.test.ts

@@ -0,0 +1,101 @@
+import test from 'ava';
+import map from 'lodash/fp/map';
+import omit from 'lodash/fp/omit';
+import {StoreState} from '../../../reducers';
+import {mapStateToSkillsProps} from '..';
+
+test('should create initial props when there are no skills on the state', t => {
+  const state: StoreState = {
+    data: {
+      progression: null,
+      skills: [],
+      slides: {},
+      token: '1234'
+    },
+    ui: {
+      currentSlideRef: '',
+      navigation: ['loader', 'skills'],
+      answers: [],
+      slide: {
+        validateButton: false
+      }
+    }
+  };
+
+  const props = mapStateToSkillsProps(state);
+
+  t.deepEqual(props, {
+    title: '@todo title',
+    titleNoSkills: '@todo titleNoSkills',
+    textNoSkills: '@todo textNoSkills',
+    iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+    isLoading: false,
+    isLoadingAriaLabel: '@todo loading',
+    listSkills: []
+  });
+});
+
+test('should create initial props when skills on the state', t => {
+  const state: StoreState = {
+    data: {
+      progression: null,
+      skills: [
+        {
+          skillRef: '_skill-ref',
+          slidesToReview: 2,
+          name: 'skill-test',
+          custom: false
+        },
+        {
+          skillRef: '_skill-ref-2',
+          slidesToReview: 5,
+          name: 'skill-test-2',
+          custom: true
+        }
+      ],
+      slides: {},
+      token: '1234'
+    },
+    ui: {
+      currentSlideRef: '',
+      navigation: ['loader', 'skills'],
+      answers: [],
+      slide: {
+        validateButton: false
+      }
+    }
+  };
+
+  const props = mapStateToSkillsProps(state);
+
+  t.deepEqual(omit('listSkills', props), {
+    title: '@todo title',
+    titleNoSkills: '@todo titleNoSkills',
+    textNoSkills: '@todo textNoSkills',
+    iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+    isLoading: false,
+    isLoadingAriaLabel: '@todo loading'
+  });
+  t.deepEqual(map(omit('onClick'), props.listSkills), [
+    {
+      'aria-label': '',
+      isCustom: false,
+      skillTitle: 'skill-test',
+      skillAriaLabel: '@todo skill aria label',
+      buttonLabel: '@todo button',
+      buttonAriaLabel: '@todo button aria label',
+      reviseLabel: '@todo revise',
+      reviseAriaLabel: '@todo revise aria label'
+    },
+    {
+      'aria-label': '',
+      isCustom: true,
+      skillTitle: 'skill-test-2',
+      skillAriaLabel: '@todo skill aria label',
+      buttonLabel: '@todo button',
+      buttonAriaLabel: '@todo button aria label',
+      reviseLabel: '@todo revise',
+      reviseAriaLabel: '@todo revise aria label'
+    }
+  ]);
+});

package/src/views/slides/index.ts

@@ -1,8 +1,187 @@
+import concat from 'lodash/fp/concat';
+
+import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 import isEmpty from 'lodash/fp/isEmpty';
+import pipe from 'lodash/fp/pipe';
+import reduce from 'lodash/fp/reduce';
+import set from 'lodash/fp/set';
+import slice from 'lodash/fp/slice';
+import toInteger from 'lodash/fp/toInteger';
+import {Dispatch} from 'redux';
+import {ProgressionFromAPI} from '../../types/common';
+import {SlideIndexes} from '../../common';
 import {StoreState} from '../../reducers';
-import {SlidesViewStaticProps, StepItem} from '../../types/views/slides';
+import {AnswerUI} from '../../types/slides';
+import {postAnswer} from '../../actions/api/post-answer';
+import {mapApiSlideToUi} from './map-api-slide-to-ui';
+
+const ICON_VALUES = {
+  right: 'right',
+  wrong: 'wrong',
+  'no-answer': 'no-answer'
+} as const;
+
+type IconValue = keyof typeof ICON_VALUES;
+
+type StepItem = {
+  current: boolean;
+  icon: IconValue;
+  value: string;
+};
+
+type SlideUIAnimations = 'unstack' | 'restack';
 
-const buildStepItemps = (state: StoreState): StepItem[] => {
+export type UISlide = {
+  questionText?: string;
+  answerUI?: AnswerUI;
+  hidden?: boolean;
+  position: number;
+  animationType?: SlideUIAnimations;
+  isCorrect?: boolean;
+  endReview?: boolean;
+  loading: boolean;
+};
+
+type SlidesStack = {
+  [key in SlideIndexes]: UISlide;
+};
+
+export type CorrectionPopinProps = {
+  klf: {
+    label: string;
+    onClick: Function;
+    tooltip: string;
+  };
+  information: {
+    label: string;
+    message: string;
+  };
+  next: {
+    label: string;
+    ariaLabel: string;
+  };
+  successLabel: string;
+  failureLabel: string;
+};
+
+export type SlidesViewProps = {
+  header: {
+    mode: string;
+    skillName: string;
+    onQuitClick: Function;
+    'aria-label'?: string;
+    closeButtonAriaLabel: string;
+    steps: StepItem[];
+  };
+  stack: {
+    slides: SlidesStack;
+    validateButton: {
+      label: string;
+      disabled: boolean;
+      onClick: Function;
+    };
+    correctionPopinProps?: CorrectionPopinProps;
+    endReview: boolean;
+  };
+  reviewBackgroundAriaLabel?: string;
+  congratsProps?: {
+    'aria-label'?: string;
+    'data-name'?: string;
+    animationLottie: unknown;
+    title: string;
+    cardCongratsStar: unknown;
+    cardCongratsRank: unknown;
+    buttonRevising: {
+      'aria-label'?: string;
+      label: string;
+      onClick: Function;
+      type: string;
+    };
+    buttonRevisingSkill: {
+      'aria-label'?: string;
+      label: string;
+      onClick: Function;
+      type: string;
+    };
+  };
+};
+
+export const initialState: SlidesStack = {
+  '0': {
+    hidden: false,
+    position: 0,
+    loading: true
+  },
+  '1': {
+    hidden: false,
+    position: 1,
+    loading: true
+  },
+  '2': {
+    hidden: false,
+    position: 2,
+    loading: true
+  },
+  '3': {
+    hidden: false,
+    position: 3,
+    loading: true
+  },
+  '4': {
+    hidden: false,
+    position: 4,
+    loading: true
+  }
+};
+
+const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
+  if (progression.state.step.current < 5) {
+    const slideRef = progression.state.nextContent.ref;
+    return concat([slideRef], progression.state.slides);
+  }
+  return slice(0, 5, progression.state.slides);
+};
+
+const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack => {
+  const currentSlideRef = state.ui.currentSlideRef;
+  const progression = state.data.progression;
+
+  if (!currentSlideRef || !progression) return initialState;
+  const slideRefs = getProgressionSlidesRefs(progression);
+
+  // @ts-expect-error typescript does not support capped versions of lodash functions
+  const stack = reduce.convert({cap: false})(
+    (acc: SlidesStack, uiSlide: UISlide, index: string) => {
+      const slideRef = slideRefs[toInteger(index)];
+      if (!slideRef) return set(index, uiSlide, acc);
+
+      const slideFromAPI = get(slideRef, state.data.slides);
+      if (!slideFromAPI) return set(index, uiSlide, acc);
+
+      const answers = state.ui.answers;
+      const {questionText, answerUI} = mapApiSlideToUi(dispatch)(slideFromAPI, answers);
+      const parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
+      const parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
+
+      const updatedUiSlide = pipe(
+        set('loading', false),
+        set('questionText', questionText),
+        set('answerUI', answerUI),
+        set('parentContentTitle', `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
+        // TODO: Set position according to currentSlideRef et slideRefs (or maybe a value on the state ui.slidePositions !!)
+      )(uiSlide);
+
+      return set(index, updatedUiSlide, acc);
+    },
+    initialState,
+    initialState
+  );
+
+  return stack;
+};
+
+const buildStepItems = (state: StoreState): StepItem[] => {
   const {progression} = state.data;
   const {currentSlideRef} = state.ui;
   if (!progression) return [];
@@ -57,11 +236,7 @@ const buildStepItemps = (state: StoreState): StepItem[] => {
   return steps;
 };
 
-export const mapStateToSlidesProps = (state: StoreState): SlidesViewStaticProps | null => {
-  if (!state.data.slides) {
-    return null;
-  }
-
+export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): SlidesViewProps => {
   return {
     header: {
       mode: '__revision_mode',
@@ -72,16 +247,15 @@ export const mapStateToSlidesProps = (state: StoreState): SlidesViewStaticProps
       },
       'aria-label': 'aria-header-wrapper',
       closeButtonAriaLabel: 'aria-close-button',
-      steps: buildStepItemps(state)
+      steps: buildStepItems(state)
     },
     stack: {
-      slides: state.ui.slides,
+      slides: buildStackSlides(state, dispatch),
       validateButton: {
         label: '__validate',
-        disabled: true,
+        disabled: !get('ui.slide.validateButton', state),
         onClick: (): void => {
-          // eslint-disable-next-line no-console
-          console.log('TODO: validate question');
+          dispatch(postAnswer);
         }
       },
       correctionPopinProps: undefined,