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

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/features/problemSelector/components/ProblemSelectorButton.tsx

@@ -38,7 +38,7 @@ export const ProblemSelectorButton = ({
         disabled={locked}
         icon={
           locked ? (
-            <LockIcon color={customColorScheme[ButtonStates.DISABLED]?.color} size={25} />
+            <LockIcon color={customColorScheme[ButtonStates.DISABLED]?.color} size="large" />
           ) : (
             <Typography
               variant="h3"

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'