@coorpacademy/app-review 0.1.9 → 0.1.10

package/lib/test/util/services.mock.js

@@ -1,3 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { qcmSlide } from '../../helpers/test/fixtures/qcm';
 export var services = {
     fetchSkills: function () {
         return Promise.resolve([
@@ -16,38 +28,7 @@ export var services = {
         ]);
     },
     fetchSlide: function (ref) {
-        // return Promise.resolve(qcm); // why qcm does not look like a slide returned from mooc ?
-        return Promise.resolve({
-            question: {
-                content: {
-                    choices: [
-                        {
-                            selected: false,
-                            title: 'choix1',
-                            help: '(help choix1)',
-                            ariaLabel: '__ariaLabel1',
-                            onClick: function () { return undefined; }
-                        },
-                        {
-                            selected: false,
-                            title: 'choix2',
-                            help: '(help choix2)',
-                            ariaLabel: '__ariaLabel2',
-                            onClick: function () { return undefined; }
-                        },
-                        {
-                            selected: false,
-                            title: 'choix3',
-                            help: '(help choix3)',
-                            ariaLabel: '__ariaLabel3',
-                            onClick: function () { return undefined; }
-                        }
-                    ]
-                }
-            },
-            klf: '___klf',
-            universalRef: ref
-        });
+        return Promise.resolve(__assign(__assign({}, qcmSlide), { universalRef: ref, id: ref }));
     },
     postProgression: function () {
         return Promise.resolve({

package/lib/types/common.d.ts

@@ -4,14 +4,71 @@ declare type TemplateContextValues = {
     theme?: unknown;
     translations?: unknown;
 };
-export declare type SlideFromAPI = {
-    question: {
-        content: {
-            choices: Record<string, unknown>[];
-        };
+export declare type ChoiceFromAPI = {
+    _id: string;
+    id?: string;
+    value?: string;
+    name?: string;
+    type?: 'text' | 'select';
+    label?: string;
+    items: {
+        text: string;
+        value: string;
+        _id: string;
+    }[];
+    media?: unknown;
+};
+declare type BaseContent = {
+    media?: unknown;
+    choices: ChoiceFromAPI[];
+};
+declare type Question = {
+    header?: string;
+    content: BaseContent;
+    explanation?: string;
+};
+export declare type QcmQuestion = Question & {
+    type: 'qcm';
+};
+export declare type QcmGraphicQuestion = Question & {
+    type: 'qcmGraphic';
+};
+export declare type QcmDragQuestion = Question & {
+    type: 'qcmDrag';
+};
+export declare type BasicQuestion = Omit<Question, 'content'> & {
+    type: 'basic';
+    content: {
+        media?: unknown;
+        label?: string;
+        placeholder?: string;
+        id: string;
+    };
+};
+export declare type SliderQuestion = Omit<Question, 'content'> & {
+    content: {
+        media?: unknown;
+        unitLabel: string;
+        min: number;
+        max: number;
+        step?: number;
     };
+    type: 'slider';
+};
+export declare type TemplateQuestion = Omit<Question, 'content'> & {
+    content: BaseContent & {
+        template: string;
+    };
+    type: 'template';
+};
+export declare type SlideFromAPI = {
+    question: QcmQuestion | QcmGraphicQuestion | QcmDragQuestion | BasicQuestion | SliderQuestion | TemplateQuestion;
     klf: string;
     universalRef: string;
+    tips?: string;
+    clue?: string;
+    hasClue?: boolean;
+    id?: string;
 };
 export declare type ProgressionFromAPI = {
     _id: string;

package/lib/types/slides.d.ts

@@ -1,9 +1,10 @@
 export declare type Choice = {
     order?: number;
     selected: boolean;
-    title: string;
-    help: string;
+    title?: string;
+    help?: string;
     onClick: Function;
+    ariaLabel?: string;
 };
 export declare type QcmDrag = {
     type: 'qcmDrag';
@@ -12,22 +13,20 @@ export declare type QcmDrag = {
 };
 export declare type Qcm = {
     type: 'qcm';
-    choices: (Choice & {
-        ariaLabel: string;
-    })[];
+    answers: Choice[];
 };
 export declare type QcmGraphic = {
     type: 'qcmGraphic';
-    choices: (Choice & {
+    answers: (Choice & {
         image: string;
     })[];
 };
 export declare type FreeText = {
     type: 'freeText';
     placeholder: string;
-    value: string;
+    value?: string;
     onChange: Function;
-    ariaLabel: string;
+    ariaLabel?: string;
 };
 export declare type DropDownOption = {
     name: string;
@@ -37,26 +36,38 @@ export declare type DropDownOption = {
 };
 export declare type DropDown = {
     type: 'dropDown';
-    onChange: Function;
+    onChange?: Function;
     options: DropDownOption[];
-    theme: 'filter' | 'invalid' | 'header' | 'mooc' | 'question' | 'sort' | 'thematiques' | 'player' | 'template' | 'coorpmanager';
+    theme?: 'filter' | 'invalid' | 'header' | 'mooc' | 'question' | 'sort' | 'thematiques' | 'player' | 'template' | 'coorpmanager';
 };
 export declare type QuestionRange = {
     type: 'slider';
-    onChange: Function;
-    onChangeEnd: Function;
-    multi: boolean;
+    placeholder?: string;
+    onChange?: Function;
+    onChangeEnd?: Function;
+    multi?: boolean;
     value: number | number[];
     title: string;
     minLabel: string;
     maxLabel: string;
 };
+export declare type TextTemplate = {
+    type: 'text';
+    name: string;
+    placeholder: string;
+    value?: string;
+    onChange: Function;
+};
+export declare type SelectionTemplate = {
+    type: 'select';
+    name: string;
+    onChange?: Function;
+    options?: DropDownOption[];
+};
 export declare type Template = {
     type: 'template';
     template: string;
-    choices: (DropDown & {
-        type?: string;
-    })[];
+    answers: (TextTemplate | SelectionTemplate)[];
 };
 export declare type AnswerUI = {
     model: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -40,7 +40,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.3",
+    "@coorpacademy/components": "10.22.4",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -76,5 +76,6 @@
     "react-dom": "^17.0.2",
     "ts-node": "^10.8.1",
     "typescript": "^4.7.4"
-  }
+  },
+  "gitHead": "6a95baa03c98973afdd8d95d1b6959b21c7bb8ee"
 }

package/src/actions/ui/navigation.ts

@@ -4,7 +4,7 @@ export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
 export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
 export const START_APP = '@@navigation/START_APP';
 
-export type ViewPath = 'skills' | 'onboarding' | 'slides';
+export type ViewPath = 'skills' | 'onboarding' | 'slides' | 'loader';
 
 export type NavigateTo = {
   type: '@@navigation/NAVIGATE_TO';

package/src/fixtures/qcm-slide.ts

@@ -7,7 +7,7 @@ export const slide: UISlide = {
     help: '__help',
     model: {
       type: 'qcm',
-      choices: [
+      answers: [
         {
           selected: false,
           title: 'choix1',

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

@@ -0,0 +1,253 @@
+import {
+  concat,
+  divide,
+  get,
+  getOr,
+  head,
+  includes,
+  indexOf,
+  isEmpty,
+  map,
+  noop,
+  pipe,
+  rangeStep,
+  size,
+  toInteger
+} from 'lodash/fp';
+import {
+  AnswerUI,
+  FreeText,
+  Qcm,
+  QcmDrag,
+  QcmGraphic,
+  QuestionRange,
+  SelectionTemplate,
+  Template,
+  TextTemplate
+} from '../types/slides';
+import {
+  ChoiceFromAPI,
+  QcmDragQuestion,
+  QcmGraphicQuestion,
+  QcmQuestion,
+  SlideFromAPI,
+  SliderQuestion,
+  TemplateQuestion
+} from '../types/common';
+
+type UiUtils = {translate: (text: string) => string};
+
+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
+        onClick: noop,
+        ariaLabel: choice.label
+      }),
+      // TODO: EDIT_CHOICES -> getChoices
+      question.content.choices
+    )
+  };
+};
+
+const qcmDragProps = (question: QcmDragQuestion): QcmDrag => {
+  // mock the answers
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+  return {
+    type: 'qcmDrag',
+    answers: map(choice => {
+      const indexInAnswer = indexOf(choice.label, answers);
+      return {
+        title: choice.label,
+        selected: indexInAnswer !== -1,
+        order: indexInAnswer,
+        // TODO: EDIT_CHOICES
+        onClick: noop
+      };
+      // 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
+        onClick: noop
+      }),
+      // TODO: EDIT_CHOICES -> getChoices
+      question.content.choices
+    )
+  };
+};
+
+const templateTextProps =
+  (uiUtils: UiUtils) =>
+  (choice: ChoiceFromAPI, index: number): TextTemplate => {
+    const {translate} = uiUtils;
+    // TODO: EDIT_CHOICES -> getAnswerValues
+    const answers: string[] = [];
+    return {
+      type: 'text',
+      name: getOr('', 'name', choice),
+      placeholder: translate('Type here'),
+      value: get(index, answers),
+      // TODO: EDIT_CHOICES
+      onChange: noop
+    };
+  };
+
+// const getItemText = (item: ChoiceFromAPI['items'][0]): item['text'] is string =>
+
+const templateSelectProps = (uiUtils: UiUtils) => {
+  return (choice: ChoiceFromAPI, index: number): SelectionTemplate => {
+    const {translate} = uiUtils;
+    // TODO: EDIT_CHOICES -> getAnswerValues
+    const answers: string[] = [];
+    const answer = get(index, answers);
+    const temporaryOption = {
+      name: translate('Select an answer'),
+      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
+      onChange: noop,
+      options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
+    };
+  };
+};
+
+const templateProps = (uiUtils: UiUtils): ((question: TemplateQuestion) => Template) => {
+  const templateTextProps_ = templateTextProps(uiUtils);
+  const templateSelectProps_ = templateSelectProps(uiUtils);
+
+  return question => {
+    // 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 = (uiUtils: UiUtils): (() => FreeText) => {
+  const {translate} = uiUtils;
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+
+  return () => {
+    return {
+      type: 'freeText',
+      placeholder: translate('Type here'),
+      value: head(answers),
+      // TODO: EDIT_CHOICES
+      onChange: noop
+    };
+  };
+};
+
+const sliderProps = (question: SliderQuestion): QuestionRange => {
+  const values: number[] = rangeStep(
+    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
+  ) as unknown as number[];
+
+  // TODO: EDIT_CHOICES -> getAnswerValues
+  const answers: string[] = [];
+
+  const stateValue = head(answers);
+  const currentValue = toInteger(stateValue);
+
+  const indexValue = indexOf(currentValue, values);
+  const sliderPosition = divide(indexValue, size(values) - 1);
+
+  const unitLabel = get('question.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
+    onChange: noop
+  };
+};
+
+export const getQuestionType = (slide: SlideFromAPI): SlideFromAPI['question']['type'] =>
+  slide.question.type;
+
+export const mapApiSlideToUi = (
+  uiUtils: UiUtils
+): ((slide: SlideFromAPI) => AnswerUI['model'] | void) => {
+  const basicProps_ = basicProps(uiUtils);
+  const templateProps_ = templateProps(uiUtils);
+
+  return (slide: SlideFromAPI): AnswerUI['model'] | void => {
+    if (!slide) {
+      return;
+    }
+    const type = getQuestionType(slide);
+    switch (type) {
+      case 'qcm':
+        return pipe(get('question'), qcmProps)(slide);
+
+      case 'qcmGraphic':
+        return pipe(get('question'), qcmGraphicProps)(slide);
+
+      case 'qcmDrag':
+        return pipe(get('question'), qcmDragProps)(slide);
+
+      case 'basic':
+        return basicProps_();
+
+      case 'template':
+        return pipe(get('question'), templateProps_)(slide);
+
+      case 'slider':
+        return pipe(get('question'), sliderProps)(slide);
+
+      default:
+        throw new Error(`${type} is not an handled question.type`);
+    }
+  };
+};

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

@@ -0,0 +1,28 @@
+import noop from 'lodash/fp/noop';
+import {FreeText} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const freeTextSlide: SlideFromAPI = {
+  id: 'sli_E1Pcl-XAYbi',
+  universalRef: 'sli_E1Pcl-XAYbi',
+  question: {
+    type: 'basic',
+    header: 'sli_E1Pcl-XAYbi.header',
+    explanation: 'sli_E1Pcl-XAYbi.explanation',
+    content: {
+      label: 'sli_E1Pcl-XAYbi.label',
+      placeholder: 'sli_E1Pcl-XAYbi.placeholder',
+      id: 'sli_E1Pcl-XAYbi.choice_1'
+    }
+  },
+  clue: 'sli_E1Pcl-XAYbi.clue',
+  klf: 'sli_E1Pcl-XAYbi.klf',
+  tips: 'sli_E1Pcl-XAYbi.tips'
+};
+
+export const freeTextUISlide: FreeText = {
+  type: 'freeText',
+  placeholder: 'Type here',
+  value: undefined,
+  onChange: noop
+};

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

@@ -0,0 +1,110 @@
+import noop from 'lodash/fp/noop';
+import {QcmDrag} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const qcmDragSlide: SlideFromAPI = {
+  id: 'sli_419IlQQnf',
+  universalRef: 'sli_419IlQQnf',
+  question: {
+    type: 'qcmDrag',
+    header: 'sli_419IlQQnf.header',
+    explanation: 'sli_419IlQQnf.explanation',
+    content: {
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '62b1ba3ec4f4015504212571',
+          label: 'sli_419IlQQnf.choice_4kWwlQXhG',
+          value: 'sli_419IlQQnf.choice_4kWwlQXhG',
+          items: []
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '62b1ba3ec4f4015504212572',
+          label: 'sli_419IlQQnf.choice_NJxbwgXm2G',
+          value: 'sli_419IlQQnf.choice_NJxbwgXm2G',
+          items: []
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '62b1ba3ec4f4015504212573',
+          label: 'sli_419IlQQnf.choice_41fwgQXnf',
+          value: 'sli_419IlQQnf.choice_41fwgQXnf',
+          items: []
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '62b1ba3ec4f4015504212574',
+          label: 'sli_419IlQQnf.choice_VJmweQ7nz',
+          value: 'sli_419IlQQnf.choice_VJmweQ7nz',
+          items: []
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '62b1ba3ec4f4015504212575',
+          label: 'sli_419IlQQnf.choice_4kDDgXQhz',
+          value: 'sli_419IlQQnf.choice_4kDDgXQhz',
+          items: []
+        }
+      ]
+    }
+  },
+  klf: 'sli_419IlQQnf.klf',
+  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
+    }
+  ]
+};