@coorpacademy/app-review 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -41,7 +41,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.13",
+    "@coorpacademy/components": "10.22.14",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -77,6 +77,5 @@
     "react-dom": "^17.0.2",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
-  },
-  "gitHead": "dcf2cd9a81883f64383e88b000654945b56b3e2c"
+  }
 }

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

@@ -23,22 +23,22 @@ export const postAnswer = async (
   getState: () => StoreState,
   {services}: Options
 ): Promise<void> => {
+  const state = getState();
+  const token = get('data.token', state);
+  const answer = get('ui.answers', state);
+  const progression = state.data.progression;
+  if (!progression) throw new Error('cannot answer question of inexisting progression');
+
   const action = buildTask({
     types: [POST_ANSWER_REQUEST, POST_ANSWER_SUCCESS, POST_ANSWER_FAILURE],
     task: () => {
-      const state = getState();
-      const token = get('data.token', state);
-      const answer = get('ui.answers', state);
-      const progressionId = get('data.progression._id', state);
-      const skillRef = get('data.progression.content.ref', state);
-      return services.postAnswer(skillRef, token, progressionId, answer);
+      return services.postAnswer(progression, token, answer);
     }
   });
   const response = await dispatch(action);
-
   if (response.type === POST_ANSWER_SUCCESS) {
-    const progression = response.payload;
-    const slideRef = progression.state.nextContent.ref;
+    const updatedProgression = response.payload;
+    const slideRef = updatedProgression.state.nextContent.ref;
     await dispatch(fetchSlide(slideRef));
   }
 };

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

@@ -1,6 +1,6 @@
 import test from 'ava';
 import {createTestStore} from '../../test/create-test-store';
-import {postAnswerResponse, services} from '../../../test/util/services.mock';
+import {postAnswerResponses, services} from '../../../test/util/services.mock';
 import {
   postAnswer,
   POST_ANSWER_FAILURE,
@@ -29,7 +29,7 @@ const initialState: StoreState = {
         allAnswers: [],
         isCorrect: true,
         nextContent: {
-          ref: 'sli_VJYjJnJhg',
+          ref: freeTextSlide.id,
           type: 'slide'
         },
         pendingSlides: [],
@@ -47,7 +47,7 @@ const initialState: StoreState = {
     token: '1234'
   },
   ui: {
-    currentSlideRef: 'sli_VJYjJnJhg',
+    currentSlideRef: freeTextSlide.id,
     navigation: ['skills', 'slides'],
     answers: answer,
     slide: {
@@ -61,12 +61,12 @@ test('should dispatch POST_ANSWER_REQUEST, then POST_ANSWER_SUCCESS when the upd
     {type: POST_ANSWER_REQUEST},
     {
       type: POST_ANSWER_SUCCESS,
-      payload: postAnswerResponse
+      payload: postAnswerResponses[freeTextSlide.id]
     },
-    {type: SLIDE_FETCH_REQUEST, meta: {slideRef: 'sli_VkSQroQnx'}},
+    {type: SLIDE_FETCH_REQUEST, meta: {slideRef: qcmGraphicSlide.id}},
     {
       type: SLIDE_FETCH_SUCCESS,
-      meta: {slideRef: 'sli_VkSQroQnx'},
+      meta: {slideRef: qcmGraphicSlide.id},
       payload: qcmGraphicSlide
     },
     {type: SET_CURRENT_SLIDE, payload: qcmGraphicSlide}

package/src/reducers/data/test/progression.test.ts

@@ -2,7 +2,8 @@ import test from 'ava';
 import reducer from '../progression';
 import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../../actions/api/post-progression';
 import {POST_ANSWER_SUCCESS} from '../../../actions/api/post-answer';
-import {postAnswerResponse, postProgressionResponse} from '../../../test/util/services.mock';
+import {postAnswerResponses, postProgressionResponse} from '../../../test/util/services.mock';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
 
 test('should have initial value', t => {
   const state = reducer(undefined, {} as ReceivedProgression);
@@ -20,7 +21,7 @@ test('should set the value of POST_PROGRESSION_SUCCESS action', t => {
 test('should set the value of POST_ANSWER_SUCCESS action', t => {
   const state = reducer(null, {
     type: POST_ANSWER_SUCCESS,
-    payload: postAnswerResponse
+    payload: postAnswerResponses[freeTextSlide.universalRef]
   });
-  t.deepEqual(state, postAnswerResponse);
+  t.deepEqual(state, postAnswerResponses[freeTextSlide.universalRef]);
 });

package/src/services/post-answer.ts

@@ -5,11 +5,12 @@ import {JWT, ProgressionFromAPI} from '../types/common';
 import {toJSON} from './tools/fetch-responses';
 
 export const postAnswer = async (
-  skillRef: string,
+  progression: ProgressionFromAPI,
   token: string,
-  progressionId: string,
   answer: string[]
 ): Promise<ProgressionFromAPI> => {
+  const progressionId = progression._id;
+  const skillRef = progression.content.ref;
   const {host}: JWT = decode(token);
   const response = await crossFetch(`${host}/api/v2/progressions/${progressionId}/answers`, {
     method: 'post',

package/src/services/test/post-answer.test.ts

@@ -3,10 +3,34 @@ import nock from 'nock';
 import type {ProgressionFromAPI} from '../../types/common';
 import {postAnswer} from '../post-answer';
 
-const progressionId = '123456789123';
 const skillRef = '_skill-ref';
 const answer = ['Lister vos tâches pour vous libérer l’esprit', 'Vous isoler dans un lieu calme'];
 
+const initProgression: ProgressionFromAPI = {
+  content: {
+    type: 'skill',
+    ref: skillRef
+  },
+  engine: {
+    ref: 'review'
+  },
+  _id: '123456123456',
+  state: {
+    allAnswers: [],
+    isCorrect: true,
+    nextContent: {
+      type: 'slide',
+      ref: 'sli_NkvrWPFF2'
+    },
+    pendingSlides: [],
+    slides: [],
+    step: {
+      current: 1
+    },
+    stars: 0
+  }
+};
+
 const result: ProgressionFromAPI = {
   content: {
     type: 'skill',
@@ -44,7 +68,7 @@ const result: ProgressionFromAPI = {
 
 test.before(() => {
   const moocApi = nock('http://localhost:3000');
-  moocApi.post(`/api/v2/progressions/${progressionId}/answers`).reply(200, result);
+  moocApi.post('/api/v2/progressions/123456123456/answers').reply(200, result);
 });
 
 test.after(() => {
@@ -53,13 +77,13 @@ test.after(() => {
 
 test('should post the answers successfully', async t => {
   const token = process.env.API_TEST_TOKEN || '';
-  const progression = await postAnswer(skillRef, token, progressionId, answer);
+  const progression = await postAnswer(initProgression, token, answer);
   t.deepEqual(result, progression);
 });
 
 test('should reject bad token', async t => {
   const badToken = 'token is not a jwt';
-  const error = await t.throwsAsync(() => postAnswer(skillRef, badToken, progressionId, answer));
+  const error = await t.throwsAsync(() => postAnswer(initProgression, badToken, answer));
 
   t.is(
     error?.message,

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

@@ -1,9 +1,25 @@
+import get from 'lodash/fp/get';
 import {qcmSlide} from '../../views/slides/test/fixtures/qcm';
 import {qcmGraphicSlide} from '../../views/slides/test/fixtures/qcm-graphic';
 import {freeTextSlide} from '../../views/slides/test/fixtures/free-text';
 import {sliderSlide} from '../../views/slides/test/fixtures/slider';
 import {templateSlide} from '../../views/slides/test/fixtures/template';
-import {ProgressionFromAPI, Services, SlideFromAPI} from '../../types/common';
+import {
+  ProgressionFromAPI,
+  ReviewContent,
+  ReviewEngine,
+  Services,
+  SlideFromAPI
+} from '../../types/common';
+
+const content: ReviewContent = {
+  ref: '_skill-ref',
+  type: 'skill'
+};
+
+const engine: ReviewEngine = {
+  ref: 'review'
+};
 
 const getSlideFixture = (ref: string): SlideFromAPI => {
   switch (ref) {
@@ -37,18 +53,13 @@ const fetchSkillsResponse = [
 
 export const postProgressionResponse: ProgressionFromAPI = {
   _id: '62b1d1087aa12f00253f40ee',
-  content: {
-    ref: '_skill-ref',
-    type: 'skill'
-  },
-  engine: {
-    ref: 'review'
-  },
+  content,
+  engine,
   state: {
     allAnswers: [],
     isCorrect: true,
     nextContent: {
-      ref: 'sli_VJYjJnJhg',
+      ref: freeTextSlide.universalRef,
       type: 'slide'
     },
     pendingSlides: [],
@@ -60,38 +71,274 @@ export const postProgressionResponse: ProgressionFromAPI = {
   }
 };
 
-export const postAnswerResponse: ProgressionFromAPI = {
-  _id: '62b1d1087aa12f00253f40ee',
-  content: {
-    ref: '_skill-ref',
-    type: 'skill'
+export const postAnswerResponses: Record<string, ProgressionFromAPI> = {
+  [freeTextSlide.universalRef]: {
+    _id: '62b1d1087aa12f00253f40ee',
+    content,
+    engine,
+    state: {
+      allAnswers: [
+        {
+          slideRef: freeTextSlide.universalRef,
+          isCorrect: true,
+          answer: ['Benchmark']
+        }
+      ],
+      isCorrect: true,
+      nextContent: {
+        ref: qcmGraphicSlide.universalRef,
+        type: 'slide'
+      },
+      content: {
+        ref: freeTextSlide.universalRef,
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [freeTextSlide.universalRef],
+      step: {
+        current: 2
+      },
+      stars: 8
+    }
+  },
+  [qcmGraphicSlide.universalRef]: {
+    _id: '62b1d1087aa12f00253f40ee',
+    content,
+    engine,
+    state: {
+      allAnswers: [
+        {
+          slideRef: freeTextSlide.universalRef,
+          isCorrect: true,
+          answer: ['Benchmark']
+        },
+        {
+          slideRef: qcmGraphicSlide.universalRef,
+          isCorrect: true,
+          answer: ['Faux']
+        }
+      ],
+      isCorrect: true,
+      nextContent: {
+        ref: qcmSlide.universalRef,
+        type: 'slide'
+      },
+      content: {
+        ref: qcmGraphicSlide.universalRef,
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [freeTextSlide.universalRef, qcmGraphicSlide.universalRef],
+      step: {
+        current: 3
+      },
+      stars: 16
+    }
+  },
+  [qcmSlide.universalRef]: {
+    _id: '62b1d1087aa12f00253f40ee',
+    content,
+    engine,
+    state: {
+      allAnswers: [
+        {
+          slideRef: freeTextSlide.universalRef,
+          isCorrect: true,
+          answer: ['Benchmark']
+        },
+        {
+          slideRef: qcmGraphicSlide.universalRef,
+          isCorrect: true,
+          answer: ['Faux']
+        },
+        {
+          slideRef: qcmSlide.universalRef,
+          isCorrect: true,
+          answer: ['Le créateur peut fixer un pourcentage pour chaque transaction future']
+        }
+      ],
+      isCorrect: true,
+      nextContent: {
+        ref: sliderSlide.universalRef,
+        type: 'slide'
+      },
+      content: {
+        ref: qcmSlide.universalRef,
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [freeTextSlide.universalRef, qcmGraphicSlide.universalRef, qcmSlide.universalRef],
+      step: {
+        current: 4
+      },
+      stars: 24
+    }
   },
-  engine: {
-    ref: 'review'
+  [sliderSlide.universalRef]: {
+    _id: '62b1d1087aa12f00253f40ee',
+    content,
+    engine,
+    state: {
+      allAnswers: [
+        {
+          slideRef: freeTextSlide.universalRef,
+          isCorrect: true,
+          answer: ['Benchmark']
+        },
+        {
+          slideRef: qcmGraphicSlide.universalRef,
+          isCorrect: true,
+          answer: ['Faux']
+        },
+        {
+          slideRef: qcmSlide.universalRef,
+          isCorrect: true,
+          answer: ['Le créateur peut fixer un pourcentage pour chaque transaction future']
+        },
+        {
+          slideRef: sliderSlide.universalRef,
+          isCorrect: true,
+          answer: ['7']
+        }
+      ],
+      isCorrect: true,
+      nextContent: {
+        ref: templateSlide.universalRef,
+        type: 'slide'
+      },
+      content: {
+        ref: sliderSlide.universalRef,
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [
+        freeTextSlide.universalRef,
+        qcmGraphicSlide.universalRef,
+        qcmSlide.universalRef,
+        sliderSlide.universalRef
+      ],
+      step: {
+        current: 5
+      },
+      stars: 32
+    }
   },
+  [templateSlide.universalRef]: {
+    _id: '62b1d1087aa12f00253f40ee',
+    content,
+    engine,
+    state: {
+      allAnswers: [
+        {
+          slideRef: freeTextSlide.universalRef,
+          isCorrect: true,
+          answer: ['Benchmark']
+        },
+        {
+          slideRef: qcmGraphicSlide.universalRef,
+          isCorrect: true,
+          answer: ['Faux']
+        },
+        {
+          slideRef: qcmSlide.universalRef,
+          isCorrect: true,
+          answer: ['Le créateur peut fixer un pourcentage pour chaque transaction future']
+        },
+        {
+          slideRef: sliderSlide.universalRef,
+          isCorrect: true,
+          answer: ['7']
+        },
+        {
+          slideRef: templateSlide.universalRef,
+          isCorrect: true,
+          answer: ['Leaderboard', 'utilisateurs', 'étoiles']
+        }
+      ],
+      isCorrect: true,
+      nextContent: {
+        ref: 'successExitNode',
+        type: 'success'
+      },
+      content: {
+        ref: templateSlide.universalRef,
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [
+        freeTextSlide.universalRef,
+        qcmGraphicSlide.universalRef,
+        qcmSlide.universalRef,
+        sliderSlide.universalRef,
+        templateSlide.universalRef
+      ],
+      step: {
+        current: 6
+      },
+      stars: 40
+    }
+  }
+};
+
+export const progressionSlideWithPendingSlide: ProgressionFromAPI = {
+  _id: '62b1d1087aa12f00253f40ee',
+  content,
+  engine,
   state: {
     allAnswers: [
       {
-        slideRef: 'sli_VJYjJnJhg',
+        slideRef: freeTextSlide.universalRef,
+        isCorrect: false,
+        answer: ['Wrong']
+      },
+      {
+        slideRef: qcmGraphicSlide.universalRef,
+        isCorrect: true,
+        answer: ['Faux']
+      },
+      {
+        slideRef: qcmSlide.universalRef,
+        isCorrect: false,
+        answer: ['Wrong']
+      },
+      {
+        slideRef: sliderSlide.universalRef,
+        isCorrect: true,
+        answer: ['7']
+      },
+      {
+        slideRef: templateSlide.universalRef,
+        isCorrect: true,
+        answer: ['Leaderboard', 'utilisateurs', 'étoiles']
+      },
+      {
+        slideRef: freeTextSlide.universalRef,
         isCorrect: true,
         answer: ['Benchmark']
       }
     ],
     isCorrect: true,
     nextContent: {
-      ref: 'sli_VkSQroQnx',
+      ref: qcmSlide.universalRef,
       type: 'slide'
     },
     content: {
-      ref: 'sli_VJYjJnJhg',
+      ref: freeTextSlide.universalRef,
       type: 'slide'
     },
-    pendingSlides: [],
-    slides: ['sli_VJYjJnJhg'],
+    pendingSlides: [qcmSlide.universalRef],
+    slides: [
+      freeTextSlide.universalRef,
+      qcmGraphicSlide.universalRef,
+      qcmSlide.universalRef,
+      sliderSlide.universalRef,
+      templateSlide.universalRef,
+      freeTextSlide.universalRef
+    ],
     step: {
-      current: 2
+      current: 7
     },
-    stars: 4
+    stars: 32
   }
 };
 
@@ -99,5 +346,8 @@ export const services: Services = {
   fetchSkills: () => Promise.resolve(fetchSkillsResponse),
   fetchSlide: ref => Promise.resolve({...getSlideFixture(ref), universalRef: ref, id: ref}),
   postProgression: () => Promise.resolve(postProgressionResponse),
-  postAnswer: () => Promise.resolve(postAnswerResponse)
+  postAnswer: progression => {
+    const currentSlide = progression.state.nextContent.ref;
+    return Promise.resolve(get(currentSlide, postAnswerResponses));
+  }
 };

package/src/types/common.ts

@@ -90,7 +90,7 @@ export type SlideFromAPI = {
   };
 };
 
-type ProgressionAnswerItem = {
+export type ProgressionAnswerItem = {
   isCorrect: boolean;
   slideRef: string;
   answer: string[];
@@ -115,15 +115,19 @@ export type ProgressionState = {
   stars: number;
 };
 
+export type ReviewContent = {
+  type: 'skill';
+  ref: string;
+};
+
+export type ReviewEngine = {
+  ref: 'review';
+};
+
 export type ProgressionFromAPI = {
   _id: string;
-  content: {
-    type: 'skill';
-    ref: string;
-  };
-  engine: {
-    ref: 'review';
-  };
+  content: ReviewContent;
+  engine: ReviewEngine;
   state: ProgressionState;
 };
 
@@ -139,9 +143,8 @@ export type Services = {
   fetchSlide(slideRef: string, token: string): Promise<SlideFromAPI | void>;
   postProgression(skillRef: string, token: string): Promise<ProgressionFromAPI>;
   postAnswer(
-    skillRef: string,
+    progression: ProgressionFromAPI,
     token: string,
-    progressionId: string,
     answer: string[]
   ): Promise<ProgressionFromAPI>;
 };

package/src/views/slides/index.ts

@@ -1,15 +1,15 @@
 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 isEmpty from 'lodash/fp/isEmpty';
+import last from 'lodash/fp/last';
 import pipe from 'lodash/fp/pipe';
 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 {Dispatch} from 'redux';
-import {ProgressionFromAPI} from '../../types/common';
+import {ProgressionAnswerItem, ProgressionFromAPI} from '../../types/common';
 import {SlideIndexes} from '../../common';
 import {StoreState} from '../../reducers';
 import {AnswerUI} from '../../types/slides';
@@ -181,7 +181,19 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
   return stack;
 };
 
-const buildStepItems = (state: StoreState): StepItem[] => {
+const getIconForCurrentStep = (
+  slideRef: string,
+  lastGivenAnswerForSlide: ProgressionAnswerItem,
+  currentSlideRef: string,
+  lastGivenAsnswer: ProgressionAnswerItem
+): IconValue => {
+  if (slideRef !== currentSlideRef) return lastGivenAnswerForSlide.isCorrect ? 'right' : 'wrong';
+
+  if (lastGivenAsnswer.slideRef !== slideRef) return 'no-answer';
+  return lastGivenAnswerForSlide.isCorrect ? 'right' : 'wrong';
+};
+
+export const buildStepItems = (state: StoreState): StepItem[] => {
   const {progression} = state.data;
   const {currentSlideRef} = state.ui;
   if (!progression) return [];
@@ -214,23 +226,36 @@ const buildStepItems = (state: StoreState): StepItem[] => {
     }
   ];
 
+  const slideRefs = getProgressionSlidesRefs(progression);
   const allAnswers = progression.state.allAnswers;
   const step = progression.state.step;
-  if (isEmpty(allAnswers)) return defaultProps;
+  const nextContentRef = progression.state.nextContent.ref;
+  const lastGivenAnswer = last(allAnswers);
+  if (!lastGivenAnswer) return defaultProps;
 
   const steps = defaultProps.map((stepItem, index): StepItem => {
-    const givenAnswer = allAnswers[index];
-    if (!givenAnswer) {
+    const slideRef = slideRefs[index];
+    if (!slideRef) return stepItem; // non fecthed slide pour given index
+
+    const lastGivenAnswerForSlide = findLast(answer => answer.slideRef === slideRef, allAnswers);
+    // never answered slide
+    if (!lastGivenAnswerForSlide) {
       return {
         ...stepItem,
-        current: step.current === index + 1
+        current: nextContentRef === currentSlideRef && step.current === index + 1
       };
     }
 
+    // already answered slide, we computed based on the lastGivenAnswer
     return {
       ...stepItem,
-      icon: givenAnswer.isCorrect ? 'right' : 'wrong',
-      current: givenAnswer.slideRef === currentSlideRef
+      icon: getIconForCurrentStep(
+        slideRef,
+        lastGivenAnswerForSlide,
+        currentSlideRef,
+        lastGivenAnswer
+      ),
+      current: lastGivenAnswerForSlide.slideRef === currentSlideRef
     };
   });
   return steps;