@coorpacademy/app-review 0.1.14 → 0.1.16

package/src/views/slides/index.ts

@@ -0,0 +1,251 @@
+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, UISlide} from '../../types/common';
+import {SlideIndexes} from '../../common';
+import {StoreState} from '../../reducers';
+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 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
+  },
+  '1': {
+    hidden: false,
+    position: 1
+  },
+  '2': {
+    hidden: false,
+    position: 2
+  },
+  '3': {
+    hidden: false,
+    position: 3
+  },
+  '4': {
+    hidden: false,
+    position: 4
+  }
+};
+
+const getProgressionSlidesRef = (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 = getProgressionSlidesRef(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);
+      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(['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 [];
+
+  const defaultProps: StepItem[] = [
+    {
+      icon: 'no-answer',
+      current: true,
+      value: '1'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '2'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '3'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '4'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '5'
+    }
+  ];
+
+  const allAnswers = progression.state.allAnswers;
+  const step = progression.state.step;
+  if (isEmpty(allAnswers)) return defaultProps;
+
+  const steps = defaultProps.map((stepItem, index): StepItem => {
+    const givenAnswer = allAnswers[index];
+    if (!givenAnswer) {
+      return {
+        ...stepItem,
+        current: step.current === index + 1
+      };
+    }
+
+    return {
+      ...stepItem,
+      icon: givenAnswer.isCorrect ? 'right' : 'wrong',
+      current: givenAnswer.slideRef === currentSlideRef
+    };
+  });
+  return steps;
+};
+
+export const mapStateToSlidesProps = (
+  state: StoreState,
+  dispatch: Dispatch
+): SlidesViewProps | null => {
+  if (!state.data.slides) {
+    return null;
+  }
+
+  return {
+    header: {
+      mode: '__revision_mode',
+      skillName: '__agility',
+      onQuitClick: (): void => {
+        // eslint-disable-next-line no-console
+        console.log('onQuitClick');
+      },
+      'aria-label': 'aria-header-wrapper',
+      closeButtonAriaLabel: 'aria-close-button',
+      steps: buildStepItems(state)
+    },
+    stack: {
+      slides: buildStackSlides(state, dispatch),
+      validateButton: {
+        label: '__validate',
+        disabled: true,
+        onClick: (): void => {
+          // eslint-disable-next-line no-console
+          console.log('TODO: validate question');
+        }
+      },
+      correctionPopinProps: undefined,
+      endReview: false
+    },
+    congratsProps: undefined
+  };
+};

package/src/views/slides/map-api-slide-to-ui.ts

@@ -0,0 +1,251 @@
+import {
+  concat,
+  divide,
+  get,
+  getOr,
+  head,
+  includes,
+  indexOf,
+  isEmpty,
+  map,
+  rangeStep,
+  size,
+  toInteger
+} from 'lodash/fp';
+import {Dispatch} from 'redux';
+import {
+  AnswerUI,
+  FreeText,
+  Qcm,
+  QcmDrag,
+  QcmGraphic,
+  QuestionRange,
+  SelectionTemplate,
+  Template,
+  TextTemplate
+} from '../../types/slides';
+import {
+  BasicQuestion,
+  ChoiceFromAPI,
+  QcmDragQuestion,
+  QcmGraphicQuestion,
+  QcmQuestion,
+  Question,
+  SlideFromAPI,
+  SliderQuestion,
+  TemplateQuestion
+} from '../../types/common';
+import {editAnswer} from '../../actions/ui/answers';
+
+const qcmProps = (question: QcmQuestion): Qcm => {
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+
+  return {
+    type: 'qcm',
+    answers: map(
+      choice => ({
+        title: choice.label,
+        selected: includes(choice.label, answers),
+        // TODO: EDIT_CHOICES
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('TODO: on choice click'),
+        ariaLabel: choice.label
+      }),
+      // TODO: EDIT_CHOICES -> getChoices
+      question.content.choices
+    )
+  };
+};
+
+const qcmDragProps = (question: QcmDragQuestion): QcmDrag => {
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+  return {
+    type: 'qcmDrag',
+    answers: map(choice => {
+      const indexInAnswer = indexOf(choice.label, answers);
+      return {
+        title: choice.label,
+        selected: includes(choice.label, answers),
+        order: indexInAnswer,
+        // TODO: EDIT_CHOICES
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('TODO: on choice click')
+      };
+      // TODO: EDIT_CHOICES -> getChoices
+    }, question.content.choices)
+  };
+};
+
+const qcmGraphicProps = (question: QcmGraphicQuestion): QcmGraphic => {
+  // mock the answers
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+  return {
+    type: 'qcmGraphic',
+    answers: map(
+      choice => ({
+        title: choice.label,
+        image: get('media.src.0.url', choice),
+        selected: includes(choice.label, answers),
+        // TODO: EDIT_CHOICES
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('TODO: on choice click')
+      }),
+      // TODO: EDIT_CHOICES -> getChoices
+      question.content.choices
+    )
+  };
+};
+
+const templateTextProps = (choice: ChoiceFromAPI, index: number): TextTemplate => {
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+  return {
+    type: 'text',
+    name: getOr('', 'name', choice), // TODO prendre valeur depuis les données de l'api
+    placeholder: 'Type here',
+    value: get(index, answers),
+    // TODO: EDIT_CHOICES
+    // eslint-disable-next-line no-console
+    onChange: () => console.log('TODO: on choice change')
+  };
+};
+
+const templateSelectProps = (choice: ChoiceFromAPI, index: number): SelectionTemplate => {
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+  const answer = get(index, answers);
+  const temporaryOption = {
+    name: 'Select an answer', // TODO translate
+    value: '',
+    validOption: false,
+    selected: true
+  };
+  const selectOptions = choice.items.map(item => {
+    const itemText = getOr('', 'text', item);
+    return {
+      name: itemText,
+      value: itemText,
+      validOption: true,
+      selected: itemText === answer
+    };
+  });
+
+  return {
+    type: 'select',
+    name: getOr('', 'name', choice),
+    // TODO: EDIT_CHOICES
+    // eslint-disable-next-line no-console
+    onChange: () => console.log('TODO: on choice change'),
+    options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
+  };
+};
+
+const templateProps = (question: TemplateQuestion): Template => {
+  // TODO: EDIT_CHOICES -> getChoices
+  const choices = question.content.choices;
+  return {
+    type: 'template',
+    template: get('content.template', question),
+    answers: choices.map((choice, index) =>
+      choice.type === 'text' ? templateTextProps(choice, index) : templateSelectProps(choice, index)
+    )
+  };
+};
+
+const basicProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: BasicQuestion): FreeText => {
+    return {
+      type: 'freeText',
+      placeholder: question.content.placeholder || '',
+      value: answers[0] || '',
+      onChange: (text: string): void => {
+        // eslint-disable-next-line no-console
+        console.log(text);
+        dispatch(editAnswer(text));
+      }
+    };
+  };
+
+const sliderProps = (question: SliderQuestion): QuestionRange => {
+  const values: number[] = rangeStep(
+    getOr(1, 'content.step', question),
+    get('content.min', question),
+    get('content.max', question) + 1
+    // Lodash doesn't infer the type very well here
+  ) as unknown as number[];
+
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+
+  const stateValue = head(answers) || question.content.min;
+  const currentValue = toInteger(stateValue);
+
+  const indexValue = indexOf(currentValue, values);
+  const sliderPosition = divide(indexValue, size(values) - 1);
+
+  const unitLabel = get('content.unitLabel', question);
+
+  return {
+    type: 'slider',
+    placeholder: question.explanation,
+    minLabel: `${question.content.min} ${unitLabel}`,
+    maxLabel: `${question.content.max} ${unitLabel}`,
+    title: `${currentValue} ${question.content.unitLabel}`,
+    value: sliderPosition,
+    // TODO: EDIT_CHOICES
+    // eslint-disable-next-line no-console
+    onChange: () => console.log('TODO: on choice change')
+  };
+};
+
+export const getQuestionType = (question: Question): Question['type'] => question.type;
+
+const getHelp = (slide: SlideFromAPI): string => get('question.explanation', slide);
+
+const getAnswerUIModel = (
+  question: Question,
+  answers: string[],
+  dispatch: Dispatch
+): AnswerUI['model'] => {
+  const type = getQuestionType(question);
+  switch (type) {
+    case 'qcm':
+      return qcmProps(question as QcmQuestion);
+
+    case 'qcmGraphic':
+      return qcmGraphicProps(question as QcmGraphicQuestion);
+
+    case 'qcmDrag':
+      return qcmDragProps(question as QcmDragQuestion);
+
+    case 'basic':
+      return basicProps(dispatch)(answers, question as BasicQuestion);
+
+    case 'template':
+      return templateProps(question as TemplateQuestion);
+
+    case 'slider':
+      return sliderProps(question as SliderQuestion);
+
+    default:
+      throw new Error(`${type} is not an handled question.type`);
+  }
+};
+
+export const mapApiSlideToUi =
+  (dispatch: Dispatch) =>
+  (slide: SlideFromAPI, answers: string[]): {questionText: string; answerUI: AnswerUI} => {
+    if (!slide) {
+      throw new Error('no slide was found');
+    }
+    const questionText = getOr('', 'question.header', slide);
+
+    return {
+      questionText,
+      answerUI: {model: getAnswerUIModel(slide.question, answers, dispatch), help: getHelp(slide)}
+    };
+  };

package/src/views/slides/test/fixtures/free-text.ts

@@ -0,0 +1,43 @@
+import noop from 'lodash/fp/noop';
+import {SlideFromAPI, UISlide} from '../../../../types/common';
+
+export const freeTextSlide: SlideFromAPI = {
+  question: {
+    content: {
+      media: {
+        src: [],
+        posters: [],
+        subtitles: []
+      },
+      label: '',
+      placeholder: 'Type here',
+      id: 'sli_VJYjJnJhg.choice_1'
+    },
+    type: 'basic',
+    header:
+      'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?',
+    explanation: 'Type your answer.'
+  },
+  klf: 'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.',
+  tips: 'According to Insee, Paris salaries are 20-25% higher compared with those of the provinces in 2015.',
+  universalRef: 'sli_VJYjJnJhg',
+  id: 'sli_VJYjJnJhg',
+  parentContentTitle: {
+    title: 'Developing the review app',
+    type: 'course'
+  }
+};
+
+export const freeTextUISlide: Partial<UISlide> = {
+  answerUI: {
+    help: 'Type your answer.',
+    model: {
+      type: 'freeText',
+      placeholder: 'Type here',
+      value: '',
+      onChange: noop
+    }
+  },
+  questionText:
+    'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?'
+};

package/src/views/slides/test/fixtures/qcm-drag.ts

@@ -0,0 +1,111 @@
+import noop from 'lodash/fp/noop';
+import {SlideFromAPI, UISlide} from '../../../../types/common';
+
+export const qcmDragSlide: SlideFromAPI = {
+  question: {
+    content: {
+      media: {
+        src: [],
+        posters: [],
+        subtitles: []
+      },
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '624f01970a234b0333bc7ce8',
+          label: 'La démoralisation',
+          value: 'sli_4yGBq-mCg.choice_4kRL5uQCg',
+          id: '624f01970a234b0333bc7ce8'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '624f01970a234b0333bc7ce9',
+          label: 'La stagnation',
+          value: 'sli_4yGBq-mCg.choice_E11v9OXAx',
+          id: '624f01970a234b0333bc7ce9'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '624f01970a234b0333bc7cea',
+          label: 'La frustration',
+          value: 'sli_4yGBq-mCg.choice_N1lP9dmRg',
+          id: '624f01970a234b0333bc7cea'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '624f01970a234b0333bc7ceb',
+          label: "L'implication",
+          value: 'sli_4yGBq-mCg.choice_Eybw5dQCx',
+          id: '624f01970a234b0333bc7ceb'
+        }
+      ]
+    },
+    type: 'qcmDrag',
+    header: "Remettez dans l'ordre les quatre étapes du burn out.",
+    explanation: 'Sélectionnez les réponses ci-dessous dans le bon ordre.'
+  },
+  klf: "Le burn out s'installe en quatre étapes : tout d'abord, l'implication (investissement émotionnel et/ou affectif, sacrifice de sa vie privée) ; en second, la stagnation (premières déceptions, signes de fatigue) ; ensuite, la frustration (efforts non reconnus) ; et enfin, la démoralisation (problèmes de concentration, sentiment d'inutilité, désespoir).",
+  tips: "Encadré par la loi, l'entretien professionnel a pour but d'aider le collaborateur à verbaliser ses difficultés et à construire son projet professionnel.",
+  universalRef: 'sli_4yGBq-mCg',
+  id: 'sli_4yGBq-mCg',
+  parentContentTitle: {
+    title: 'Using redux',
+    type: 'chapter'
+  }
+};
+
+export const qcmDragUISlide: Partial<UISlide> = {
+  questionText: "Remettez dans l'ordre les quatre étapes du burn out.",
+  answerUI: {
+    help: 'Sélectionnez les réponses ci-dessous dans le bon ordre.',
+    model: {
+      type: 'qcmDrag',
+      answers: [
+        {
+          title: 'La démoralisation',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: 'La stagnation',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: 'La frustration',
+          selected: false,
+          order: -1,
+          onClick: noop
+        },
+        {
+          title: "L'implication",
+          selected: false,
+          order: -1,
+          onClick: noop
+        }
+      ]
+    }
+  }
+};