@magmamath/students-features 0.6.6-rc.10 → 0.6.6-rc.13

package/src/features/gifCelebrations/helpers.ts

@@ -4,7 +4,8 @@ import {
   GifsGroups,
   GifsStructure,
   GroupNumber,
-  ProblemsPercentageTable,
+  GroupNumberString,
+  ProblemsGifsTable,
 } from './types/model.types'
 import { MIN_WIDTH_FOR_ONE_DIGIT, MIN_WIDTH_FOR_TWO_DIGITS } from './constants'
 import { Image } from 'react-native'
@@ -27,40 +28,49 @@ import { Image } from 'react-native'
  * Group 2: >30% <60% - Mid celebrations
  * Group 3: >=60% - Party
  */
-export const calculatePercentageTable = (totalProblems: number): ProblemsPercentageTable => {
-  if (totalProblems <= 12) return { 50: Math.ceil(totalProblems * 0.5) }
+export const generateProblemsGifsTable = (
+  totalProblems: number,
+  resolvedProblems: number,
+  gifs: GifsStructure,
+): ProblemsGifsTable => {
+  const percentageMilestones = getPercentageMilestones(totalProblems)
 
-  if (totalProblems <= 18) {
-    return {
-      33: Math.ceil(totalProblems * 0.33),
-      66: Math.ceil(totalProblems * 0.66),
-    }
-  }
+  const result: ProblemsGifsTable = {}
 
-  if (totalProblems <= 24) {
-    return {
-      25: Math.ceil(totalProblems * 0.25),
-      50: Math.ceil(totalProblems * 0.5),
-      75: Math.ceil(totalProblems * 0.75),
-    }
-  }
+  for (const percentage of percentageMilestones) {
+    const problemNumber = Math.ceil(totalProblems * (percentage / 100))
+
+    if (problemNumber <= resolvedProblems) continue
 
-  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),
+    const groupKey = findGroupForPercentage(percentage)
+    const gifsInGroup = gifs[groupKey]
+
+    if (!gifsInGroup || gifsInGroup.length === 0) continue
+
+    const unshownGif = gifsInGroup.find((gif) => !gif.isShown)
+
+    const selectedGif = unshownGif || gifsInGroup[0]
+
+    if (selectedGif) {
+      result[problemNumber] = {
+        url: selectedGif.url,
+        group: groupKey,
+      }
     }
   }
 
-  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),
-  }
+  return result
+}
+const getPercentageMilestones = (totalProblems: number): number[] => {
+  if (totalProblems <= 12) return [50]
+
+  if (totalProblems <= 18) return [33, 66]
+
+  if (totalProblems <= 24) return [25, 50, 75]
+
+  if (totalProblems <= 30) return [20, 40, 60, 80]
+
+  return [15, 30, 45, 60, 75]
 }
 
 export const generateGifsStructure = (gifs: GifsGroups): GifsStructure =>
@@ -70,7 +80,7 @@ export const generateGifsStructure = (gifs: GifsGroups): GifsStructure =>
       value.map((url) => ({
         url,
         isShown: false,
-        group: key as `group${GroupNumber}`,
+        group: key as GroupNumberString,
       })),
     ]),
   )
@@ -121,3 +131,14 @@ export const getImagePath = async (url: string, cacheMethod?: CustomGetCachePath
 
 export const constrainDimension = (value: number, min: number, max: number) =>
   Math.max(min, Math.min(max, value))
+
+export const shouldRefreshGifs = (timestamp: string | null): boolean => {
+  if (!timestamp) return true
+
+  const REFRESH_INTERVAL_HOURS = 24
+  const lastFetchedDate = new Date(timestamp)
+  const currentDate = new Date()
+  const diffInHours = (currentDate.getTime() - lastFetchedDate.getTime()) / (1000 * 60 * 60)
+
+  return diffInHours > REFRESH_INTERVAL_HOURS
+}

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

@@ -32,6 +32,8 @@ export class GifCelebrationsCache {
   })
 
   public readonly prefetchGifs = createEffect<string[], void>((gifs) => {
+    if (!gifs || gifs.length === 0) return
+
     gifs.forEach((gifUrl) => {
       this.prefetchMethod(gifUrl)
     })

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

@@ -1,19 +1,20 @@
-import { createEffect, createEvent, createStore, sample, Store } from 'effector'
+import { createEffect, createEvent, createStore, merge, sample, Store } from 'effector'
 import { GifCelebrationsApi } from './GifCelebrationsApi'
 import {
+  CustomLocalStorage,
   GifCelebrationsModelProps,
   GifObject,
   GifsStructure,
-  ProblemsPercentageTable,
+  ProblemsGifsTable,
 } from '../types/model.types'
 import { GifCelebrationsCache } from './GifCelebrations.cache'
-import { calculatePercentageTable, findGroupForPercentage } from '../helpers'
-import { GET_GIFS_TIMEOUT, MIN_PROBLEMS_TO_SHOW_GIF } from '../constants'
+import { generateProblemsGifsTable, shouldRefreshGifs } from '../helpers'
+import { GET_GIFS_TIMEOUT, MIN_PROBLEMS_TO_SHOW_GIF, GIFS_FETCHED_KEY } from '../constants'
 
 type HandleGifSelectionProps = {
   gifsGroups: GifsStructure
   resolvedProblem: number
-  problemsPercentageTable: ProblemsPercentageTable
+  problemsGifsTable: ProblemsGifsTable
 }
 
 export class GifCelebrationsModel {
@@ -36,10 +37,10 @@ export class GifCelebrationsModel {
       (_, isGifCelebrationMayBeTriggered) => isGifCelebrationMayBeTriggered,
     )
 
-  public readonly resetPercentageTable = createEvent()
-  public readonly $problemsPercentageTable = createStore<ProblemsPercentageTable | null>(
-    null,
-  ).reset(this.resetPercentageTable)
+  public readonly resetProblemsGifsTable = createEvent()
+  public readonly $problemsGifsTable = createStore<ProblemsGifsTable | null>(null).reset(
+    this.resetProblemsGifsTable,
+  )
 
   public readonly setActiveGif = createEvent<GifObject>()
   public readonly $activeGif = createStore<GifObject | null>(null)
@@ -47,12 +48,15 @@ export class GifCelebrationsModel {
     .reset(this.resetGifTriggerable)
     .on(this.setActiveGif, (_, gif) => gif)
 
+  private readonly localStorage: typeof localStorage | CustomLocalStorage
+
   public readonly initialize = createEvent()
 
   constructor({
     api,
     totalProblems,
     resolvedProblems,
+    customLocalStorage,
     customGetCachePathMethod,
     customPrefetchMethod,
   }: GifCelebrationsModelProps) {
@@ -62,16 +66,22 @@ export class GifCelebrationsModel {
     this.$totalProblems = totalProblems
     this.$resolvedProblems = resolvedProblems
 
+    this.localStorage = customLocalStorage || localStorage
     this.setupEventHandlers()
   }
 
-  private resendGefFxTimeout: NodeJS.Timeout | null = null
+  private failedGetGifxTimeout: NodeJS.Timeout | null = null
 
   private setupEventHandlers() {
     sample({
       clock: this.initialize,
       source: this.cache.$gifs,
-      filter: (gifs) => !gifs,
+      filter: (gifs) => {
+        if (!gifs) return true
+
+        const gifsFetchedTimestamp = this.localStorage.getItem(GIFS_FETCHED_KEY) as string | null
+        return shouldRefreshGifs(gifsFetchedTimestamp)
+      },
       target: this.api.getGifsFx,
     })
 
@@ -79,19 +89,40 @@ export class GifCelebrationsModel {
       source: this.api.getGifsFx.doneData,
       filter: (response) => response.ok,
       fn: (response) => response.data,
-      target: this.cache.prefetchAllGifs,
+      target: this.cache.initialSet,
+    })
+
+    sample({
+      source: this.api.getGifsFx.doneData,
+      filter: (response) => response.ok,
+      target: createEffect(() => {
+        this.localStorage.setItem(GIFS_FETCHED_KEY, new Date().toISOString())
+      }),
     })
 
     sample({
-      clock: [this.initialize, this.$totalProblems.updates],
-      source: this.$totalProblems,
-      fn: (totalProblems) => {
-        if (totalProblems && totalProblems >= MIN_PROBLEMS_TO_SHOW_GIF) {
-          return calculatePercentageTable(totalProblems)
-        }
-        return null
+      clock: [this.cache.$gifs, this.$totalProblems],
+      source: {
+        gifs: this.cache.$gifs,
+        totalProblems: this.$totalProblems,
+        resolvedProblems: this.$resolvedProblems,
+      },
+      filter: ({ totalProblems, gifs }) => !!(totalProblems >= MIN_PROBLEMS_TO_SHOW_GIF && gifs),
+      fn: ({ totalProblems, resolvedProblems, gifs }) => {
+        if (!gifs) return null
+        return generateProblemsGifsTable(totalProblems, resolvedProblems, gifs)
+      },
+      target: this.$problemsGifsTable,
+    })
+
+    sample({
+      source: this.$problemsGifsTable,
+      filter: (problemsGifsTable) => !!problemsGifsTable,
+      fn: (problemsGifsTable) => {
+        if (!problemsGifsTable) return []
+        return Object.values(problemsGifsTable).map((gif) => gif.url)
       },
-      target: this.$problemsPercentageTable,
+      target: this.cache.prefetchGifs,
     })
 
     sample({
@@ -100,79 +131,63 @@ export class GifCelebrationsModel {
         isGifCelebrationMayBeTriggered: this.$isGifTriggerable,
         gifsGroups: this.cache.$gifs,
         resolvedProblem: this.$resolvedProblems,
-        problemsPercentageTable: this.$problemsPercentageTable,
+        problemsGifsTable: this.$problemsGifsTable,
       },
       filter: ({
         isGifCelebrationMayBeTriggered,
         gifsGroups,
         resolvedProblem,
-        problemsPercentageTable,
+        problemsGifsTable,
       }) =>
         !!(
           isGifCelebrationMayBeTriggered &&
           gifsGroups &&
           resolvedProblem !== undefined &&
-          problemsPercentageTable
+          problemsGifsTable
         ),
       fn: (sources) => sources as HandleGifSelectionProps,
       target: this.handleGifSelection,
     })
 
     this.api.getGifsFx.fail.watch(() => {
-      this.resendGefFxTimeout = setTimeout(() => {
+      this.failedGetGifxTimeout = setTimeout(() => {
         this.api.getGifsFx()
       }, GET_GIFS_TIMEOUT)
     })
 
     this.api.getGifsFx.done.watch(() => {
-      if (this.resendGefFxTimeout) {
-        clearTimeout(this.resendGefFxTimeout)
-        this.resendGefFxTimeout = null
+      if (this.failedGetGifxTimeout) {
+        clearTimeout(this.failedGetGifxTimeout)
+        this.failedGetGifxTimeout = null
       }
     })
   }
 
   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 = findGroupForPercentage(Number(percentageMilestone))
-
-      const gifsForGroup = gifsGroups[groupName]
-      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)
-      }
+    ({ gifsGroups, resolvedProblem, problemsGifsTable }: HandleGifSelectionProps) => {
+      const gifToShow = problemsGifsTable[resolvedProblem]
+      const groupName = gifToShow.group
 
-      const selectedGif = gifsForGroup[unusedGifIndex]
+      const gifsInGroup = gifsGroups[groupName]
+      const selectedGifIndex = gifsInGroup?.findIndex((gif) => gif.url === gifToShow.url)
 
-      const gifObject: GifObject = {
-        ...selectedGif,
-        isShown: true,
+      if (!gifsInGroup || selectedGifIndex === -1) {
+        console.warn(`Gif with URL ${gifToShow.url} not found in group ${groupName}`)
+        return
       }
 
-      const updatedGifsGroups = { ...gifsGroups }
-      updatedGifsGroups[groupName][unusedGifIndex].isShown = true
-      this.cache.set(updatedGifsGroups)
+      const updatedGifsInGroup = gifsInGroup.map((gif, index) => ({
+        ...gif,
+        isShown: index === selectedGifIndex ? true : gif.isShown,
+      }))
+      console.log('updatedGifsInGroup: ', updatedGifsInGroup)
+
+      this.cache.set({
+        ...gifsGroups,
+        [groupName]: updatedGifsInGroup,
+      })
 
-      this.setActiveGif(gifObject)
+      this.setActiveGif(gifToShow)
     },
   )
 }

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

@@ -2,6 +2,10 @@ import { Store } from 'effector'
 
 export type CustomGetCachePathMethod = (uri: string) => Promise<string | null>
 export type CustomPrefetchMethod = (gifs: string[] | string) => Promise<unknown>
+export type CustomLocalStorage = {
+  setItem: (key: string, value: string) => void
+  getItem: (key: string) => string | null | undefined
+}
 
 export type GroupNumber = number
 
@@ -13,20 +17,22 @@ export type GifCelebrationsModelProps = {
   api: GifCelebrationApiRequests
   totalProblems: Store<number>
   resolvedProblems: Store<number>
+  customLocalStorage?: CustomLocalStorage
   customPrefetchMethod?: CustomPrefetchMethod
   customGetCachePathMethod?: CustomGetCachePathMethod
 }
 
 export type GifsGroup = string[]
-export type GifsGroups = Record<`group${GroupNumber}`, GifsGroup>
+export type GroupNumberString = `group${GroupNumber}`
+export type GifsGroups = Record<GroupNumberString, GifsGroup>
 
 export type GifObject = {
   url: string
-  isShown: boolean
-  group: `group${GroupNumber}`
+  group: GroupNumberString
+  isShown?: boolean
 }
 
-export type GifsStructure = Record<`group${GroupNumber}`, GifObject[]>
+export type GifsStructure = Record<GroupNumberString, GifObject[]>
 /**
  * Usually, the response contains 3 groups of gifs:
  * - group1: early celebrations
@@ -41,7 +47,7 @@ export type GifsPayload = {
   group: number
 }
 
-export type ProblemsPercentageTable = Record<number, number>
+export type ProblemsGifsTable = Record<number, GifObject>
 export type ProgressValue = 0 | 1 | 2
 
 export type TextComponentType = (text: string) => React.ReactNode