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

package/src/features/gifCelebrations/helpers.ts

@@ -0,0 +1,144 @@
+import { TranslationKeys } from 'src/shared/translation/types'
+import {
+  CustomGetCachePathMethod,
+  GifsGroups,
+  GifsStructure,
+  GroupNumber,
+  GroupNumberString,
+  ProblemsGifsTable,
+} from './types/model.types'
+import { MIN_WIDTH_FOR_ONE_DIGIT, MIN_WIDTH_FOR_TWO_DIGITS } from './constants'
+import { Image } from 'react-native'
+
+/**
+ * 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
+ * or
+ * Group 1: <=30% - Early celebrations
+ * Group 2: >30% <60% - Mid celebrations
+ * Group 3: >=60% - Party
+ */
+export const generateProblemsGifsTable = (
+  problemsAmount: number,
+  resolvedProblems: number,
+  gifs: GifsStructure,
+): ProblemsGifsTable => {
+  const percentageMilestones = getPercentageMilestones(problemsAmount)
+
+  const result: ProblemsGifsTable = {}
+
+  for (const percentage of percentageMilestones) {
+    const problemNumber = Math.ceil(problemsAmount * (percentage / 100))
+
+    if (problemNumber <= resolvedProblems) continue
+
+    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 result
+}
+const getPercentageMilestones = (problemsAmount: number): number[] => {
+  if (problemsAmount <= 12) return [50]
+
+  if (problemsAmount <= 18) return [33, 66]
+
+  if (problemsAmount <= 24) return [25, 50, 75]
+
+  if (problemsAmount <= 30) return [20, 40, 60, 80]
+
+  return [15, 30, 45, 60, 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 GroupNumberString,
+      })),
+    ]),
+  )
+
+export const getGifLabel = (relatedGroup: GroupNumber): TranslationKeys => {
+  if (relatedGroup === 2) {
+    return 'gifCelebrations.onTheWay'
+  }
+  if (relatedGroup === 3) {
+    return 'gifCelebrations.almostThere'
+  }
+
+  return 'gifCelebrations.greatStart'
+}
+
+export const getProgressLineWidth = (completedPercent: number) => {
+  if (completedPercent <= 9) {
+    return MIN_WIDTH_FOR_ONE_DIGIT
+  }
+  if (completedPercent <= 15) {
+    return MIN_WIDTH_FOR_TWO_DIGITS
+  }
+  return completedPercent
+}
+
+export const findGroupForPercentage = (percentage: number) => {
+  if (percentage <= 30) {
+    return 'group1'
+  }
+  if (percentage < 60) {
+    return 'group2'
+  }
+  return 'group3'
+}
+
+export const getImagePath = async (url: string, cacheMethod?: CustomGetCachePathMethod) => {
+  if (cacheMethod) {
+    const path = await cacheMethod(url)
+    if (path) return path
+  } else {
+    // @ts-ignore
+    const isImagesStored = await Image.queryCache([url]).then((images) => !!images[url])
+    if (isImagesStored) return url
+  }
+
+  throw new Error('Image not found in cache')
+}
+
+export const constrainDimension = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value))
+
+export const shouldRefreshGifs = (timestamp: string | null | undefined): 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/index.ts

@@ -0,0 +1,2 @@
+export { GifCelebrations } from './GifCelebrations'
+export { GifCelebrationsModel } from './model/GifCelebrations.model'

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

@@ -0,0 +1,41 @@
+import { createEffect, createEvent, createStore } from 'effector'
+import {
+  GifsGroups,
+  GifsStructure,
+  CustomGetCachePathMethod,
+  CustomPrefetchMethod,
+} 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 getCachePathMethod?: CustomGetCachePathMethod
+  public readonly prefetchMethod: CustomPrefetchMethod | typeof Image.prefetch
+
+  public readonly prefetchGifs = createEffect<string[], void>((gifs) => {
+    if (!gifs || gifs.length === 0) return
+
+    gifs.forEach((gifUrl) => {
+      this.prefetchMethod(gifUrl)
+    })
+  })
+
+  public readonly $gifs = createStore<GifsStructure | null>(null)
+    .reset(this.reset)
+    .on(this.initialSet, (_, gifs) => generateGifsStructure(gifs))
+    .on(this.set, (_, gifs) => gifs)
+
+  constructor({ customGetCachePathMethod, customPrefetchMethod }: GifCelebrationsCacheProps) {
+    this.prefetchMethod = customPrefetchMethod || Image.prefetch
+    this.getCachePathMethod = customGetCachePathMethod
+  }
+}

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 {
+  CustomLocalStorage,
+  GifCelebrationsModelProps,
+  GifObject,
+  GifsStructure,
+  ProblemsGifsTable,
+} from '../types/model.types'
+import { GifCelebrationsCache } from './GifCelebrations.cache'
+import { generateProblemsGifsTable, shouldRefreshGifs } from '../helpers'
+import { MIN_PROBLEMS_TO_SHOW_GIF, GIFS_FETCHED_KEY } from '../constants'
+
+type HandleGifSelectionProps = {
+  gifsGroups: GifsStructure
+  resolvedProblemsAmount: number
+  problemsGifsTable: ProblemsGifsTable
+}
+
+export class GifCelebrationsModel {
+  public readonly api: GifCelebrationsApi
+  public readonly cache: GifCelebrationsCache
+
+  public readonly $problemsAmount: Store<number>
+  public readonly $resolvedProblemsAmount: Store<number>
+
+  public readonly play = createEvent()
+  public readonly stop = createEvent()
+
+  public readonly resetGifTriggerable = createEvent()
+  public readonly setGifTriggerable = createEvent<boolean>()
+  public readonly $isGifTriggerable = createStore<boolean>(false)
+    .reset(this.resetGifTriggerable)
+    .reset(this.stop)
+    .on(
+      this.setGifTriggerable,
+      (_, isGifCelebrationMayBeTriggered) => isGifCelebrationMayBeTriggered,
+    )
+
+  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)
+    .reset(this.stop)
+    .reset(this.resetGifTriggerable)
+    .on(this.setActiveGif, (_, gif) => gif)
+
+  private readonly localStorage: typeof localStorage | CustomLocalStorage
+
+  public readonly initialize = createEvent()
+
+  constructor({
+    api,
+    problemsAmount,
+    resolvedProblemsAmount,
+    customLocalStorage,
+    customGetCachePathMethod,
+    customPrefetchMethod,
+  }: GifCelebrationsModelProps) {
+    this.api = new GifCelebrationsApi(api)
+    this.cache = new GifCelebrationsCache({ customGetCachePathMethod, customPrefetchMethod })
+
+    this.$problemsAmount = problemsAmount
+    this.$resolvedProblemsAmount = resolvedProblemsAmount
+
+    this.localStorage = customLocalStorage || localStorage
+    this.setupEventHandlers()
+  }
+
+  private setupEventHandlers() {
+    sample({
+      clock: this.initialize,
+      source: this.cache.$gifs,
+      filter: (gifs) => {
+        if (!gifs) return true
+
+        const gifsFetchedTimestamp = this.localStorage.getItem(GIFS_FETCHED_KEY)
+        return shouldRefreshGifs(gifsFetchedTimestamp)
+      },
+      target: this.api.getGifsFx,
+    })
+
+    sample({
+      source: this.api.getGifsFx.doneData,
+      filter: (response) => response.ok,
+      fn: (response) => response.data,
+      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.api.getGifsFx.doneData],
+      source: {
+        gifs: this.cache.$gifs,
+        problemsAmount: this.$problemsAmount,
+        resolvedProblemsAmount: this.$resolvedProblemsAmount,
+      },
+      filter: ({ problemsAmount, gifs }) => !!(problemsAmount >= MIN_PROBLEMS_TO_SHOW_GIF && gifs),
+      fn: ({ problemsAmount, resolvedProblemsAmount, gifs }) => {
+        if (!gifs) return null
+        return generateProblemsGifsTable(problemsAmount, resolvedProblemsAmount, 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.cache.prefetchGifs,
+    })
+
+    sample({
+      clock: this.play,
+      source: {
+        isGifCelebrationMayBeTriggered: this.$isGifTriggerable,
+        gifsGroups: this.cache.$gifs,
+        resolvedProblemsAmount: this.$resolvedProblemsAmount,
+        problemsGifsTable: this.$problemsGifsTable,
+      },
+      filter: ({
+        isGifCelebrationMayBeTriggered,
+        gifsGroups,
+        resolvedProblemsAmount,
+        problemsGifsTable,
+      }) =>
+        !!(
+          isGifCelebrationMayBeTriggered &&
+          gifsGroups &&
+          resolvedProblemsAmount !== undefined &&
+          problemsGifsTable
+        ),
+      fn: (sources) => sources as HandleGifSelectionProps,
+      target: this.updateGifShownStatus,
+    })
+  }
+
+  private readonly updateGifShownStatus = createEffect(
+    ({ gifsGroups, resolvedProblemsAmount, problemsGifsTable }: HandleGifSelectionProps) => {
+      const gifToShow = problemsGifsTable[resolvedProblemsAmount]
+      const groupName = gifToShow.group
+
+      const gifsInGroup = gifsGroups[groupName]
+      const selectedGifIndex = gifsInGroup?.findIndex((gif) => gif.url === gifToShow.url)
+
+      if (!gifsInGroup || selectedGifIndex === -1) {
+        console.warn(`Gif with URL ${gifToShow.url} not found in group ${groupName}`)
+        return
+      }
+
+      const updatedGifsInGroup = gifsInGroup.map((gif, index) => ({
+        ...gif,
+        isShown: index === selectedGifIndex ? true : gif.isShown,
+      }))
+
+      this.cache.set({
+        ...gifsGroups,
+        [groupName]: updatedGifsInGroup,
+      })
+
+      this.setActiveGif(gifToShow)
+    },
+  )
+}

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

@@ -0,0 +1,26 @@
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+import { GifCelebrationApiRequests } from '../types/model.types'
+import { GET_GIFS_TIMEOUT } from '../constants'
+
+export class GifCelebrationsApi {
+  public readonly getGifsFx
+
+  private failedGetGifxTimeout: NodeJS.Timeout | null = null
+
+  constructor(api: GifCelebrationApiRequests) {
+    this.getGifsFx = createControllerEffect(() => api.getGifs())
+
+    this.getGifsFx.fail.watch(() => {
+      this.failedGetGifxTimeout = setTimeout(() => {
+        this.getGifsFx()
+      }, GET_GIFS_TIMEOUT)
+    })
+
+    this.getGifsFx.done.watch(() => {
+      if (this.failedGetGifxTimeout) {
+        clearTimeout(this.failedGetGifxTimeout)
+        this.failedGetGifxTimeout = null
+      }
+    })
+  }
+}

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

@@ -0,0 +1,53 @@
+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
+
+export type GifCelebrationApiRequests = {
+  getGifs: () => Promise<GifResponse>
+}
+
+export type GifCelebrationsModelProps = {
+  api: GifCelebrationApiRequests
+  problemsAmount: Store<number>
+  resolvedProblemsAmount: Store<number>
+  customLocalStorage?: CustomLocalStorage
+  customPrefetchMethod?: CustomPrefetchMethod
+  customGetCachePathMethod?: CustomGetCachePathMethod
+}
+
+export type GifsGroup = string[]
+export type GroupNumberString = `group${GroupNumber}`
+export type GifsGroups = Record<GroupNumberString, GifsGroup>
+
+export type GifObject = {
+  url: string
+  group: GroupNumberString
+  isShown?: boolean
+}
+
+export type GifsStructure = Record<GroupNumberString, 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 ProblemsGifsTable = Record<number, GifObject>
+export type ProgressValue = 0 | 1 | 2
+
+export type TextComponentType = (text: string) => React.ReactNode

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/lib/effector/createControllerEffect.ts

@@ -1,66 +1,66 @@
 import { createEffect, type Effect } from 'effector'
 
 type LikeCanceledError = {
-    code?: string
+  code?: string
 }
 
 export type ControlledEffect<P, T> = Effect<P, T> & {
-    controller: AbortController
+  controller: AbortController
 }
 
 type ControlledRequestProps<P> = {
-    data: P
-    controller?: AbortController
-    abortAfter?: number
+  data: P
+  controller?: AbortController
+  abortAfter?: number
 }
 
 type RequestOptionalConfig = { signal?: AbortSignal }
 
 export function controlledRequest<R = void, P = void>(
-    request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
+  request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
 ) {
-    return async ({
-        data,
-        controller = new AbortController(),
-        abortAfter = 20000,
-    }: ControlledRequestProps<P>) => {
-        let timeout: ReturnType<typeof setTimeout> | null = null
+  return async ({
+    data,
+    controller = new AbortController(),
+    abortAfter = 20000,
+  }: ControlledRequestProps<P>) => {
+    let timeout: ReturnType<typeof setTimeout> | null = null
 
-        if (abortAfter) {
-            timeout = setTimeout(() => {
-                controller.abort('timeout')
-            }, abortAfter)
-        }
-
-        try {
-            const response = await request(data, { signal: controller?.signal })
-            if (timeout !== null) clearTimeout(timeout)
-            return response
-        } catch (error: unknown) {
-            if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
-                if (controller.signal.reason === 'timeout') {
-                    throw new Error('Request timed out')
-                }
-                throw new Error('Request aborted manually')
-            }
+    if (abortAfter) {
+      timeout = setTimeout(() => {
+        controller.abort('timeout')
+      }, abortAfter)
+    }
 
-            throw error
+    try {
+      const response = await request(data, { signal: controller?.signal })
+      if (timeout !== null) clearTimeout(timeout)
+      return response
+    } catch (error: unknown) {
+      if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
+        if (controller.signal.reason === 'timeout') {
+          throw new Error('Request timed out')
         }
+        throw new Error('Request aborted manually')
+      }
+
+      throw error
     }
+  }
 }
 
-export const createControllerEffect = <T, P>(
-    fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
+export const createControllerEffect = <T, P = void>(
+  fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
 ) => {
-    const request = controlledRequest<T, P>(fn)
-    const effect = createEffect((data: P) =>
-        request({ data, controller: effect.controller }),
-    ) as ControlledEffect<P, T>
-    effect.controller = new AbortController()
+  const request = controlledRequest<T, P>(fn)
+  const effect = createEffect((data: P) =>
+    request({ data, controller: effect.controller }),
+  ) as ControlledEffect<P, T>
+  effect.controller = new AbortController()
 
-    effect.fail.watch(() => {
-        effect.controller = new AbortController()
-    })
+  effect.fail.watch(() => {
+    effect.controller = new AbortController()
+  })
 
-    return effect
+  return effect
 }

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/react-app-env.d.ts

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

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

@@ -18,5 +18,10 @@
     "errorMessage": "Something went wrong! Try again",
     "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

@@ -18,5 +18,10 @@
     "errorMessage": "Something went wrong! Try again",
     "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

@@ -18,5 +18,10 @@
     "errorMessage": "Något gick snett! Försök igen",
     "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/src/types/common.types.ts

@@ -0,0 +1,4 @@
+export type Size = {
+  width: number
+  height: number
+}