@coorpacademy/app-review 0.0.21-alpha.4 → 0.1.1

package/src/fixtures/temp-fixture.ts

@@ -0,0 +1,94 @@
+/* eslint-disable no-console */
+import {SlidesViewProps} from '../types/views';
+
+export const correctionPopinProps: SlidesViewProps['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: SlidesViewProps['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/src/helpers/css-modules-require-hook.d.ts

@@ -0,0 +1,4 @@
+declare module '@coorpacademy/css-modules-require-hook' {
+  export const cssRegister: () => void;
+  export default cssRegister;
+}

package/src/helpers/css-register.ts

@@ -0,0 +1,3 @@
+import cssRegister from '@coorpacademy/css-modules-require-hook';
+
+cssRegister();

package/src/index.test.tsx

@@ -0,0 +1,82 @@
+import browserEnv from 'browser-env';
+import test from 'ava';
+import type {ExecutionContext} from 'ava';
+import React from 'react';
+import {render, fireEvent, act} from '@testing-library/react';
+import {slide} from './fixtures/qcm-slide';
+import type {AppOptions} from './types/common';
+import AppReview from '.';
+
+browserEnv({pretendToBeVisual: true});
+
+const elementExists = (foundElements: NodeListOf<Element>): Element =>
+  foundElements && foundElements[0];
+
+const sleep = (msToSleep: number): Promise<void> =>
+  new Promise(resolve => {
+    setTimeout(resolve, msToSleep);
+  });
+
+const waitForChanges = async (msToWait = 3000): Promise<void> => {
+  await act(async () => {
+    await sleep(msToWait); // wait *just* a little longer than the timeout in the component
+  });
+};
+
+const LIMIT = 5;
+
+const clickAllSlides = async (
+  t: ExecutionContext<unknown>,
+  container: HTMLElement,
+  accumulator = 0
+): Promise<void> => {
+  if (accumulator === LIMIT) return;
+
+  // last one needs to wait for more calculations && components updates
+  if (accumulator === 4)
+    await act(async () => {
+      await sleep(1000);
+    });
+
+  const validateButton = container.querySelectorAll(
+    `[data-name="slide-validate-button-${accumulator}"]`
+  );
+  t.truthy(elementExists(validateButton));
+
+  await act(async () => {
+    await fireEvent.click(validateButton[0]);
+  });
+
+  const nextButton = container.querySelectorAll(
+    `[data-name="next-question-button-${accumulator}"]`
+  );
+  t.truthy(elementExists(nextButton));
+
+  await act(async () => {
+    await fireEvent.click(nextButton[0]);
+  });
+
+  await clickAllSlides(t, container, accumulator + 1);
+};
+
+const appOptions: AppOptions = {
+  token: process.env.API_TEST_TOKEN || '',
+  slide
+};
+
+test('should validate all the slides (all correct scenario)', async t => {
+  t.plan(13);
+  const {container} = render(<AppReview options={appOptions} key={0} />);
+  await waitForChanges(1000);
+
+  const wrapper = container.querySelector('[data-name="slides-revision-container"]');
+  t.truthy(wrapper);
+
+  const stackedSlidesContainer = wrapper.querySelector('[data-name="stacked-slides-container"]');
+
+  t.truthy(stackedSlidesContainer);
+
+  await clickAllSlides(t, container);
+
+  t.pass();
+});

package/src/index.tsx

@@ -1,36 +1,94 @@
 import React, {useEffect, useState} from 'react';
 import {connect, Provider} from 'react-redux';
-import AppReviewRootView from '@coorpacademy/components/es/template/app-review/root-view/root-view';
+import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
 
 import configureStore from './configure-store';
 import {navigateTo, navigateBack, startApp} from './actions/navigation';
+import {updateSlidesOnNext, updateSlidesOnValidation} from './actions/slides';
 import {getCurrentViewName} from './reducers/navigation';
+import type {SlidesViewStaticProps} from './types/views';
+import type {AppOptions} from './types/common';
+import type {StoreState} from './types/store-state';
+import {congratsProps, correctionPopinProps} from './fixtures/temp-fixture';
+import {updateFinishedSlides} from './actions/finished-slides';
+import {updateReviewStatus} from './actions/review-status';
+import {updateStepItemsOnValidation, updateStepItemsOnNext} from './actions/step-items';
+import type {Dispatchers} from './types/dispatchers';
+import {validateSlide} from './actions/data/validate-slide';
 
 // -----------------------------------------------------------------------------
 
-const mapStateToProps = (state, ownProps) => {
-  return {...ownProps, viewName: getCurrentViewName(state)};
+type StaticProps = {
+  viewName: 'home' | 'onboarding' | 'slides';
+  slides: SlidesViewStaticProps;
 };
 
-const mapDispatchToProps = {navigateTo, navigateBack};
-const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewRootView);
+// -----------------------------------------------------------------------------
+
+const mapDispatchToProps: Dispatchers = {
+  navigateTo,
+  navigateBack,
+  validateSlide,
+  updateSlidesOnValidation,
+  updateSlidesOnNext,
+  updateReviewStatus,
+  updateStepItemsOnValidation,
+  updateStepItemsOnNext,
+  updateFinishedSlides
+};
+
+const mapStateToProps = (state: StoreState): StaticProps => {
+  return {
+    viewName: getCurrentViewName(state),
+    slides: {
+      headerProps: {
+        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'
+      },
+      slides: state.ui.slides,
+      validate: {
+        label: '__validate'
+      },
+      finishedSlides: state.ui.finishedSlides,
+      stepItems: state.ui.stepItems,
+      reviewStatus: state.ui.reviewStatus,
+      correctionPopinProps,
+      congratsProps,
+      slideValidationResult: state.data.slideValidationResult
+    }
+  };
+};
+
+// Props = StaticProps && Dispatchers
+
+const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
 // -----------------------------------------------------------------------------
 
-const AppRevision = ({options}: Props) => {
+const AppReview = ({options}: {options: AppOptions}): JSX.Element => {
   const [store, setStore] = useState(null);
+  const [appStarted, setAppStarted] = useState(false);
 
   useEffect(() => {
-    const _configure = async () => {
-      const store = await configureStore();
+    if (store) {
       store.dispatch(startApp(options));
-      setStore(store);
-    };
-
-    _configure();
-  }, []);
+      setAppStarted(true);
+    } else {
+      const _configure = async (): Promise<void> => {
+        const _store = await configureStore();
+        setStore(_store);
+      };
+      _configure();
+    }
+  }, [options, store]);
 
-  if (!store) return null;
+  if (!store || !appStarted) return null;
 
   return (
     <Provider store={store}>
@@ -42,17 +100,12 @@ const AppRevision = ({options}: Props) => {
 // -----------------------------------------------------------------------------
 
 declare global {
+  // eslint-disable-next-line no-shadow
   interface Window {
     __REDUX_DEVTOOLS_EXTENSION__?: boolean;
   }
 }
 
-type Props = {options: AppOptions};
-
-export type AppOptions = {
-  token: string;
-  theme?: any;
-  translations?: any;
-};
+// -----------------------------------------------------------------------------
 
-export default AppRevision;
+export default AppReview;

package/src/middlewares/on-start-app.ts

@@ -1,30 +1,45 @@
-import fetch from 'cross-fetch';
 import type {Middleware} from 'redux';
 import {Dispatch} from 'redux';
 
-import {Action, receivedCourse, START_APP, storeToken} from '../actions';
-import {StoreState} from '../configure-store';
-import fetchCourse from '../services/fetch-demo';
+import {Action} from '../actions';
+// import fetchCourse from '../services/fetch-demo';
+import {VIEWS} from '../common';
+import {navigateTo, START_APP, ViewPath} from '../actions/navigation';
+import {storeToken} from '../actions/token';
+import {storeFirstSlide} from '../actions/slides';
+// import {receivedCourse} from '../actions/courses';
+import {StoreState} from '../types/store-state';
 
-const onStartApp: Middleware<{}, StoreState, Dispatch<Action>> = ({dispatch}) => next => (
-  action: Action
-) => {
-  if (action.type === START_APP) {
-    const {token} = action.payload;
-    dispatch(storeToken(token));
+const onStartApp: Middleware<{}, StoreState, Dispatch<Action>> =
+  ({dispatch}) =>
+  next =>
+  (action: Action) => {
+    if (action.type === START_APP) {
+      // eslint-disable-next-line no-warning-comments
+      // TODO: fetchProgression + fetchSlide à partir de la progression passée dans les options de l'app
+      const {slide} = action.payload;
+      if (slide) {
+        const {token} = action.payload;
+        dispatch(storeToken(token));
+        dispatch(storeFirstSlide(slide));
+      }
 
-    // --------------
-    // demo service
+      const initialView: ViewPath = slide ? VIEWS.slides : VIEWS.onboarding;
 
-    const language = 'fr';
-    const universalRef = 'dis_xxx15';
+      dispatch(navigateTo(initialView));
 
-    fetchCourse(token, language, universalRef).then(course => {
-      dispatch(receivedCourse(course));
-    });
-  }
+      // --------------
+      // demo service
 
-  return next(action);
-};
+      // const language = 'fr';
+      // const universalRef = 'dis_xxx15';
+
+      // fetchCourse(token, language, universalRef).then(course => {
+      //   dispatch(receivedCourse(course));
+      // });
+    }
+
+    return next(action);
+  };
 
 export default onStartApp;

package/src/reducers/courses.ts

@@ -1,12 +1,13 @@
-import {ReceivedCourse, RECEIVED_COURSE} from '../actions';
+import {ReceivedCourse, RECEIVED_COURSE} from '../actions/courses';
 
 // -----------------------------------------------------------------------------
 
-export type State = Array<any>;
+export type State = Array<unknown>;
 export const initialState: State = [];
 
 // -----------------------------------------------------------------------------
 
+// eslint-disable-next-line default-param-last
 const reducer = (state: State = initialState, action: ReceivedCourse): State => {
   switch (action.type) {
     case RECEIVED_COURSE: {

package/src/reducers/data.ts

@@ -0,0 +1,88 @@
+import getOr from 'lodash/fp/getOr';
+import noop from 'lodash/fp/noop';
+import set from 'lodash/fp/set';
+import {StoreToken, STORE_TOKEN} from '../actions/token';
+import {IsFetching, IS_FETCHING_TRUE} from '../actions/data/is-fetching';
+import {ValidateSlide, VALIDATE_SLIDE} from '../actions/data/validate-slide';
+import {DataState} from '../types/data';
+import {setToken} from './token';
+
+const defaultState = {
+  isFetching: true,
+  slideValidationResult: null,
+  token: null
+};
+
+type ApiActions = IsFetching | ValidateSlide | StoreToken;
+
+// eslint-disable-next-line default-param-last
+const data = (state: DataState = defaultState, action: ApiActions): DataState => {
+  switch (action.type) {
+    case STORE_TOKEN: {
+      return setToken(action.payload, state);
+    }
+    case VALIDATE_SLIDE: {
+      const previousSlideNumber: number = getOr(-1, 'slideValidationResult.slideNumber', state);
+      // hard coded for now
+      return set(
+        'slideValidationResult',
+        {
+          slideNumber: previousSlideNumber + 1,
+          result: 'success',
+          // exitNode
+          nextSlide: {
+            questionText: 'Test',
+            answerUI: {
+              model: {
+                answers: [
+                  {
+                    title: 'There is no need for a password',
+                    onClick: noop,
+                    selected: false
+                  },
+                  {
+                    title: 'Lorem ipsum',
+                    onClick: noop,
+                    selected: false
+                  },
+                  {
+                    title: 'Lorem',
+                    onClick: noop,
+                    selected: true,
+                    order: 1
+                  },
+                  {
+                    title: 'You need to have a password',
+                    onClick: noop,
+                    selected: false
+                  },
+                  {
+                    title: 'Pouet',
+                    onClick: noop,
+                    selected: true,
+                    order: 0
+                  }
+                ],
+                type: 'qcmDrag'
+              },
+              help: 'Help text will appear here'
+            }
+          }
+        },
+        state
+      );
+    }
+    case IS_FETCHING_TRUE: {
+      return set('isFetching', true, state);
+    }
+
+    // case VALIDATE_SLIDE_FAILURE: {
+    //   return set('entities.isFetching', false, state);
+    // }
+
+    default:
+      return state;
+  }
+};
+
+export default data;

package/src/reducers/finished-slides.ts

@@ -0,0 +1,48 @@
+import forEach from 'lodash/fp/forEach';
+import {UpdateFinishedSlides, UPDATE_FINISHED_SLIDES} from '../actions/finished-slides';
+import {slideNumbers} from '../common';
+import {FinishedSlides} from '../types/finished-slides';
+
+const _forEach: <T>(
+  iteratee: (value: T[keyof T], index: number) => void,
+  collection: T
+  // @ts-expect-error to remove lodash's forEach iteratee args number cap
+) => void = forEach.convert({
+  cap: false
+});
+
+// -----------------------------------------------------------------------------
+
+export type State = FinishedSlides;
+export const initialState: State = {
+  slideNumbers
+};
+
+// -----------------------------------------------------------------------------
+
+// eslint-disable-next-line default-param-last
+const reducer = (state: State = initialState, action: UpdateFinishedSlides): State => {
+  switch (action.type) {
+    case UPDATE_FINISHED_SLIDES: {
+      const {slideNumbers: _slideNumbers, ...rest} = state;
+      const {slideNumber, value} = action.payload;
+      const _state: State = {
+        slideNumbers: _slideNumbers
+      };
+
+      _forEach<Omit<State, 'slideNumbers'>>((finishedSlide, index) => {
+        const previousValue = finishedSlide;
+        _state[index] = previousValue;
+      }, rest);
+
+      _state[slideNumber] = value;
+      return _state;
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

package/src/reducers/index.ts

@@ -1,13 +1,23 @@
 import {combineReducers} from 'redux';
 
+import data from './data';
 import courses from './courses';
+import finishedSlides from './finished-slides';
 import navigation from './navigation';
-import token from './token';
+import reviewStatus from './review-status';
+import slides from './slides';
+import stepItems from './step-items';
 
-const rootReducer = combineReducers({
+const ui = combineReducers({
   courses,
+  finishedSlides,
   navigation,
-  token
+  reviewStatus,
+  slides,
+  stepItems
 });
 
-export default rootReducer;
+export default combineReducers({
+  ui,
+  data
+});

package/src/reducers/navigation.ts

@@ -1,13 +1,16 @@
-import {NAVIGATE_BACK, NAVIGATE_TO} from '../actions/navigation';
+import {NAVIGATE_BACK, NAVIGATE_TO, ViewPath} from '../actions/navigation';
 import type {NavigateTo, NavigateBack} from '../actions/navigation';
+import {StoreState} from '../types/store-state';
+import {NavigationState as State} from '../types/states';
 
 // -----------------------------------------------------------------------------
 
-export type State = Array<string>;
+// export type State = Array<string>;
 export const initialState: State = ['home'];
 
 // -----------------------------------------------------------------------------
 
+// eslint-disable-next-line default-param-last
 const reducer = (state: State = initialState, action: NavigateTo | NavigateBack): State => {
   switch (action.type) {
     case NAVIGATE_TO: {
@@ -25,7 +28,8 @@ const reducer = (state: State = initialState, action: NavigateTo | NavigateBack)
 
 // -----------------------------------------------------------------------------
 
-export const getCurrentViewName = appState => appState.navigation[appState.navigation.length - 1];
+export const getCurrentViewName = (appState: StoreState): ViewPath =>
+  appState.ui.navigation[appState.ui.navigation.length - 1];
 
 // -----------------------------------------------------------------------------
 

package/src/reducers/review-status.ts

@@ -0,0 +1,23 @@
+import {UpdateReviewStatus, UPDATE_REVIEW_STATUS} from '../actions/review-status';
+
+// -----------------------------------------------------------------------------
+
+export type State = 'finished' | 'ongoing';
+export const initialState: State = 'ongoing';
+
+// -----------------------------------------------------------------------------
+
+// eslint-disable-next-line default-param-last
+const reducer = (state: State = initialState, action: UpdateReviewStatus): State => {
+  switch (action.type) {
+    case UPDATE_REVIEW_STATUS: {
+      return action.payload;
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;