@coorpacademy/app-review 0.1.16 → 0.1.17

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

@@ -8,9 +8,14 @@ import {
   indexOf,
   isEmpty,
   map,
+  multiply,
+  pipe,
   rangeStep,
+  round,
   size,
-  toInteger
+  toInteger,
+  toString as _toString,
+  __
 } from 'lodash/fp';
 import {Dispatch} from 'redux';
 import {
@@ -37,67 +42,63 @@ import {
 } 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 qcmProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: QcmQuestion): Qcm => {
+    return {
+      type: 'qcm',
+      answers: map(choice => {
+        const label = choice.label || '';
+        return {
+          title: label,
+          selected: includes(label, answers),
+          onClick: (): void => {
+            dispatch(editAnswer(label));
+          },
+          ariaLabel: choice.label
+        };
+      }, 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 qcmDragProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: QcmDragQuestion): QcmDrag => {
+    return {
+      type: 'qcmDrag',
+      answers: map(choice => {
+        const label = choice.label || '';
+        const indexInAnswer = indexOf(label, answers);
+        return {
+          title: label,
+          selected: includes(label, answers),
+          order: indexInAnswer,
+          onClick: (): void => {
+            dispatch(editAnswer(label));
+          }
+        };
+      }, 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 qcmGraphicProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: QcmGraphicQuestion): QcmGraphic => {
+    return {
+      type: 'qcmGraphic',
+      answers: map(choice => {
+        const label = choice.label || '';
+        return {
+          title: label,
+          image: get('media.src.0.url', choice),
+          selected: includes(label, answers),
+          onClick: (): void => {
+            dispatch(editAnswer(label));
+          }
+        };
+      }, question.content.choices)
+    };
   };
-};
 
 const templateTextProps = (choice: ChoiceFromAPI, index: number): TextTemplate => {
   // TODO: EDIT_CHOICES -> getAnswerValues
@@ -163,44 +164,43 @@ const basicProps =
       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 sliderProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], 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[];
 
-  const stateValue = head(answers) || question.content.min;
-  const currentValue = toInteger(stateValue);
+    const stateValue = head(answers) || question.content.min;
+    const currentValue = toInteger(stateValue);
 
-  const indexValue = indexOf(currentValue, values);
-  const sliderPosition = divide(indexValue, size(values) - 1);
+    const indexValue = indexOf(currentValue, values);
+    const maxValue = size(values) - 1;
+    const sliderPosition = divide(indexValue, maxValue);
 
-  const unitLabel = get('content.unitLabel', question);
+    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')
+    return {
+      type: 'slider',
+      placeholder: question.explanation,
+      minLabel: `${question.content.min} ${unitLabel}`,
+      maxLabel: `${question.content.max} ${unitLabel}`,
+      title: `${currentValue} ${question.content.unitLabel}`,
+      value: sliderPosition,
+      onChange: (position: number): void => {
+        const newValue = pipe(multiply(maxValue), round, get(__, values), _toString)(position);
+        dispatch(editAnswer(newValue));
+      }
+    };
   };
-};
 
 export const getQuestionType = (question: Question): Question['type'] => question.type;
 
@@ -214,13 +214,13 @@ const getAnswerUIModel = (
   const type = getQuestionType(question);
   switch (type) {
     case 'qcm':
-      return qcmProps(question as QcmQuestion);
+      return qcmProps(dispatch)(answers, question as QcmQuestion);
 
     case 'qcmGraphic':
-      return qcmGraphicProps(question as QcmGraphicQuestion);
+      return qcmGraphicProps(dispatch)(answers, question as QcmGraphicQuestion);
 
     case 'qcmDrag':
-      return qcmDragProps(question as QcmDragQuestion);
+      return qcmDragProps(dispatch)(answers, question as QcmDragQuestion);
 
     case 'basic':
       return basicProps(dispatch)(answers, question as BasicQuestion);
@@ -229,7 +229,7 @@ const getAnswerUIModel = (
       return templateProps(question as TemplateQuestion);
 
     case 'slider':
-      return sliderProps(question as SliderQuestion);
+      return sliderProps(dispatch)(answers, question as SliderQuestion);
 
     default:
       throw new Error(`${type} is not an handled question.type`);

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

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const freeTextSlide: SlideFromAPI = {
   question: {

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

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmDragSlide: SlideFromAPI = {
   question: {

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

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmGraphicSlide: SlideFromAPI = {
   question: {

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

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/select-template.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const selectTemplateSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/fixtures/slider.ts

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const sliderSlide: SlideFromAPI = {
   question: {

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

@@ -1,5 +1,6 @@
 import noop from 'lodash/fp/noop';
-import {SlideFromAPI, UISlide} from '../../../../types/common';
+import {UISlide} from '../..';
+import {SlideFromAPI} from '../../../../types/common';
 
 export const textTemplateSlide: SlideFromAPI = {
   question: {

package/src/views/slides/test/index.test.ts

@@ -0,0 +1,240 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import omit from 'lodash/fp/omit';
+import {mapStateToSlidesProps} from '..';
+import {StoreState} from '../../../reducers';
+import {freeTextSlide} from './fixtures/free-text';
+
+test('should create initial props when fetched slide is still not received', t => {
+  const state: StoreState = {
+    data: {
+      progression: {
+        _id: '62b1d1087aa12f00253f40ee',
+        content: {
+          ref: '_skillref',
+          type: 'skill'
+        },
+        engine: {
+          ref: 'review'
+        },
+        state: {
+          allAnswers: [],
+          isCorrect: true,
+          nextContent: {
+            ref: 'sli_N1XACJobn',
+            type: 'slide'
+          },
+          pendingSlides: [],
+          slides: [],
+          step: {
+            current: 1
+          },
+          stars: 0
+        }
+      },
+      skills: [],
+      slides: {
+        sli_N1XACJobn: null
+      },
+      token: '1234'
+    },
+    ui: {
+      currentSlideRef: '',
+      navigation: ['loader', 'slides'],
+      answers: [],
+      slide: {
+        validateButton: false
+      }
+    }
+  };
+
+  const props = mapStateToSlidesProps(state, identity);
+  t.is(props.congratsProps, undefined);
+  t.deepEqual(omit(['onQuitClick'], props.header), {
+    'aria-label': 'aria-header-wrapper',
+    closeButtonAriaLabel: 'aria-close-button',
+    mode: '__revision_mode',
+    skillName: '__agility',
+    steps: [
+      {
+        current: true,
+        icon: 'no-answer',
+        value: '1'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '2'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '3'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '4'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '5'
+      }
+    ]
+  });
+  t.deepEqual(omit(['validateButton'], props.stack), {
+    correctionPopinProps: undefined,
+    endReview: false,
+    slides: {
+      '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
+      }
+    }
+  });
+});
+
+test('should create initial props when the slide is on the state', t => {
+  const state: StoreState = {
+    data: {
+      progression: {
+        _id: '62b1d1087aa12f00253f40ee',
+        content: {
+          ref: '_skillref',
+          type: 'skill'
+        },
+        engine: {
+          ref: 'review'
+        },
+        state: {
+          allAnswers: [],
+          isCorrect: true,
+          nextContent: {
+            ref: 'sli_N1XACJobn',
+            type: 'slide'
+          },
+          pendingSlides: [],
+          slides: [],
+          step: {
+            current: 1
+          },
+          stars: 0
+        }
+      },
+      skills: [],
+      slides: {
+        sli_N1XACJobn: freeTextSlide
+      },
+      token: '1234'
+    },
+    ui: {
+      currentSlideRef: 'sli_N1XACJobn',
+      navigation: ['loader', 'slides'],
+      answers: ['My value'],
+      slide: {
+        validateButton: true
+      }
+    }
+  };
+
+  const props = mapStateToSlidesProps(state, identity);
+  t.is(props.congratsProps, undefined);
+  t.deepEqual(omit(['onQuitClick'], props.header), {
+    'aria-label': 'aria-header-wrapper',
+    closeButtonAriaLabel: 'aria-close-button',
+    mode: '__revision_mode',
+    skillName: '__agility',
+    steps: [
+      {
+        current: true,
+        icon: 'no-answer',
+        value: '1'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '2'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '3'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '4'
+      },
+      {
+        current: false,
+        icon: 'no-answer',
+        value: '5'
+      }
+    ]
+  });
+  t.deepEqual(omit(['validateButton', 'slides'], props.stack), {
+    correctionPopinProps: undefined,
+    endReview: false
+  });
+  t.false(props.stack.validateButton.disabled);
+  t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    hidden: false,
+    position: 0,
+    loading: false,
+    parentContentTitle: 'From "Developing the review app" course',
+    questionText:
+      'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?'
+  });
+  t.deepEqual(omit('model.onChange', props.stack.slides['0'].answerUI), {
+    help: 'Type your answer.',
+    model: {
+      placeholder: 'Type here',
+      type: 'freeText',
+      value: 'My value'
+    }
+  });
+  t.deepEqual(omit(['0'], props.stack.slides), {
+    '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
+    }
+  });
+});

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

@@ -1,7 +1,8 @@
 import test from 'ava';
 import identity from 'lodash/fp/identity';
-import {SlideFromAPI, UISlide} from '../../../types/common';
+import {SlideFromAPI} from '../../../types/common';
 import {mapApiSlideToUi} from '../map-api-slide-to-ui';
+import {UISlide} from '..';
 import {qcmUISlide, qcmSlide} from './fixtures/qcm';
 import {qcmDragUISlide, qcmDragSlide} from './fixtures/qcm-drag';
 import {freeTextSlide, freeTextUISlide} from './fixtures/free-text';

package/es/fixtures/qcm-slide.d.ts

@@ -1,2 +0,0 @@
-import { UISlide } from '../types/common';
-export declare const slide: Pick<UISlide, 'questionText' | 'answerUI'>;

package/es/fixtures/qcm-slide.js

@@ -1,33 +0,0 @@
-import noop from 'lodash/fp/noop';
-export const slide = {
-    questionText: 'QCM',
-    answerUI: {
-        help: '__help',
-        model: {
-            type: 'qcm',
-            answers: [
-                {
-                    selected: false,
-                    title: 'choix1',
-                    help: '(help choix1)',
-                    ariaLabel: '__ariaLabel1',
-                    onClick: noop
-                },
-                {
-                    selected: false,
-                    title: 'choix2',
-                    help: '(help choix2)',
-                    ariaLabel: '__ariaLabel2',
-                    onClick: noop
-                },
-                {
-                    selected: false,
-                    title: 'choix3',
-                    help: '(help choix3)',
-                    ariaLabel: '__ariaLabel3',
-                    onClick: noop
-                }
-            ]
-        }
-    }
-};

package/es/fixtures/temp-fixture.d.ts

@@ -1,3 +0,0 @@
-import { SlidesViewProps, CorrectionPopinProps } from '../views/slides';
-export declare const correctionPopinProps: CorrectionPopinProps;
-export declare const congratsProps: SlidesViewProps['congratsProps'];

package/es/fixtures/temp-fixture.js

@@ -1,84 +0,0 @@
-export const correctionPopinProps = {
-    klf: {
-        label: 'Key learning factor',
-        tooltip: 'Some tooltip info.',
-        onClick: () => {
-            console.log('klf onClick');
-        }
-    },
-    information: {
-        label: 'Key learning factor',
-        message: 'info msg'
-    },
-    next: {
-        label: 'Next',
-        ariaLabel: 'Next'
-    },
-    successLabel: 'CORRECT ANSWER',
-    failureLabel: 'WRONG ANSWER'
-};
-const confettiAnimationProps = {
-    'aria-label': 'aria lottie',
-    'data-name': 'default-lottie',
-    className: undefined,
-    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
-    loop: undefined,
-    autoplay: true,
-    rendererSettings: {
-        hideOnTransparent: false,
-        animationClassName: ''
-    },
-    ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg',
-    animationControl: undefined
-};
-const starAnimationProps = {
-    'aria-label': 'Review Card Congrats Container',
-    'data-name': 'card-star',
-    animationLottie: {
-        'aria-label': 'aria lottie',
-        'data-name': 'default-lottie',
-        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
-        ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg'
-    },
-    iconAriaLabel: 'Image without information',
-    cardType: 'card-star',
-    reviewCardTitle: 'You have won',
-    reviewCardValue: '100',
-    timerAnimation: 200
-};
-const rankAnimationProps = {
-    'aria-label': 'Review Card Congrats Container',
-    'data-name': 'card-rank',
-    animationLottie: {
-        'aria-label': 'aria lottie',
-        'data-name': 'default-lottie',
-        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
-        ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg'
-    },
-    cardType: 'card-rank',
-    iconAriaLabel: 'Image without information',
-    reviewCardTitle: 'You are now',
-    reviewCardValue: '14',
-    rankSuffix: 'th',
-    timerAnimation: 200
-};
-export const congratsProps = {
-    'aria-label': 'Review Congratulations',
-    'data-name': 'review-congrats',
-    animationLottie: confettiAnimationProps,
-    title: 'Congratulations!',
-    cardCongratsStar: starAnimationProps,
-    cardCongratsRank: rankAnimationProps,
-    buttonRevising: {
-        'aria-label': 'Continue revising button',
-        label: 'Continue revising',
-        onClick: () => console.log('Continue revising'),
-        type: 'tertiary'
-    },
-    buttonRevisingSkill: {
-        label: 'Revise another skill',
-        'aria-label': 'Revise another skill button',
-        onClick: () => console.log('Revise another skill'),
-        type: 'primary'
-    }
-};

package/lib/fixtures/qcm-slide.d.ts

@@ -1,2 +0,0 @@
-import { UISlide } from '../types/common';
-export declare const slide: Pick<UISlide, 'questionText' | 'answerUI'>;