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

package/src/features/gifCelebrations/GifCelebrations.tsx

@@ -1,75 +0,0 @@
-import React, { useEffect } from 'react'
-import { Gif } from './components/Gif'
-import { Progress } from './components/Progress'
-import { ContentContainer } from './components/ContentContainer'
-import { Backdrop } from './components/Backdrop'
-import { Easing, runOnJS, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
-import { useUnit } from 'effector-react'
-import { ANIMATION_DURATION } from './constants'
-import { GifCelebrationsModel } from './model/GifCelebrations.model'
-import { ProgressValue, TextComponentType } from './types/model.types'
-
-type GifCelebrationsProps = {
-  model: GifCelebrationsModel
-  TextComponent: TextComponentType
-}
-
-export const GifCelebrations = ({ model, TextComponent }: GifCelebrationsProps) => {
-  const [problemsAmount, resolvedProblemsAmount, activeGif] = useUnit([
-    model.$problemsAmount,
-    model.$resolvedProblemsAmount,
-    model.$activeGif,
-  ])
-
-  const completedPercent =
-    resolvedProblemsAmount &&
-    problemsAmount &&
-    Math.round((resolvedProblemsAmount / problemsAmount) * 100)
-
-  const progress = useSharedValue<ProgressValue>(0)
-
-  const stopAnimation = () => {
-    model.stop()
-    progress.value = 0
-  }
-
-  const playAnimation = () => {
-    progress.value = withSequence(
-      withTiming(1, {
-        duration: ANIMATION_DURATION,
-        easing: Easing.bezier(0.52, 0.16, 0.26, 0.77),
-      }),
-      withTiming(
-        2,
-        {
-          duration: ANIMATION_DURATION,
-          easing: Easing.bezier(0.71, 0.09, 0.49, 0.89),
-        },
-        () => runOnJS(stopAnimation)(),
-      ),
-    )
-  }
-
-  useEffect(() => {
-    if (activeGif) {
-      playAnimation()
-    }
-  }, [activeGif])
-
-  if (!activeGif) {
-    return null
-  }
-
-  return (
-    <Backdrop progress={progress}>
-      <ContentContainer progress={progress}>
-        <Gif
-          gifObject={activeGif}
-          getCachePathMethod={model.cache.getCachePathMethod}
-          TextComponent={TextComponent}
-        />
-        <Progress progress={progress} completedPercent={completedPercent} />
-      </ContentContainer>
-    </Backdrop>
-  )
-}

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

@@ -1,41 +0,0 @@
-import { StyleSheet, useWindowDimensions } from 'react-native'
-import React from 'react'
-import Animated, { useAnimatedStyle, interpolateColor, SharedValue } from 'react-native-reanimated'
-import { BACKDROP_COLOR } from '../constants'
-import { ProgressValue } from '../types/model.types'
-
-type BackdropProps = {
-  children: React.ReactNode
-  progress: SharedValue<ProgressValue>
-}
-
-export const Backdrop = ({ children, progress }: BackdropProps) => {
-  const { width, height } = useWindowDimensions()
-
-  const backdropAnimatedStyle = useAnimatedStyle(
-    () => ({
-      backgroundColor: interpolateColor(
-        progress.value,
-        [0, 1, 2],
-        [BACKDROP_COLOR.INITIAL, BACKDROP_COLOR.FINAL, BACKDROP_COLOR.INITIAL],
-      ),
-    }),
-    [progress],
-  )
-
-  return (
-    <Animated.View style={[styles.backdrop, { width, height }, backdropAnimatedStyle]}>
-      {children}
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  backdrop: {
-    position: 'absolute',
-    zIndex: 10100,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(51, 51, 51, 0.33);',
-  },
-})

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

@@ -1,44 +0,0 @@
-import { StyleSheet, useWindowDimensions } from 'react-native'
-import React from 'react'
-import { SPACING } from '@magmamath/react-native-ui'
-import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
-import { CONTENT_CONTAINER } from '../constants'
-import { ProgressValue } from '../types/model.types'
-
-type ContentContainerProps = {
-  children: React.ReactNode
-  progress: SharedValue<ProgressValue>
-}
-
-export const ContentContainer = ({ children, progress }: ContentContainerProps) => {
-  const { width } = useWindowDimensions()
-
-  const RIGHT_POSITION =
-    width / 2 + CONTENT_CONTAINER.CONTAINER_WIDTH / 2 + CONTENT_CONTAINER.ROTATION_PADDING
-  const LEFT_POSITION = -RIGHT_POSITION - CONTENT_CONTAINER.ROTATION_PADDING
-
-  const animatedStyles = useAnimatedStyle(
-    () => ({
-      transform: [
-        {
-          translateX: interpolate(progress.value, [0, 1, 2], [LEFT_POSITION, 0, RIGHT_POSITION]),
-        },
-        {
-          rotate: `${interpolate(progress.value, [0, 1, 2], [-CONTENT_CONTAINER.ANGLE, 0, CONTENT_CONTAINER.ANGLE])}deg`,
-        },
-      ],
-    }),
-    [progress, RIGHT_POSITION, LEFT_POSITION],
-  )
-
-  return <Animated.View style={[styles.container, animatedStyles]}>{children}</Animated.View>
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: CONTENT_CONTAINER.CONTAINER_WIDTH,
-    alignItems: 'center',
-    gap: SPACING[800],
-    position: 'absolute',
-  },
-})

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

@@ -1,89 +0,0 @@
-import { StyleSheet, View, Image } from 'react-native'
-import React, { useLayoutEffect, useState } from 'react'
-import { BORDER_RADIUS, COLORS, 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 { IS_WEB } from '../../../shared/constants'
-import { Size } from '../../../types/common.types'
-
-type GifProps = {
-  gifObject: GifObject
-  getCachePathMethod?: CustomGetCachePathMethod //it is used for RN
-  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

@@ -1,106 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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 - Image.queryCache works only in web
-    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

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

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

@@ -1,51 +0,0 @@
-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 prefetchAllGifs = createEffect<GifsGroups, void>((data) => {
-    Object.values(data).forEach((group) => {
-      group.forEach((gifUrl) => {
-        this.prefetchMethod(gifUrl)
-      })
-    })
-
-    this.initialSet(data)
-  })
-
-  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
-  }
-}