@coorpacademy/app-review 0.7.6 → 0.7.7-alpha.13

package/es/actions/api/fetch-skill.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch } from 'redux';
+import type { StoreState } from '../../reducers';
+import type { Skill, ThunkOptions } from '../../types/common';
+export declare const SKILL_FETCH_REQUEST: "@@skill/FETCH_REQUEST";
+export declare const SKILL_FETCH_SUCCESS: "@@skill/FETCH_SUCCESS";
+export declare const SKILL_FETCH_FAILURE: "@@skill/FETCH_FAILURE";
+export declare type ReceivedSkill = {
+    type: typeof SKILL_FETCH_SUCCESS;
+    payload: Skill;
+};
+export declare const fetchSkill: (skillRef: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: ThunkOptions) => ReceivedSkill;

package/es/actions/api/fetch-skill.js

@@ -0,0 +1,16 @@
+import get from 'lodash/fp/get';
+import buildTask from '@coorpacademy/redux-task';
+export const SKILL_FETCH_REQUEST = '@@skill/FETCH_REQUEST';
+export const SKILL_FETCH_SUCCESS = '@@skill/FETCH_SUCCESS';
+export const SKILL_FETCH_FAILURE = '@@skill/FETCH_FAILURE';
+export const fetchSkill = (skillRef) => (dispatch, getState, { services }) => {
+    const action = buildTask({
+        types: [SKILL_FETCH_REQUEST, SKILL_FETCH_SUCCESS, SKILL_FETCH_FAILURE],
+        task: () => {
+            const state = getState();
+            const token = get(['data', 'token'], state);
+            return services.fetchSkill(skillRef, token);
+        }
+    });
+    return dispatch(action);
+};

package/es/actions/api/post-progression.js

@@ -1,6 +1,7 @@
 import buildTask from '@coorpacademy/redux-task';
 import get from 'lodash/fp/get';
 import { fetchSlide } from './fetch-slide';
+import { fetchSkill } from './fetch-skill';
 export const POST_PROGRESSION_REQUEST = '@@progression/POST_REQUEST';
 export const POST_PROGRESSION_SUCCESS = '@@progression/POST_SUCCESS';
 export const POST_PROGRESSION_FAILURE = '@@progression/POST_FAILURE';
@@ -16,5 +17,6 @@ export const postProgression = (skillRef) => async (dispatch, getState, { servic
         const progression = response.payload;
         const slideRef = progression.state.nextContent.ref;
         await dispatch(fetchSlide(slideRef));
+        await dispatch(fetchSkill(skillRef));
     }
 };

package/es/index.js

@@ -15,7 +15,7 @@ const ConnectedApp = (options) => {
     const props = {
         viewName: useSelector((state) => state.ui.navigation[state.ui.navigation.length - 1]),
         slides: useSelector((state) => mapStateToSlidesProps(state, dispatch, options)),
-        skills: useSelector((state) => mapStateToSkillsProps(state)),
+        skills: useSelector((state) => mapStateToSkillsProps(state, options)),
         navigateBack: () => dispatch(navigateBack),
         onboarding: {}
     };

package/es/views/skills/index.d.ts

@@ -1,24 +1,4 @@
+import { ReviewSkillsProps } from '@coorpacademy/components/es/template/app-review/skills/prop-types';
 import { StoreState } from '../../reducers';
-declare type SkillCard = {
-    'aria-label': string;
-    skillTitle: string;
-    skillAriaLabel: string;
-    buttonLabel: string;
-    buttonAriaLabel: string;
-    reviseLabel: string;
-    reviseAriaLabel: string;
-    isCustom: boolean;
-    onClick: () => void;
-};
-declare type NoSkillsProps = {
-    iconSkillAriaLabel: string;
-};
-declare type SkillsProps = NoSkillsProps & {
-    'aria-label'?: string;
-    title: string;
-    isLoading?: boolean;
-    isLoadingAriaLabel: string;
-    listSkills: SkillCard[];
-};
-export { SkillsProps };
-export declare const mapStateToSkillsProps: (state: StoreState) => SkillsProps;
+import type { ConnectedOptions } from '../../types/common';
+export declare const mapStateToSkillsProps: (state: StoreState, options: ConnectedOptions) => ReviewSkillsProps;

package/es/views/skills/index.js

@@ -1,20 +1,24 @@
-export const mapStateToSkillsProps = (state) => {
+export const mapStateToSkillsProps = (state, options) => {
+    const { translate } = options;
     return {
-        title: '@todo title',
-        iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+        'aria-label': translate('Review Skills Container'),
+        title: translate('Skills you can review'),
         isLoading: false,
-        isLoadingAriaLabel: '@todo loading',
+        isLoadingAriaLabel: 'Review skills container is loading',
         listSkills: state.data.skills.map(skill => ({
-            'aria-label': '',
+            'aria-label': translate('Skill Card'),
             isCustom: skill.custom,
             skillTitle: skill.name,
-            skillAriaLabel: '@todo skill aria label',
-            buttonLabel: '@todo button',
-            buttonAriaLabel: '@todo button aria label',
-            reviseLabel: '@todo revise',
-            reviseAriaLabel: '@todo revise aria label',
+            skillAriaLabel: skill.name,
+            buttonLabel: translate('Review this skill'),
+            buttonAriaLabel: translate('Review this skill'),
+            reviseLabel: translate('{{count}} questions to review', { count: skill.slidesToReview }),
+            reviseAriaLabel: translate('{{count}} questions to review', { count: skill.slidesToReview }),
             // eslint-disable-next-line no-console
             onClick: () => console.log('@todo plug dispatcher select skill')
-        }))
+        })),
+        titleNoSkills: translate('No skill to revise'),
+        textNoSkills: translate('Complete courses before revising'),
+        iconSkillAriaLabel: 'Image without information'
     };
 };

package/es/views/slides/index.js

@@ -60,7 +60,11 @@ const getCurrentSlideRef = (state) => {
     const content = progression.state.content;
     return content.ref;
 };
-const buildStackSlides = (state, dispatch) => {
+const isLastSlideAnswered = (slidesRef, slideRef) => {
+    return last(slidesRef) === slideRef;
+};
+const buildStackSlides = (state, dispatch, options) => {
+    const { translate } = options;
     const currentSlideRef = getCurrentSlideRef(state);
     const progression = state.data.progression;
     if (!currentSlideRef || !progression)
@@ -69,9 +73,12 @@ const buildStackSlides = (state, dispatch) => {
     // @ts-expect-error typescript does not support capped versions of lodash functions
     const stack = reduce.convert({ cap: false })((acc, uiSlide, _index) => {
         const index = toInteger(_index);
-        const positions = state.ui.positions;
-        const position = positions[index];
         const slideRef = slideRefs[index];
+        const lastAnsweredSlideRef = isLastSlideAnswered(progression.state.slides, slideRef);
+        const positions = state.ui.positions;
+        // when unstack the last answered slide (position -1), we set the position to 0 only during the animation
+        // to avoid to hide the slide (caused by the position -1).
+        const position = lastAnsweredSlideRef && positions[index] === -1 ? 0 : positions[index];
         if (!slideRef)
             return set(index, { ...uiSlide, position }, acc);
         const slideFromAPI = get(slideRef, state.data.slides);
@@ -84,7 +91,7 @@ const buildStackSlides = (state, dispatch) => {
         const slideUI = get(['ui', 'slide', slideRef], state);
         const animateCorrectionPopin = isCurrentSlideRef && slideUI.animateCorrectionPopin;
         const showCorrectionPopin = isCurrentSlideRef && slideUI.showCorrectionPopin;
-        const animationType = slideUI.animationType;
+        const animationType = lastAnsweredSlideRef ? slideUI.animationType : undefined;
         const updatedUiSlide = {
             ...uiSlide,
             position,
@@ -93,7 +100,10 @@ const buildStackSlides = (state, dispatch) => {
             loading: false,
             questionText,
             answerUI,
-            parentContentTitle: `From "${parentContentTitle}" ${parentContentType}`,
+            parentContentTitle: translate('Content Parent Title', {
+                contentTitle: parentContentTitle,
+                contentType: parentContentType
+            }),
             animationType
         };
         return set(index, updatedUiSlide, acc);
@@ -320,7 +330,7 @@ export const mapStateToSlidesProps = (state, dispatch, options) => {
             hiddenSteps: showCongrats
         },
         stack: {
-            slides: buildStackSlides(state, dispatch),
+            slides: buildStackSlides(state, dispatch, options),
             validateButton: {
                 label: translate('Validate'),
                 disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),

package/lib/actions/api/fetch-skill.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch } from 'redux';
+import type { StoreState } from '../../reducers';
+import type { Skill, ThunkOptions } from '../../types/common';
+export declare const SKILL_FETCH_REQUEST: "@@skill/FETCH_REQUEST";
+export declare const SKILL_FETCH_SUCCESS: "@@skill/FETCH_SUCCESS";
+export declare const SKILL_FETCH_FAILURE: "@@skill/FETCH_FAILURE";
+export declare type ReceivedSkill = {
+    type: typeof SKILL_FETCH_SUCCESS;
+    payload: Skill;
+};
+export declare const fetchSkill: (skillRef: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: ThunkOptions) => ReceivedSkill;

package/lib/actions/api/fetch-skill.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchSkill = exports.SKILL_FETCH_FAILURE = exports.SKILL_FETCH_SUCCESS = exports.SKILL_FETCH_REQUEST = void 0;
+const get_1 = __importDefault(require("lodash/fp/get"));
+const redux_task_1 = __importDefault(require("@coorpacademy/redux-task"));
+exports.SKILL_FETCH_REQUEST = '@@skill/FETCH_REQUEST';
+exports.SKILL_FETCH_SUCCESS = '@@skill/FETCH_SUCCESS';
+exports.SKILL_FETCH_FAILURE = '@@skill/FETCH_FAILURE';
+const fetchSkill = (skillRef) => (dispatch, getState, { services }) => {
+    const action = (0, redux_task_1.default)({
+        types: [exports.SKILL_FETCH_REQUEST, exports.SKILL_FETCH_SUCCESS, exports.SKILL_FETCH_FAILURE],
+        task: () => {
+            const state = getState();
+            const token = (0, get_1.default)(['data', 'token'], state);
+            return services.fetchSkill(skillRef, token);
+        }
+    });
+    return dispatch(action);
+};
+exports.fetchSkill = fetchSkill;

package/lib/actions/api/post-progression.js

@@ -7,6 +7,7 @@ exports.postProgression = exports.POST_PROGRESSION_FAILURE = exports.POST_PROGRE
 const redux_task_1 = __importDefault(require("@coorpacademy/redux-task"));
 const get_1 = __importDefault(require("lodash/fp/get"));
 const fetch_slide_1 = require("./fetch-slide");
+const fetch_skill_1 = require("./fetch-skill");
 exports.POST_PROGRESSION_REQUEST = '@@progression/POST_REQUEST';
 exports.POST_PROGRESSION_SUCCESS = '@@progression/POST_SUCCESS';
 exports.POST_PROGRESSION_FAILURE = '@@progression/POST_FAILURE';
@@ -22,6 +23,7 @@ const postProgression = (skillRef) => async (dispatch, getState, { services }) =
         const progression = response.payload;
         const slideRef = progression.state.nextContent.ref;
         await dispatch((0, fetch_slide_1.fetchSlide)(slideRef));
+        await dispatch((0, fetch_skill_1.fetchSkill)(skillRef));
     }
 };
 exports.postProgression = postProgression;

package/lib/index.js

@@ -43,7 +43,7 @@ const ConnectedApp = (options) => {
     const props = {
         viewName: (0, react_redux_1.useSelector)((state) => state.ui.navigation[state.ui.navigation.length - 1]),
         slides: (0, react_redux_1.useSelector)((state) => (0, slides_1.mapStateToSlidesProps)(state, dispatch, options)),
-        skills: (0, react_redux_1.useSelector)((state) => (0, skills_1.mapStateToSkillsProps)(state)),
+        skills: (0, react_redux_1.useSelector)((state) => (0, skills_1.mapStateToSkillsProps)(state, options)),
         navigateBack: () => dispatch(navigation_1.navigateBack),
         onboarding: {}
     };

package/lib/views/skills/index.d.ts

@@ -1,24 +1,4 @@
+import { ReviewSkillsProps } from '@coorpacademy/components/es/template/app-review/skills/prop-types';
 import { StoreState } from '../../reducers';
-declare type SkillCard = {
-    'aria-label': string;
-    skillTitle: string;
-    skillAriaLabel: string;
-    buttonLabel: string;
-    buttonAriaLabel: string;
-    reviseLabel: string;
-    reviseAriaLabel: string;
-    isCustom: boolean;
-    onClick: () => void;
-};
-declare type NoSkillsProps = {
-    iconSkillAriaLabel: string;
-};
-declare type SkillsProps = NoSkillsProps & {
-    'aria-label'?: string;
-    title: string;
-    isLoading?: boolean;
-    isLoadingAriaLabel: string;
-    listSkills: SkillCard[];
-};
-export { SkillsProps };
-export declare const mapStateToSkillsProps: (state: StoreState) => SkillsProps;
+import type { ConnectedOptions } from '../../types/common';
+export declare const mapStateToSkillsProps: (state: StoreState, options: ConnectedOptions) => ReviewSkillsProps;

package/lib/views/skills/index.js

@@ -1,24 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mapStateToSkillsProps = void 0;
-const mapStateToSkillsProps = (state) => {
+const mapStateToSkillsProps = (state, options) => {
+    const { translate } = options;
     return {
-        title: '@todo title',
-        iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+        'aria-label': translate('Review Skills Container'),
+        title: translate('Skills you can review'),
         isLoading: false,
-        isLoadingAriaLabel: '@todo loading',
+        isLoadingAriaLabel: 'Review skills container is loading',
         listSkills: state.data.skills.map(skill => ({
-            'aria-label': '',
+            'aria-label': translate('Skill Card'),
             isCustom: skill.custom,
             skillTitle: skill.name,
-            skillAriaLabel: '@todo skill aria label',
-            buttonLabel: '@todo button',
-            buttonAriaLabel: '@todo button aria label',
-            reviseLabel: '@todo revise',
-            reviseAriaLabel: '@todo revise aria label',
+            skillAriaLabel: skill.name,
+            buttonLabel: translate('Review this skill'),
+            buttonAriaLabel: translate('Review this skill'),
+            reviseLabel: translate('{{count}} questions to review', { count: skill.slidesToReview }),
+            reviseAriaLabel: translate('{{count}} questions to review', { count: skill.slidesToReview }),
             // eslint-disable-next-line no-console
             onClick: () => console.log('@todo plug dispatcher select skill')
-        }))
+        })),
+        titleNoSkills: translate('No skill to revise'),
+        textNoSkills: translate('Complete courses before revising'),
+        iconSkillAriaLabel: 'Image without information'
     };
 };
 exports.mapStateToSkillsProps = mapStateToSkillsProps;

package/lib/views/slides/index.js

@@ -66,7 +66,11 @@ const getCurrentSlideRef = (state) => {
     const content = progression.state.content;
     return content.ref;
 };
-const buildStackSlides = (state, dispatch) => {
+const isLastSlideAnswered = (slidesRef, slideRef) => {
+    return (0, last_1.default)(slidesRef) === slideRef;
+};
+const buildStackSlides = (state, dispatch, options) => {
+    const { translate } = options;
     const currentSlideRef = getCurrentSlideRef(state);
     const progression = state.data.progression;
     if (!currentSlideRef || !progression)
@@ -75,9 +79,12 @@ const buildStackSlides = (state, dispatch) => {
     // @ts-expect-error typescript does not support capped versions of lodash functions
     const stack = reduce_1.default.convert({ cap: false })((acc, uiSlide, _index) => {
         const index = (0, toInteger_1.default)(_index);
-        const positions = state.ui.positions;
-        const position = positions[index];
         const slideRef = slideRefs[index];
+        const lastAnsweredSlideRef = isLastSlideAnswered(progression.state.slides, slideRef);
+        const positions = state.ui.positions;
+        // when unstack the last answered slide (position -1), we set the position to 0 only during the animation
+        // to avoid to hide the slide (caused by the position -1).
+        const position = lastAnsweredSlideRef && positions[index] === -1 ? 0 : positions[index];
         if (!slideRef)
             return (0, set_1.default)(index, { ...uiSlide, position }, acc);
         const slideFromAPI = (0, get_1.default)(slideRef, state.data.slides);
@@ -90,7 +97,7 @@ const buildStackSlides = (state, dispatch) => {
         const slideUI = (0, get_1.default)(['ui', 'slide', slideRef], state);
         const animateCorrectionPopin = isCurrentSlideRef && slideUI.animateCorrectionPopin;
         const showCorrectionPopin = isCurrentSlideRef && slideUI.showCorrectionPopin;
-        const animationType = slideUI.animationType;
+        const animationType = lastAnsweredSlideRef ? slideUI.animationType : undefined;
         const updatedUiSlide = {
             ...uiSlide,
             position,
@@ -99,7 +106,10 @@ const buildStackSlides = (state, dispatch) => {
             loading: false,
             questionText,
             answerUI,
-            parentContentTitle: `From "${parentContentTitle}" ${parentContentType}`,
+            parentContentTitle: translate('Content Parent Title', {
+                contentTitle: parentContentTitle,
+                contentType: parentContentType
+            }),
             animationType
         };
         return (0, set_1.default)(index, updatedUiSlide, acc);
@@ -327,7 +337,7 @@ const mapStateToSlidesProps = (state, dispatch, options) => {
             hiddenSteps: showCongrats
         },
         stack: {
-            slides: buildStackSlides(state, dispatch),
+            slides: buildStackSlides(state, dispatch, options),
             validateButton: {
                 label: translate('Validate'),
                 disabled: !(0, get_1.default)(['ui', 'slide', currentSlideRef, 'validateButton'], state),

package/locales/en/review.json

@@ -1,6 +1,6 @@
 {
     "Review Title": "Review Mode",
-    "Content Parent Title": "From `{{contentTitle}}` `{{contentType}}`",
+    "Content Parent Title": "From \"{{contentTitle}}\" {{contentType}}",
     "Validate": "Validate",
     "Next Question": "Next Question",
     "KLF": "Key point",
@@ -40,15 +40,11 @@
         }
       }
     },
-    "list_title": "Skills you can review",
-    "list_aria_label": "Review Skills Container",
-    "card": {
-      "aria_label": "Skill Card",
-      "text": "{{total}} questions to review",
-      "button_text": "Review this skill"
-    },
-    "no_skills": {
-      "title": "You have no skill to revise yet",
-      "text": "First you need to complete courses before you can review different skills."
-    }      
+    "Review Skills Container": "Review Skills Container",
+    "Skills you can review": "Skills you can review",
+    "Skill Card": "Skill Card",
+    "{{count}} questions to review" : "{{count}} questions to review",
+    "Review this skill": "Review this skill",
+    "No skill to revise": "You have no skill to revise yet",
+    "Complete courses before revising" : "First you need to complete courses before you can review different skills."
 }

package/locales/es/review.json

@@ -1,6 +1,6 @@
 {
     "Review Title": "Modo revisión",
-    "Content Parent Title": "De `{{contentTitle}}` `{{contentType}}`",
+    "Content Parent Title": "Del {{contentType}} \"{{contentTitle}}\"",
     "Validate": "Validar",
     "Next Question": "Siguiente pregunta",
     "KLF": "Aspecto clave",

package/locales/fr/review.json

@@ -1,6 +1,6 @@
 {
     "Review Title": "Mode Révision",
-    "Content Parent Title": "de `{{contentTitle}}` `{{contentType}}`",
+    "Content Parent Title": "du {{contentType}} \"{{contentTitle}}\"",
     "Validate": "Valider",
     "Next Question": "Question suivante",
     "KLF": "Point clé",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.7.6",
+  "version": "0.7.7-alpha.13+c85d1dfbe",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -35,9 +35,9 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "dependencies": {
-    "@coorpacademy/components": "10.27.4",
+    "@coorpacademy/components": "10.28.2",
     "@coorpacademy/redux-task": "1.1.6",
-    "@coorpacademy/translate": "^6.1.5",
+    "@coorpacademy/translate": "6.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
     "react-redux": "^7.2.9",
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@coorpacademy/css-modules-require-hook": "3.0.0",
     "@coorpacademy/eslint-plugin-coorpacademy": "^11.0.0",
-    "@coorpacademy/webpack-config": "12.0.0",
+    "@coorpacademy/webpack-config": "12.0.1",
     "@testing-library/react": "^12.1.5",
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
@@ -71,5 +71,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "39e56226e7bed6a8049221c3b99ec10790382e9b"
+  "gitHead": "c85d1dfbe401f825c584e68b35f477230642b2cd"
 }