@coorpacademy/app-review 0.1.13 → 0.1.15

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

@@ -7,15 +7,17 @@ const skillRef = '_skill-ref';
 const result: ProgressionFromAPI = {
   _id: '123456123456',
   state: {
+    allAnswers: [],
     isCorrect: true,
-    step: {
-      current: 1
-    },
     nextContent: {
       type: 'slide',
       ref: 'sli_NJ3m5KtWh'
     },
-    pendingSlides: []
+    pendingSlides: [],
+    slides: [],
+    step: {
+      current: 1
+    }
   }
 };
 

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

@@ -9,12 +9,15 @@ export const services: Services = {
         slidesToReview: 2,
         name: 'skill-test',
         custom: false
+        // TODO parentContentTitle
       },
       {
         skillRef: '_skill-ref-2',
         slidesToReview: 2,
         name: 'skill-test-2',
-        custom: true
+        custom: true,
+        parentContentTitle: 'parentContentTitle 2'
+        // TODO parentContentTitle
       }
     ]);
   },
@@ -24,15 +27,24 @@ export const services: Services = {
   postProgression: () => {
     return Promise.resolve({
       _id: '62b1d1087aa12f00253f40ee',
+      content: {
+        ref: '_skill-ref',
+        type: 'skill'
+      },
+      engine: {
+        ref: 'review'
+      },
       state: {
-        pendingSlides: [],
-        step: {
-          current: 1
-        },
+        allAnswers: [],
         isCorrect: true,
         nextContent: {
           ref: 'sli_N1XACJobn',
           type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+          current: 1
         }
       }
     });

package/src/types/common.ts

@@ -1,4 +1,5 @@
-import {UISlide} from './slides';
+import {SlideIndexes} from '../common';
+import {AnswerUI} from './slides';
 
 // TODO use type from components
 type TemplateContextValues = {
@@ -83,22 +84,36 @@ export type SlideFromAPI = {
   tips?: string;
   clue?: string;
   hasClue?: boolean;
-  id?: string;
+  id: string;
+};
+
+type ProgressionAnswerItem = {
+  isCorrect: boolean;
+  slideRef: string;
+  answer: string[];
+};
+
+export type ProgressionState = {
+  allAnswers: ProgressionAnswerItem[];
+  content?: {
+    ref: string;
+    type: string;
+  };
+  isCorrect: boolean;
+  nextContent: {
+    type: 'success' | 'slide';
+    ref: 'successExitNode' | string;
+  };
+  pendingSlides: string[];
+  slides: string[];
+  step: {
+    current: number;
+  };
 };
 
 export type ProgressionFromAPI = {
   _id: string;
-  state: {
-    isCorrect: boolean;
-    step: {
-      current: number;
-    };
-    nextContent: {
-      type: 'success' | 'slide';
-      ref: 'successExitNode' | string;
-    };
-    pendingSlides: [];
-  };
+  state: ProgressionState;
 };
 
 export type Skill = {
@@ -137,31 +152,33 @@ export type JWT = {
   host: string;
 };
 
-// -----------------------------------------------------------------------------
 type SlideUIAnimations = 'unstack' | 'restack';
-export type Slide = UISlide & {
+
+export type NextUISlide = {
+  questionText?: string;
+  answerUI?: AnswerUI;
   hidden?: boolean;
-  position: number;
+  position?: number;
   animationType?: SlideUIAnimations;
   isCorrect?: boolean;
   endReview?: boolean;
-  nextContent?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextContent'>;
 };
 
-const ICON_VALUES = {
-  right: 'right',
-  wrong: 'wrong',
-  'no-answer': 'no-answer'
-} as const;
+export type UISlide = {
+  questionText?: string;
+  answerUI?: AnswerUI;
+  hidden?: boolean;
+  position: number;
+  animationType?: SlideUIAnimations;
+  isCorrect?: boolean;
+  endReview?: boolean;
+  nextContent?: NextUISlide;
+};
 
-export type IconValue = keyof typeof ICON_VALUES;
 export type FinishedSlides = {
-  slideNumbers: number[];
-  [key: number]: true;
+  [key in SlideIndexes]?: true;
 };
 
-// -----------------------------------------------------------------------------
-
 export type WithRequired<T, K extends keyof T> = T & {
   // the "-" is a Mapping Modifier, removes optionality from a prop
   [P in K]-?: T[P];

package/src/types/slides.ts

@@ -94,8 +94,3 @@ export type AnswerUI = {
 };
 
 export type SlideUIAnimations = 'unstack' | 'restack';
-
-export type UISlide = {
-  questionText?: string;
-  answerUI?: AnswerUI;
-};

package/src/types/views/slides.ts

@@ -2,21 +2,58 @@
 import type {StoreState} from '../../reducers';
 import {Dispatchers} from '../../actions';
 
+const ICON_VALUES = {
+  right: 'right',
+  wrong: 'wrong',
+  'no-answer': 'no-answer'
+} as const;
+
+type IconValue = keyof typeof ICON_VALUES;
+
+type StepItem = {
+  current: boolean;
+  icon: IconValue;
+  value: string;
+};
+
+type CorrectionPopinProps = {
+  klf: {
+    label: string;
+    onClick: Function;
+    tooltip: string;
+  };
+  information: {
+    label: string;
+    message: string;
+  };
+  next: {
+    label: string;
+    ariaLabel: string;
+  };
+  successLabel: string;
+  failureLabel: string;
+};
+
 type SlidesViewStaticProps = {
-  slides: StoreState['data']['slides'];
-  headerProps: {
+  header: {
     mode: string;
     skillName: string;
     onQuitClick: Function;
     'aria-label'?: string;
     closeButtonAriaLabel: string;
+    steps: StepItem[];
   };
-  finishedSlides: StoreState['ui']['finishedSlides'];
-  stepItems: StoreState['ui']['stepItems'];
-  reviewStatus: StoreState['ui']['reviewStatus'];
-  validate: {
-    label: string;
+  stack: {
+    slides: StoreState['ui']['slides'];
+    validateButton: {
+      label: string;
+      disabled: boolean;
+      onClick: Function;
+    };
+    correctionPopinProps?: CorrectionPopinProps;
+    endReview: boolean;
   };
+  reviewBackgroundAriaLabel?: string;
   congratsProps?: {
     'aria-label'?: string;
     'data-name'?: string;
@@ -37,29 +74,17 @@ type SlidesViewStaticProps = {
       type: string;
     };
   };
-  correctionPopinProps?: {
-    klf: {
-      label: string;
-      onClick: Function;
-      tooltip: string;
-    };
-    information: {
-      label: string;
-      message: string;
-    };
-    next: {
-      label: string;
-      ariaLabel: string;
-    };
-    successLabel: string;
-    failureLabel: string;
-  };
-  reviewBackgroundAriaLabel?: string;
-  progression: StoreState['data']['progression'];
 };
 
 type SlidesViewDispatcherProps = Omit<Dispatchers, 'navigateTo' | 'navigateBack'>;
 
 type SlidesViewProps = SlidesViewStaticProps & SlidesViewDispatcherProps;
 
-export {SlidesViewStaticProps, SlidesViewDispatcherProps, SlidesViewProps};
+export {
+  CorrectionPopinProps,
+  IconValue,
+  SlidesViewStaticProps,
+  SlidesViewDispatcherProps,
+  SlidesViewProps,
+  StepItem
+};

package/src/views/skills/index.ts

@@ -0,0 +1,56 @@
+import {StoreState} from '../../reducers';
+
+type SkillCard = {
+  'aria-label': string;
+  skillTitle: string;
+  skillAriaLabel: string;
+  buttonLabel: string;
+  buttonAriaLabel: string;
+  reviseLabel: string;
+  reviseAriaLabel: string;
+  isCustom: boolean;
+  onClick: Function;
+};
+
+type NoSkillsProps = {
+  titleNoSkills: string;
+  textNoSkills: string;
+  iconSkillAriaLabel: string;
+};
+
+type SkillsProps = NoSkillsProps & {
+  'aria-label'?: string;
+  title: string;
+  isLoading?: boolean;
+  isLoadingAriaLabel: string;
+  listSkills: SkillCard[];
+};
+
+export {SkillsProps};
+
+export const mapStateToSkillsProps = (state: StoreState): SkillsProps | null => {
+  if (!state.data.skills) {
+    return null;
+  }
+
+  return {
+    title: '@todo title',
+    titleNoSkills: '@todo titleNoSkills',
+    textNoSkills: '@todo textNoSkills',
+    iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+    isLoading: false,
+    isLoadingAriaLabel: '@todo loading',
+    listSkills: state.data.skills.map(skill => ({
+      'aria-label': '',
+      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',
+      // eslint-disable-next-line no-console
+      onClick: () => console.log('@todo plug dispatcher select skill')
+    }))
+  };
+};

package/src/views/slides/index.ts

@@ -0,0 +1,92 @@
+import isEmpty from 'lodash/fp/isEmpty';
+import {StoreState} from '../../reducers';
+import {SlidesViewStaticProps, StepItem} from '../../types/views/slides';
+
+const buildStepItemps = (state: StoreState): StepItem[] => {
+  const {progression} = state.data;
+  const {currentSlideRef} = state.ui;
+  if (!progression) return [];
+
+  const defaultProps: StepItem[] = [
+    {
+      icon: 'no-answer',
+      current: true,
+      value: '1'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '2'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '3'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '4'
+    },
+    {
+      icon: 'no-answer',
+      current: false,
+      value: '5'
+    }
+  ];
+
+  const allAnswers = progression.state.allAnswers;
+  const step = progression.state.step;
+  if (isEmpty(allAnswers)) return defaultProps;
+
+  const steps = defaultProps.map((stepItem, index): StepItem => {
+    const givenAnswer = allAnswers[index];
+    if (!givenAnswer) {
+      return {
+        ...stepItem,
+        current: step.current === index + 1
+      };
+    }
+
+    return {
+      ...stepItem,
+      icon: givenAnswer.isCorrect ? 'right' : 'wrong',
+      current: givenAnswer.slideRef === currentSlideRef
+    };
+  });
+  return steps;
+};
+
+export const mapStateToSlidesProps = (state: StoreState): SlidesViewStaticProps | null => {
+  if (!state.data.slides) {
+    return null;
+  }
+
+  return {
+    header: {
+      mode: '__revision_mode',
+      skillName: '__agility',
+      onQuitClick: (): void => {
+        // eslint-disable-next-line no-console
+        console.log('onQuitClick');
+      },
+      'aria-label': 'aria-header-wrapper',
+      closeButtonAriaLabel: 'aria-close-button',
+      steps: buildStepItemps(state)
+    },
+    stack: {
+      slides: state.ui.slides,
+      validateButton: {
+        label: '__validate',
+        disabled: true,
+        onClick: (): void => {
+          // eslint-disable-next-line no-console
+          console.log('TODO: validate question');
+        }
+      },
+      correctionPopinProps: undefined,
+      endReview: false
+    },
+    congratsProps: undefined
+  };
+};

package/es/actions/data/slides.d.ts

@@ -1,37 +0,0 @@
-import { UISlide } from '../../types/slides';
-import { ReceivedSlide } from '../api/fetch-slide';
-export declare const UPDATE_SLIDES_ON_VALIDATION = "@@slide/UPDATE_SLIDES_ON_VALIDATION";
-export declare const UPDATE_SLIDES_ON_NEXT = "@@slide/UPDATE_SLIDES_ON_NEXT";
-export declare const VALIDATE_SLIDE = "@@slide/VALIDATE";
-declare type SlideUIAnimations = 'unstack' | 'restack';
-export declare type Slide = UISlide & {
-    hidden?: boolean;
-    position: number;
-    animationType?: SlideUIAnimations;
-    isCorrect?: boolean;
-    endReview?: boolean;
-    nextContent?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextContent'>;
-};
-export declare type ValidationPayload = {
-    slideNumber: number;
-    newSlideContent: Slide;
-    numberOfFinishedSlides: number;
-    nextContent: Slide;
-};
-export declare type OnNextPayload = Omit<ValidationPayload, 'nextContent'>;
-export declare type UpdateSlidesOnValidation = {
-    type: typeof UPDATE_SLIDES_ON_VALIDATION;
-    payload: ValidationPayload;
-};
-export declare type UpdateSlidesOnNext = {
-    type: typeof UPDATE_SLIDES_ON_NEXT;
-    payload: OnNextPayload;
-};
-export declare type ValidateSlide = {
-    type: typeof VALIDATE_SLIDE;
-};
-export declare type SlidesAction = ReceivedSlide | UpdateSlidesOnValidation | UpdateSlidesOnNext;
-export declare const updateSlidesOnValidation: (payload: ValidationPayload) => UpdateSlidesOnValidation;
-export declare const updateSlidesOnNext: (payload: OnNextPayload) => UpdateSlidesOnNext;
-export declare const validateSlide: () => ValidateSlide;
-export {};

package/es/actions/data/slides.js

@@ -1,16 +0,0 @@
-// -----------------------------------------------------------------------------
-export const UPDATE_SLIDES_ON_VALIDATION = '@@slide/UPDATE_SLIDES_ON_VALIDATION';
-export const UPDATE_SLIDES_ON_NEXT = '@@slide/UPDATE_SLIDES_ON_NEXT';
-export const VALIDATE_SLIDE = '@@slide/VALIDATE';
-// -----------------------------------------------------------------------------
-export const updateSlidesOnValidation = (payload) => ({
-    type: UPDATE_SLIDES_ON_VALIDATION,
-    payload
-});
-export const updateSlidesOnNext = (payload) => ({
-    type: UPDATE_SLIDES_ON_NEXT,
-    payload
-});
-export const validateSlide = () => ({
-    type: VALIDATE_SLIDE
-});

package/es/actions/ui/finished-slides.d.ts

@@ -1,10 +0,0 @@
-export declare type FinishedSlide = {
-    slideNumber: number;
-    value: true;
-};
-export declare const UPDATE_FINISHED_SLIDES = "@@finished-slides/UPDATE_FINISHED_SLIDES";
-export declare type UpdateFinishedSlides = {
-    type: typeof UPDATE_FINISHED_SLIDES;
-    payload: FinishedSlide;
-};
-export declare const updateFinishedSlides: (payload: FinishedSlide) => UpdateFinishedSlides;

package/es/actions/ui/finished-slides.js

@@ -1,8 +0,0 @@
-// Stores only successful slides
-// -----------------------------------------------------------------------------
-export const UPDATE_FINISHED_SLIDES = '@@finished-slides/UPDATE_FINISHED_SLIDES';
-// -----------------------------------------------------------------------------
-export const updateFinishedSlides = (payload) => ({
-    type: UPDATE_FINISHED_SLIDES,
-    payload
-});

package/es/actions/ui/review-status.d.ts

@@ -1,7 +0,0 @@
-export declare const UPDATE_REVIEW_STATUS = "@@review-status/UPDATE_REVIEW_STATUS";
-export declare type FinishedStatus = 'finished';
-export declare type UpdateReviewStatus = {
-    type: typeof UPDATE_REVIEW_STATUS;
-    payload: FinishedStatus;
-};
-export declare const updateReviewStatus: (payload: FinishedStatus) => UpdateReviewStatus;

package/es/actions/ui/review-status.js

@@ -1,7 +0,0 @@
-// -----------------------------------------------------------------------------
-export const UPDATE_REVIEW_STATUS = '@@review-status/UPDATE_REVIEW_STATUS';
-// -----------------------------------------------------------------------------
-export const updateReviewStatus = (payload) => ({
-    type: UPDATE_REVIEW_STATUS,
-    payload
-});

package/es/actions/ui/step-items.d.ts

@@ -1,24 +0,0 @@
-import { FinishedSlides, IconValue } from '../../types/common';
-export declare const UPDATE_STEP_ITEMS_ON_VALIDATION = "@@step-items/UPDATE_STEP_ITEMS_ON_VALIDATION";
-export declare const UPDATE_STEP_ITEMS_ON_NEXT = "@@step-items/UPDATE_STEP_ITEMS_ON_NEXT";
-declare type UpdateStepItemsOnValidationClickPayload = {
-    stepNumber: number;
-    icon: IconValue;
-};
-declare type UpdateStepItemsOnNextClickPayload = {
-    stepNumber: number;
-    finishedSlides: FinishedSlides;
-    current: boolean;
-};
-export declare type UpdateStepItemsOnValidation = {
-    type: typeof UPDATE_STEP_ITEMS_ON_VALIDATION;
-    payload: UpdateStepItemsOnValidationClickPayload;
-};
-export declare type UpdateStepItemsOnNext = {
-    type: typeof UPDATE_STEP_ITEMS_ON_NEXT;
-    payload: UpdateStepItemsOnNextClickPayload;
-};
-export declare type StepItemsAction = UpdateStepItemsOnValidation | UpdateStepItemsOnNext;
-export declare const updateStepItemsOnValidation: (payload: UpdateStepItemsOnValidationClickPayload) => UpdateStepItemsOnValidation;
-export declare const updateStepItemsOnNext: (payload: UpdateStepItemsOnNextClickPayload) => UpdateStepItemsOnNext;
-export {};

package/es/actions/ui/step-items.js

@@ -1,11 +0,0 @@
-export const UPDATE_STEP_ITEMS_ON_VALIDATION = '@@step-items/UPDATE_STEP_ITEMS_ON_VALIDATION';
-export const UPDATE_STEP_ITEMS_ON_NEXT = '@@step-items/UPDATE_STEP_ITEMS_ON_NEXT';
-// -----------------------------------------------------------------------------
-export const updateStepItemsOnValidation = (payload) => ({
-    type: UPDATE_STEP_ITEMS_ON_VALIDATION,
-    payload
-});
-export const updateStepItemsOnNext = (payload) => ({
-    type: UPDATE_STEP_ITEMS_ON_NEXT,
-    payload
-});

package/es/reducers/ui/finished-slides.d.ts

@@ -1,7 +0,0 @@
-import { UpdateFinishedSlides } from '../../actions/ui/finished-slides';
-export declare type FinishedSlidesState = {
-    slideNumbers: number[];
-    [key: number]: true;
-};
-declare const reducer: (state: FinishedSlidesState | undefined, action: UpdateFinishedSlides) => FinishedSlidesState;
-export default reducer;

package/es/reducers/ui/finished-slides.js

@@ -1,33 +0,0 @@
-import forEach from 'lodash/fp/forEach';
-import { UPDATE_FINISHED_SLIDES } from '../../actions/ui/finished-slides';
-import { slideNumbers } from '../../common';
-const initialState = {
-    slideNumbers
-};
-const _forEach = forEach.convert({
-    cap: false
-});
-// -----------------------------------------------------------------------------
-const reducer = (
-// eslint-disable-next-line default-param-last
-state = initialState, action) => {
-    switch (action.type) {
-        case UPDATE_FINISHED_SLIDES: {
-            const { slideNumbers: _slideNumbers, ...rest } = state;
-            const { slideNumber, value } = action.payload;
-            const _state = {
-                slideNumbers: _slideNumbers
-            };
-            _forEach((finishedSlide, index) => {
-                const previousValue = finishedSlide;
-                _state[index] = previousValue;
-            }, rest);
-            _state[slideNumber] = value;
-            return _state;
-        }
-        default:
-            return state;
-    }
-};
-// -----------------------------------------------------------------------------
-export default reducer;

package/es/reducers/ui/review-status.d.ts

@@ -1,4 +0,0 @@
-import { UpdateReviewStatus } from '../../actions/ui/review-status';
-export declare type ReviewStatusState = 'finished' | 'ongoing';
-declare const reducer: (state: ReviewStatusState | undefined, action: UpdateReviewStatus) => ReviewStatusState;
-export default reducer;

package/es/reducers/ui/step-items.d.ts

@@ -1,14 +0,0 @@
-import { IconValue } from '../../types/common';
-import { StepItemsAction } from '../../actions/ui/step-items';
-export declare type StepItem = {
-    current: boolean;
-    icon: IconValue;
-    value: string;
-};
-export declare type StepItemsState = {
-    slideNumbers: number[];
-    [key: number]: StepItem;
-};
-export declare const initialState: StepItemsState;
-declare const reducer: (state: StepItemsState | undefined, action: StepItemsAction) => StepItemsState;
-export default reducer;