@coorpacademy/app-review 0.5.4 → 0.5.6-alpha.10

package/{es → lib/src}/views/slides/index.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch } from 'redux';
+import type { ConnectedOptions } from '../../types/common';
 import { type SlideIndexes } from '../../common';
 import type { StoreState } from '../../reducers';
 import type { AnswerUI } from '../../types/slides';
@@ -138,5 +139,5 @@ export declare type CongratsProps = {
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: Function) => SlidesViewProps;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, options: ConnectedOptions) => SlidesViewProps;
 export {};

package/lib/{views → src/views}/slides/index.js

@@ -161,22 +161,22 @@ export var buildStepItems = function (state) {
     return steps;
 };
 var getCorrectionPopinProps = function (dispatch) {
-    return function (isCorrect, correctAnswer, klf) {
+    return function (isCorrect, correctAnswer, klf, translate) {
         return {
             klf: isCorrect
                 ? undefined
                 : {
-                    label: '_klf',
+                    label: translate('KLF'),
                     tooltip: klf
                 },
-            resultLabel: isCorrect ? '_right' : '_wrong',
+            resultLabel: isCorrect ? translate('Correct Answer') : translate('Wrong Answer'),
             information: {
-                label: isCorrect ? '_klf' : '_correctAnswer',
+                label: isCorrect ? translate('KLF') : translate('Correct Answer'),
                 message: isCorrect ? klf : join(',', correctAnswer)
             },
             next: {
-                ariaLabel: '_correctionNextAriaLabel',
-                label: '_correctionNextLabel',
+                ariaLabel: translate('Next Question'),
+                label: translate('Next Question'),
                 onClick: function () {
                     dispatch(nextSlide);
                 }
@@ -212,7 +212,7 @@ var buildQuitPopinProps = function (dispatch) {
         };
     };
 };
-var buildRankCard = function (rank) {
+var buildRankCard = function (rank, translate) {
     return {
         'aria-label': 'Review Card Congrats Container',
         'data-name': 'card-rank',
@@ -227,13 +227,13 @@ var buildRankCard = function (rank) {
         cardType: 'card-rank',
         iconAriaLabel: 'Image without information',
         className: undefined,
-        reviewCardTitle: 'You are now',
+        reviewCardTitle: translate('You are now'),
         reviewCardValue: "".concat(rank),
         rankSuffix: 'th',
         timerAnimation: 200
     };
 };
-var buildCongratsProps = function (state) {
+var buildCongratsProps = function (state, translate) {
     if (!state.ui.showCongrats)
         return;
     var progression = state.data.progression;
@@ -256,18 +256,18 @@ var buildCongratsProps = function (state) {
         iconAriaLabel: 'Image without information',
         className: undefined,
         cardType: 'card-star',
-        reviewCardTitle: 'You have won',
+        reviewCardTitle: translate('You have won'),
         reviewCardValue: "".concat(stars),
         timerAnimation: 200
     };
     var _a = state.data.rank, start = _a.start, end = _a.end;
     var newRank = start - end;
-    var cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end) : undefined;
+    var cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end, translate) : undefined;
     return {
         'aria-label': 'Review Congratulations',
         'data-name': 'review-congrats',
         animationLottie: confettiAnimation,
-        title: 'Congratulations!',
+        title: translate('Congratulations!'),
         cardCongratsStar: cardCongratsStar,
         cardCongratsRank: cardCongratsRank,
         buttonRevising: undefined,
@@ -279,7 +279,8 @@ var isEndOfProgression = function (progression) {
         return false;
     return progression.state.nextContent.ref === 'successExitNode';
 };
-export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
+export var mapStateToSlidesProps = function (state, dispatch, options) {
+    var translate = options.translate, onQuitClick = options.onQuitClick;
     var currentSlideRef = getCurrentSlideRef(state);
     var endReview = isEndOfProgression(state.data.progression);
     var correction = get(['data', 'corrections', currentSlideRef], state);
@@ -288,8 +289,8 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
     var showQuitPopin = get(['ui', 'showQuitPopin'], state);
     return {
         header: {
-            mode: '__revision_mode',
-            skillName: '__agility',
+            mode: translate('Review Title'),
+            skillName: translate('Content Parent Title'),
             onQuitClick: function () { return dispatch(openQuitPopin); },
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
@@ -298,16 +299,17 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
         stack: {
             slides: buildStackSlides(state, dispatch),
             validateButton: {
-                label: '__validate',
+                label: translate('Validate'),
                 disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
                 onClick: function () {
                     dispatch(postAnswer);
                 }
             },
-            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
+            correctionPopinProps: correction &&
+                getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, options.translate),
             endReview: endReview && state.ui.showCongrats
         },
-        congrats: buildCongratsProps(state),
+        congrats: buildCongratsProps(state, options.translate),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/locales/en/review.json

@@ -0,0 +1,14 @@
+{
+    "Review Title": "Review Mode",
+    "Content Parent Title": "From `{{contentTitle}}` `{{contentType}}`",
+    "Validate": "Validate",
+    "Next Question": "Next Question",
+    "KLF": "Key Learning Factor",
+    "Correct Answer": "Correct Answer",
+    "Wrong Answer": "Wrong Answer",
+    "You have won": "You have won",
+    "You are now": "You are now",
+    "Revise another skill": "Revise another skill",
+    "Continue reviewing": "Continue reviewing",
+    "Congratulations!": "Congratulations!"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.5.4",
+  "version": "0.5.6-alpha.10+0092fc5b2",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -30,6 +30,7 @@
     "lib",
     "es",
     "src",
+    "locales",
     "readme.md"
   ],
   "main": "./es/index.js",
@@ -39,11 +40,13 @@
       "commonjs": "./lib/index.js",
       "types": "./es/index.d.ts"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./locales/en/review": "./locales/en/review.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.24.3",
+    "@coorpacademy/components": "10.24.4",
     "@coorpacademy/redux-task": "1.1.6",
+    "@coorpacademy/translate": "6.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
     "react-redux": "^7.2.9",
@@ -55,9 +58,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@coorpacademy/css-modules-require-hook": "2.1.5",
+    "@coorpacademy/css-modules-require-hook": "3.0.0",
     "@coorpacademy/eslint-plugin-coorpacademy": "^11.0.0",
-    "@coorpacademy/webpack-config": "11.0.0",
+    "@coorpacademy/webpack-config": "12.0.0",
     "@testing-library/react": "^12.1.5",
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
@@ -77,5 +80,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "9e64ba973f7219fca6b39876f2e64d423356c721"
+  "gitHead": "0092fc5b24aa99b5e3ffdd2ee48501bcfb5427d6"
 }

package/src/index.tsx

@@ -8,7 +8,7 @@ import isEmpty from 'lodash/fp/isEmpty';
 import get from 'lodash/fp/get';
 import configureStore from './configure-store';
 
-import type {AppOptions} from './types/common';
+import type {AppOptions, ConnectedOptions} from './types/common';
 import type {StoreState} from './reducers';
 
 import {navigateTo, ViewPath} from './actions/ui/navigation';
@@ -19,15 +19,15 @@ import {VIEWS} from './common';
 import {mapStateToSlidesProps} from './views/slides';
 import {mapStateToSkillsProps} from './views/skills';
 
-const ConnectedApp = ({onQuitClick}: {onQuitClick: Function}): JSX.Element => {
+const ConnectedApp = (options: ConnectedOptions): JSX.Element => {
   const dispatch = useDispatch();
-
   const props = {
     viewName: useSelector(
       (state: StoreState) => state.ui.navigation[state.ui.navigation.length - 1]
     ),
-    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch, onQuitClick)),
-    skills: useSelector((state: StoreState) => mapStateToSkillsProps(state))
+    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch, options)),
+    skills: useSelector((state: StoreState) => mapStateToSkillsProps(state)),
+    onboarding: {}
   };
   return <AppReviewTemplate {...props} />;
 };
@@ -36,7 +36,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
   const [isProgressionCreated, setIsProgressionCreated] = useState(false);
 
-  const onQuitClick = options.onQuitClick;
+  const {translate, onQuitClick} = options;
 
   useEffect(() => {
     if (store) return;
@@ -89,7 +89,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
   return (
     <Provider store={store}>
-      <ConnectedApp onQuitClick={onQuitClick} />
+      <ConnectedApp onQuitClick={onQuitClick} translate={translate} />
     </Provider>
   );
 };

package/src/services/fetch-slides-to-review-by-skill-ref.ts

@@ -0,0 +1,18 @@
+import crossFetch from 'cross-fetch';
+import decode from 'jwt-decode';
+
+import {JWT, SlideIdFromAPI} from '../types/common';
+import {toJSON} from './tools/fetch-responses';
+
+export const fetchSlidesToReviewBySkillRef = async (
+  url: string,
+  token: string,
+  skillRef: string
+): Promise<SlideIdFromAPI[]> => {
+  const {user: userId}: JWT = decode(token);
+  const response = await crossFetch(
+    `${url}/api/v1/review/users/${userId}/skills/${skillRef}/slide?limit=5&offset=0`
+  );
+
+  return toJSON<SlideIdFromAPI[]>(response);
+};

package/src/services/index.ts

@@ -3,6 +3,7 @@ import {fetchCorrection} from './fetch-correction';
 import {fetchRank} from './fetch-rank';
 import {fetchSkills} from './fetch-skills';
 import {fetchSlide} from './fetch-slide';
+import {fetchSlidesToReviewBySkillRef} from './fetch-slides-to-review-by-skill-ref';
 import {postAnswer} from './post-answer';
 import {postProgression} from './post-progression';
 
@@ -11,6 +12,7 @@ export const getServices = (): Services => ({
   fetchRank,
   fetchSkills,
   fetchSlide,
+  fetchSlidesToReviewBySkillRef,
   postAnswer,
   postProgression
 });

package/src/services/test/fetch-slides-to-review-by-skill-ref.test.ts

@@ -0,0 +1,51 @@
+import test from 'ava';
+import nock from 'nock';
+import {fetchSlidesToReviewBySkillRef} from '../fetch-slides-to-review-by-skill-ref';
+import {SlideIdFromAPI} from '../../types/common';
+
+const url = process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006';
+
+const result: SlideIdFromAPI[] = [
+  {
+    slideId: 'sli_6'
+  },
+  {
+    slideId: 'sli_7'
+  },
+  {
+    slideId: 'sli_8'
+  },
+  {
+    slideId: 'sli_9'
+  },
+  {
+    slideId: 'sli_10'
+  }
+];
+
+test.before(() => {
+  nock(url)
+    .get('/api/v1/review/users/592d830b240b923f00bffba6/skills/_skill-ref/slide?limit=5&offset=0')
+    .reply(200, result);
+});
+
+test.after(() => {
+  nock.cleanAll();
+});
+
+test('should fetch slides id with success', async t => {
+  const token = process.env.API_TEST_TOKEN || '';
+  const slidesId = await fetchSlidesToReviewBySkillRef(url, token, '_skill-ref');
+  t.deepEqual(result, slidesId);
+});
+
+test('should reject if a bad token is passed', async t => {
+  const badToken = 'token is not a jwt';
+  const error = await t.throwsAsync(() =>
+    fetchSlidesToReviewBySkillRef(url, badToken, '_skill-ref')
+  );
+  t.is(
+    error?.message,
+    "Invalid token specified: Cannot read properties of undefined (reading 'replace')"
+  );
+});

package/src/test/index.test.tsx

@@ -61,7 +61,9 @@ const appOptions: AppOptions = {
   token: process.env.API_TEST_TOKEN || '',
   skillRef: 'skill_NJC0jFKoH',
   services,
-  onQuitClick: identity
+  onQuitClick: identity,
+  translate: key => key,
+  url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
 };
 
 test('should show the loader while the app is fetching the data', async t => {

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

@@ -11,7 +11,8 @@ import {
   ReviewContent,
   ReviewEngine,
   Services,
-  SlideFromAPI
+  SlideFromAPI,
+  SlideIdFromAPI
 } from '../../types/common';
 
 const content: ReviewContent = {
@@ -432,6 +433,24 @@ export const getChoicesCorrection = (ref: string, wrongChoice = false): Correcti
   }
 };
 
+const fetchSlidesToReviewBySkillRefResponse: SlideIdFromAPI[] = [
+  {
+    slideId: freeTextSlide._id
+  },
+  {
+    slideId: templateSlide._id
+  },
+  {
+    slideId: qcmDragSlide._id
+  },
+  {
+    slideId: qcmGraphicSlide._id
+  },
+  {
+    slideId: qcmSlide._id
+  }
+];
+
 export const services: Services = {
   fetchSkills: () => Promise.resolve(fetchSkillsResponse),
   fetchSlide: ref => Promise.resolve({...getSlideFixture(ref), universalRef: ref, _id: ref}),
@@ -441,5 +460,8 @@ export const services: Services = {
     return Promise.resolve(get(currentSlide, postAnswerResponses));
   },
   fetchCorrection: ref => Promise.resolve(getChoicesCorrection(ref)),
-  fetchRank: () => Promise.resolve(fetchRankResponse)
+  fetchRank: () => Promise.resolve(fetchRankResponse),
+  fetchSlidesToReviewBySkillRef: () => Promise.resolve(fetchSlidesToReviewBySkillRefResponse)
 };
+
+export const translate = (key: string): string => `___${key}`;

package/src/types/common.ts

@@ -82,6 +82,10 @@ export type SlideFromAPI = {
   };
 };
 
+export type SlideIdFromAPI = {
+  slideId: string;
+};
+
 export type Rank = {
   rank: number;
 };
@@ -164,17 +168,27 @@ export type Services = {
     answer: string[]
   ): Promise<CorrectionFromAPI | void>;
   fetchRank(token: string): Promise<Rank>;
+  fetchSlidesToReviewBySkillRef(
+    url: string,
+    token: string,
+    skillRef: string
+  ): Promise<SlideIdFromAPI[]>;
 };
 
 export type Options = {
   services: Services;
 };
 
-export type AppOptions = {
+export type ConnectedOptions = {
+  translate: (key: string, data?: unknown) => string;
+  onQuitClick: Function;
+};
+
+export type AppOptions = ConnectedOptions & {
   token: string;
   skillRef?: string;
   services: Services;
-  onQuitClick: Function;
+  url: string;
 };
 
 export type JWT = {

package/src/types/globals.d.ts

@@ -2,3 +2,4 @@ declare module '*.css';
 declare module 'browser-env';
 declare module '@coorpacademy/components/es/*';
 declare module '@coorpacademy/redux-task';
+declare module '@coorpacademy/translate';

package/src/views/slides/index.ts

@@ -8,7 +8,12 @@ import toInteger from 'lodash/fp/toInteger';
 import type {Dispatch} from 'redux';
 import join from 'lodash/fp/join';
 import {closeQuitPopin, openQuitPopin} from '../../actions/ui/quit-popin';
-import type {ProgressionAnswerItem, ProgressionFromAPI, SlideContent} from '../../types/common';
+import type {
+  ConnectedOptions,
+  ProgressionAnswerItem,
+  ProgressionFromAPI,
+  SlideContent
+} from '../../types/common';
 import {getProgressionSlidesRefs, type SlideIndexes} from '../../common';
 import type {StoreState} from '../../reducers';
 import type {AnswerUI} from '../../types/slides';
@@ -346,22 +351,27 @@ export const buildStepItems = (state: StoreState): StepItem[] => {
 
 const getCorrectionPopinProps =
   (dispatch: Dispatch) =>
-  (isCorrect: boolean, correctAnswer: string[], klf: string): CorrectionPopinProps => {
+  (
+    isCorrect: boolean,
+    correctAnswer: string[],
+    klf: string,
+    translate: (key: string, data?: unknown) => string
+  ): CorrectionPopinProps => {
     return {
       klf: isCorrect
         ? undefined
         : {
-            label: '_klf',
+            label: translate('KLF'),
             tooltip: klf
           },
-      resultLabel: isCorrect ? '_right' : '_wrong',
+      resultLabel: isCorrect ? translate('Correct Answer') : translate('Wrong Answer'),
       information: {
-        label: isCorrect ? '_klf' : '_correctAnswer',
+        label: isCorrect ? translate('KLF') : translate('Correct Answer'),
         message: isCorrect ? klf : join(',', correctAnswer)
       },
       next: {
-        ariaLabel: '_correctionNextAriaLabel',
-        label: '_correctionNextLabel',
+        ariaLabel: translate('Next Question'),
+        label: translate('Next Question'),
         onClick: (): void => {
           dispatch(nextSlide);
         }
@@ -398,7 +408,10 @@ const buildQuitPopinProps =
     };
   };
 
-const buildRankCard = (rank: number): CongratsCardProps => {
+const buildRankCard = (
+  rank: number,
+  translate: (key: string, data?: unknown) => string
+): CongratsCardProps => {
   return {
     'aria-label': 'Review Card Congrats Container',
     'data-name': 'card-rank',
@@ -414,14 +427,17 @@ const buildRankCard = (rank: number): CongratsCardProps => {
     cardType: 'card-rank',
     iconAriaLabel: 'Image without information',
     className: undefined,
-    reviewCardTitle: 'You are now',
+    reviewCardTitle: translate('You are now'),
     reviewCardValue: `${rank}`,
     rankSuffix: 'th',
     timerAnimation: 200
   };
 };
 
-const buildCongratsProps = (state: StoreState): CongratsProps | undefined => {
+const buildCongratsProps = (
+  state: StoreState,
+  translate: (key: string, data?: unknown) => string
+): CongratsProps | undefined => {
   if (!state.ui.showCongrats) return;
 
   const progression = state.data.progression as ProgressionFromAPI;
@@ -445,20 +461,21 @@ const buildCongratsProps = (state: StoreState): CongratsProps | undefined => {
     iconAriaLabel: 'Image without information',
     className: undefined,
     cardType: 'card-star',
-    reviewCardTitle: 'You have won',
+    reviewCardTitle: translate('You have won'),
     reviewCardValue: `${stars}`,
     timerAnimation: 200
   };
 
   const {start, end} = state.data.rank;
   const newRank = start - end;
-  const cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end) : undefined;
+  const cardCongratsRank =
+    !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end, translate) : undefined;
 
   return {
     'aria-label': 'Review Congratulations',
     'data-name': 'review-congrats',
     animationLottie: confettiAnimation,
-    title: 'Congratulations!',
+    title: translate('Congratulations!'),
     cardCongratsStar,
     cardCongratsRank,
     buttonRevising: undefined, // TODO make boutons and actions
@@ -474,8 +491,9 @@ const isEndOfProgression = (progression: ProgressionState): boolean => {
 export const mapStateToSlidesProps = (
   state: StoreState,
   dispatch: Dispatch,
-  onQuitClick: Function
+  options: ConnectedOptions
 ): SlidesViewProps => {
+  const {translate, onQuitClick} = options;
   const currentSlideRef = getCurrentSlideRef(state);
   const endReview = isEndOfProgression(state.data.progression);
   const correction = get(['data', 'corrections', currentSlideRef], state);
@@ -484,8 +502,8 @@ export const mapStateToSlidesProps = (
   const showQuitPopin = get(['ui', 'showQuitPopin'], state);
   return {
     header: {
-      mode: '__revision_mode',
-      skillName: '__agility',
+      mode: translate('Review Title'),
+      skillName: translate('Content Parent Title'),
       onQuitClick: () => dispatch(openQuitPopin),
       'aria-label': 'aria-header-wrapper',
       closeButtonAriaLabel: 'aria-close-button',
@@ -494,17 +512,23 @@ export const mapStateToSlidesProps = (
     stack: {
       slides: buildStackSlides(state, dispatch),
       validateButton: {
-        label: '__validate',
+        label: translate('Validate'),
         disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
         onClick: (): void => {
           dispatch(postAnswer);
         }
       },
       correctionPopinProps:
-        correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
+        correction &&
+        getCorrectionPopinProps(dispatch)(
+          isCorrect,
+          correction.correctAnswer,
+          klf,
+          options.translate
+        ),
       endReview: endReview && state.ui.showCongrats
     },
-    congrats: buildCongratsProps(state),
+    congrats: buildCongratsProps(state, options.translate),
     quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
   };
 };

package/src/views/slides/test/header.on-click.test.ts

@@ -1,7 +1,11 @@
 import test from 'ava';
 import identity from 'lodash/fp/identity';
 import {createTestStore} from '../../../actions/test/create-test-store';
-import {incorrectFreeTextPostAnswerResponse, services} from '../../../test/util/services.mock';
+import {
+  incorrectFreeTextPostAnswerResponse,
+  services,
+  translate
+} from '../../../test/util/services.mock';
 import {StoreState} from '../../../reducers';
 import {OPEN_POPIN} from '../../../actions/ui/quit-popin';
 import {mapStateToSlidesProps} from '..';
@@ -37,10 +41,13 @@ const state: StoreState = {
 test('should dispatch OPEN_POPIN action after a click on close button in header', async t => {
   const expectedAction = [{type: OPEN_POPIN}];
   const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
-  const props = mapStateToSlidesProps(getState(), dispatch, identity);
+  const props = mapStateToSlidesProps(getState(), dispatch, {translate, onQuitClick: identity});
   t.is(props.quitPopin, undefined);
   await props.header.onQuitClick();
-  const updatedProps = mapStateToSlidesProps(getState(), dispatch, identity);
+  const updatedProps = mapStateToSlidesProps(getState(), dispatch, {
+    translate,
+    onQuitClick: identity
+  });
   t.not(updatedProps.quitPopin, undefined);
   t.pass();
 });