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

package/dist/typescript/module/features/gifCelebrations/model/GifCelebrations.cache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GifCelebrations.cache.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/model/GifCelebrations.cache.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEhE,qBAAa,oBAAoB;IAC/B,SAAgB,UAAU,+CAA4B;IACtD,SAAgB,GAAG,kDAA+B;IAClD,SAAgB,KAAK,yCAAgB;IAErC,SAAgB,KAAK,yDAca;CACnC"}
+{"version":3,"file":"GifCelebrations.cache.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/model/GifCelebrations.cache.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,aAAa,EACb,oBAAoB,EACpB,wBAAwB,EACzB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEpC,KAAK,yBAAyB,GAAG;IAC/B,oBAAoB,CAAC,EAAE,oBAAoB,CAAA;IAC3C,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;CACpD,CAAA;AAED,qBAAa,oBAAoB;IAC/B,SAAgB,UAAU,+CAA4B;IACtD,SAAgB,GAAG,kDAA+B;IAClD,SAAgB,KAAK,yCAAgB;IAErC,SAAgB,cAAc,EAAE,oBAAoB,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAA;IAC5E,SAAgB,kBAAkB,CAAC,EAAE,wBAAwB,CAAA;IAE7D,SAAgB,YAAY,qDAQ1B;IAEF,SAAgB,KAAK,yDAGa;gBAEtB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,EAAE,yBAAyB;CAI1F"}

package/dist/typescript/module/features/gifCelebrations/model/GifCelebrations.model.d.ts

@@ -15,7 +15,7 @@ export declare class GifCelebrationsModel {
     readonly $activeGif: import("effector").StoreWritable<GifObject | null>;
     readonly initialize: import("effector").EventCallable<void>;
     readonly resetGroupGifs: import("effector").EventCallable<string>;
-    constructor({ api, totalProblems, resolvedProblems }: GifCelebrationsModelProps);
+    constructor({ api, totalProblems, resolvedProblems, customPrefetchMethod, customGetCachePathMethod, }: GifCelebrationsModelProps);
     private setupEventHandlers;
     private readonly handleGifSelection;
     private findGroupForPercentage;

package/dist/typescript/module/features/gifCelebrations/model/GifCelebrations.model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GifCelebrations.model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/model/GifCelebrations.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,EAAE,MAAM,UAAU,CAAA;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EACL,yBAAyB,EACzB,SAAS,EAGT,uBAAuB,EACxB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAiB9D,qBAAa,oBAAoB;IAC/B,SAAgB,GAAG,EAAE,kBAAkB,CAAA;IACvC,SAAgB,KAAK,EAAE,oBAAoB,CAAA;IAE3C,SAAgB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC7C,SAAgB,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAEhD,SAAgB,WAAW,yCAAgB;IAC3C,SAAgB,IAAI,yCAAgB;IAEpC,SAAgB,oBAAoB,yCAAgB;IACpD,SAAgB,wBAAwB,mEAEN;IAElC,SAAgB,YAAY,8CAA2B;IACvD,SAAgB,UAAU,qDAEe;IAEzC,SAAgB,UAAU,yCAAgB;IAC1C,SAAgB,cAAc,2CAAwB;gBAE1C,EAAE,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAE,EAAE,yBAAyB;IAU/E,OAAO,CAAC,kBAAkB;IAmD1B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAyDlC;IAED,OAAO,CAAC,sBAAsB;CAK/B"}
+{"version":3,"file":"GifCelebrations.model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/model/GifCelebrations.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,EAAE,MAAM,UAAU,CAAA;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EACL,yBAAyB,EACzB,SAAS,EAET,uBAAuB,EACxB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAU9D,qBAAa,oBAAoB;IAC/B,SAAgB,GAAG,EAAE,kBAAkB,CAAA;IACvC,SAAgB,KAAK,EAAE,oBAAoB,CAAA;IAE3C,SAAgB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC7C,SAAgB,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAEhD,SAAgB,WAAW,yCAAgB;IAC3C,SAAgB,IAAI,yCAAgB;IAEpC,SAAgB,oBAAoB,yCAAgB;IACpD,SAAgB,wBAAwB,mEAEN;IAElC,SAAgB,YAAY,8CAA2B;IACvD,SAAgB,UAAU,qDAEe;IAEzC,SAAgB,UAAU,yCAAgB;IAC1C,SAAgB,cAAc,2CAAwB;gBAE1C,EACV,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,wBAAwB,GACzB,EAAE,yBAAyB;IAU5B,OAAO,CAAC,kBAAkB;IAuC1B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CA+ClC;IAED,OAAO,CAAC,sBAAsB;CAK/B"}

package/dist/typescript/module/features/gifCelebrations/types/model.types.d.ts

@@ -1,11 +1,18 @@
 import { Store } from 'effector';
+export type CustomPrefetchMethod = (gifs: string[] | string) => Promise<unknown>;
+export type CustomGetCachePathMethod = (uri: string) => Promise<string | null>;
 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${number}`, GifsGroup>;

package/dist/typescript/module/features/gifCelebrations/types/model.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.types.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/types/model.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,yBAAyB,CAAA;IAC9B,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC5B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;AAChC,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,SAAS,CAAC,CAAA;AAE5D,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,QAAQ,MAAM,EAAE,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,CAAA;AACjE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,EAAE,EAAE,OAAO,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}
+{"version":3,"file":"model.types.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/types/model.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;AAChF,MAAM,MAAM,wBAAwB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;AAE9E,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAA;CACpC,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,CAAC,EAAE,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,yBAAyB,CAAA;IAC9B,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC5B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC/B,oBAAoB,CAAC,EAAE,oBAAoB,CAAA;IAC3C,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;AAChC,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,SAAS,CAAC,CAAA;AAE5D,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,QAAQ,MAAM,EAAE,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,CAAA;AACjE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,EAAE,EAAE,OAAO,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.5-rc.2",
+  "version": "0.6.5-rc.4",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/gifCelebrations/GifCelebrations.tsx

@@ -63,7 +63,7 @@ export const GifCelebrations = ({ model }: GifCelebrationsProps) => {
   return (
     <Backdrop progress={progress}>
       <ContentContainer progress={progress}>
-        <Gif uri={activeGif.url} />
+        <Gif uri={activeGif.url} getCachePathMethod={model.cache.getCachePathMethod} />
         <Progress progress={progress} completedPercent={completedPercent} />
       </ContentContainer>
     </Backdrop>

package/src/features/gifCelebrations/components/Gif.tsx

@@ -1,12 +1,12 @@
 import { StyleSheet, View, Image } from 'react-native'
 import React, { useLayoutEffect, useState } from 'react'
 import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
-
-const mock =
-  'https://media3.giphy.com/media/v1.Y2lkPWZhYjgxNWZhN3lucHRuYjZtMzRiNTZkeXo3NTBrNzIwejcwdXp0Y3g1c2k2ODA2eiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/lCSABZRhMw6pW/giphy.gif'
+import { CustomGetCachePathMethod } from '../types/model.types'
+import { MAX_GIF_SIZE } from '../constants'
 
 type GifProps = {
   uri: string
+  getCachePathMethod?: CustomGetCachePathMethod
 }
 
 type Size = {
@@ -14,24 +14,35 @@ type Size = {
   height: number
 }
 
-export const Gif = ({ uri }: GifProps) => {
+export const Gif = ({ uri, getCachePathMethod }: GifProps) => {
   const [size, setSize] = useState<Size | null>(null)
-  console.log('size: ', size)
+  const [pathOrUri, setPathOrUri] = useState<string>('')
 
   useLayoutEffect(() => {
-    Image.getSize(uri, (width, height) => {
-      setSize({ width: width > 480 ? 480 : width, height: height > 300 ? 300 : height })
-    })
+    const loadImageSize = async () => {
+      const path = getCachePathMethod ? (await getCachePathMethod(uri)) || uri : uri
+
+      Image.getSize(path, (width, height) => {
+        setSize({
+          width: Math.min(width, MAX_GIF_SIZE.WIDTH),
+          height: Math.min(height, MAX_GIF_SIZE.HEIGHT),
+        })
+
+        setPathOrUri(path)
+      })
+    }
+
+    loadImageSize()
   }, [uri])
 
   return (
     <View style={styles.backgroundContainer}>
       <View style={styles.container}>
-        {size && (
+        {size && pathOrUri && (
           <Image
-            alt="Celebration GIF"
+            alt="Funny celebration animated image"
             source={{
-              uri,
+              uri: pathOrUri,
             }}
             width={size.width}
             height={size.height}
@@ -56,6 +67,5 @@ const styles = StyleSheet.create({
   },
   image: {
     borderRadius: BORDER_RADIUS[100],
-    backgroundColor: 'orange',
   },
 })

package/src/features/gifCelebrations/components/Progress.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, Image } from 'react-native'
 import React from 'react'
 import {
   BORDER_RADIUS,
@@ -8,7 +8,6 @@ import {
   Typography,
 } from '@magmamath/react-native-ui'
 import Animated, { useAnimatedStyle, SharedValue, interpolate } from 'react-native-reanimated'
-import { Image } from 'react-native'
 
 const MIN_WIDTH_FOR_ONE_DIGIT = 12
 const MIN_WIDTH_FOR_TWO_DIGITS = 15
@@ -54,7 +53,7 @@ export const Progress = ({ progress, completedPercent }: ProgressProps) => {
             </Typography>
           </Animated.View>
         </View>
-        {/* <Image source={require('../assets/confetti.webp')} style={styles.confetti} /> */}
+        <Image source={require('../assets/confetti.webp')} style={styles.confetti} />
       </View>
     </View>
   )

package/src/features/gifCelebrations/constants.ts

@@ -11,3 +11,14 @@ export const CONTENT_CONTAINER = {
 
 export const ANIMATION_DURATION = 1750
 export const MIN_PROBLEMS_TO_SHOW_GIF = 6
+
+export const MAX_GIF_SIZE = {
+  WIDTH: 480,
+  HEIGHT: 300,
+}
+
+export const GROUPS_PERCENTAGES = {
+  group1: [15, 20, 25, 30], // Early celebrations
+  group2: [33, 40, 45, 50], // Mid celebrations
+  group3: [60, 66, 75, 80], // Party
+}

package/src/features/gifCelebrations/helpers.ts

@@ -1,36 +1,19 @@
-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
-}
-
+import { GifsGroups, GifsStructure } 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) }
 
@@ -66,3 +49,15 @@ 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${number}`,
+      })),
+    ]),
+  )

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

@@ -1,24 +1,43 @@
-import { createEvent, createStore } from 'effector'
-import { GifsGroups, GifsStructure } from '../types/model.types'
+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) =>
-      Object.fromEntries(
-        Object.entries(gifs).map(([key, value]) => [
-          key,
-          value.map((url) => ({
-            url,
-            isShown: false,
-            group: key as `group${number}`,
-          })),
-        ]),
-      ),
-    )
+    .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

@@ -3,20 +3,12 @@ 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
-}
+import { GROUPS_PERCENTAGES, MIN_PROBLEMS_TO_SHOW_GIF } from '../constants'
 
 type HandleGifSelectionProps = {
   gifsGroups: GifsStructure
@@ -47,9 +39,15 @@ export class GifCelebrationsModel {
   public readonly initialize = createEvent()
   public readonly resetGroupGifs = createEvent<string>()
 
-  constructor({ api, totalProblems, resolvedProblems }: GifCelebrationsModelProps) {
+  constructor({
+    api,
+    totalProblems,
+    resolvedProblems,
+    customPrefetchMethod,
+    customGetCachePathMethod,
+  }: GifCelebrationsModelProps) {
     this.api = new GifCelebrationsApi(api)
-    this.cache = new GifCelebrationsCache()
+    this.cache = new GifCelebrationsCache({ customPrefetchMethod, customGetCachePathMethod })
 
     this.$totalProblems = totalProblems
     this.$resolvedProblems = resolvedProblems
@@ -60,21 +58,9 @@ export class GifCelebrationsModel {
   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)
-          })
-        })
-
-        this.cache.initialSet(data)
-      }),
+      filter: (response) => response.ok,
+      fn: (response) => response.data,
+      target: this.cache.prefetchGifs,
     })
 
     sample({
@@ -110,34 +96,28 @@ 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${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,
@@ -145,20 +125,16 @@ 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,13 +1,21 @@
 import { Store } from 'effector'
 
+export type CustomPrefetchMethod = (gifs: string[] | string) => Promise<unknown>
+export type CustomGetCachePathMethod = (uri: string) => Promise<string | null>
+
 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[]