@coorpacademy/app-review 0.1.8 → 0.1.10

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

@@ -0,0 +1,52 @@
+import noop from 'lodash/fp/noop';
+import {Template} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const textTemplateSlide: SlideFromAPI = {
+  question: {
+    content: {
+      media: {
+        src: [],
+        posters: [],
+        subtitles: []
+      },
+      template: 'Un   {{inp58402}}   model.',
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62433c2c58920f02c4950de0',
+          type: 'text',
+          name: 'inp58402',
+          id: '62433c2c58920f02c4950de0'
+        }
+      ]
+    },
+    type: 'template',
+    header: 'Comment le protégé doit-il percevoir son mentor ?',
+    explanation: 'Saisissez votre réponse (en anglais).'
+  },
+  klf: "Le mentoré voit dans son mentor un <i>role model</i>, c'est-à-dire un exemple inspirant qui lui permet de se projeter dans un poste à responsabilité.",
+  tips: "L'origine de l'expression <i>role model</i> est attribué au sociologue Robert K. Merton.",
+  universalRef: 'sli_VJKQonm2g',
+  hasClue: true,
+  id: 'sli_VJKQonm2g'
+};
+
+export const textTemplateUISlide: Template = {
+  type: 'template',
+  template: 'Un   {{inp58402}}   model.',
+  answers: [
+    {
+      type: 'text',
+      name: 'inp58402',
+      placeholder: 'Type here',
+      value: undefined,
+      onChange: noop
+    }
+  ]
+};

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

@@ -0,0 +1,55 @@
+import test from 'ava';
+import {SlideFromAPI} from '../../types/common';
+import {mapApiSlideToUi} from '../map-api-slide-to-ui';
+import {
+  QcmDrag,
+  Qcm,
+  QcmGraphic,
+  FreeText,
+  DropDown,
+  QuestionRange,
+  Template
+} from '../../types/slides';
+import {qcmUISlide, qcmSlide} from './fixtures/qcm';
+import {qcmDragUISlide, qcmDragSlide} from './fixtures/qcm-drag';
+import {freeTextSlide, freeTextUISlide} from './fixtures/free-text';
+import {qcmGraphicUISlide, qcmGraphicSlide} from './fixtures/qcm-graphic';
+import {textTemplateSlide, textTemplateUISlide} from './fixtures/text-template';
+import {selectTemplateSlide, selectTemplateUISlide} from './fixtures/select-template';
+import {sliderSlide, sliderUISlide} from './fixtures/slider';
+
+const _mapApiSlideToUi = mapApiSlideToUi({translate: (text: string) => text});
+
+const macro = test.macro({
+  title(providedTitle) {
+    return `should handle ${providedTitle} conversion`.trim();
+  },
+  exec(
+    t,
+    arg: {
+      slide: SlideFromAPI;
+      expectedUiSlide: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;
+    }
+  ) {
+    t.deepEqual(
+      JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide))),
+      JSON.parse(JSON.stringify(arg.expectedUiSlide))
+    );
+  }
+});
+
+test('qcm', macro, {slide: qcmSlide, expectedUiSlide: qcmUISlide});
+test('qcm drag', macro, {slide: qcmDragSlide, expectedUiSlide: qcmDragUISlide});
+test('qcm graphic', macro, {slide: qcmGraphicSlide, expectedUiSlide: qcmGraphicUISlide});
+test('text template', macro, {slide: textTemplateSlide, expectedUiSlide: textTemplateUISlide});
+test('select template', macro, {
+  slide: selectTemplateSlide,
+  expectedUiSlide: selectTemplateUISlide
+});
+test('free text', macro, {slide: freeTextSlide, expectedUiSlide: freeTextUISlide});
+test('slider', macro, {slide: sliderSlide, expectedUiSlide: sliderUISlide});
+
+test('should throw an error if the question type can not be handled', t => {
+  const faultySlide = {...qcmSlide, question: {type: 'lol'}};
+  t.throws(() => _mapApiSlideToUi(faultySlide as SlideFromAPI));
+});

package/src/index.tsx

@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from 'react';
+import type {} from 'redux-thunk/extend-redux'; // https://github.com/reduxjs/redux-thunk/issues/333
 import {AnyAction, Store} from 'redux';
 import {connect, Provider} from 'react-redux';
 import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
 import {TemplateContext} from '@coorpacademy/components/es/template/app-review/template-context';
 
+import isEmpty from 'lodash/fp/isEmpty';
+import get from 'lodash/fp/get';
 import configureStore from './configure-store';
 import {congratsProps, correctionPopinProps} from './fixtures/temp-fixture';
 
@@ -23,16 +26,12 @@ import {fetchSkills} from './actions/api/fetch-skills';
 import {postProgression} from './actions/api/post-progression';
 import {VIEWS} from './common';
 
-// -----------------------------------------------------------------------------
-
 type StaticProps = {
-  viewName: 'skills' | 'onboarding' | 'slides';
+  viewName: 'skills' | 'onboarding' | 'slides' | 'loader';
   slides: SlidesViewStaticProps | null;
   skills: SkillsProps | null;
 };
 
-// -----------------------------------------------------------------------------
-
 const mapDispatchToProps: Dispatchers = {
   navigateTo,
   navigateBack,
@@ -48,8 +47,6 @@ const mapDispatchToProps: Dispatchers = {
 const getCurrentViewName = (storeState: StoreState): ViewPath =>
   storeState.ui.navigation[storeState.ui.navigation.length - 1];
 
-// -----------------------------------------------------------------------------
-
 const mapStateToSkillsProps = (state: StoreState): SkillsProps | null => {
   if (!state.data.skills) {
     return null;
@@ -77,8 +74,6 @@ const mapStateToSkillsProps = (state: StoreState): SkillsProps | null => {
   };
 };
 
-// -----------------------------------------------------------------------------
-
 const mapStateToSlidesProps = (state: StoreState): SlidesViewStaticProps | null => {
   if (!state.data.slides) {
     return null;
@@ -108,8 +103,6 @@ const mapStateToSlidesProps = (state: StoreState): SlidesViewStaticProps | null
   };
 };
 
-// -----------------------------------------------------------------------------
-
 const mapStateToProps = (state: StoreState): StaticProps => {
   return {
     viewName: getCurrentViewName(state),
@@ -118,14 +111,11 @@ const mapStateToProps = (state: StoreState): StaticProps => {
   };
 };
 
-// Props = StaticProps && Dispatchers
-
 const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
-// -----------------------------------------------------------------------------
-
 const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
+  const [isSlideFetched, setIsSlideFetched] = useState(false);
 
   useEffect(() => {
     if (store) return;
@@ -135,29 +125,52 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   }, [options, store]);
 
   useEffect(() => {
-    if (store === null) return;
+    if (!store || isSlideFetched) return;
 
-    const {skillRef} = options;
-    const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
-    store.dispatch(navigateTo(initialView));
-  }, [options, store]);
+    return store.subscribe(() => {
+      const isSlidePresent = !isEmpty(store.getState().data.slides[0].questionText);
+      return isSlidePresent && setIsSlideFetched(isSlidePresent);
+    }); // using the first slide questionText for now, should only check for a slide's presence
+    // when the refactor is done (slides will be feed one by one on api's side)
+  }, [isSlideFetched, options, store]);
 
   useEffect(() => {
-    if (store === null) return;
-
-    const {token} = options;
+    const token = get('token', options);
+    if (store === null || isEmpty(token)) return;
     store.dispatch(storeToken(token));
   }, [options, store]);
 
   useEffect(() => {
-    if (store === null) return;
+    const token = get('token', options);
+    if (store === null || isEmpty(token)) return;
+
+    const skillRef = get('skillRef', options);
 
-    const {skillRef, token} = options;
+    // ThunkAction is not assignable to parameter of type 'AnyAction'
+    // ts problem describre here = https://github.com/reduxjs/redux-thunk/issues/333
     skillRef
       ? store.dispatch(postProgression(skillRef, token))
       : store.dispatch(fetchSkills(token));
   }, [options, store]);
 
+  useEffect(() => {
+    if (store === null) return;
+
+    const {skillRef} = options;
+
+    if (skillRef && !isSlideFetched) {
+      store.dispatch(navigateTo('loader')); // use loader while posting progression
+      return;
+    }
+
+    // TODO: when slides state is refactored (data + mapping),
+    // use loader in case a skillRef is found && no slides from the API
+    // are found
+
+    const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
+    store.dispatch(navigateTo(initialView));
+  }, [isSlideFetched, options, store]);
+
   if (!store) return null;
 
   const {templateContext: values} = options;
@@ -171,15 +184,11 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   );
 };
 
-// -----------------------------------------------------------------------------
-
 declare global {
   // eslint-disable-next-line no-shadow
   interface Window {
-    __REDUX_DEVTOOLS_EXTENSION__?: boolean;
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: Function;
   }
 }
 
-// -----------------------------------------------------------------------------
-
 export default AppReview;

package/src/reducers/ui/navigation.ts

@@ -5,7 +5,7 @@ import {
   NAVIGATE_TO
 } from '../../actions/ui/navigation';
 
-export type NavigationState = Array<'skills' | 'onboarding' | 'slides'>;
+export type NavigationState = Array<'skills' | 'onboarding' | 'slides' | 'loader'>;
 
 const reducer = (
   // eslint-disable-next-line default-param-last

package/src/test/index.test.tsx

@@ -65,24 +65,35 @@ const appOptions: AppOptions = {
   services
 };
 
-test('should validate all the slides (all correct scenario)', async t => {
-  // t.plan(13);
+test('should show the loader while the app is fetching the data', async t => {
   t.plan(2);
-  const {container} = render(<AppReview options={appOptions} key={0} />);
+  const {container} = render(<AppReview options={appOptions} />);
+
   await waitForChanges(1000);
 
-  const wrapper = container.querySelector('[data-name="loader"]');
-  t.truthy(wrapper);
-  /*
-  const wrapper = container.querySelector('[data-name="slides-revision-container"]');
-  t.truthy(wrapper);
+  const loader = container.querySelector('[data-name="loader"]');
+  t.truthy(loader);
+
+  // await waitFor(async () => {
+  //   // await sleep(500);
+  //   const result = await t.try(tt => {
+  //     // rerender(<AppReview options={appOptions} />);
+
+  //     const slidesContainer = container.querySelector('[data-name="slides-revision-container"]');
+
+  //     tt.truthy(slidesContainer);
+  //   });
+
+  //   if (result.passed) return result.commit();
+  //   result.discard();
+  //   throw result.errors;
+  // });
 
-  const stackedSlidesContainer = wrapper?.querySelector('[data-name="stacked-slides-container"]');
+  // const stackedSlidesContainer = container.querySelector('[data-name="stacked-slides-container"]');
 
-  t.truthy(stackedSlidesContainer);
+  // t.truthy(stackedSlidesContainer);
 
-  await clickAllSlides(t, container);
-  */
+  // await clickAllSlides(t, container);
 
   t.pass();
 });

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

@@ -1,3 +1,4 @@
+import {qcmSlide} from '../../helpers/test/fixtures/qcm';
 import {Services} from '../../types/common';
 
 export const services: Services = {
@@ -18,38 +19,7 @@ export const services: Services = {
     ]);
   },
   fetchSlide: 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: (): void => undefined
-            },
-            {
-              selected: false,
-              title: 'choix2',
-              help: '(help choix2)',
-              ariaLabel: '__ariaLabel2',
-              onClick: (): void => undefined
-            },
-            {
-              selected: false,
-              title: 'choix3',
-              help: '(help choix3)',
-              ariaLabel: '__ariaLabel3',
-              onClick: (): void => undefined
-            }
-          ]
-        }
-      },
-      klf: '___klf',
-      universalRef: ref
-    });
+    return Promise.resolve({...qcmSlide, universalRef: ref, id: ref});
   },
   postProgression: () => {
     return Promise.resolve({

package/src/types/common.ts

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

package/src/types/globals.d.ts

@@ -3,8 +3,3 @@ declare module 'browser-env';
 declare module '@coorpacademy/components/es/template/app-review';
 declare module '@coorpacademy/components/es/template/app-review/template-context';
 declare module '@coorpacademy/redux-task';
-
-// eslint-disable-next-line no-shadow
-declare interface Window {
-  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: Function;
-}

package/src/types/slides.ts

@@ -1,9 +1,10 @@
 export type Choice = {
   order?: number;
   selected: boolean;
-  title: string;
-  help: string;
+  title?: string;
+  help?: string;
   onClick: Function;
+  ariaLabel?: string;
 };
 
 export type QcmDrag = {
@@ -14,20 +15,20 @@ export type QcmDrag = {
 
 export type Qcm = {
   type: 'qcm';
-  choices: (Choice & {ariaLabel: string})[];
+  answers: Choice[];
 };
 
 export type QcmGraphic = {
   type: 'qcmGraphic';
-  choices: (Choice & {image: string})[];
+  answers: (Choice & {image: string})[];
 };
 
 export type FreeText = {
   type: 'freeText';
   placeholder: string;
-  value: string;
+  value?: string;
   onChange: Function;
-  ariaLabel: string;
+  ariaLabel?: string;
 };
 
 export type DropDownOption = {
@@ -39,9 +40,9 @@ export type DropDownOption = {
 
 export type DropDown = {
   type: 'dropDown';
-  onChange: Function;
+  onChange?: Function;
   options: DropDownOption[];
-  theme:
+  theme?:
     | 'filter'
     | 'invalid'
     | 'header'
@@ -56,19 +57,35 @@ export type DropDown = {
 
 export 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 type TextTemplate = {
+  type: 'text';
+  name: string;
+  placeholder: string;
+  value?: string;
+  onChange: Function;
+};
+
+export type SelectionTemplate = {
+  type: 'select';
+  name: string;
+  onChange?: Function;
+  options?: DropDownOption[];
+};
+
 export type Template = {
   type: 'template';
   template: string;
-  choices: (DropDown & {type?: string})[];
+  answers: (TextTemplate | SelectionTemplate)[];
 };
 
 export type AnswerUI = {