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

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,23 +14,35 @@ type Size = {
   height: number
 }
 
-export const Gif = ({ uri }: GifProps) => {
+export const Gif = ({ uri, getCachePathMethod }: GifProps) => {
   const [size, setSize] = useState<Size | null>(null)
+  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="Funny celebration animated image"
             source={{
-              uri,
+              uri: pathOrUri,
             }}
             width={size.width}
             height={size.height}
@@ -55,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

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[]