@coorpacademy/app-review 0.4.5 → 0.5.0

package/lib/views/slides/index.js

@@ -9,16 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import concat from 'lodash/fp/concat';
 import findLast from 'lodash/fp/findLast';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import last from 'lodash/fp/last';
 import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
-import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
 import join from 'lodash/fp/join';
+import { getProgressionSlidesRefs } from '../../common';
 import { postAnswer } from '../../actions/api/post-answer';
 import { nextSlide } from '../../actions/ui/next-slide';
 import { mapApiSlideToUi } from './map-api-slide-to-ui';
@@ -27,40 +26,29 @@ var ICON_VALUES = {
     wrong: 'wrong',
     'no-answer': 'no-answer'
 };
+// TODO replace this, position no more needed
 export var initialState = {
     '0': {
-        hidden: false,
         position: 0,
         loading: true
     },
     '1': {
-        hidden: false,
         position: 1,
         loading: true
     },
     '2': {
-        hidden: false,
         position: 2,
         loading: true
     },
     '3': {
-        hidden: false,
         position: 3,
         loading: true
     },
     '4': {
-        hidden: false,
         position: 4,
         loading: true
     }
 };
-var getProgressionSlidesRefs = function (progression) {
-    if (progression.state.step.current < 5) {
-        var slideRef = progression.state.nextContent.ref;
-        return concat(progression.state.slides, [slideRef]);
-    }
-    return slice(0, 5, progression.state.slides);
-};
 var buildStackSlides = function (state, dispatch) {
     var currentSlideRef = state.ui.currentSlideRef;
     var progression = state.data.progression;
@@ -68,22 +56,25 @@ var buildStackSlides = function (state, dispatch) {
         return initialState;
     var slideRefs = getProgressionSlidesRefs(progression);
     // @ts-expect-error typescript does not support capped versions of lodash functions
-    var stack = reduce.convert({ cap: false })(function (acc, uiSlide, index) {
-        var slideRef = slideRefs[toInteger(index)];
+    var stack = reduce.convert({ cap: false })(function (acc, uiSlide, _index) {
+        var index = toInteger(_index);
+        var positions = state.ui.positions;
+        var position = positions[index];
+        var slideRef = slideRefs[index];
         if (!slideRef)
-            return set(index, uiSlide, acc);
+            return set(index, __assign(__assign({}, uiSlide), { position: position }), acc);
         var slideFromAPI = get(slideRef, state.data.slides);
         if (!slideFromAPI)
-            return set(index, uiSlide, acc);
+            return set(index, __assign(__assign({}, uiSlide), { position: position }), acc);
         var answers = getOr([], ['ui', 'answers', slideRef], state);
         var _a = mapApiSlideToUi(dispatch)(slideFromAPI, answers), questionText = _a.questionText, answerUI = _a.answerUI;
-        var parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
-        var parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
+        var _b = slideFromAPI.parentContentTitle, parentContentTitle = _b.title, parentContentType = _b.type;
         var isCurrentSlideRef = currentSlideRef === slideRef;
-        var animateCorrectionPopin = isCurrentSlideRef && get(['ui', 'slide', slideRef, 'animateCorrectionPopin'], state);
-        var showCorrectionPopin = isCurrentSlideRef && get(['ui', 'slide', slideRef, 'showCorrectionPopin'], state);
-        var animationType = get(['ui', 'slide', slideRef, 'animationType'], state);
-        var updatedUiSlide = __assign(__assign({}, uiSlide), { showCorrectionPopin: showCorrectionPopin, animateCorrectionPopin: animateCorrectionPopin, loading: false, questionText: questionText, answerUI: answerUI, parentContentTitle: "From \"".concat(parentContentTitle, "\" ").concat(parentContentType), animationType: animationType });
+        var slideUI = get(['ui', 'slide', slideRef], state);
+        var animateCorrectionPopin = isCurrentSlideRef && slideUI.animateCorrectionPopin;
+        var showCorrectionPopin = isCurrentSlideRef && slideUI.showCorrectionPopin;
+        var animationType = slideUI.animationType;
+        var updatedUiSlide = __assign(__assign({}, uiSlide), { position: position, showCorrectionPopin: showCorrectionPopin, animateCorrectionPopin: animateCorrectionPopin, loading: false, questionText: questionText, answerUI: answerUI, parentContentTitle: "From \"".concat(parentContentTitle, "\" ").concat(parentContentType), animationType: animationType });
         return set(index, updatedUiSlide, acc);
     }, initialState, initialState);
     return stack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -43,7 +43,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.23.7",
+    "@coorpacademy/components": "10.23.8",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -78,5 +78,5 @@
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   },
-  "gitHead": "0a46c83d80845f4c08a35cc278b7a11ccb4d8d0e"
+  "gitHead": "ef2f2340a0169672d5880e8fb9900cd7c7ebf12c"
 }

package/src/actions/api/test/fetch-correction.test.ts

@@ -36,6 +36,7 @@ const initialState: StoreState = {
     currentSlideRef: freeTextSlide._id,
     navigation: ['skills', 'slides'],
     answers: {[freeTextSlide.universalRef]: answer},
+    positions: [0, 1, 2, 3, 4],
     slide: {
       [freeTextSlide.universalRef]: {
         validateButton: false,

package/src/actions/api/test/fetch-rank.test.ts

@@ -24,6 +24,7 @@ const initialState: StoreState = {
     rank: {}
   },
   ui: {
+    positions: [0, 1, 2, 3, 4],
     currentSlideRef: '',
     navigation: [],
     answers: {},

package/src/actions/api/test/fetch-skills.test.ts

@@ -20,6 +20,7 @@ const initialState: StoreState = {
     rank: {}
   },
   ui: {
+    positions: [0, 1, 2, 3, 4],
     currentSlideRef: '',
     navigation: [],
     answers: {},

package/src/actions/api/test/fetch-slide.test.ts

@@ -22,6 +22,7 @@ const initialState: StoreState = {
     rank: {}
   },
   ui: {
+    positions: [0, 1, 2, 3, 4],
     currentSlideRef: '',
     navigation: [],
     answers: {},

package/src/actions/api/test/post-answer.test.ts

@@ -65,6 +65,7 @@ const initialState: StoreState = {
   ui: {
     currentSlideRef: freeTextSlide._id,
     navigation: ['skills', 'slides'],
+    positions: [0, 1, 2, 3, 4],
     answers: {
       [freeTextSlide._id]: answer
     },
@@ -148,6 +149,7 @@ test('should dispatch post-answer, fetch-correction and fetch-end-rank actions w
     ui: {
       currentSlideRef: templateSlide._id,
       navigation: ['skills', 'slides'],
+      positions: [-1, -1, -1, -1, 0],
       answers: {
         [freeTextSlide._id]: answer,
         [qcmGraphicSlide._id]: ['qcm-graphic answer'],

package/src/actions/api/test/post-progression.test.ts

@@ -23,6 +23,7 @@ const initialState: StoreState = {
     rank: {}
   },
   ui: {
+    positions: [0, 1, 2, 3, 4],
     currentSlideRef: '',
     navigation: [],
     answers: {},

package/src/actions/data/test/token.test.ts

@@ -14,6 +14,7 @@ const initialState: StoreState = {
     rank: {}
   },
   ui: {
+    positions: [0, 1, 2, 3, 4],
     currentSlideRef: '',
     navigation: [],
     answers: {},

package/src/actions/ui/next-slide.ts

@@ -1,8 +1,8 @@
 import type {Dispatch} from 'redux';
+import filter from 'lodash/fp/filter';
 import get from 'lodash/fp/get';
-import getOr from 'lodash/fp/getOr';
 import type {StoreState} from '../../reducers';
-import {ProgressionFromAPI} from '../../types/common';
+import {ProgressionFromAPI, ProgressionAnswerItem} from '../../types/common';
 
 export const NEXT_SLIDE = '@@slide/NEXT_SLIDE' as const;
 
@@ -10,26 +10,32 @@ type NextSlidePayload = {
   currentSlideRef: string;
   nextSlideRef: string;
   animationType: string;
+  totalCorrectAnswers: number;
+  answeredSlides: string[];
 };
 
-export type NextSlide = {
+export type NextSlideAction = {
   type: typeof NEXT_SLIDE;
   payload: NextSlidePayload;
 };
 
-export const nextSlide = (dispatch: Dispatch, getState: () => StoreState): NextSlide => {
+export const nextSlide = (dispatch: Dispatch, getState: () => StoreState): NextSlideAction => {
   const state = getState();
-  const payload = {
+  const progression = state.data.progression as ProgressionFromAPI;
+  const {isCorrect, allAnswers, slides} = progression.state;
+  const correctAnswers = filter((answer: ProgressionAnswerItem) => answer.isCorrect, allAnswers);
+
+  const payload: NextSlidePayload = {
     currentSlideRef: get(['ui', 'currentSlideRef'], state),
     nextSlideRef: get(
       ['state', 'nextContent', 'ref'],
       state.data.progression as ProgressionFromAPI
     ),
-    animationType: getOr(false, ['state', 'isCorrect'], state.data.progression)
-      ? 'unstack'
-      : 'restack'
+    animationType: isCorrect ? 'unstack' : 'restack',
+    totalCorrectAnswers: correctAnswers.length,
+    answeredSlides: slides
   };
-  const action = {
+  const action: NextSlideAction = {
     type: NEXT_SLIDE,
     payload
   };

package/src/actions/ui/slides.ts

@@ -16,13 +16,11 @@ export type Slide = {
 
 export const SET_CURRENT_SLIDE = '@@slide/SET_CURRENT_SLIDE' as const;
 
-export type SetCurrentSlide = {
+export type SetCurrentSlideAction = {
   type: typeof SET_CURRENT_SLIDE;
   payload: SlideFromAPI;
 };
-export const setCurrentSlide = (payload: SlideFromAPI): SetCurrentSlide => ({
+export const setCurrentSlide = (payload: SlideFromAPI): SetCurrentSlideAction => ({
   type: SET_CURRENT_SLIDE,
   payload
 });
-
-export type UISlidesAction = SetCurrentSlide;

package/src/actions/ui/test/answers.test.ts

@@ -49,6 +49,7 @@ const initialState: StoreState = {
     rank: {}
   },
   ui: {
+    positions: [0, 1, 2, 3, 4],
     currentSlideRef: '',
     navigation: [],
     answers: {},

package/src/actions/ui/test/next-slide.test.ts

@@ -31,6 +31,7 @@ const state: StoreState = {
   ui: {
     currentSlideRef: freeTextSlide._id,
     navigation: ['loader', 'slides'],
+    positions: [0, 1, 2, 3, 4],
     answers: {
       [freeTextSlide._id]: answer
     },
@@ -50,7 +51,9 @@ test('should dispatch NEXT_SLIDE action when nextSlide is called and the progres
       payload: {
         currentSlideRef: freeTextSlide.universalRef,
         nextSlideRef: qcmGraphicSlide.universalRef,
-        animationType: 'unstack'
+        animationType: 'unstack',
+        totalCorrectAnswers: 1,
+        answeredSlides: [freeTextSlide.universalRef]
       }
     }
   ];
@@ -70,7 +73,9 @@ test('should dispatch NEXT_SLIDE action when nextSlide is called and the progres
       payload: {
         currentSlideRef: freeTextSlide.universalRef,
         nextSlideRef: qcmGraphicSlide.universalRef,
-        animationType: 'restack'
+        animationType: 'restack',
+        totalCorrectAnswers: 0,
+        answeredSlides: [freeTextSlide.universalRef]
       }
     }
   ];

package/src/actions/ui/test/slides.test.ts

@@ -17,6 +17,7 @@ const initialState: StoreState = {
   ui: {
     currentSlideRef: '',
     navigation: [],
+    positions: [0, 1, 2, 3, 4],
     answers: {},
     slide: {}
   }

package/src/common/index.ts

@@ -1,3 +1,7 @@
+import concat from 'lodash/fp/concat';
+import slice from 'lodash/fp/slice';
+import type {ProgressionFromAPI} from '../types/common';
+
 export const VIEWS: {
   readonly skills: 'skills';
   readonly onboarding: 'onboarding';
@@ -11,3 +15,11 @@ export const VIEWS: {
 export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
 
 export type SlideIndexes = typeof slideIndexes[number];
+
+export const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
+  if (progression.state.step.current < 5) {
+    const slideRef = progression.state.nextContent.ref;
+    return concat(progression.state.slides, [slideRef]);
+  }
+  return slice(0, 5, progression.state.slides);
+};

package/src/reducers/ui/answers.ts

@@ -8,7 +8,7 @@ import {
   EDIT_SLIDER,
   EDIT_TEMPLATE
 } from '../../actions/ui/answers';
-import {NextSlide, NEXT_SLIDE} from '../../actions/ui/next-slide';
+import {NextSlideAction, NEXT_SLIDE} from '../../actions/ui/next-slide';
 
 export type UISlideAnswer = string[];
 
@@ -19,7 +19,7 @@ export const initialState: UIAnswerState = {};
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: UIAnswerState = initialState,
-  action: EditAnswerAction | NextSlide
+  action: EditAnswerAction | NextSlideAction
 ): UIAnswerState => {
   switch (action.type) {
     case EDIT_QCM:

package/src/reducers/ui/current-slide-ref.ts

@@ -1,13 +1,16 @@
-import {SET_CURRENT_SLIDE, UISlidesAction} from '../../actions/ui/slides';
+import {NEXT_SLIDE, NextSlideAction} from '../../actions/ui/next-slide';
+import {SET_CURRENT_SLIDE, SetCurrentSlideAction} from '../../actions/ui/slides';
 
 export type CurrentSlideRefState = string;
 
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: CurrentSlideRefState = '',
-  action: UISlidesAction
+  action: SetCurrentSlideAction | NextSlideAction
 ): CurrentSlideRefState => {
   switch (action.type) {
+    case NEXT_SLIDE:
+      return action.payload.nextSlideRef;
     case SET_CURRENT_SLIDE: {
       return action.payload._id;
     }

package/src/reducers/ui/index.ts

@@ -3,6 +3,7 @@ import {combineReducers} from 'redux';
 import currentSlideRef, {CurrentSlideRefState} from './current-slide-ref';
 import navigation, {NavigationState} from './navigation';
 import answers, {UIAnswerState} from './answers';
+import positions, {UIPositionState} from './positions';
 import slide, {UISlideState} from './slide';
 
 export type UIState = {
@@ -10,11 +11,13 @@ export type UIState = {
   navigation: NavigationState;
   answers: UIAnswerState;
   slide: UISlideState;
+  positions: UIPositionState;
 };
 
 export default combineReducers({
   currentSlideRef,
   navigation,
   answers,
-  slide
+  slide,
+  positions
 });

package/src/reducers/ui/positions.ts

@@ -0,0 +1,32 @@
+import findIndex from 'lodash/fp/findIndex';
+import map from 'lodash/fp/map';
+import set from 'lodash/fp/set';
+import {ReceivedProgression, POST_PROGRESSION_SUCCESS} from '../../actions/api/post-progression';
+import {NextSlideAction, NEXT_SLIDE} from '../../actions/ui/next-slide';
+
+export type UIPositionState = number[];
+const initialState: UIPositionState = [0, 1, 2, 3, 4];
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: UIPositionState = initialState,
+  action: NextSlideAction | ReceivedProgression
+): UIPositionState => {
+  switch (action.type) {
+    case POST_PROGRESSION_SUCCESS: {
+      return initialState;
+    }
+    case NEXT_SLIDE: {
+      const {totalCorrectAnswers, answeredSlides, currentSlideRef, animationType} = action.payload;
+
+      const nextCurrentSlidePosition = animationType === 'unstack' ? -1 : 4 - totalCorrectAnswers;
+      const currentSlideIndex = findIndex(ref => ref === currentSlideRef, answeredSlides);
+      const newState = map(position => (position === -1 ? position : position - 1), state);
+      return set([`${currentSlideIndex}`], nextCurrentSlidePosition)(newState);
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reducers/ui/slide.ts

@@ -15,7 +15,7 @@ import {
 import {PostAnswerRequestAction, POST_ANSWER_REQUEST} from '../../actions/api/post-answer';
 import {ReceivedCorrection, CORRECTION_FETCH_SUCCESS} from '../../actions/api/fetch-correction';
 import {FetchSlide, SLIDE_FETCH_REQUEST} from '../../actions/api/fetch-slide';
-import {NextSlide, NEXT_SLIDE} from '../../actions/ui/next-slide';
+import {NextSlideAction, NEXT_SLIDE} from '../../actions/ui/next-slide';
 import {SlideUIAnimations} from '../../types/slides';
 
 export type UISlide = {
@@ -32,7 +32,12 @@ export const initialState: UISlideState = {};
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: UISlideState = initialState,
-  action: FetchSlide | PostAnswerRequestAction | EditAnswerAction | ReceivedCorrection | NextSlide
+  action:
+    | FetchSlide
+    | PostAnswerRequestAction
+    | EditAnswerAction
+    | ReceivedCorrection
+    | NextSlideAction
 ): UISlideState => {
   switch (action.type) {
     case SLIDE_FETCH_REQUEST: {

package/src/reducers/ui/test/answers.test.ts

@@ -94,7 +94,9 @@ test('should set the next slide ref with an empty array if NEXT_SLIDE action is
       payload: {
         currentSlideRef: '1234',
         nextSlideRef: '5678',
-        animationType: 'unstack'
+        animationType: 'unstack',
+        totalCorrectAnswers: 1,
+        answeredSlides: ['1234']
       }
     }
   );

package/src/reducers/ui/test/current-slide-ref.test.ts

@@ -1,10 +1,10 @@
 import test from 'ava';
 import reducer from '../current-slide-ref';
-import {SetCurrentSlide, SET_CURRENT_SLIDE} from '../../../actions/ui/slides';
+import {SetCurrentSlideAction, SET_CURRENT_SLIDE} from '../../../actions/ui/slides';
 import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
 
 test('should have initial value', t => {
-  const state = reducer(undefined, {} as SetCurrentSlide);
+  const state = reducer(undefined, {} as SetCurrentSlideAction);
   t.is(state, '');
 });
 

package/src/reducers/ui/test/positions.test.ts

@@ -0,0 +1,68 @@
+import test from 'ava';
+import reducer from '../positions';
+import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../../actions/api/post-progression';
+import {NEXT_SLIDE} from '../../../actions/ui/next-slide';
+
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as ReceivedProgression);
+  t.deepEqual(state, [0, 1, 2, 3, 4]);
+});
+
+test('should reset state to initial value when POST_PROGRESSION_SUCCESS action', t => {
+  const state = reducer([-1, -1, -1, -1, -1], {
+    type: POST_PROGRESSION_SUCCESS
+  } as ReceivedProgression);
+  t.deepEqual(state, [0, 1, 2, 3, 4]);
+});
+
+test('should set position for currentSlide according to the animationType and the position for the next slides', t => {
+  const state = reducer([-1, -1, 0, 1, 2], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3'],
+      currentSlideRef: 'sli_3',
+      nextSlideRef: 'sli_4',
+      animationType: 'restack'
+    }
+  });
+  t.deepEqual(state, [-1, -1, 2, 0, 1]);
+
+  const _state = reducer([-1, -1, 0, 1, 2], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3'],
+      currentSlideRef: 'sli_3',
+      nextSlideRef: 'sli_4',
+      animationType: 'unstack'
+    }
+  });
+  t.deepEqual(_state, [-1, -1, -1, 0, 1]);
+});
+
+test('should set position for currentSlide according to the animationType and the position for the next slides when answering already bad slide', t => {
+  const state = reducer([-1, 2, -1, 0, 1], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3', 'sli_4', 'sli_5'],
+      currentSlideRef: 'sli_4',
+      nextSlideRef: 'sli_5',
+      animationType: 'restack'
+    }
+  });
+  t.deepEqual(state, [-1, 1, -1, 2, 0]);
+
+  const _state = reducer([-1, 1, -1, 2, 0], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3', 'sli_4', 'sli_5'],
+      currentSlideRef: 'sli_5',
+      nextSlideRef: 'sli_1',
+      animationType: 'unstack'
+    }
+  });
+  t.deepEqual(_state, [-1, 0, -1, 1, -1]);
+});

package/src/reducers/ui/test/slide.test.ts

@@ -66,7 +66,9 @@ test('should set animateCorrectionPopin to false and animationType to unstack or
       payload: {
         currentSlideRef: '1234',
         nextSlideRef: '5678',
-        animationType: 'unstack'
+        animationType: 'unstack',
+        totalCorrectAnswers: 1,
+        answeredSlides: ['1234']
       }
     }
   );

package/src/types/common.ts

@@ -1,4 +1,3 @@
-// TODO: EDIT_CHOICES -> specify typing
 export type ChoiceFromAPI = {
   _id: string;
   id?: string;

package/src/views/skills/test/skills.test.ts

@@ -16,6 +16,7 @@ test('should create initial props when there are no skills on the state', t => {
     },
     ui: {
       currentSlideRef: '',
+      positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
       slide: {}
@@ -60,6 +61,7 @@ test('should create initial props when skills on the state', t => {
     },
     ui: {
       currentSlideRef: '',
+      positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
       slide: {}