@coorpacademy/app-review 0.1.15 → 0.1.17

package/src/index.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import type {} from 'redux-thunk/extend-redux'; // https://github.com/reduxjs/redux-thunk/issues/333
 import {AnyAction, Store} from 'redux';
-import {connect, Provider} from 'react-redux';
+import {useSelector, useDispatch, Provider} from 'react-redux';
 import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
 import {TemplateContext} from '@coorpacademy/components/es/template/app-review/template-context';
 
@@ -11,43 +11,28 @@ import configureStore from './configure-store';
 
 import type {AppOptions} from './types/common';
 import type {StoreState} from './reducers';
-import type {SlidesViewStaticProps} from './types/views/slides';
 
-import {Dispatchers} from './actions';
-import {validateSlide} from './actions/ui/slides';
-
-import {navigateTo, navigateBack, ViewPath} from './actions/ui/navigation';
+import {navigateTo, ViewPath} from './actions/ui/navigation';
 import {storeToken} from './actions/data/token';
 import {fetchSkills} from './actions/api/fetch-skills';
 import {postProgression} from './actions/api/post-progression';
 import {VIEWS} from './common';
 import {mapStateToSlidesProps} from './views/slides';
-import {mapStateToSkillsProps, SkillsProps} from './views/skills';
-
-type StaticProps = {
-  viewName: 'skills' | 'onboarding' | 'slides' | 'loader';
-  slides: SlidesViewStaticProps | null;
-  skills: SkillsProps | null;
-};
+import {mapStateToSkillsProps} from './views/skills';
 
-const mapDispatchToProps: Dispatchers = {
-  navigateTo,
-  navigateBack,
-  validateSlide
-};
+const ConnectedApp = (): JSX.Element => {
+  const dispatch = useDispatch();
 
-const getCurrentViewName = (storeState: StoreState): ViewPath =>
-  storeState.ui.navigation[storeState.ui.navigation.length - 1];
-
-const mapStateToProps = (state: StoreState): StaticProps => {
-  return {
-    viewName: getCurrentViewName(state),
-    slides: mapStateToSlidesProps(state),
-    skills: mapStateToSkillsProps(state)
+  const props = {
+    viewName: useSelector(
+      (state: StoreState) => state.ui.navigation[state.ui.navigation.length - 1]
+    ),
+    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch)),
+    skills: useSelector((state: StoreState) => mapStateToSkillsProps(state))
   };
-};
 
-const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
+  return <AppReviewTemplate {...props} />;
+};
 
 const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
@@ -83,9 +68,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
     /* ThunkAction is not assignable to parameter of type 'AnyAction'
       ts problem is described here = https://github.com/reduxjs/redux-thunk/issues/333 */
-    skillRef
-      ? store.dispatch(postProgression(skillRef, token))
-      : store.dispatch(fetchSkills(token));
+    skillRef ? store.dispatch(postProgression(skillRef)) : store.dispatch(fetchSkills);
   }, [options, store]);
 
   useEffect(() => {
@@ -109,7 +92,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   return (
     <Provider store={store}>
       <TemplateContext values={values}>
-        <App />
+        <ConnectedApp />
       </TemplateContext>
     </Provider>
   );

package/src/reducers/data/index.ts

@@ -7,7 +7,7 @@ import token, {TokenState} from './token';
 
 export type DataState = {
   isFetching?: boolean;
-  progression?: ProgressionState;
+  progression: ProgressionState;
   skills: SkillsState;
   slides: SlidesState;
   token?: TokenState;

package/src/reducers/data/progression.ts

@@ -1,5 +1,4 @@
-import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/ui/slides';
-import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../actions/api/post-progression';
+import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../actions/api/post-progression';
 import {ProgressionFromAPI} from '../../types/common';
 
 export type ProgressionState = ProgressionFromAPI | null;
@@ -7,13 +6,9 @@ export type ProgressionState = ProgressionFromAPI | null;
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: ProgressionState = null,
-  action: ValidateSlide | ReceiveProgression
+  action: ReceivedProgression
 ): ProgressionState => {
   switch (action.type) {
-    case VALIDATE_SLIDE: {
-      // TODO: fix on VALIDATE ticket -> launch a POST PROGRESSION
-      return state;
-    }
     case POST_PROGRESSION_SUCCESS: {
       const progression = action.payload;
       return progression;

package/src/reducers/data/slides.ts

@@ -1,16 +1,24 @@
 import set from 'lodash/fp/set';
-import {ValidateSlide} from '../../actions/ui/slides';
-import {ReceivedSlide, SLIDE_FETCH_SUCCESS} from '../../actions/api/fetch-slide';
+import {
+  ReceivedSlide,
+  FetchSlide,
+  SLIDE_FETCH_REQUEST,
+  SLIDE_FETCH_SUCCESS
+} from '../../actions/api/fetch-slide';
 import {SlideFromAPI} from '../../types/common';
 
-export type SlidesAction = ReceivedSlide | ValidateSlide;
+export type SlidesAction = FetchSlide | ReceivedSlide;
 
-export type SlidesState = Record<string, SlideFromAPI>;
+export type SlidesState = Record<string, SlideFromAPI | null>;
 export const initialState: SlidesState = {};
 
 // eslint-disable-next-line default-param-last
 const reducer = (state: SlidesState = initialState, action: SlidesAction): SlidesState => {
   switch (action.type) {
+    case SLIDE_FETCH_REQUEST: {
+      const {meta} = action;
+      return set(meta.slideRef, null, state);
+    }
     case SLIDE_FETCH_SUCCESS: {
       const slide = action.payload;
       return set(slide.id, slide, state);

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

@@ -0,0 +1,42 @@
+import test from 'ava';
+import reducer from '../progression';
+import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../../actions/api/post-progression';
+import {ProgressionFromAPI} from '../../../types/common';
+
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as ReceivedProgression);
+  t.is(state, null);
+});
+
+test('should set the value of POST_PROGRESSION_SUCCESS action', t => {
+  const progression: ProgressionFromAPI = {
+    _id: '62b1d1087aa12f00253f40ee',
+    content: {
+      ref: '_skill-ref',
+      type: 'skill'
+    },
+    engine: {
+      ref: 'review'
+    },
+    state: {
+      allAnswers: [],
+      isCorrect: true,
+      nextContent: {
+        ref: 'sli_N1XACJobn',
+        type: 'slide'
+      },
+      pendingSlides: [],
+      slides: [],
+      step: {
+        current: 1
+      },
+      stars: 0
+    }
+  };
+
+  const state = reducer(null, {
+    type: POST_PROGRESSION_SUCCESS,
+    payload: progression
+  });
+  t.deepEqual(state, progression);
+});

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

@@ -0,0 +1,14 @@
+import test from 'ava';
+import reducer from '../skills';
+import {ReceivedSkills, SKILLS_FETCH_SUCCESS} from '../../../actions/api/fetch-skills';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as ReceivedSkills);
+  t.deepEqual(state, []);
+});
+
+test('should set the value of SKILLS_FETCH_SUCCESS action', t => {
+  const skills = [{skillRef: 'skill', name: 'skill name', slidesToReview: 5, custom: false}];
+  const state = reducer([], {type: SKILLS_FETCH_SUCCESS, payload: skills});
+  t.deepEqual(state, skills);
+});

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

@@ -0,0 +1,26 @@
+import test from 'ava';
+import reducer, {type SlidesAction} from '../slides';
+import {SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS} from '../../../actions/api/fetch-slide';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as SlidesAction);
+  t.deepEqual(state, {});
+});
+
+test('should set the value of SLIDE_FETCH_REQUEST action', t => {
+  const state = reducer({}, {type: SLIDE_FETCH_REQUEST, meta: {slideRef: 'slideRef'}});
+  t.deepEqual(state, {
+    slideRef: null
+  });
+});
+
+test('should set the value of SLIDE_FETCH_SUCCESS action', t => {
+  const state = reducer(
+    {},
+    {type: SLIDE_FETCH_SUCCESS, payload: freeTextSlide, meta: {slideRef: 'sli_VJYjJnJhg'}}
+  );
+  t.deepEqual(state, {
+    sli_VJYjJnJhg: freeTextSlide
+  });
+});

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

@@ -0,0 +1,13 @@
+import test from 'ava';
+import reducer from '../token';
+import {StoreToken, STORE_TOKEN} from '../../../actions/data/token';
+
+test('should have inital value', t => {
+  const state = reducer(undefined, {} as StoreToken);
+  t.is(state, null);
+});
+
+test('should set the value of STORE_TOKEN action', t => {
+  const state = reducer(null, {type: STORE_TOKEN, payload: 'token'});
+  t.is(state, 'token');
+});

package/src/reducers/ui/answers.ts

@@ -0,0 +1,15 @@
+import {includes, values} from 'lodash/fp';
+import {EditAnswerAction, ANSWER_EDIT} from '../../actions/ui/answers';
+
+export type AnswerState = string[];
+const ANSWER_EDIT_ACTIONS = values(ANSWER_EDIT);
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: AnswerState = [],
+  action: EditAnswerAction
+): AnswerState => {
+  return includes(action.type, ANSWER_EDIT_ACTIONS) ? action.payload : state;
+};
+
+export default reducer;

package/src/reducers/ui/index.ts

@@ -2,16 +2,19 @@ import {combineReducers} from 'redux';
 
 import currentSlideRef, {CurrentSlideRefState} from './current-slide-ref';
 import navigation, {NavigationState} from './navigation';
-import slides, {UISlidesState} from './slides';
+import answers, {AnswerState} from './answers';
+import slide, {UISlideState} from './slide';
 
 export type UIState = {
   currentSlideRef: CurrentSlideRefState;
   navigation: NavigationState;
-  slides: UISlidesState;
+  answers: AnswerState;
+  slide: UISlideState;
 };
 
 export default combineReducers({
   currentSlideRef,
   navigation,
-  slides
+  answers,
+  slide
 });

package/src/reducers/ui/slide.ts

@@ -0,0 +1,43 @@
+import compact from 'lodash/fp/compact';
+import isEmpty from 'lodash/fp/isEmpty';
+import pipe from 'lodash/fp/pipe';
+import {
+  EditAnswerAction,
+  EDIT_BASIC,
+  EDIT_QCM,
+  EDIT_QCM_DRAG,
+  EDIT_QCM_GRAPHIC,
+  EDIT_SLIDER,
+  EDIT_TEMPLATE
+} from '../../actions/ui/answers';
+import {PostAnswerRequestAction, POST_ANSWER_REQUEST} from '../../actions/api/post-answer';
+
+export type UISlideState = {
+  validateButton: boolean;
+};
+
+export const initialState: UISlideState = {validateButton: false};
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: UISlideState = initialState,
+  action: PostAnswerRequestAction | EditAnswerAction
+): UISlideState => {
+  switch (action.type) {
+    case EDIT_QCM:
+    case EDIT_QCM_GRAPHIC:
+    case EDIT_QCM_DRAG:
+    case EDIT_TEMPLATE:
+    case EDIT_BASIC:
+    case EDIT_SLIDER: {
+      return pipe(compact, isEmpty)(action.payload) ? initialState : {validateButton: true};
+    }
+    case POST_ANSWER_REQUEST: {
+      return initialState;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

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

@@ -0,0 +1,33 @@
+import test from 'ava';
+import reducer from '../answers';
+import {EditAnswerAction, ANSWER_EDIT} from '../../../actions/ui/answers';
+
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as EditAnswerAction);
+  t.deepEqual(state, []);
+});
+
+test('should set the value of EDIT_BASIC action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.basic, payload: ['value']});
+  t.deepEqual(state, ['value']);
+});
+
+test('should set the value of EDIT_QCM action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.qcm, payload: ['value1', 'value2']});
+  t.deepEqual(state, ['value1', 'value2']);
+});
+
+test('should set the value of EDIT_QCM_GRAPHIC action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.qcmGraphic, payload: ['True', 'False']});
+  t.deepEqual(state, ['True', 'False']);
+});
+
+test('should set the value of EDIT_QCM_DRAG action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.qcmDrag, payload: ['value1', 'value2']});
+  t.deepEqual(state, ['value1', 'value2']);
+});
+
+test('should set the value of EDIT_SLIDER action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.slider, payload: ['5']});
+  t.deepEqual(state, ['5']);
+});

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

@@ -0,0 +1,14 @@
+import test from 'ava';
+import reducer from '../current-slide-ref';
+import {SetCurrentSlide, 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);
+  t.is(state, '');
+});
+
+test('should set the value of SET_CURRENT_SLIDE action', t => {
+  const state = reducer('', {type: SET_CURRENT_SLIDE, payload: freeTextSlide});
+  t.is(state, 'sli_VJYjJnJhg');
+});

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

@@ -0,0 +1,19 @@
+import test from 'ava';
+import reducer from '../navigation';
+import {NavigateTo, navigateBack, navigateTo} from '../../../actions/ui/navigation';
+
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as NavigateTo);
+  t.deepEqual(state, []);
+});
+
+test('should set the value of NAVIGATE_TO and NAVIGATE_BACK action', t => {
+  const state = reducer([], navigateTo('loader'));
+  t.deepEqual(state, ['loader']);
+
+  const updatedState = reducer(state, navigateTo('skills'));
+  t.deepEqual(updatedState, ['loader', 'skills']);
+
+  const _updatedState = reducer(updatedState, navigateBack());
+  t.deepEqual(_updatedState, ['loader']);
+});

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

@@ -0,0 +1,15 @@
+import test from 'ava';
+import reducer, {initialState} from '../slide';
+import {EDIT_BASIC} from '../../../actions/ui/answers';
+import {PostAnswerRequestAction} from '../../../actions/api/post-answer';
+
+test('should use initial state if no answers are found when an EditAnswerAction is received', t => {
+  const state = reducer(undefined, {type: EDIT_BASIC, payload: ['']});
+  t.truthy(state);
+  t.false(state.validateButton);
+});
+
+test('should return state directly when there is no corresponding action handler + have an initial state', t => {
+  const state = reducer(undefined, {type: 'NOPE'} as unknown as PostAnswerRequestAction);
+  t.deepEqual(state, initialState);
+});

package/src/services/fetch-slide.ts

@@ -6,7 +6,7 @@ import {toJSON} from './tools/fetch-responses';
 
 export const fetchSlide = async (slideRef: string, token: string): Promise<SlideFromAPI | void> => {
   const {host}: JWT = decode(token);
-  const response = await crossFetch(`${host}/api/v2/slide/${slideRef}`, {
+  const response = await crossFetch(`${host}/api/v2/slide/${slideRef}/parentContentTitle`, {
     headers: {authorization: token}
   });
 

package/src/services/index.ts

@@ -2,9 +2,11 @@ import {Services} from '../types/common';
 import {fetchSkills} from './fetch-skills';
 import {postProgression} from './post-progression';
 import {fetchSlide} from './fetch-slide';
+import {postAnswer} from './post-answer';
 
 export const getServices = (): Services => ({
   fetchSkills,
   fetchSlide,
-  postProgression
+  postProgression,
+  postAnswer
 });

package/src/services/post-answer.ts

@@ -0,0 +1,27 @@
+import crossFetch from 'cross-fetch';
+import decode from 'jwt-decode';
+
+import {JWT, ProgressionFromAPI} from '../types/common';
+import {toJSON} from './tools/fetch-responses';
+
+export const postAnswer = async (
+  skillRef: string,
+  token: string,
+  progressionId: string,
+  answer: string[]
+): Promise<ProgressionFromAPI> => {
+  const {host}: JWT = decode(token);
+  const response = await crossFetch(`${host}/api/v2/progressions/${progressionId}/answers`, {
+    method: 'post',
+    headers: {authorization: token},
+    body: JSON.stringify({
+      content: {
+        ref: skillRef,
+        type: 'slide'
+      },
+      answer
+    })
+  });
+
+  return toJSON<ProgressionFromAPI>(response);
+};

package/src/services/test/fetch-slide.test.ts

@@ -0,0 +1,30 @@
+import test from 'ava';
+import nock from 'nock';
+import {qcmDragSlide} from '../../views/slides/test/fixtures/qcm-drag';
+import {fetchSlide} from '../fetch-slide';
+
+test.before(() => {
+  nock('http://localhost:3000')
+    .get('/api/v2/slide/sli_123546/parentContentTitle')
+    .reply(200, qcmDragSlide);
+});
+
+test.after(() => {
+  nock.cleanAll();
+});
+
+test('should fetch a slide with the parentTitleContent info successfully', async t => {
+  const token = process.env.API_TEST_TOKEN || '';
+  const slide = await fetchSlide('sli_123546', token);
+  t.deepEqual(qcmDragSlide, slide);
+});
+
+test('should reject if a bad token is passed', async t => {
+  const badToken = 'token is not a jwt';
+  const error = await t.throwsAsync(() => fetchSlide('sli_123546', badToken));
+
+  t.is(
+    error?.message,
+    "Invalid token specified: Cannot read properties of undefined (reading 'replace')"
+  );
+});

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

@@ -0,0 +1,68 @@
+import test from 'ava';
+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 result: ProgressionFromAPI = {
+  content: {
+    type: 'skill',
+    ref: skillRef
+  },
+  engine: {
+    ref: 'review'
+  },
+  _id: '123456123456',
+  state: {
+    allAnswers: [
+      {
+        slideRef: 'sli_NkvrWPFF2',
+        isCorrect: true,
+        answer
+      }
+    ],
+    isCorrect: true,
+    nextContent: {
+      type: 'slide',
+      ref: 'sli_NJ3m5KtWh'
+    },
+    pendingSlides: [],
+    slides: ['sli_NkvrWPFF2'],
+    content: {
+      ref: 'sli_NkvrWPFF2',
+      type: 'slide'
+    },
+    step: {
+      current: 2
+    },
+    stars: 4
+  }
+};
+
+test.before(() => {
+  const moocApi = nock('http://localhost:3000');
+  moocApi.post(`/api/v2/progressions/${progressionId}/answers`).reply(200, result);
+});
+
+test.after(() => {
+  nock.cleanAll();
+});
+
+test('should post the answers successfully', async t => {
+  const token = process.env.API_TEST_TOKEN || '';
+  const progression = await postAnswer(skillRef, token, progressionId, 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));
+
+  t.is(
+    error?.message,
+    "Invalid token specified: Cannot read properties of undefined (reading 'replace')"
+  );
+});

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

@@ -6,6 +6,13 @@ import {postProgression} from '../post-progression';
 const skillRef = '_skill-ref';
 const result: ProgressionFromAPI = {
   _id: '123456123456',
+  content: {
+    ref: '_skill-ref',
+    type: 'skill'
+  },
+  engine: {
+    ref: 'review'
+  },
   state: {
     allAnswers: [],
     isCorrect: true,
@@ -17,7 +24,8 @@ const result: ProgressionFromAPI = {
     slides: [],
     step: {
       current: 1
-    }
+    },
+    stars: 0
   }
 };