@magmamath/students-features 0.6.5 → 0.6.6-rc.1

package/src/features/gifCelebrations/helpers.ts

@@ -0,0 +1,75 @@
+import { TranslationKeys } from 'src/shared/translation/types'
+import { GifsGroups, GifsStructure, GroupNumber } from './types/model.types'
+
+/**
+ * Number of problems	When we show gif
+ * <6	Never
+ * 7-12	50% completion
+ * 13-18	33%, 66% completion
+ * 19-24	25%, 50%, 75 completion
+ * 25-30	20%, 40%, 60%, 80% completion
+ * .>30	15%, 30%, 45%, 60%, 75% completion
+ *
+ * We are also going to have different buckets with different gifs. The logic is as follows:
+ * Group 1: 15%, 20%, 25%, 30% - Early celebrations
+ * Group 2: 33%, 40%, 45%, 50% - Mid celebrations
+ * Group 3: 60%, 66%, 75%, 80% - Party
+ */
+export const calculatePercentageTable = (totalProblems: number) => {
+  if (totalProblems <= 12) return { 50: Math.ceil(totalProblems * 0.5) }
+
+  if (totalProblems <= 18) {
+    return {
+      33: Math.ceil(totalProblems * 0.33),
+      66: Math.ceil(totalProblems * 0.66),
+    }
+  }
+
+  if (totalProblems <= 24) {
+    return {
+      25: Math.ceil(totalProblems * 0.25),
+      50: Math.ceil(totalProblems * 0.5),
+      75: Math.ceil(totalProblems * 0.75),
+    }
+  }
+
+  if (totalProblems <= 30) {
+    return {
+      20: Math.ceil(totalProblems * 0.2),
+      40: Math.ceil(totalProblems * 0.4),
+      60: Math.ceil(totalProblems * 0.6),
+      80: Math.ceil(totalProblems * 0.8),
+    }
+  }
+
+  return {
+    15: Math.ceil(totalProblems * 0.15),
+    30: Math.ceil(totalProblems * 0.3),
+    45: Math.ceil(totalProblems * 0.45),
+    60: Math.ceil(totalProblems * 0.6),
+    75: Math.ceil(totalProblems * 0.75),
+  }
+}
+
+export const generateGifsStructure = (gifs: GifsGroups): GifsStructure =>
+  Object.fromEntries(
+    Object.entries(gifs).map(([key, value]) => [
+      key,
+      value.map((url) => ({
+        url,
+        isShown: false,
+        group: key as `group${GroupNumber}`,
+      })),
+    ]),
+  )
+
+export const getGifLabel = (relatedGroup: GroupNumber): TranslationKeys => {
+  if (relatedGroup === 2) {
+    return 'gifCelebrations.onTheWay'
+  }
+  if (relatedGroup === 3) {
+    return 'gifCelebrations.almostThere'
+  }
+
+  return 'gifCelebrations.greatStart'
+}

package/src/features/gifCelebrations/index.ts

@@ -0,0 +1,2 @@
+export { GifCelebrations } from './GifCelebrations'
+export { GifCelebrationsModel } from './model/GifCelebrations.model'

package/src/features/gifCelebrations/model/GifCelebrations.cache.ts

@@ -0,0 +1,43 @@
+import { createEffect, createEvent, createStore } from 'effector'
+import {
+  GifsGroups,
+  GifsStructure,
+  CustomPrefetchMethod,
+  CustomGetCachePathMethod,
+} from '../types/model.types'
+import { generateGifsStructure } from '../helpers'
+import { Image } from 'react-native'
+
+type GifCelebrationsCacheProps = {
+  customPrefetchMethod?: CustomPrefetchMethod
+  customGetCachePathMethod?: CustomGetCachePathMethod
+}
+
+export class GifCelebrationsCache {
+  public readonly initialSet = createEvent<GifsGroups>()
+  public readonly set = createEvent<GifsStructure>()
+  public readonly reset = createEvent()
+
+  public readonly prefetchMethod: CustomPrefetchMethod | typeof Image.prefetch
+  public readonly getCachePathMethod?: CustomGetCachePathMethod
+
+  public readonly prefetchGifs = createEffect<GifsGroups, void>((data) => {
+    Object.values(data).forEach((group) => {
+      group.forEach((gifUrl) => {
+        Image.prefetch(gifUrl)
+      })
+    })
+
+    this.initialSet(data)
+  })
+
+  public readonly $gifs = createStore<GifsStructure | null>(null)
+    .reset(this.reset)
+    .on(this.initialSet, (_, gifs) => generateGifsStructure(gifs))
+    .on(this.set, (_, gifs) => gifs)
+
+  constructor({ customPrefetchMethod, customGetCachePathMethod }: GifCelebrationsCacheProps) {
+    this.prefetchMethod = customPrefetchMethod || Image.prefetch
+    this.getCachePathMethod = customGetCachePathMethod
+  }
+}

package/src/features/gifCelebrations/model/GifCelebrations.model.ts

@@ -0,0 +1,174 @@
+import { createEffect, createEvent, createStore, sample, Store } from 'effector'
+import { GifCelebrationsApi } from './GifCelebrationsApi'
+import {
+  GifCelebrationsModelProps,
+  GifObject,
+  GifsStructure,
+  GroupNumber,
+  ProblemsPercentageTable,
+} from '../types/model.types'
+import { GifCelebrationsCache } from './GifCelebrations.cache'
+import { calculatePercentageTable } from '../helpers'
+import { GROUPS_PERCENTAGES, MIN_PROBLEMS_TO_SHOW_GIF } from '../constants'
+
+type HandleGifSelectionProps = {
+  gifsGroups: GifsStructure
+  resolvedProblem: number
+  problemsPercentageTable: ProblemsPercentageTable
+}
+
+export class GifCelebrationsModel {
+  public readonly api: GifCelebrationsApi
+  public readonly cache: GifCelebrationsCache
+
+  public readonly $totalProblems: Store<number>
+  public readonly $resolvedProblems: Store<number>
+
+  public readonly triggerPlay = createEvent()
+  public readonly stop = createEvent()
+
+  public readonly resetIsGifCelebrationMayBeTriggered = createEvent()
+  public readonly setIsGifCelebrationMayBeTriggered = createEvent<boolean>()
+  public readonly $isGifCelebrationMayBeTriggered = createStore<boolean>(false)
+    .reset(this.resetIsGifCelebrationMayBeTriggered)
+    .reset(this.stop)
+    .on(
+      this.setIsGifCelebrationMayBeTriggered,
+      (_, isGifCelebrationMayBeTriggered) => isGifCelebrationMayBeTriggered,
+    )
+
+  public readonly resetPercentageTable = createEvent()
+  public readonly $problemsPercentageTable = createStore<ProblemsPercentageTable | null>(
+    null,
+  ).reset(this.resetPercentageTable)
+
+  public readonly setActiveGif = createEvent<GifObject>()
+  public readonly $activeGif = createStore<GifObject | null>(null)
+    .reset(this.stop)
+    .reset(this.resetIsGifCelebrationMayBeTriggered)
+    .on(this.setActiveGif, (_, gif) => gif)
+
+  public readonly initialize = createEvent()
+  public readonly resetGroupGifs = createEvent<string>()
+
+  constructor({
+    api,
+    totalProblems,
+    resolvedProblems,
+    customPrefetchMethod,
+    customGetCachePathMethod,
+  }: GifCelebrationsModelProps) {
+    this.api = new GifCelebrationsApi(api)
+    this.cache = new GifCelebrationsCache({ customPrefetchMethod, customGetCachePathMethod })
+
+    this.$totalProblems = totalProblems
+    this.$resolvedProblems = resolvedProblems
+
+    this.setupEventHandlers()
+  }
+
+  private setupEventHandlers() {
+    sample({
+      source: this.api.getGifsFx.doneData,
+      filter: (response) => response.ok,
+      fn: (response) => response.data,
+      target: this.cache.prefetchGifs,
+    })
+
+    sample({
+      clock: this.initialize,
+      source: this.cache.$gifs,
+      filter: (gifs) => !gifs,
+      target: this.api.getGifsFx,
+    })
+
+    sample({
+      //todo: fix types
+      //@ts-ignore
+      clock: [this.initialize, this.$totalProblems.updates],
+      source: this.$totalProblems,
+      filter: (totalProblems) => totalProblems && totalProblems >= MIN_PROBLEMS_TO_SHOW_GIF,
+      fn: (totalProblems) => calculatePercentageTable(totalProblems),
+      target: this.$problemsPercentageTable,
+    })
+
+    sample({
+      clock: this.triggerPlay,
+      source: {
+        isGifCelebrationMayBeTriggered: this.$isGifCelebrationMayBeTriggered,
+        gifsGroups: this.cache.$gifs,
+        resolvedProblem: this.$resolvedProblems,
+        problemsPercentageTable: this.$problemsPercentageTable,
+      },
+      filter: ({
+        isGifCelebrationMayBeTriggered,
+        gifsGroups,
+        resolvedProblem,
+        problemsPercentageTable,
+      }) =>
+        !!(
+          isGifCelebrationMayBeTriggered &&
+          gifsGroups &&
+          resolvedProblem !== undefined &&
+          problemsPercentageTable
+        ),
+      fn: (sources) => sources as HandleGifSelectionProps,
+      target: this.handleGifSelection,
+    })
+  }
+
+  private readonly handleGifSelection = createEffect(
+    ({ gifsGroups, resolvedProblem, problemsPercentageTable }: HandleGifSelectionProps) => {
+      const percentageMilestone = Object.keys(problemsPercentageTable).find(
+        (key) => problemsPercentageTable[Number(key)] === resolvedProblem,
+      )
+
+      if (!percentageMilestone) return null
+
+      const groupName = this.findGroupForPercentage(Number(percentageMilestone)) as
+        | `group${GroupNumber}`
+        | undefined
+      if (!groupName) return null
+
+      const gifsForGroup = gifsGroups[groupName]
+      if (!gifsForGroup || gifsForGroup.length === 0) return null
+
+      const unusedGifIndex = gifsForGroup.findIndex((gif) => !gif.isShown)
+
+      if (unusedGifIndex === -1) {
+        const updatedGifsGroups = { ...gifsGroups }
+        updatedGifsGroups[groupName] = gifsGroups[groupName].map((gif) => ({
+          ...gif,
+          isShown: false,
+        }))
+        const gifObject: GifObject = {
+          ...updatedGifsGroups[groupName][0],
+          isShown: true,
+        }
+        updatedGifsGroups[groupName][0].isShown = true
+
+        this.setActiveGif(gifObject)
+        this.cache.set(updatedGifsGroups)
+      }
+
+      const selectedGif = gifsForGroup[unusedGifIndex]
+
+      const gifObject: GifObject = {
+        ...selectedGif,
+        isShown: true,
+      }
+
+      const updatedGifsGroups = { ...gifsGroups }
+      updatedGifsGroups[groupName][unusedGifIndex].isShown = true
+      this.cache.set(updatedGifsGroups)
+
+      this.setActiveGif(gifObject)
+    },
+  )
+
+  private findGroupForPercentage(percentage: number): string | undefined {
+    return Object.keys(GROUPS_PERCENTAGES).find((key) =>
+      GROUPS_PERCENTAGES[key as keyof typeof GROUPS_PERCENTAGES].includes(percentage),
+    )
+  }
+}

package/src/features/gifCelebrations/model/GifCelebrationsApi.ts

@@ -0,0 +1,10 @@
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+import { GifCelebrationApiRequests } from '../types/model.types'
+
+export class GifCelebrationsApi {
+  public readonly getGifsFx
+
+  constructor(api: GifCelebrationApiRequests) {
+    this.getGifsFx = createControllerEffect(api.getGifs)
+  }
+}

package/src/features/gifCelebrations/types/model.types.ts

@@ -0,0 +1,50 @@
+import { Store } from 'effector'
+
+export type CustomPrefetchMethod = (gifs: string[] | string) => Promise<unknown>
+export type CustomGetCachePathMethod = (uri: string) => Promise<string | null>
+
+export type GroupNumber = number
+
+export type GifCelebrationApiRequests = {
+  getGifs: () => Promise<GifResponse>
+}
+export type GifCelebrationCache = {
+  prefetchMethod?: CustomPrefetchMethod
+}
+
+export type GifCelebrationsModelProps = {
+  api: GifCelebrationApiRequests
+  totalProblems: Store<number>
+  resolvedProblems: Store<number>
+  customPrefetchMethod?: CustomPrefetchMethod
+  customGetCachePathMethod?: CustomGetCachePathMethod
+}
+
+export type GifsGroup = string[]
+export type GifsGroups = Record<`group${GroupNumber}`, GifsGroup>
+
+export type GifObject = {
+  url: string
+  isShown: boolean
+  group: `group${GroupNumber}`
+}
+
+export type GifsStructure = Record<`group${GroupNumber}`, GifObject[]>
+/**
+ * Usually, the response contains 3 groups of gifs:
+ * - group1: early celebrations
+ * - group2: mid celebrations
+ * - group3: party
+ */
+export type GifResponse = {
+  data: GifsGroups
+  ok: boolean
+}
+export type GifsPayload = {
+  group: number
+}
+
+export type ProblemsPercentageTable = Record<number, number>
+export type ProgressValue = 0 | 1 | 2
+
+export type TextComponentType = (text: string) => React.ReactNode

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './features/celebrations'
 export * from './features/endOfAssignment'
 export * from './features/formulaSheet'
 export * from './features/problemSelector'
+export * from './features/gifCelebrations'

package/src/lib/helpers/helpers.ts

@@ -1,6 +1,6 @@
 import { getText } from '../../shared/translation/helpers'
 
-export const noop = () => {};
+export const noop = () => {}
 
 export const generateRandomId = () =>
   Date.now().toString(36) + Math.random().toString(36).substring(2)

package/src/react-app-env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.svg'
+declare module '*.jpeg'
+declare module '*.jpg'
+declare module '*.webp'

package/src/shared/translation/localization/en.json

@@ -18,5 +18,10 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error"
+  },
+  "gifCelebrations": {
+    "greatStart": "Great start!",
+    "onTheWay": "On the way!",
+    "almostThere": "Almost there"
   }
 }

package/src/shared/translation/localization/gb.json

@@ -18,5 +18,10 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error"
+  },
+  "gifCelebrations": {
+    "greatStart": "Great start!",
+    "onTheWay": "On the way!",
+    "almostThere": "Almost there"
   }
 }

package/src/shared/translation/localization/sw.json

@@ -18,5 +18,10 @@
     "errorMessage": "Något gick snett! Försök igen",
     "howCanIHelp": "Hej! Hur kan jag hjälpa dig?",
     "showError": "Visa fel"
+  },
+  "gifCelebrations": {
+    "greatStart": "Bra start!",
+    "onTheWay": "På god väg!",
+    "almostThere": "Nästan där"
   }
 }