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

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

@@ -0,0 +1,24 @@
+import { createEvent, createStore } from 'effector'
+import { GifsGroups, GifsStructure } from '../types/model.types'
+
+export class GifCelebrationsCache {
+  public readonly initialSet = createEvent<GifsGroups>()
+  public readonly set = createEvent<GifsStructure>()
+  public readonly reset = createEvent()
+
+  public readonly $gifs = createStore<GifsStructure | null>(null)
+    .reset(this.reset)
+    .on(this.initialSet, (_, gifs) =>
+      Object.fromEntries(
+        Object.entries(gifs).map(([key, value]) => [
+          key,
+          value.map((url) => ({
+            url,
+            isShown: false,
+            group: key as `group${number}`,
+          })),
+        ]),
+      ),
+    )
+    .on(this.set, (_, gifs) => gifs)
+}

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

@@ -0,0 +1,177 @@
+import { createEffect, createEvent, createStore, sample, Store } from 'effector'
+import { GifCelebrationsApi } from './GifCelebrationsApi'
+import {
+  GifCelebrationsModelProps,
+  GifObject,
+  GifsGroups,
+  GifsStructure,
+  ProblemsPercentageTable,
+} from '../types/model.types'
+import { GifCelebrationsCache } from './GifCelebrations.cache'
+import { calculatePercentageTable } from '../helpers'
+import { Image } from 'react-native'
+import { MIN_PROBLEMS_TO_SHOW_GIF } from '../constants'
+
+const GROUPS_PERCENTAGES = {
+  group1: [15, 20, 25, 30], // Early celebrations
+  group2: [33, 40, 45, 50], // Mid celebrations
+  group3: [60, 66, 75, 80], // Party
+}
+
+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 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)
+    .on(this.setActiveGif, (_, gif) => gif)
+
+  public readonly initialize = createEvent()
+  public readonly resetGroupGifs = createEvent<string>()
+
+  constructor({ api, totalProblems, resolvedProblems }: GifCelebrationsModelProps) {
+    this.api = new GifCelebrationsApi(api)
+    this.cache = new GifCelebrationsCache()
+
+    this.$totalProblems = totalProblems
+    this.$resolvedProblems = resolvedProblems
+
+    this.setupEventHandlers()
+  }
+
+  private setupEventHandlers() {
+    sample({
+      source: this.api.getGifsFx.doneData,
+      fn: (response) =>
+        response.ok
+          ? response.data
+          : (() => {
+              throw new Error('Failed to fetch GIFs')
+            })(),
+      target: createEffect((data: GifsGroups) => {
+        Object.values(data).forEach((group) => {
+          group.forEach((gifUrl) => {
+            Image.prefetch(gifUrl)
+          })
+        })
+        console.log('data: ', data)
+
+        this.cache.initialSet(data)
+      }),
+    })
+
+    sample({
+      clock: this.initialize,
+      source: this.cache.$gifs,
+      filter: (gifs) => !gifs,
+      target: this.api.getGifsFx,
+    })
+
+    sample({
+      //todo: fix types
+      //@ts-ignore
+      clock: this.initialize,
+      source: this.$totalProblems,
+      filter: (totalProblems) => totalProblems && totalProblems >= MIN_PROBLEMS_TO_SHOW_GIF,
+      fn: (totalProblems) => calculatePercentageTable(totalProblems),
+      target: this.$problemsPercentageTable,
+    })
+
+    sample({
+      clock: this.triggerPlay,
+      source: {
+        gifsGroups: this.cache.$gifs,
+        resolvedProblem: this.$resolvedProblems,
+        problemsPercentageTable: this.$problemsPercentageTable,
+      },
+      filter: ({ gifsGroups, resolvedProblem, problemsPercentageTable }) =>
+        !!(gifsGroups && resolvedProblem !== undefined && problemsPercentageTable),
+      fn: (sources) => sources as HandleGifSelectionProps,
+      target: this.handleGifSelection,
+    })
+  }
+
+  private readonly handleGifSelection = createEffect(
+    ({ gifsGroups, resolvedProblem, problemsPercentageTable }: HandleGifSelectionProps) => {
+      // Find which percentage milestone this resolved problem represents
+      const percentageMilestone = Object.keys(problemsPercentageTable).find(
+        (key) => problemsPercentageTable[Number(key)] === resolvedProblem,
+      )
+      if (!percentageMilestone) return null
+
+      // Find which group this percentage belongs to
+      const groupName = this.findGroupForPercentage(Number(percentageMilestone)) as
+        | `group${number}`
+        | undefined
+      if (!groupName) return null
+
+      // Get available gifs for this group
+      const gifsForGroup = gifsGroups[groupName]
+      console.log('gifsForGroup: ', gifsForGroup)
+      if (!gifsForGroup || gifsForGroup.length === 0) return null
+
+      // Find the first gif that hasn't been shown yet
+      const unusedGifIndex = gifsForGroup.findIndex((gif) => !gif.isShown)
+
+      // If all gifs have been shown, reset the group and start from the beginning
+      if (unusedGifIndex === -1) {
+        // Reset the group by setting all gifs to isShown: false
+        const updatedGifsGroups = { ...gifsGroups }
+        updatedGifsGroups[groupName] = gifsGroups[groupName].map((gif) => ({
+          ...gif,
+          isShown: false,
+        }))
+        // Select the first gif from the group
+        const gifObject: GifObject = {
+          ...updatedGifsGroups[groupName][0],
+          isShown: true,
+        }
+        updatedGifsGroups[groupName][0].isShown = true
+
+        this.setActiveGif(gifObject)
+        // Update the cache with the shown gif
+        this.cache.set(updatedGifsGroups)
+      }
+
+      // Otherwise, use the first unused gif
+      const selectedGif = gifsForGroup[unusedGifIndex]
+
+      // Create a new gif object with isShown set to true
+      const gifObject: GifObject = {
+        ...selectedGif,
+        isShown: true,
+      }
+
+      // Update the cache with the shown gif
+      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,36 @@
+import { Store } from 'effector'
+
+export type GifCelebrationApiRequests = {
+  getGifs: () => Promise<GifResponse>
+}
+
+export type GifCelebrationsModelProps = {
+  api: GifCelebrationApiRequests
+  totalProblems: Store<number>
+  resolvedProblems: Store<number>
+}
+
+export type GifsGroup = string[]
+export type GifsGroups = Record<`group${number}`, GifsGroup>
+
+export type GifObject = {
+  url: string
+  isShown: boolean
+  group: `group${number}`
+}
+
+export type GifsStructure = Record<`group${number}`, 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>

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/shared/hooks/useImagePreloader.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+
+type ImagesUrls = string[]
+
+export const useImagePreloader = (imageUrls: ImagesUrls) => {
+  useEffect(() => {
+    imageUrls.forEach((url) => {
+      const img = new Image()
+      img.src = url
+      img.onload = () => {
+        console.log(`Image loaded: ${url}`)
+      }
+    })
+  }, [imageUrls])
+}

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

@@ -13,9 +13,8 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
     "answerAgain": "Answer again to get another hint!",
-    "errorMessage": "Something went wrong! Try again",
+    "errorMessage": "Sorry, I can't help with this issue at the moment 😔.",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error"
   }

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

@@ -13,9 +13,8 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
     "answerAgain": "Answer again to get another hint!",
-    "errorMessage": "Something went wrong! Try again",
+    "errorMessage": "Sorry, I can't help with this issue at the moment 😔.",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error"
   }

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

@@ -13,9 +13,8 @@
   "time.yearsAgo": "år sedan",
   "chat": {
     "anotherHint": "Ge mig en ledtråd",
-    "giveHint": "Ge mig en ledtråd",
     "answerAgain": "Svara igen för att få en till ledtråd!",
-    "errorMessage": "Något gick snett! Försök igen",
+    "errorMessage": "Tyvärr kan jag inte hjälpa dig just nu 😔.",
     "howCanIHelp": "Hej! Hur kan jag hjälpa dig?",
     "showError": "Visa fel"
   }

package/src/types/types.d.ts

@@ -2,8 +2,3 @@ declare module '*.scss' {
   const content: Record<string, string>
   export default content
 }
-
-declare module '*.webp' {
-  const value: string | number
-  export default value
-}