@coorpacademy/app-review 0.7.7-alpha.3 → 0.7.7-alpha.61

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/reducers/data/current-skill.d.ts

@@ -0,0 +1,5 @@
+import { ReceivedSkill } from '../../actions/api/fetch-skill';
+import { Skill } from '../../types/common';
+export declare type CurrentSkillState = Skill | null;
+declare const reducer: (state: CurrentSkillState | undefined, action: ReceivedSkill) => CurrentSkillState;
+export default reducer;

package/es/reducers/data/current-skill.js

@@ -0,0 +1,13 @@
+import { SKILL_FETCH_SUCCESS } from '../../actions/api/fetch-skill';
+const initialState = null;
+const reducer = (
+// eslint-disable-next-line default-param-last
+state = initialState, action) => {
+    switch (action.type) {
+        case SKILL_FETCH_SUCCESS:
+            return action.payload;
+        default:
+            return state;
+    }
+};
+export default reducer;

package/es/reducers/data/index.d.ts

@@ -4,6 +4,7 @@ import { SkillsState } from './skills';
 import { SlidesState } from './slides';
 import { TokenState } from './token';
 import { RankState } from './rank';
+import { CurrentSkillState } from './current-skill';
 export declare type DataState = {
     corrections: CorrectionsState;
     progression: ProgressionState;
@@ -11,6 +12,7 @@ export declare type DataState = {
     slides: SlidesState;
     token: TokenState;
     rank: RankState;
+    currentSkill: CurrentSkillState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     corrections: CorrectionsState;
@@ -19,5 +21,6 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     slides: SlidesState;
     token: string;
     rank: RankState;
-}>, import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("../../actions/api/fetch-skills").ReceivedSkills | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
+    currentSkill: CurrentSkillState;
+}>, import("../../actions/api/fetch-skill").ReceivedSkill | import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("../../actions/api/fetch-skills").ReceivedSkills | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
 export default _default;

package/es/reducers/data/index.js

@@ -5,4 +5,13 @@ import skills from './skills';
 import slides from './slides';
 import token from './token';
 import rank from './rank';
-export default combineReducers({ corrections, progression, skills, slides, token, rank });
+import currentSkill from './current-skill';
+export default combineReducers({
+    corrections,
+    progression,
+    skills,
+    slides,
+    token,
+    rank,
+    currentSkill
+});

package/es/reducers/index.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         slides: import("./data/slides").SlidesState;
         token: string;
         rank: import("./data/rank").RankState;
+        currentSkill: import("./data/current-skill").CurrentSkillState;
     }>;
     ui: import("redux").CombinedState<{
         currentSlideRef: string;
@@ -23,7 +24,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         showButtonRevising: boolean;
         showCongrats: boolean;
     }>;
-}>, import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
+}>, import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-skill").ReceivedSkill | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
     type: "@@ui/OPEN_POPIN";
 } | {
     type: "@@ui/CLOSE_POPIN";

package/es/services/fetch-skill.js

@@ -6,5 +6,6 @@ export const fetchSkill = async (skillRef, token) => {
     const response = await crossFetch(`${host}/api/v2/skills?conditions={"ref":"${skillRef}"}`, {
         headers: { authorization: token }
     });
-    return toJSON(response);
+    const skills = await toJSON(response);
+    return skills[0];
 };

package/es/types/common.d.ts

@@ -1,4 +1,7 @@
 export declare type ViewName = 'skills' | 'onboarding' | 'slides' | 'loader';
+export interface Translate {
+    (key: string, data?: Record<string, string>): string;
+}
 export declare type ChoiceFromAPI = {
     _id: string;
     id?: string;
@@ -146,13 +149,13 @@ export declare type Options = {
     services: Services;
 };
 export declare type ConnectedOptions = {
-    translate: (key: string, data?: unknown) => string;
+    translate: Translate;
     onQuitClick: () => void;
 };
 export declare type AppOptions = ConnectedOptions & {
     token: string;
     skillRef?: string;
-    services: Services;
+    services?: Services;
     callbackOnViewChanged?: (viewName: ViewName) => void;
 };
 export declare type ThunkOptions = {

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,26 @@
-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,22 +73,25 @@ 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);
         if (!slideFromAPI)
             return set(index, { ...uiSlide, position }, acc);
         const answers = getOr([], ['ui', 'answers', slideRef], state);
-        const { questionText, answerUI } = mapApiSlideToUi(dispatch)(slideFromAPI, answers);
+        const { questionText, answerUI } = mapApiSlideToUi(dispatch, translate)(slideFromAPI, answers);
         const { title: parentContentTitle, type: parentContentType } = slideFromAPI.parentContentTitle;
         const isCurrentSlideRef = currentSlideRef === slideRef;
         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);
@@ -167,7 +177,8 @@ export const buildStepItems = (state) => {
     });
     return steps;
 };
-const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf, translate) => {
+const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf, translate, endReview) => {
+    const nextLabel = endReview ? translate('Continue') : translate('Next Question');
     return {
         klf: isCorrect
             ? undefined
@@ -178,11 +189,11 @@ const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf, tr
         resultLabel: isCorrect ? translate('Correct Answer') : translate('Wrong Answer'),
         information: {
             label: isCorrect ? translate('KLF') : translate('Correct Answer'),
-            message: isCorrect ? klf : join(',', correctAnswer)
+            message: isCorrect ? klf : join(', ', correctAnswer)
         },
         next: {
-            'aria-label': translate('Next Question'),
-            label: translate('Next Question'),
+            'aria-label': nextLabel,
+            label: nextLabel,
             onClick: () => {
                 dispatch(nextSlide);
             }
@@ -309,10 +320,11 @@ export const mapStateToSlidesProps = (state, dispatch, options) => {
     const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
     const showQuitPopin = get(['ui', 'showQuitPopin'], state);
     const showCongrats = get(['ui', 'showCongrats'], state);
+    const skillName = getOr('', ['data', 'currentSkill', 'name'], state);
     return {
         header: {
             mode: translate('Review Title'),
-            skillName: '__agility',
+            skillName,
             onQuitClick: () => dispatch(openQuitPopin),
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
@@ -320,7 +332,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),
@@ -329,7 +341,7 @@ export const mapStateToSlidesProps = (state, dispatch, options) => {
                 }
             },
             correctionPopinProps: correction &&
-                getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, translate),
+                getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, translate, endReview),
             endReview: endReview && state.ui.showCongrats
         },
         congrats: buildCongratsProps(state, dispatch, options),

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

@@ -1,8 +1,8 @@
 import { Dispatch } from 'redux';
 import { AnswerUI } from '../../types/slides';
-import { Question, SlideFromAPI } from '../../types/common';
+import { Question, SlideFromAPI, Translate } from '../../types/common';
 export declare const getQuestionType: (question: Question) => Question['type'];
-export declare const mapApiSlideToUi: (dispatch: Dispatch) => (slide: SlideFromAPI, answers: string[]) => {
+export declare const mapApiSlideToUi: (dispatch: Dispatch, translate: Translate) => (slide: SlideFromAPI, answers: string[]) => {
     questionText: string;
     answerUI: AnswerUI;
 };

package/es/views/slides/map-api-slide-to-ui.js

@@ -54,11 +54,11 @@ const updateTemplateAnswer = (text, _answers, index, max) => {
     const answers = isEmpty(_answers) ? times(constant(undefined), max) : _answers;
     return map(a => (isNil(a) ? '' : a), set(index, text, answers));
 };
-const templateTextProps = (dispatch, answers, choice, index, maxLength) => {
+const templateTextProps = (dispatch, translate, answers, choice, index, maxLength) => {
     return {
         type: 'text',
         name: getOr('', 'name', choice),
-        placeholder: 'Type here',
+        placeholder: translate('Type here'),
         value: get(index, answers),
         onChange: (text) => {
             const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
@@ -66,10 +66,10 @@ const templateTextProps = (dispatch, answers, choice, index, maxLength) => {
         }
     };
 };
-const templateSelectProps = (dispatch, answers, choice, index, maxLength) => {
+const templateSelectProps = (dispatch, translate, answers, choice, index, maxLength) => {
     const answer = get(index, answers);
     const temporaryOption = {
-        name: 'Select an answer',
+        name: translate('Select an answer'),
         value: '',
         validOption: false,
         selected: true
@@ -93,15 +93,15 @@ const templateSelectProps = (dispatch, answers, choice, index, maxLength) => {
         options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
     };
 };
-const templateProps = (dispatch) => (answers, question) => {
+const templateProps = (dispatch, translate) => (answers, question) => {
     const choices = question.content.choices;
     const maxLength = size(choices);
     return {
         type: 'template',
         template: get('content.template', question),
         answers: choices.map((choice, index) => choice.type === 'text'
-            ? templateTextProps(dispatch, answers, choice, index, maxLength)
-            : templateSelectProps(dispatch, answers, choice, index, maxLength))
+            ? templateTextProps(dispatch, translate, answers, choice, index, maxLength)
+            : templateSelectProps(dispatch, translate, answers, choice, index, maxLength))
     };
 };
 const basicProps = (dispatch) => (answers, question) => {
@@ -144,7 +144,7 @@ const sliderProps = (dispatch) => (answers, question) => {
 };
 export const getQuestionType = (question) => question.type;
 const getHelp = (slide) => get('question.explanation', slide);
-const getAnswerUIModel = (question, answers, dispatch) => {
+const getAnswerUIModel = (question, answers, dispatch, translate) => {
     const type = getQuestionType(question);
     switch (type) {
         case 'qcm':
@@ -156,17 +156,20 @@ const getAnswerUIModel = (question, answers, dispatch) => {
         case 'basic':
             return basicProps(dispatch)(answers, question);
         case 'template':
-            return templateProps(dispatch)(answers, question);
+            return templateProps(dispatch, translate)(answers, question);
         case 'slider':
             return sliderProps(dispatch)(answers, question);
         default:
             throw new Error(`${type} is not an handled question.type`);
     }
 };
-export const mapApiSlideToUi = (dispatch) => (slide, answers) => {
+export const mapApiSlideToUi = (dispatch, translate) => (slide, answers) => {
     const questionText = getOr('', 'question.header', slide);
     return {
         questionText,
-        answerUI: { model: getAnswerUIModel(slide.question, answers, dispatch), help: getHelp(slide) }
+        answerUI: {
+            model: getAnswerUIModel(slide.question, answers, dispatch, translate),
+            help: getHelp(slide)
+        }
     };
 };

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/reducers/data/current-skill.d.ts

@@ -0,0 +1,5 @@
+import { ReceivedSkill } from '../../actions/api/fetch-skill';
+import { Skill } from '../../types/common';
+export declare type CurrentSkillState = Skill | null;
+declare const reducer: (state: CurrentSkillState | undefined, action: ReceivedSkill) => CurrentSkillState;
+export default reducer;

package/lib/reducers/data/current-skill.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fetch_skill_1 = require("../../actions/api/fetch-skill");
+const initialState = null;
+const reducer = (
+// eslint-disable-next-line default-param-last
+state = initialState, action) => {
+    switch (action.type) {
+        case fetch_skill_1.SKILL_FETCH_SUCCESS:
+            return action.payload;
+        default:
+            return state;
+    }
+};
+exports.default = reducer;

package/lib/reducers/data/index.d.ts

@@ -4,6 +4,7 @@ import { SkillsState } from './skills';
 import { SlidesState } from './slides';
 import { TokenState } from './token';
 import { RankState } from './rank';
+import { CurrentSkillState } from './current-skill';
 export declare type DataState = {
     corrections: CorrectionsState;
     progression: ProgressionState;
@@ -11,6 +12,7 @@ export declare type DataState = {
     slides: SlidesState;
     token: TokenState;
     rank: RankState;
+    currentSkill: CurrentSkillState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     corrections: CorrectionsState;
@@ -19,5 +21,6 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     slides: SlidesState;
     token: string;
     rank: RankState;
-}>, import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("../../actions/api/fetch-skills").ReceivedSkills | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
+    currentSkill: CurrentSkillState;
+}>, import("../../actions/api/fetch-skill").ReceivedSkill | import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("../../actions/api/fetch-skills").ReceivedSkills | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
 export default _default;

package/lib/reducers/data/index.js

@@ -10,4 +10,13 @@ const skills_1 = __importDefault(require("./skills"));
 const slides_1 = __importDefault(require("./slides"));
 const token_1 = __importDefault(require("./token"));
 const rank_1 = __importDefault(require("./rank"));
-exports.default = (0, redux_1.combineReducers)({ corrections: corrections_1.default, progression: progression_1.default, skills: skills_1.default, slides: slides_1.default, token: token_1.default, rank: rank_1.default });
+const current_skill_1 = __importDefault(require("./current-skill"));
+exports.default = (0, redux_1.combineReducers)({
+    corrections: corrections_1.default,
+    progression: progression_1.default,
+    skills: skills_1.default,
+    slides: slides_1.default,
+    token: token_1.default,
+    rank: rank_1.default,
+    currentSkill: current_skill_1.default
+});

package/lib/reducers/index.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         slides: import("./data/slides").SlidesState;
         token: string;
         rank: import("./data/rank").RankState;
+        currentSkill: import("./data/current-skill").CurrentSkillState;
     }>;
     ui: import("redux").CombinedState<{
         currentSlideRef: string;
@@ -23,7 +24,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         showButtonRevising: boolean;
         showCongrats: boolean;
     }>;
-}>, import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
+}>, import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-skill").ReceivedSkill | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
     type: "@@ui/OPEN_POPIN";
 } | {
     type: "@@ui/CLOSE_POPIN";

package/lib/services/fetch-skill.js

@@ -12,6 +12,7 @@ const fetchSkill = async (skillRef, token) => {
     const response = await (0, cross_fetch_1.default)(`${host}/api/v2/skills?conditions={"ref":"${skillRef}"}`, {
         headers: { authorization: token }
     });
-    return (0, fetch_responses_1.toJSON)(response);
+    const skills = await (0, fetch_responses_1.toJSON)(response);
+    return skills[0];
 };
 exports.fetchSkill = fetchSkill;

package/lib/types/common.d.ts

@@ -1,4 +1,7 @@
 export declare type ViewName = 'skills' | 'onboarding' | 'slides' | 'loader';
+export interface Translate {
+    (key: string, data?: Record<string, string>): string;
+}
 export declare type ChoiceFromAPI = {
     _id: string;
     id?: string;
@@ -146,13 +149,13 @@ export declare type Options = {
     services: Services;
 };
 export declare type ConnectedOptions = {
-    translate: (key: string, data?: unknown) => string;
+    translate: Translate;
     onQuitClick: () => void;
 };
 export declare type AppOptions = ConnectedOptions & {
     token: string;
     skillRef?: string;
-    services: Services;
+    services?: Services;
     callbackOnViewChanged?: (viewName: ViewName) => void;
 };
 export declare type ThunkOptions = {