@magmamath/students-features 0.6.0 → 0.6.1-2.rc-2

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

@@ -0,0 +1,88 @@
+import { StyleSheet, View, Image } from 'react-native'
+import React, { useLayoutEffect, useState } from 'react'
+import { BORDER_RADIUS, COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
+import { CustomGetCachePathMethod, GifObject, TextComponentType } from '../types/model.types'
+import { MAX_GIF_SIZE, MIN_GIF_SIZE } from '../constants'
+import { useText } from '../../../shared/translation'
+import { constrainDimension, getGifLabel, getImagePath } from '../helpers'
+import gifFallback from '../assets/gifFallback.gif'
+import { Size } from '../../../types/common.types'
+
+type GifProps = {
+  gifObject: GifObject
+  getCachePathMethod?: CustomGetCachePathMethod
+  TextComponent: TextComponentType
+}
+
+export const Gif = ({ gifObject, getCachePathMethod, TextComponent }: GifProps) => {
+  const [size, setSize] = useState<Size | null>(null)
+  const [pathOrUri, setPathOrUri] = useState('')
+
+  const t = useText()
+
+  const gifGroupNumber = Number(gifObject.group.replace('group', ''))
+  const gifLabel = getGifLabel(gifGroupNumber)
+
+  useLayoutEffect(() => {
+    const loadImageSize = async () => {
+      let localPath
+
+      try {
+        localPath = await getImagePath(gifObject.url, getCachePathMethod)
+      } catch (error) {
+        localPath = IS_WEB ? gifFallback : Image.resolveAssetSource(gifFallback).uri
+        console.error('Error fetching image from cache:', error)
+      }
+
+      Image.getSize(localPath, (width, height) => {
+        setSize({
+          width: constrainDimension(width, MIN_GIF_SIZE, MAX_GIF_SIZE.WIDTH),
+          height: constrainDimension(height, MIN_GIF_SIZE, MAX_GIF_SIZE.HEIGHT),
+        })
+        setPathOrUri(localPath)
+      })
+    }
+
+    loadImageSize()
+  }, [gifObject.url])
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        {size && pathOrUri && (
+          <Image
+            alt="Funny celebration animated image"
+            source={{
+              uri: pathOrUri,
+            }}
+            width={size.width}
+            height={size.height}
+            style={[styles.image, { width: size.width, height: size.height }]} //this sizes duplication is needed for compatibility with web and rn
+          />
+        )}
+        <View style={styles.textContainer}>{TextComponent(t(gifLabel))}</View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+  },
+  container: {
+    padding: SPACING[1600],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  image: {
+    borderRadius: BORDER_RADIUS[100],
+  },
+  textContainer: {
+    position: 'absolute',
+    bottom: 74,
+    alignSelf: 'center',
+  },
+})

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

@@ -0,0 +1,106 @@
+import { StyleSheet, View, Image } from 'react-native'
+import React from 'react'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  IS_WEB,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, SharedValue, interpolate } from 'react-native-reanimated'
+import confettiImage from '../assets/confetti.webp'
+import { ProgressValue } from '../types/model.types'
+import { getProgressLineWidth } from '../helpers'
+
+type ProgressProps = {
+  progress: SharedValue<ProgressValue>
+  completedPercent: number
+}
+
+export const Progress = ({ progress, completedPercent }: ProgressProps) => {
+  const progressLineWidth = getProgressLineWidth(completedPercent)
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      width: `${interpolate(
+        progress.value,
+        [0, 1, 2],
+        [0, progressLineWidth, progressLineWidth],
+      )}%`,
+    }),
+    [progress, progressLineWidth],
+  )
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        <View style={styles.progressContainer}>
+          <Animated.View style={[styles.progress, animatedStyles]}>
+            <Typography variant={HeadingVariants.H1} style={styles.percent}>
+              {`${completedPercent}%`}
+            </Typography>
+          </Animated.View>
+        </View>
+        <Image
+          source={
+            IS_WEB
+              ? {
+                  uri: confettiImage,
+                }
+              : require('../assets/confetti.webp')
+          }
+          style={styles.confetti}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+    height: 116,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingLeft: SPACING[400],
+    paddingRight: SPACING[200],
+    gap: SPACING[100],
+  },
+  progressContainer: {
+    height: 50,
+    flexGrow: 1,
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: 90,
+    overflow: 'hidden',
+  },
+  progress: {
+    position: 'absolute',
+    height: '100%',
+    backgroundColor: COLORS.PRIMARY_BLUE,
+    borderRadius: BORDER_RADIUS[200],
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    paddingRight: 10.6,
+    overflow: 'hidden',
+  },
+  confetti: {
+    width: 75,
+    height: 70,
+    marginHorizontal: SPACING[200],
+  },
+  percent: {
+    position: 'absolute',
+    paddingRight: 10,
+    color: COLORS.NEUTRAL_1,
+    fontWeight: '700',
+  },
+})

package/src/features/gifCelebrations/constants.ts

@@ -0,0 +1,32 @@
+export const BACKDROP_COLOR = {
+  INITIAL: 'rgba(51, 51, 51, 0)',
+  FINAL: 'rgba(51, 51, 51, 0.66)',
+}
+
+export const CONTENT_CONTAINER = {
+  ANGLE: 5,
+  CONTAINER_WIDTH: 769,
+  ROTATION_PADDING: 44, // to be sure that the content is not cut off on the edges because of rotate transform
+}
+
+export const ANIMATION_DURATION = 1750
+export const MIN_PROBLEMS_TO_SHOW_GIF = 7
+
+export const MAX_GIF_SIZE = {
+  WIDTH: 480,
+  HEIGHT: 300,
+}
+export const MIN_GIF_SIZE = 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
+}
+
+export const MIN_WIDTH_FOR_ONE_DIGIT = 12
+export const MIN_WIDTH_FOR_TWO_DIGITS = 15
+
+export const GET_GIFS_TIMEOUT = 5000
+
+export const GIFS_FETCHED_KEY = 'gifsFetchedTimestamp'

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.model.ts

@@ -0,0 +1,167 @@
+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 './GifCelebrationsCache'
+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: ({ gifs }) => !!gifs,
+      fn: ({ problemsAmount, resolvedProblemsAmount, gifs }) => {
+        if (!gifs || problemsAmount < MIN_PROBLEMS_TO_SHOW_GIF) 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, problemsGifsTable }) =>
+        !!(isGifCelebrationMayBeTriggered && gifsGroups && 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/model/GifCelebrationsCache.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/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