@magmamath/students-features 1.8.0 → 1.8.1-rc.1

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

@@ -1,117 +0,0 @@
-import {
-  StyleSheet,
-  View,
-  Image,
-  ImageBackground,
-  ScrollView,
-  useWindowDimensions,
-} 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.webp'
-import { TEST_IDS } from '@magmamath/students-qa'
-
-type SolutionSectionProps = {
-  answer?: string
-  status: ExampleSolutionStatuses
-}
-
-const CONTAINER_SIZES = {
-  width: 489,
-  height: 543,
-}
-const BORDER_WIDTH = 1
-const CONTAINER_HEIGHT_OFFSET = 160
-
-const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
-
-export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
-  const { height } = useWindowDimensions()
-
-  const shouldShowAnswer =
-    answer &&
-    (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
-
-  return (
-    <View
-      style={[styles.container, IS_WEB && { maxHeight: height - CONTAINER_HEIGHT_OFFSET }]}
-      testID={TEST_IDS.EXAMPLE_SOLUTION_SOLUTION_SECTION}
-    >
-      <ScrollView
-        style={styles.solutionScroll}
-        contentContainerStyle={styles.solutionScrollContent}
-        bounces
-      >
-        {IS_WEB ? (
-          <ImageBackground
-            resizeMode="repeat"
-            style={[styles.gridImageWeb]}
-            source={{ uri: gridImagePath }}
-          >
-            {shouldShowAnswer && (
-              <Animated.Text
-                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
-                style={styles.solutionText}
-              >
-                {answer}
-              </Animated.Text>
-            )}
-          </ImageBackground>
-        ) : (
-          <>
-            <ImageBackground
-              resizeMode="repeat"
-              style={styles.gridImageRn}
-              source={{ uri: gridImagePath }}
-            />
-            {shouldShowAnswer && (
-              <Animated.Text
-                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
-                style={styles.solutionText}
-              >
-                {answer}
-              </Animated.Text>
-            )}
-          </>
-        )}
-      </ScrollView>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: CONTAINER_SIZES.width,
-    height: CONTAINER_SIZES.height,
-    overflow: 'hidden',
-    borderRadius: 8,
-    borderWidth: BORDER_WIDTH,
-    borderColor: COLORS.NEUTRAL_5,
-  },
-  gridImageRn: {
-    top: -327,
-    width: '100%',
-    height: '150%',
-    position: 'absolute',
-  },
-  gridImageWeb: {
-    width: '100%',
-    height: '100%',
-  },
-  solutionScroll: {
-    flex: 1,
-  },
-  solutionScrollContent: {
-    minHeight: CONTAINER_SIZES.height - BORDER_WIDTH * 2,
-    width: '100%',
-  },
-  solutionText: {
-    fontFamily: 'PlaypenSans-Light',
-    fontSize: 28,
-    marginHorizontal: SPACING[800],
-    marginVertical: SPACING[400],
-    lineHeight: 36,
-  },
-})

package/src/features/exampleSolution/constants.ts

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

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

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

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

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

@@ -1,15 +0,0 @@
-import { ExampleSolutionModelProps } from '../types'
-import { ExampleSolutionsApi } from './ExampleSolutionApi'
-import { ExampleSolutionCache } from './ExampleSolutionCache'
-
-export class ExampleSolutionModel {
-  public readonly api
-  public readonly cache = new ExampleSolutionCache()
-
-  public readonly renderKatexComponent: (katexString: string) => React.ReactNode
-
-  constructor({ api, errorHandler, renderKatexComponent }: ExampleSolutionModelProps) {
-    this.api = new ExampleSolutionsApi({ api, errorHandler })
-    this.renderKatexComponent = renderKatexComponent
-  }
-}

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

@@ -1,29 +0,0 @@
-import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
-import { ExampleSolutionApiRequests, ExampleSolutionErrorHandler } from '../types'
-import { createEffect, sample } from 'effector'
-import { getText } from '../../../i18n/i18n'
-
-type ExampleSolutionApiProps = {
-  api: ExampleSolutionApiRequests
-  errorHandler?: ExampleSolutionErrorHandler
-}
-
-export class ExampleSolutionsApi {
-  public readonly generateExampleSolutionFx
-  public readonly errorHandlerFx?: ExampleSolutionErrorHandler
-
-  public readonly errorHandlingFx = createEffect(() => {
-    if (!this.errorHandlerFx) return
-    this.errorHandlerFx(getText('exampleSolution.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

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

@@ -1,27 +0,0 @@
-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 ExampleSolutionModelProps = {
-  api: ExampleSolutionApiRequests
-  errorHandler?: ExampleSolutionErrorHandler
-  renderKatexComponent: (katexString: string) => React.ReactNode
-}
-export type ExampleSolutionModalParams = {
-  cacheKey: string
-  payload: ExampleSolutionPayload
-  model: ExampleSolutionModel
-}