@coorpacademy/app-review 0.1.8 → 0.1.10

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
+    }
+  ]
+};

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

@@ -0,0 +1,74 @@
+import noop from 'lodash/fp/noop';
+import {QcmGraphic} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const qcmGraphicSlide: SlideFromAPI = {
+  id: 'sli_41~RSVclH',
+  universalRef: 'sli_41~RSVclH',
+  question: {
+    type: 'qcmGraphic',
+    header: 'sli_41~RSVclH.header',
+    explanation: 'sli_41~RSVclH.explanation',
+    content: {
+      choices: [
+        {
+          media: {
+            type: 'img',
+            src: [
+              {
+                _id: '5fdce726359bf4003ee66997',
+                mimeType: 'image/png',
+                url: 'med_4JVRrE5gH.mediaUrl_VkBtUV9gB'
+              }
+            ],
+            posters: [],
+            subtitles: []
+          },
+          _id: '5fdce726359bf4003ee66996',
+          label: 'sli_41~RSVclH.choice_V1gN0r4qgS',
+          value: 'sli_41~RSVclH.choice_V1gN0r4qgS',
+          items: []
+        },
+        {
+          media: {
+            type: 'img',
+            src: [
+              {
+                _id: '5fdce726359bf4003ee66999',
+                mimeType: 'image/png',
+                url: 'med_Ek8gIEqxB.mediaUrl_EkcFUEclH'
+              }
+            ],
+            posters: [],
+            subtitles: []
+          },
+          _id: '5fdce726359bf4003ee66998',
+          label: 'sli_41~RSVclH.choice_4JlLeLE5lS',
+          value: 'sli_41~RSVclH.choice_4JlLeLE5lS',
+          items: []
+        }
+      ]
+    }
+  },
+  clue: 'sli_41~RSVclH.clue',
+  klf: 'sli_41~RSVclH.klf',
+  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
+    }
+  ]
+};

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

@@ -0,0 +1,108 @@
+import noop from 'lodash/fp/noop';
+import {Qcm} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const qcmSlide: SlideFromAPI = {
+  question: {
+    content: {
+      media: {
+        src: [],
+        posters: [],
+        subtitles: []
+      },
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e759',
+          label: 'Le créateur peut fixer un pourcentage pour chaque transaction future',
+          value: 'sli_N1XACJobn.choice_4JjaSesZh',
+          id: '62c853412d0f9b088718e759'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e75a',
+          label:
+            "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente",
+          value: 'sli_N1XACJobn.choice_Ny78UlsWh',
+          id: '62c853412d0f9b088718e75a'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e75b',
+          label:
+            "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT",
+          value: 'sli_N1XACJobn.choice_Eypt8esW2',
+          id: '62c853412d0f9b088718e75b'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e75c',
+          label: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission",
+          value: 'sli_N1XACJobn.choice_VyS3LxjZh',
+          id: '62c853412d0f9b088718e75c'
+        }
+      ]
+    },
+    type: 'qcm',
+    header: "Après la vente d'un NFT, son créateur peut-il toucher de l'argent ?",
+    explanation: 'Sélectionnez la bonne réponse.'
+  },
+  klf: 'Si vous êtes le créateur d’un NFT, vous pouvez choisir le pourcentage de commission pour chaque transaction de votre NFT.  Certains choisissent de ne rien toucher pour fluidifier le marché.',
+  tips: 'En 2021, le média en ligne Numerama a créé un NFT vendu aux enchères sur OpenSea. Sur cette plateforme, il est obligatoire de mettre un prix de réserve, autrement dit un prix minimum au-dessous duquel la vente ne sera pas automatiquement acceptée. Sur OpenSea il ne peut être inférieur à 1 ETH. Si le prix de réserve est atteint, pas de problème, les "gas fees" (les frais de gaz) sont couverts par OpenSea. Mais, si ce n’est pas le cas, c’est au vendeur de s’en acquitter. <br/>Le NFT en question est parti à 0,021 ETH, soit 40€ au cours de l\'époque, un prix inférieur au prix de réserve. Numerama a dû acquitter des frais de gaz, et payer 190 €. <br/>Avec les NFT, on ne gagne pas à tous les coups.',
+  universalRef: 'sli_N1XACJobn',
+  hasClue: true,
+  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"
+    }
+  ]
+};

package/src/helpers/test/fixtures/select-template.ts

@@ -0,0 +1,92 @@
+import noop from 'lodash/fp/noop';
+import {Template} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const selectTemplateSlide: SlideFromAPI = {
+  id: 'sli_410xZQxrZ',
+  universalRef: 'sli_410xZQxrZ',
+  question: {
+    type: 'template',
+    header: 'sli_410xZQxrZ.header',
+    explanation: 'sli_410xZQxrZ.explanation',
+    content: {
+      template: 'sli_410xZQxrZ.template',
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '5fdce726359bf4003ee66967',
+          type: 'select',
+          name: 'sel36665',
+          items: [
+            {
+              _id: '5fdce726359bf4003ee66968',
+              text: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+              value: 'sli_410xZQxrZ.choice_4yeA4Z7lr~'
+            },
+            {
+              _id: '5fdce726359bf4003ee66969',
+              text: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+              value: 'sli_410xZQxrZ.choice_VJWCN~mgB~'
+            },
+            {
+              _id: '5fdce726359bf4003ee6696a',
+              text: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+              value: 'sli_410xZQxrZ.choice_VkaH~XgBb'
+            },
+            {
+              _id: '5fdce726359bf4003ee6696b',
+              text: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+              value: 'sli_410xZQxrZ.choice_E1uUWXeBb'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  clue: 'sli_410xZQxrZ.clue',
+  klf: 'sli_410xZQxrZ.klf',
+  tips: 'sli_410xZQxrZ.tips'
+};
+
+export const selectTemplateUISlide: Template = {
+  type: 'template',
+  template: 'sli_410xZQxrZ.template',
+  answers: [
+    {
+      type: 'select',
+      name: 'sel36665',
+      onChange: noop,
+      options: [
+        {name: 'Select an answer', value: '', validOption: false, selected: true},
+        {
+          name: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+          value: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+          validOption: true,
+          selected: false
+        },
+        {
+          name: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+          value: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+          validOption: true,
+          selected: false
+        },
+        {
+          name: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+          value: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+          validOption: true,
+          selected: false
+        },
+        {
+          name: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+          value: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+          validOption: true,
+          selected: false
+        }
+      ]
+    }
+  ]
+};

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

@@ -0,0 +1,31 @@
+import noop from 'lodash/fp/noop';
+import {QuestionRange} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const sliderSlide: SlideFromAPI = {
+  id: 'sli_41D5AovN~',
+  universalRef: 'sli_41D5AovN~',
+  question: {
+    type: 'slider',
+    header: 'sli_41D5AovN~.header',
+    explanation: 'sli_41D5AovN~.explanation',
+    content: {
+      min: 1,
+      max: 10,
+      unitLabel: 'sli_41D5AovN~.unitLabel'
+    }
+  },
+  clue: 'sli_41D5AovN~.clue',
+  klf: 'sli_41D5AovN~.klf',
+  tips: 'sli_41D5AovN~.tips'
+};
+
+export const sliderUISlide: QuestionRange = {
+  type: 'slider',
+  placeholder: 'sli_41D5AovN~.explanation',
+  minLabel: '1 undefined',
+  maxLabel: '10 undefined',
+  title: '0 sli_41D5AovN~.unitLabel',
+  value: -0.1111111111111111,
+  onChange: noop
+};