@magmamath/students-features 1.4.6 → 1.5.0-rc.10

package/src/features/fluency/components/Fluency.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useGate, useUnit } from 'effector-react'
+import { useGate } from 'effector-react'
 import { View, StyleSheet } from 'react-native'
 import { Typography, HeadingVariants, SPACING, COLORS } from '@magmamath/react-native-ui'
 import { useText } from '../../../i18n/i18n'
@@ -8,7 +8,6 @@ import { DayStreakCounter } from './day-streak-counter/DayStreakCounter'
 import { SelectMathOperator } from './select-math-operator/SelectMathOperator'
 import { FluencyMatrix } from './matrix/FluencyMatrix'
 import { MobileMenu } from './mobile-menu/MobileMenu'
-import { FluencyStatusOverlay } from './FluencyStatusOverlay'
 import { FluencyProvider } from '../context/FluencyContext'
 import type { FluencyModel } from '../model/FluencyModel'
 import type { FluencyMode } from '../shared/fluency.constants'
@@ -33,7 +32,6 @@ export const Fluency = ({
 }: FluencyProps) => {
   useGate(model.gate, { config })
   const t = useText()
-  const status = useUnit(model.$status)
 
   return (
     <FluencyProvider value={{ model, onStartPress, onPracticePress, onModeSelectPress }}>
@@ -45,21 +43,15 @@ export const Fluency = ({
           </Typography>
         </View>
 
-        {status ? (
-          <FluencyStatusOverlay status={status} />
-        ) : (
-          <>
-            <View style={styles.header}>
-              <StartBanner />
-              <DayStreakCounter />
-            </View>
+        <View style={styles.header}>
+          <StartBanner />
+          <DayStreakCounter />
+        </View>
 
-            <View style={styles.matrix}>
-              <SelectMathOperator />
-              <FluencyMatrix />
-            </View>
-          </>
-        )}
+        <View style={styles.matrix}>
+          <SelectMathOperator />
+          <FluencyMatrix />
+        </View>
       </View>
     </FluencyProvider>
   )

package/src/features/fluency/components/select-math-operator/SelectMathOperator.tsx

@@ -17,22 +17,14 @@ import { useText } from '../../../../i18n/i18n'
 export const SelectMathOperator = () => {
   const t = useText()
   const { model, onModeSelectPress } = useFluency()
-  const { fluencyMode, matrix } = useUnit({
-    fluencyMode: model.matrix.$mode,
-    matrix: model.matrix.$data,
-  })
-
-  const visibleModes = matrix
-    ? FLUENCY_MODES.filter(
-        ({ mode }) => Object.keys(matrix.operations?.[mode]?.facts ?? {}).length > 0,
-      )
-    : FLUENCY_MODES
+  const fluencyMode = useUnit(model.matrix.$mode)
+  const matrix = useUnit(model.matrix.$data)
 
   return (
     <View style={styles.container}>
-      {visibleModes.map(({ mode, label, symbol, select }, index) => {
+      {FLUENCY_MODES.map(({ mode, label, symbol, select }, index) => {
         const isSelectedMode = mode === fluencyMode
-        const progress = (matrix?.operations?.[mode]?.completionRate ?? 0) * 100
+        const progress = (matrix?.operations[mode].completionRate ?? 0) * 100
 
         return (
           <MathOperatorRow
@@ -53,7 +45,7 @@ export const SelectMathOperator = () => {
               model.matrix.setMode(mode)
               onModeSelectPress?.(mode)
             }}
-            showDivider={index < visibleModes.length - 1}
+            showDivider={index < FLUENCY_MODES.length - 1}
           />
         )
       })}

package/src/features/fluency/model/FluencyModel.ts

@@ -5,8 +5,7 @@ import { FluencyDaysStreakModel } from './FluencyDaysStreakModel'
 import { FluencyMatrixModel } from './FluencyMatrixModel'
 import { FluencyApiModel } from './FluencyApiModel'
 import { FluencySolvingModel } from './FluencySolvingModel'
-import { FluencyStatus, MatrixConfig } from '../shared/fluency.constants'
-import { allFactsEmpty } from '../shared/fluency.helpers'
+import { MatrixConfig } from '../shared/fluency.constants'
 import type {
   FluencyAttemptPayload,
   FluencyConfig,
@@ -17,7 +16,6 @@ import type {
 export class FluencyModel {
   public readonly gate = createGate<FluencyModelGateProps>()
   public readonly $config = createStore<FluencyConfig | null>(null)
-  public readonly $status = createStore<FluencyStatus | null>(null)
 
   public readonly api: FluencyApiModel
   public readonly streak: FluencyDaysStreakModel
@@ -31,7 +29,6 @@ export class FluencyModel {
     this.solving = new FluencySolvingModel(this.matrix, this.$config)
 
     this.init()
-    this.setupStatusTracking()
   }
 
   private init() {
@@ -66,25 +63,4 @@ export class FluencyModel {
       target: this.api.postAttemptFx,
     })
   }
-
-  private setupStatusTracking() {
-    sample({
-      clock: this.gate.open,
-      fn: () => null as FluencyStatus | null,
-      target: this.$status,
-    })
-
-    sample({
-      clock: [this.api.getMatrixFx.fail, this.api.getWeeklyStatsFx.fail],
-      fn: () => FluencyStatus.ERROR,
-      target: this.$status,
-    })
-
-    sample({
-      clock: this.api.getMatrixFx.doneData,
-      filter: allFactsEmpty,
-      fn: () => FluencyStatus.EMPTY,
-      target: this.$status,
-    })
-  }
 }

package/src/features/fluency/shared/fluency.constants.ts

@@ -106,8 +106,3 @@ export const FLUENCY_MODE_PRESETS: Record<FluencyMode, FluencyModePreset> = Obje
 ) as Record<FluencyMode, FluencyModePreset>
 
 export const ONE_DAY_MS = 86_400_000
-
-export enum FluencyStatus {
-  ERROR = 'ERROR',
-  EMPTY = 'EMPTY',
-}

package/src/features/fluency/shared/fluency.helpers.ts

@@ -117,9 +117,6 @@ export const buildMatrixGrid = (data: GetMatrixResponse, mode: FluencyMode): Mat
   return [headerRow, ...dataRows]
 }
 
-export const allFactsEmpty = (response: GetMatrixResponse): boolean =>
-  Object.values(response.operations).every((op) => Object.keys(op.facts).length === 0)
-
 export const generateStreakDates = (stats: GetWeeklyStatsResponse) => {
   const todayMs = new Date().setHours(0, 0, 0, 0)
   const startMs = new Date(stats.weekStart).setHours(0, 0, 0, 0)

package/src/features/pmProgress/model/PmProgressModel.ts

@@ -43,10 +43,7 @@ export class PmProgressModel {
 
     sample({
       clock: this.tree.initTreeFx.done,
-      fn: ({ params: { user }, result: [tree] }) => ({
-        tree,
-        lockedGrades: user.setting.practiceModeLockedGrades,
-      }),
+      fn: ({ result: [tree] }) => tree,
       target: this.recommendations.initRecommendationsFx,
     })
   }

package/src/features/pmProgress/model/PmRecommendationsModel.ts

@@ -2,12 +2,6 @@ import { PmProgressApi } from './PmProgressApi'
 import { createEffect, createEvent, createStore, sample } from 'effector'
 import { Recommendations, RecsResponse, TreeMappingResponse } from '../shared/pmProgress.types'
 import { RECOMMENDATIONS_LIMIT_PARAM, SolvingFlow } from '../shared/pmProgress.constants'
-import { filterLockedGradeRecs } from '../shared/pmProgress.helpers'
-
-type FetchMagmaRecsParams = {
-  tree: TreeMappingResponse
-  lockedGrades: number[]
-}
 
 const EMPTY_RECS: Recommendations = { items: [], offset: 0, limit: 0, total: 0 }
 
@@ -28,24 +22,14 @@ export class PmRecommendationsModel {
     ),
   )
 
-  public readonly fetchMagmaRecsFx = createEffect(
-    async ({ tree, lockedGrades }: FetchMagmaRecsParams) => {
-      const recs = await this.fetchRecs(tree, SolvingFlow.MAGMA, () =>
-        this.api.getMagmaRecsFx({ limit: RECOMMENDATIONS_LIMIT_PARAM }),
-      )
-      return {
-        ...recs,
-        items: filterLockedGradeRecs(recs.items, tree.treeMapping, lockedGrades),
-      }
-    },
+  public readonly fetchMagmaRecsFx = createEffect((tree: TreeMappingResponse) =>
+    this.fetchRecs(tree, SolvingFlow.MAGMA, () =>
+      this.api.getMagmaRecsFx({ limit: RECOMMENDATIONS_LIMIT_PARAM }),
+    ),
   )
 
-  public readonly initRecommendationsFx = createEffect(
-    ({ tree, lockedGrades }: FetchMagmaRecsParams) =>
-      Promise.all([
-        this.fetchTeacherRecsFx(tree),
-        this.fetchMagmaRecsFx({ tree, lockedGrades }),
-      ]),
+  public readonly initRecommendationsFx = createEffect((tree: TreeMappingResponse) =>
+    Promise.all([this.fetchTeacherRecsFx(tree), this.fetchMagmaRecsFx(tree)]),
   )
 
   private fetchRecs = async (

package/src/features/pmProgress/shared/pmProgress.helpers.ts

@@ -298,39 +298,6 @@ export const formatGradeLabel = (grade: number, customLabelsMap?: GradeLabelsMap
   return `${getText('pmProgress.grade')} ${label.name}`
 }
 
-const buildSkillGradeMap = (
-  treeMapping: TreeMappingResponse['treeMapping'],
-): Map<string, number> => {
-  const map = new Map<string, number>()
-
-  const collectSkills = (nodeId: string, gradeValue: number) => {
-    const node = treeMapping[nodeId]
-    if (!node) return
-    node.skills.forEach((skillId) => map.set(skillId, gradeValue))
-    node.children.forEach((childId) => collectSkills(childId, gradeValue))
-  }
-
-  Object.values(treeMapping)
-    .filter((node) => node.type === 'grade')
-    .forEach((gradeNode) => collectSkills(gradeNode._id, gradeNode.attributes.grade))
-
-  return map
-}
-
-export const filterLockedGradeRecs = (
-  skills: Skill[],
-  treeMapping: TreeMappingResponse['treeMapping'],
-  lockedGrades: number[],
-): Skill[] => {
-  if (lockedGrades.length === 0) return skills
-  const locked = new Set(lockedGrades)
-  const skillGradeMap = buildSkillGradeMap(treeMapping)
-  return skills.filter((skill) => {
-    const grade = skillGradeMap.get(skill._id)
-    return grade === undefined || !locked.has(grade)
-  })
-}
-
 export const getTreeGrades = (tree: TreeMappingResponse, user: User): Grade[] => {
   const lockedGrades = new Set(user.setting.practiceModeLockedGrades)
 

package/src/features/translation/constants.ts

@@ -0,0 +1,4 @@
+export const GBD_TEXT_CACHE_SUFFIX = '::gbd'
+export const DESCRIPTION_CACHE_KEY_SUFFIX = '::description'
+export const CHOICES_CACHE_KEY_SUFFIX = '::choices'
+export const PRACTICE_THEORY_CACHE_KEY_SUFFIX = '::practice-theory'

package/src/features/translation/helpers.ts

@@ -0,0 +1,63 @@
+import { MaskSegmentParams } from './types'
+
+export function replaceMappedTokens(input: string, map: Record<string, string>): string {
+  let result = input
+
+  for (const [original, override] of Object.entries(map)) {
+    const escaped = original.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const regex = new RegExp(`\\b${escaped}\\b`, 'gi')
+
+    result = result.replace(regex, override)
+  }
+
+  return result
+}
+
+/**
+ * Masks text segments matched by `regex` with a placeholder,
+ * while preserving spaces around the original match.
+ */
+export const maskSegment = ({
+  text,
+  regex,
+  placeholder,
+  replacements,
+  shouldSkip,
+}: MaskSegmentParams): string => {
+  return text.replace(regex, (match, ...args) => {
+    if (shouldSkip?.(match)) return match
+
+    const offset = args[args.length - 2] as number
+    const input = args[args.length - 1] as string
+
+    const before = offset > 0 ? input[offset - 1] : ''
+    const afterIdx = offset + match.length
+    const after = afterIdx < input.length ? input[afterIdx] : ''
+
+    const leftPad = /\s/.test(before)
+    const rightPad = /\s/.test(after)
+
+    replacements.push({ placeholder, original: match, leftPad, rightPad })
+
+    return placeholder
+  })
+}
+
+const HTML_NAMED_ENTITIES: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&apos;': "'",
+  '&nbsp;': ' ',
+}
+
+export const decodeHtmlEntities = (text: string): string => {
+  return text
+    .replace(/&#(\d+);/g, (_, code: string) => String.fromCharCode(parseInt(code, 10)))
+    .replace(/&#x([0-9a-f]+);/gi, (_, code: string) => String.fromCharCode(parseInt(code, 16)))
+    .replace(
+      /&(amp|lt|gt|quot|apos|nbsp);/g,
+      (match) => HTML_NAMED_ENTITIES[match] ?? match,
+    )
+}

package/src/features/translation/index.ts

@@ -0,0 +1,30 @@
+export { TranslationModel } from './model/TranslationModel'
+export { TranslationService, type TranslateConfigProps } from './model/TranslationService'
+export { TranslationKatexPreprocessor } from './model/TranslationPreprocessor'
+export { TranslationProvider, type LanguageGlossary } from './providers/translation.interface'
+export { GoogleTranslationProvider } from './providers/google/GoogleTranslationProvider'
+export { GoogleTranslateLanguage } from './providers/google/supportedLanguages'
+export type {
+  GoogleTranslateProps,
+  GoogleTranslateResponse,
+  GoogleTranslation,
+} from './providers/google.types'
+export { wordsToPreserve, preservedWordsReplacers } from './preserve/wordsToPreserve'
+export {
+  GBD_TEXT_CACHE_SUFFIX,
+  DESCRIPTION_CACHE_KEY_SUFFIX,
+  CHOICES_CACHE_KEY_SUFFIX,
+  PRACTICE_THEORY_CACHE_KEY_SUFFIX,
+} from './constants'
+export {
+  replaceMappedTokens,
+  maskSegment,
+  decodeHtmlEntities,
+} from './helpers'
+export type {
+  TranslatableProblem,
+  TranslateAllFxParams,
+  TranslateFxParams,
+  Replacement,
+  MaskSegmentParams,
+} from './types'

package/src/features/translation/model/TranslationModel.ts

@@ -0,0 +1,174 @@
+import {
+  attach,
+  combine,
+  createEffect,
+  createEvent,
+  restore,
+  sample,
+  split,
+  Store,
+  Unit,
+} from 'effector'
+import { GoogleTranslationProvider } from '../providers/google/GoogleTranslationProvider'
+import {
+  GoogleTranslateProps,
+  GoogleTranslateResponse,
+} from '../providers/google.types'
+import { TranslationService } from './TranslationService'
+import {
+  preservedWordsReplacers,
+  wordsToPreserve,
+} from '../preserve/wordsToPreserve'
+import {
+  CHOICES_CACHE_KEY_SUFFIX,
+  DESCRIPTION_CACHE_KEY_SUFFIX,
+  GBD_TEXT_CACHE_SUFFIX,
+} from '../constants'
+import {
+  TranslatableProblem,
+  TranslateAllFxParams,
+  TranslateFxParams,
+} from '../types'
+
+type TranslationModelProps<TProblem extends TranslatableProblem> = {
+  $problem: Store<TProblem | null>
+  $problemId: Store<string>
+  $assignmentId: Store<string>
+  $currentProblemIndex: Store<number>
+  $translationLanguageCode: Store<string>
+  $contentLanguageCode?: Store<string>
+  $isTranslationLocked: Store<boolean>
+  languageChanged: Unit<unknown>
+  api: {
+    translateRequest: (payload: GoogleTranslateProps) => Promise<GoogleTranslateResponse>
+  }
+  getGreatWorkFeedbackText?: () => string
+}
+
+export class TranslationModel<TProblem extends TranslatableProblem = TranslatableProblem> {
+  private readonly service: TranslationService
+
+  public readonly toggle = createEvent()
+  public readonly setTranslated = createEvent<boolean>()
+  public readonly reset = createEvent()
+
+  public readonly $isTranslationActive = restore(this.setTranslated, false).reset(this.reset)
+  public readonly $isTranslated = this.$isTranslationActive
+  public readonly $isTranslationPending
+
+  public readonly translateFx
+  public readonly translateAllFx
+
+  constructor({
+    $problem,
+    $problemId,
+    $assignmentId,
+    $currentProblemIndex,
+    $translationLanguageCode,
+    $contentLanguageCode,
+    $isTranslationLocked,
+    languageChanged,
+    api,
+    getGreatWorkFeedbackText,
+  }: TranslationModelProps<TProblem>) {
+    this.service = new TranslationService({
+      preserve: {
+        map: wordsToPreserve,
+        replacers: preservedWordsReplacers,
+      },
+      providers: [new GoogleTranslationProvider({ api })],
+      onError: () => this.reset(),
+    })
+
+    this.service.bindCustomCacheKey(
+      $problemId,
+      (problemId, { target }) => `${problemId}::${target}`,
+    )
+    this.service.bindTargetLanguage($translationLanguageCode)
+    if ($contentLanguageCode) {
+      this.service.bindSourceLanguage($contentLanguageCode)
+    }
+
+    this.translateAllFx = attach({
+      source: {
+        problem: $problem,
+        translationLanguageCode: $translationLanguageCode,
+      },
+      mapParams: (_: void, source) => source,
+      effect: createEffect(({ problem, translationLanguageCode }: TranslateAllFxParams<TProblem>) => {
+        if (!problem) return
+
+        const promises: Promise<unknown>[] = [
+          this.service.translate(problem.richDescription || problem.description, {
+            cacheKeySuffix: DESCRIPTION_CACHE_KEY_SUFFIX,
+          }),
+          this.service.translate(problem.answerVariants, {
+            cacheKeySuffix: CHOICES_CACHE_KEY_SUFFIX,
+          }),
+        ]
+
+        if (getGreatWorkFeedbackText) {
+          promises.push(
+            this.service.translate(getGreatWorkFeedbackText(), {
+              cacheKey: `${translationLanguageCode}${GBD_TEXT_CACHE_SUFFIX}`,
+            }),
+          )
+        }
+
+        return Promise.all(promises)
+      }),
+    })
+
+    this.translateFx = createEffect(({ cacheKey, text }: TranslateFxParams) => {
+      return this.service.translate(text, { cacheKey })
+    })
+
+    this.$isTranslationActive.on(this.translateAllFx.doneData, () => true)
+    this.$isTranslationActive.on(this.translateAllFx.fail, () => false)
+
+    split({
+      source: sample({
+        clock: this.toggle,
+        source: this.$isTranslationActive,
+      }),
+      match: {
+        on: (isTranslated) => !isTranslated,
+        off: (isTranslated) => isTranslated,
+      },
+      cases: {
+        on: this.translateAllFx,
+        off: this.reset,
+      },
+    })
+
+    sample({
+      clock: languageChanged,
+      fn: () => false,
+      target: this.setTranslated,
+    })
+
+    sample({
+      clock: [$currentProblemIndex, $assignmentId, this.$isTranslationActive],
+      source: {
+        isTranslated: this.$isTranslationActive,
+        isLocked: $isTranslationLocked,
+      },
+      filter: ({ isTranslated, isLocked }) => isLocked || isTranslated,
+      target: this.translateAllFx,
+    })
+
+    this.$isTranslationPending = combine(
+      this.translateAllFx.pending,
+      this.translateFx.pending,
+      (isAllPending, isOnePending) => isAllPending || isOnePending,
+    )
+  }
+
+  public getTranslated<T extends string | string[]>(key: string): T | undefined {
+    return this.service.getCached<T>(key)
+  }
+
+  public clearCache() {
+    this.service.reset()
+  }
+}