@magmamath/students-features 0.6.12 → 0.6.14-rc.0

package/src/features/exampleSolution/components/MessageBlock.tsx

@@ -0,0 +1,67 @@
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import React from 'react'
+import { COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type MessageBlockProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const MessageBlock = ({ status, style }: MessageBlockProps) => {
+  const localization = useUnit($localization)
+
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withDelay(
+        2000,
+        withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 350 }),
+      ),
+    }
+  }, [status])
+
+  if (status === ExampleSolutionStatuses.CACHE) return null
+
+  return (
+    <Animated.View
+      layout={LinearTransition.duration(250)}
+      style={[styles.container, opacityAnimation, style]}
+    >
+      <Typography variant={'small'} numberOfLines={1}>
+        {status === ExampleSolutionStatuses.LOADING
+          ? localization.exampleSolution.letMeThink
+          : localization.exampleSolution.aha}
+      </Typography>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_3,
+    height: 44,
+    borderRadius: 12,
+    borderBottomRightRadius: 2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: COLORS.NEUTRAL_5,
+
+    shadowColor: COLORS.NEUTRAL_10,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+
+    elevation: 3,
+  },
+})

package/src/features/exampleSolution/components/QuestionSection.tsx

@@ -0,0 +1,56 @@
+import { StyleSheet, View, ScrollView } from 'react-native'
+import React from 'react'
+import { COLORS, Loader, LoaderColor, SPACING, Typography } from '@magmamath/react-native-ui'
+import Animated, { FadeOut } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type QuestionSectionProps = {
+  question?: string
+  status: ExampleSolutionStatuses
+}
+
+export const QuestionSection = ({ question, status }: QuestionSectionProps) => {
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollView}>
+        <Typography>{question}</Typography>
+      </ScrollView>
+      {status === ExampleSolutionStatuses.LOADING && (
+        <Animated.View exiting={FadeOut} style={styles.loaderContainer}>
+          <Loader size="large" color={LoaderColor.BLUE} />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SPACING[400],
+  },
+  errorText: {
+    color: COLORS.PRIMARY_RED,
+    textAlign: 'center',
+  },
+})

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, View, Image, Text } from 'react-native'
+import React from 'react'
+import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
+import Animated, { FadeIn } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+import gridImage from '../assets/grid.png'
+
+type SolutionSectionProps = {
+  answer?: string
+  status: ExampleSolutionStatuses
+}
+
+const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
+
+export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
+  const shouldShowAnswer =
+    answer &&
+    (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: gridImagePath }}
+        style={[styles.gridImage, IS_WEB && styles.gridImageWeb]}
+      />
+      {shouldShowAnswer && (
+        <Animated.ScrollView
+          style={styles.solutionScroll}
+          contentContainerStyle={styles.solutionScrollContent}
+          entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+        >
+          <Text style={styles.solutionText}>{answer}</Text>
+        </Animated.ScrollView>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 500,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  gridImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+    aspectRatio: 28 / 8,
+  },
+  gridImageWeb: {
+    transform: [{ scale: 3.5 }],
+  },
+  solutionScroll: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  solutionScrollContent: {
+    paddingHorizontal: SPACING[800],
+    paddingVertical: SPACING[400],
+  },
+  solutionText: {
+    fontFamily: 'PlaypenSans-Light',
+    fontSize: 22,
+  },
+})

package/src/features/exampleSolution/constants.ts

@@ -0,0 +1,5 @@
+export const enum ExampleSolutionStatuses {
+  LOADING = 'loading',
+  DONE_DATA = 'doneData',
+  CACHE = 'cache',
+}

package/src/features/exampleSolution/hooks/useExampleSolution.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { useUnit } from 'effector-react'
+import { ExampleSolutionModalParams, ExampleSolutionResponse } from '../types'
+import { ExampleSolutionStatuses } from '../constants'
+
+const ANIMATION_DELAY = 600
+
+type UseExampleSolutionReturn = {
+  result: ExampleSolutionResponse | null
+  status: ExampleSolutionStatuses
+}
+
+export const useExampleSolution = ({
+  model,
+  payload,
+  cacheKey,
+}: ExampleSolutionModalParams): UseExampleSolutionReturn => {
+  const exampleSolutionsCache = useUnit(model.cache.$state)
+  const [result, setResult] = useState<ExampleSolutionResponse | null>(null)
+  const [status, setStatus] = useState<ExampleSolutionStatuses>(ExampleSolutionStatuses.LOADING)
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null
+
+    const fetchExampleSolution = async () => {
+      try {
+        if (exampleSolutionsCache[cacheKey]) {
+          setResult(exampleSolutionsCache[cacheKey])
+          setStatus(ExampleSolutionStatuses.CACHE)
+          return
+        }
+
+        const startTime = Date.now()
+        const response = await model.api.generateExampleSolutionFx(payload)
+
+        setResult(response)
+        model.cache.addExampleSolution({ cacheKey, response })
+
+        const elapsedTime = Date.now() - startTime
+        if (elapsedTime >= ANIMATION_DELAY) {
+          setStatus(ExampleSolutionStatuses.DONE_DATA)
+        } else {
+          timer = setTimeout(() => {
+            setStatus(ExampleSolutionStatuses.DONE_DATA)
+          }, ANIMATION_DELAY - elapsedTime)
+        }
+      } catch (error) {
+        console.error('Failed to fetch example solution:', error)
+        setStatus(ExampleSolutionStatuses.DONE_DATA)
+      }
+    }
+
+    fetchExampleSolution()
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+    }
+  }, [])
+
+  return {
+    result,
+    status,
+  }
+}

package/src/features/exampleSolution/index.ts

@@ -0,0 +1,3 @@
+export * from './ExampleSolutionModal'
+export * from './model/ExampleSolution.model'
+export * from './types'

package/src/features/exampleSolution/model/ExampleSolution.model.ts

@@ -0,0 +1,12 @@
+import { GifCelebrationsModelProps } from '../types'
+import { ExampleSolutionsApi } from './ExampleSolutionApi'
+import { ExampleSolutionCache } from './ExampleSolutionCache'
+
+export class ExampleSolutionModel {
+  public readonly api
+  public readonly cache = new ExampleSolutionCache()
+
+  constructor({ api, errorHandler }: GifCelebrationsModelProps) {
+    this.api = new ExampleSolutionsApi({ api, errorHandler })
+  }
+}

package/src/features/exampleSolution/model/ExampleSolutionApi.ts

@@ -0,0 +1,33 @@
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+import { ExampleSolutionApiRequests, ExampleSolutionErrorHandler } from '../types'
+import { $localization } from '../../../shared/translation'
+import { createEffect, sample, attach, StoreValue } from 'effector'
+
+type ExampleSolutionApiProps = {
+  api: ExampleSolutionApiRequests
+  errorHandler?: ExampleSolutionErrorHandler
+}
+
+export class ExampleSolutionsApi {
+  public readonly generateExampleSolutionFx
+  public readonly errorHandlerFx?: ExampleSolutionErrorHandler
+
+  public readonly errorHandlingFx = attach({
+    source: $localization,
+    effect: createEffect((localization: StoreValue<typeof $localization>) => {
+      if (!this.errorHandlerFx) return
+      const errorMessage = localization.exampleSolution.errorMessage
+      this.errorHandlerFx(errorMessage)
+    }),
+  })
+
+  constructor({ api, errorHandler }: ExampleSolutionApiProps) {
+    this.generateExampleSolutionFx = createControllerEffect(api.generateExampleSolution)
+    this.errorHandlerFx = errorHandler
+
+    sample({
+      clock: this.generateExampleSolutionFx.fail,
+      target: this.errorHandlingFx,
+    })
+  }
+}

package/src/features/exampleSolution/model/ExampleSolutionCache.ts

@@ -0,0 +1,20 @@
+import { createEvent, createStore } from 'effector'
+import { ExampleSolutionResponse } from '../types'
+
+type AddExampleSolution = {
+  cacheKey: string
+  response: ExampleSolutionResponse
+}
+
+export class ExampleSolutionCache {
+  public readonly addExampleSolution = createEvent<AddExampleSolution>()
+  public readonly $state = createStore<Record<string, ExampleSolutionResponse>>({}).on(
+    this.addExampleSolution,
+    (state, exampleSolution) => {
+      return {
+        ...state,
+        [exampleSolution.cacheKey]: exampleSolution.response,
+      }
+    },
+  )
+}

package/src/features/exampleSolution/types.ts

@@ -0,0 +1,26 @@
+import { ExampleSolutionModel } from './model/ExampleSolution.model'
+
+export type ExampleSolutionPayload = {
+  question: string
+  answer: string
+  language: string
+  altText?: string
+  imageCdnId?: string
+}
+export type ExampleSolutionResponse = {
+  question: string
+  answer: string
+}
+export type ExampleSolutionApiRequests = {
+  generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>
+}
+export type ExampleSolutionErrorHandler = (errorMessage: string) => void
+export type GifCelebrationsModelProps = {
+  api: ExampleSolutionApiRequests
+  errorHandler?: ExampleSolutionErrorHandler
+}
+export type ExampleSolutionModalParams = {
+  cacheKey: string
+  payload: ExampleSolutionPayload
+  model: ExampleSolutionModel
+}

package/src/index.ts

@@ -7,3 +7,5 @@ export * from './features/endOfAssignment'
 export * from './features/formulaSheet'
 export * from './features/problemSelector'
 export * from './features/gifCelebrations'
+export * from './features/exampleSolution'
+export * from './shared/icons'