@coorpacademy/app-review 0.2.10-alpha.5 → 0.2.10

package/lib/test/index.test.js

@@ -132,15 +132,8 @@ var clickAllSlides = function (t, container, accumulator) {
 };
 var appOptions = {
     token: process.env.API_TEST_TOKEN || '',
-    templateContext: {
-        theme: { color: { primary: '#123' } }
-    },
     skillRef: 'skill_NJC0jFKoH',
-    services: services,
-    onQuitClick: function () {
-        // eslint-disable-next-line no-console
-        console.log('onQuitClick - options');
-    }
+    services: services
 };
 test('should show the loader while the app is fetching the data', function (t) { return __awaiter(void 0, void 0, void 0, function () {
     var container, loader;

package/lib/types/common.d.ts

@@ -1,8 +1,3 @@
-declare type TemplateContextValues = {
-    brandTheme?: unknown;
-    theme?: unknown;
-    translations?: unknown;
-};
 export declare type ChoiceFromAPI = {
     _id: string;
     id?: string;
@@ -140,12 +135,8 @@ export declare type Options = {
 };
 export declare type AppOptions = {
     token: string;
-    theme?: unknown;
-    translations?: unknown;
-    templateContext?: TemplateContextValues;
     skillRef?: string;
     services: Services;
-    onQuitClick: Function;
 };
 export declare type JWT = {
     exp: number;

package/lib/types/slides.d.ts

@@ -44,8 +44,9 @@ export declare type DropDown = {
 export declare type QuestionRange = {
     type: 'slider';
     placeholder?: string;
-    onChange?: Function;
+    onChange?: (value: number) => void;
     onChangeEnd?: Function;
+    onSliderChange?: (value: number) => void;
     multi?: boolean;
     value: number | number[];
     title: string;

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

@@ -89,5 +89,5 @@ export declare type SlidesViewProps = {
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: Function) => SlidesViewProps;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch) => SlidesViewProps;
 export {};

package/lib/views/slides/index.js

@@ -167,7 +167,7 @@ var getCorrectionPopinProps = function (isCorrect, correctAnswer, klf) { return
     },
     type: isCorrect ? 'right' : 'wrong'
 }); };
-export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
+export var mapStateToSlidesProps = function (state, dispatch) {
     var currentSlideRef = get(['ui', 'currentSlideRef'], state);
     var correction = get(['data', 'corrections', currentSlideRef], state);
     var isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
@@ -177,7 +177,8 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
             mode: '__revision_mode',
             skillName: '__agility',
             onQuitClick: function () {
-                onQuitClick();
+                // eslint-disable-next-line no-console
+                console.log('onQuitClick');
             },
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',

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

@@ -145,8 +145,13 @@ var sliderProps = function (dispatch) {
             title: "".concat(currentValue, " ").concat(question.content.unitLabel),
             value: sliderPosition,
             onChange: function (position) {
+                // atom/range handler
                 var newValue = pipe(multiply(maxValue), round, get(__, values), _toString)(position);
                 dispatch(editAnswer([newValue]));
+            },
+            onSliderChange: function (newValue) {
+                // mobile/slider handler
+                dispatch(editAnswer(["".concat(newValue)]));
             }
         };
     };

package/lib/views/slides/test/fixtures/slider.js

@@ -30,7 +30,8 @@ export var sliderUISlide = {
             maxLabel: '15 an(s)',
             title: '1 an(s)',
             value: 0,
-            onChange: noop
+            onChange: noop,
+            onSliderChange: noop
         }
     }
 };

package/lib/views/slides/test/index.test.js

@@ -62,7 +62,7 @@ test('should create initial props when fetched slide is not still received', fun
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -151,7 +151,7 @@ test('should create props when first slide is on the state', function (t) {
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -253,7 +253,7 @@ test('should create props when slide is on the state and user has selected answe
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -356,7 +356,7 @@ test('should verify props when first slide was answered correctly and next slide
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -459,7 +459,7 @@ test('should verify props when first slide was answered with error and next slid
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -523,7 +523,7 @@ test('should verify props when first slide was answered, next slide is fetched &
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -635,7 +635,7 @@ test('should verify props when first slide was answered incorrectly, next slide
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -745,7 +745,7 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -815,7 +815,7 @@ test('should verify props when progression is in success', function (t) {
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.is(props.congratsProps, undefined);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
@@ -885,7 +885,7 @@ test('should verify props when progression has answered a current pendingSlide',
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
         closeButtonAriaLabel: 'aria-close-button',
@@ -953,7 +953,7 @@ test('should verify props when progression still has a pendingSlide', function (
             }
         }
     };
-    var props = mapStateToSlidesProps(state, identity, identity);
+    var props = mapStateToSlidesProps(state, identity);
     t.deepEqual(omit(['onQuitClick'], props.header), {
         'aria-label': 'aria-header-wrapper',
         closeButtonAriaLabel: 'aria-close-button',

package/lib/views/slides/test/slide.free-text.on-change.test.js

@@ -2,7 +2,6 @@ var _a;
 import test from 'ava';
 import omit from 'lodash/fp/omit';
 import get from 'lodash/fp/get';
-import identity from 'lodash/fp/identity';
 import { mapStateToSlidesProps } from '..';
 import { services } from '../../../test/util/services.mock';
 import { createTestStore } from '../../../actions/test/create-test-store';
@@ -59,7 +58,7 @@ test('should dispatch EDIT_BASIC action via the property onChange of a Free Text
         }
     ];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,

package/lib/views/slides/test/slide.qcm-drag.on-click.test.js

@@ -2,7 +2,6 @@ var _a;
 import test from 'ava';
 import omit from 'lodash/fp/omit';
 import get from 'lodash/fp/get';
-import identity from 'lodash/fp/identity';
 import { mapStateToSlidesProps } from '..';
 import { services } from '../../../test/util/services.mock';
 import { createTestStore } from '../../../actions/test/create-test-store';
@@ -59,7 +58,7 @@ test('should dispatch EDIT_QCM_DRAG action via the property onClick of a QCM Dra
         }
     ];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,

package/lib/views/slides/test/slide.qcm-graphic.on-click.test.js

@@ -2,7 +2,6 @@ var _a;
 import test from 'ava';
 import omit from 'lodash/fp/omit';
 import get from 'lodash/fp/get';
-import identity from 'lodash/fp/identity';
 import { mapStateToSlidesProps } from '..';
 import { services } from '../../../test/util/services.mock';
 import { createTestStore } from '../../../actions/test/create-test-store';
@@ -59,7 +58,7 @@ test('should dispatch EDIT_QCM_GRAPHIC action via the property onClick of a QCM
         }
     ];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,

package/lib/views/slides/test/slide.qcm.on-click.test.js

@@ -2,7 +2,6 @@ var _a;
 import test from 'ava';
 import omit from 'lodash/fp/omit';
 import get from 'lodash/fp/get';
-import identity from 'lodash/fp/identity';
 import { mapStateToSlidesProps } from '..';
 import { services } from '../../../test/util/services.mock';
 import { createTestStore } from '../../../actions/test/create-test-store';
@@ -61,7 +60,7 @@ test('should dispatch EDIT_QCM action via the property onClick of a QCM slide',
         }
     ];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,

package/lib/views/slides/test/slide.slider.on-change.test.js

@@ -2,7 +2,6 @@ var _a;
 import test from 'ava';
 import omit from 'lodash/fp/omit';
 import get from 'lodash/fp/get';
-import identity from 'lodash/fp/identity';
 import { mapStateToSlidesProps } from '..';
 import { services } from '../../../test/util/services.mock';
 import { createTestStore } from '../../../actions/test/create-test-store';
@@ -59,7 +58,7 @@ test('should dispatch EDIT_SLIDER action via the property onChange of a Slider s
         }
     ];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,

package/lib/views/slides/test/slide.slider.on-slider-change.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/views/slides/test/slide.slider.on-slider-change.test.js

@@ -0,0 +1,65 @@
+var _a;
+import test from 'ava';
+import get from 'lodash/fp/get';
+import { mapStateToSlidesProps } from '..';
+import { services } from '../../../test/util/services.mock';
+import { createTestStore } from '../../../actions/test/create-test-store';
+import { EDIT_SLIDER } from '../../../actions/ui/answers';
+import { sliderSlide } from './fixtures/slider';
+var progression = {
+    _id: '123456789123',
+    content: { type: 'skill', ref: '_skill-ref' },
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+            ref: sliderSlide._id,
+            type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        },
+        stars: 0
+    }
+};
+var initialState = {
+    data: {
+        progression: progression,
+        slides: (_a = {},
+            _a[sliderSlide._id] = sliderSlide,
+            _a),
+        skills: [],
+        token: '1234',
+        corrections: {},
+        rank: {}
+    },
+    ui: {
+        currentSlideRef: sliderSlide._id,
+        navigation: ['skills', 'slides'],
+        answers: [],
+        slide: {
+            validateButton: false
+        }
+    }
+};
+test('should dispatch EDIT_SLIDER action via the property onSliderChange of a Slider slide', function (t) {
+    var _a;
+    t.plan(1);
+    var expectedActions = [
+        {
+            type: EDIT_SLIDER,
+            payload: ['111']
+        }
+    ];
+    var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
+    var props = mapStateToSlidesProps(getState(), dispatch);
+    var SlideProps = (_a = props.stack.slides['0'].answerUI) === null || _a === void 0 ? void 0 : _a.model;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var onSliderChange = get('onSliderChange', SlideProps);
+    onSliderChange(111);
+});

package/lib/views/slides/test/slide.template.on-change.test.js

@@ -2,7 +2,6 @@ var _a;
 import test from 'ava';
 import omit from 'lodash/fp/omit';
 import get from 'lodash/fp/get';
-import identity from 'lodash/fp/identity';
 import { mapStateToSlidesProps } from '..';
 import { services } from '../../../test/util/services.mock';
 import { createTestStore } from '../../../actions/test/create-test-store';
@@ -54,7 +53,7 @@ test('should dispatch EDIT_TEMPLATE action via the property onChange of a Templa
     t.plan(2);
     var expectedActions = [{ type: EDIT_TEMPLATE, payload: ['', 'test', ''] }];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,
@@ -73,7 +72,7 @@ test('should dispatch EDIT_TEMPLATE action via the property onChange of a Templa
     t.plan(2);
     var expectedActions = [{ type: EDIT_TEMPLATE, payload: ['Catalogue', '', ''] }];
     var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
-    var props = mapStateToSlidesProps(getState(), dispatch, identity);
+    var props = mapStateToSlidesProps(getState(), dispatch);
     t.deepEqual(omit('answerUI', props.stack.slides['0']), {
         animateCorrectionPopin: false,
         showCorrectionPopin: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.2.10-alpha.5+b5f45c65b",
+  "version": "0.2.10",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -41,8 +41,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.24",
-    "@coorpacademy/redux-task": "1.1.5",
+    "@coorpacademy/components": "10.22.25",
+    "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
     "react-redux": "^8.0.1",
@@ -78,5 +78,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
   },
-  "gitHead": "b5f45c65ba35d615bc2a74df5c9ff7afe25a35bb"
+  "gitHead": "6e9facb9c3b9b962abe565d779b5a8035e531fa2"
 }

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

@@ -0,0 +1,31 @@
+import type {Dispatch} from 'redux';
+import get from 'lodash/fp/get';
+import type {StoreState} from '../../reducers';
+
+export const NEXT_SLIDE = '@@slide/NEXT_SLIDE' as const;
+
+type NextSlidePayload = {
+  currentSlideRef: string;
+  nextSlideRef: string;
+  animationType: string;
+};
+
+export type NextSlide = {
+  type: typeof NEXT_SLIDE;
+  payload: NextSlidePayload;
+};
+
+export const nextSlide = (dispatch: Dispatch, getState: () => StoreState): NextSlide => {
+  const state = getState();
+  const payload = {
+    currentSlideRef: get(['ui', 'currentSlideRef'], state),
+    nextSlideRef: get(['data', 'progression', 'state', 'nextContent', 'ref'], state),
+    animationType: state.data.progression?.state.isCorrect ? 'unstack' : 'restack'
+  };
+  const action = {
+    type: NEXT_SLIDE,
+    payload
+  };
+
+  return dispatch(action);
+};

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

@@ -0,0 +1,75 @@
+import test from 'ava';
+import pipe from 'lodash/fp/pipe';
+import set from 'lodash/fp/set';
+import {StoreState} from '../../../reducers';
+import {nextSlide, NEXT_SLIDE} from '../next-slide';
+import {createTestStore} from '../../test/create-test-store';
+import {
+  getChoicesCorrection,
+  postAnswerResponses,
+  services
+} from '../../../test/util/services.mock';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+import {qcmGraphicSlide} from '../../../views/slides/test/fixtures/qcm-graphic';
+
+const progression = postAnswerResponses[freeTextSlide.universalRef];
+const skillRef = '_skill-ref';
+const answer = ['Vous isoler dans un lieu calme'];
+
+const state: StoreState = {
+  data: {
+    progression,
+    slides: {
+      [freeTextSlide.universalRef]: freeTextSlide,
+      [qcmGraphicSlide.universalRef]: qcmGraphicSlide
+    },
+    skills: [{skillRef, custom: false, name: skillRef, slidesToReview: 5}],
+    token: '1234',
+    corrections: {[freeTextSlide.universalRef]: getChoicesCorrection(freeTextSlide.universalRef)},
+    rank: {start: 93}
+  },
+  ui: {
+    currentSlideRef: freeTextSlide._id,
+    navigation: ['loader', 'slides'],
+    answers: answer,
+    slide: {
+      validateButton: false,
+      animateCorrectionPopin: true,
+      showCorrectionPopin: true
+    }
+  }
+};
+test('should dispatch NEXT_SLIDE action when nextSlide is called and the progression state is correct', t => {
+  const expectedActions = [
+    {
+      type: NEXT_SLIDE,
+      payload: {
+        currentSlideRef: freeTextSlide.universalRef,
+        nextSlideRef: qcmGraphicSlide.universalRef,
+        animationType: 'unstack'
+      }
+    }
+  ];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  dispatch(nextSlide);
+});
+
+test('should dispatch NEXT_SLIDE action when nextSlide is called and the progression state is not correct', t => {
+  const stateWithWrongAnswer = pipe(
+    set(['data', 'progression', 'state', 'isCorrect'], false),
+    set(['data', 'progression', 'state', 'allAnswers', 0, 'isCorrect'], false)
+  )(state);
+
+  const expectedActions = [
+    {
+      type: NEXT_SLIDE,
+      payload: {
+        currentSlideRef: freeTextSlide.universalRef,
+        nextSlideRef: qcmGraphicSlide.universalRef,
+        animationType: 'restack'
+      }
+    }
+  ];
+  const {dispatch} = createTestStore(t, stateWithWrongAnswer, services, expectedActions);
+  dispatch(nextSlide);
+});

package/src/index.tsx

@@ -19,18 +19,17 @@ import {VIEWS} from './common';
 import {mapStateToSlidesProps} from './views/slides';
 import {mapStateToSkillsProps} from './views/skills';
 
-const ConnectedApp = ({onQuitClick}: {onQuitClick: Function}): JSX.Element => {
+const ConnectedApp = (): JSX.Element => {
   const dispatch = useDispatch();
 
   const props = {
     viewName: useSelector(
       (state: StoreState) => state.ui.navigation[state.ui.navigation.length - 1]
     ),
-    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch, onQuitClick)),
+    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch)),
     skills: useSelector((state: StoreState) => mapStateToSkillsProps(state))
   };
-  // eslint-disable-next-line no-console
-  console.log(props);
+
   return <AppReviewTemplate {...props} />;
 };
 
@@ -38,8 +37,6 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
   const [isProgressionCreated, setIsProgressionCreated] = useState(false);
 
-  const onQuitClick = get('onQuitClick', options);
-
   useEffect(() => {
     if (store) return;
 
@@ -91,7 +88,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
   return (
     <Provider store={store}>
-      <ConnectedApp onQuitClick={onQuitClick} />
+      <ConnectedApp />
     </Provider>
   );
 };

package/src/test/index.test.tsx

@@ -58,15 +58,8 @@ const clickAllSlides = async (
 
 const appOptions: AppOptions = {
   token: process.env.API_TEST_TOKEN || '',
-  templateContext: {
-    theme: {color: {primary: '#123'}}
-  },
   skillRef: 'skill_NJC0jFKoH',
-  services,
-  onQuitClick: (): void => {
-    // eslint-disable-next-line no-console
-    console.log('onQuitClick - options');
-  }
+  services
 };
 
 test('should show the loader while the app is fetching the data', async t => {

package/src/types/common.ts

@@ -1,10 +1,3 @@
-// TODO use type from components
-type TemplateContextValues = {
-  brandTheme?: unknown;
-  theme?: unknown; // TODO type Theme
-  translations?: unknown; // TODO type Translations
-};
-
 // TODO: EDIT_CHOICES -> specify typing
 export type ChoiceFromAPI = {
   _id: string;
@@ -176,12 +169,8 @@ export type Options = {
 
 export type AppOptions = {
   token: string;
-  theme?: unknown;
-  translations?: unknown;
-  templateContext?: TemplateContextValues;
   skillRef?: string;
   services: Services;
-  onQuitClick: Function;
 };
 
 export type JWT = {

package/src/types/slides.ts

@@ -59,8 +59,9 @@ export type DropDown = {
 export type QuestionRange = {
   type: 'slider';
   placeholder?: string;
-  onChange?: Function;
+  onChange?: (value: number) => void;
   onChangeEnd?: Function;
+  onSliderChange?: (value: number) => void;
   multi?: boolean;
   value: number | number[];
   title: string;

package/src/views/slides/index.ts

@@ -298,11 +298,7 @@ const getCorrectionPopinProps = (
   type: isCorrect ? 'right' : 'wrong'
 });
 
-export const mapStateToSlidesProps = (
-  state: StoreState,
-  dispatch: Dispatch,
-  onQuitClick: Function
-): SlidesViewProps => {
+export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): SlidesViewProps => {
   const currentSlideRef = get(['ui', 'currentSlideRef'], state);
   const correction = get(['data', 'corrections', currentSlideRef], state);
   const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
@@ -313,7 +309,8 @@ export const mapStateToSlidesProps = (
       mode: '__revision_mode',
       skillName: '__agility',
       onQuitClick: (): void => {
-        onQuitClick();
+        // eslint-disable-next-line no-console
+        console.log('onQuitClick');
       },
       'aria-label': 'aria-header-wrapper',
       closeButtonAriaLabel: 'aria-close-button',

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

@@ -225,6 +225,7 @@ const sliderProps =
       title: `${currentValue} ${question.content.unitLabel}`,
       value: sliderPosition,
       onChange: (position: number): void => {
+        // atom/range handler
         const newValue: string = pipe(
           multiply(maxValue),
           round,
@@ -232,6 +233,10 @@ const sliderProps =
           _toString
         )(position);
         dispatch(editAnswer([newValue]));
+      },
+      onSliderChange: (newValue: number): void => {
+        // mobile/slider handler
+        dispatch(editAnswer([`${newValue}`]));
       }
     };
   };