@magmamath/students-features 0.6.5-rc.13 → 0.6.5-rc.2

package/src/features/gifCelebrations/helpers.ts

@@ -1,20 +1,36 @@
-import { TranslationKeys } from 'src/shared/translation/types'
-import { GifsGroups, GifsStructure, GroupNumber } from './types/model.types'
+import { GifsGroups } from './types/model.types'
+
+type GifSelectProps = {
+  gifsGroups: GifsGroups
+  resolvedProblem: number
+  totalProblems: number
+}
+
+// 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 gifSelect = ({ gifsGroups, resolvedProblem, totalProblems }: GifSelectProps) => {
+  if (totalProblems < 7) return null
+
+  const group = Math.ceil((resolvedProblem / totalProblems) * 100)
+
+  if (group <= 20) return gifsGroups.group1[Math.floor(Math.random() * gifsGroups.group1.length)]
+  if (group <= 40) return gifsGroups.group2[Math.floor(Math.random() * gifsGroups.group2.length)]
+  if (group <= 60) return gifsGroups.group3[Math.floor(Math.random() * gifsGroups.group3.length)]
+
+  return null
+}
 
-/**
- * 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) }
 
@@ -50,26 +66,3 @@ export const calculatePercentageTable = (totalProblems: number) => {
     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/model/GifCelebrations.cache.ts

@@ -1,43 +1,24 @@
-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
-}
+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 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.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)
-
-  constructor({ customPrefetchMethod, customGetCachePathMethod }: GifCelebrationsCacheProps) {
-    this.prefetchMethod = customPrefetchMethod || Image.prefetch
-    this.getCachePathMethod = customGetCachePathMethod
-  }
 }

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

@@ -3,13 +3,20 @@ import { GifCelebrationsApi } from './GifCelebrationsApi'
 import {
   GifCelebrationsModelProps,
   GifObject,
+  GifsGroups,
   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'
+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
@@ -27,16 +34,6 @@ export class GifCelebrationsModel {
   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,
@@ -50,15 +47,9 @@ export class GifCelebrationsModel {
   public readonly initialize = createEvent()
   public readonly resetGroupGifs = createEvent<string>()
 
-  constructor({
-    api,
-    totalProblems,
-    resolvedProblems,
-    customPrefetchMethod,
-    customGetCachePathMethod,
-  }: GifCelebrationsModelProps) {
+  constructor({ api, totalProblems, resolvedProblems }: GifCelebrationsModelProps) {
     this.api = new GifCelebrationsApi(api)
-    this.cache = new GifCelebrationsCache({ customPrefetchMethod, customGetCachePathMethod })
+    this.cache = new GifCelebrationsCache()
 
     this.$totalProblems = totalProblems
     this.$resolvedProblems = resolvedProblems
@@ -69,9 +60,21 @@ export class GifCelebrationsModel {
   private setupEventHandlers() {
     sample({
       source: this.api.getGifsFx.doneData,
-      filter: (response) => response.ok,
-      fn: (response) => response.data,
-      target: this.cache.prefetchGifs,
+      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)
+          })
+        })
+
+        this.cache.initialSet(data)
+      }),
     })
 
     sample({
@@ -84,7 +87,7 @@ export class GifCelebrationsModel {
     sample({
       //todo: fix types
       //@ts-ignore
-      clock: [this.initialize, this.$totalProblems.updates],
+      clock: this.initialize,
       source: this.$totalProblems,
       filter: (totalProblems) => totalProblems && totalProblems >= MIN_PROBLEMS_TO_SHOW_GIF,
       fn: (totalProblems) => calculatePercentageTable(totalProblems),
@@ -94,23 +97,12 @@ export class GifCelebrationsModel {
     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
-        ),
+      filter: ({ gifsGroups, resolvedProblem, problemsPercentageTable }) =>
+        !!(gifsGroups && resolvedProblem !== undefined && problemsPercentageTable),
       fn: (sources) => sources as HandleGifSelectionProps,
       target: this.handleGifSelection,
     })
@@ -118,28 +110,34 @@ export class GifCelebrationsModel {
 
   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${GroupNumber}`
+        | `group${number}`
         | undefined
       if (!groupName) return null
 
+      // Get available gifs for this group
       const gifsForGroup = gifsGroups[groupName]
       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,
@@ -147,16 +145,20 @@ export class GifCelebrationsModel {
         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)

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

@@ -1,35 +1,25 @@
 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 GifsGroups = Record<`group${number}`, GifsGroup>
 
 export type GifObject = {
   url: string
   isShown: boolean
-  group: `group${GroupNumber}`
+  group: `group${number}`
 }
 
-export type GifsStructure = Record<`group${GroupNumber}`, GifObject[]>
+export type GifsStructure = Record<`group${number}`, GifObject[]>
 /**
  * Usually, the response contains 3 groups of gifs:
  * - group1: early celebrations
@@ -43,8 +33,4 @@ export type GifResponse = {
 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/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/shared/translation/localization/en.json

@@ -13,15 +13,9 @@
   "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"
-  },
-  "gifCelebrations": {
-    "greatStart": "Great start!",
-    "onTheWay": "On the way!",
-    "almostThere": "Almost there"
   }
 }

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

@@ -13,15 +13,9 @@
   "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"
-  },
-  "gifCelebrations": {
-    "greatStart": "Great start!",
-    "onTheWay": "On the way!",
-    "almostThere": "Almost there"
   }
 }

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

@@ -13,15 +13,9 @@
   "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"
-  },
-  "gifCelebrations": {
-    "greatStart": "Bra start!",
-    "onTheWay": "På god väg!",
-    "almostThere": "Nästan där"
   }
 }

package/dist/commonjs/react-app-env.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=react-app-env.d.js.map

package/dist/commonjs/react-app-env.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["react-app-env.d.ts"],"mappings":"","ignoreList":[]}

package/dist/module/react-app-env.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=react-app-env.d.js.map

package/dist/module/react-app-env.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["react-app-env.d.ts"],"mappings":"","ignoreList":[]}

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

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