@magmamath/students-features 1.3.26-rc.11 → 1.3.26-rc.13

package/src/features/fluency-teacher/fluencyTeacher.helpers.ts

@@ -0,0 +1,72 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import type { ClassFluencySummaryResponse, ClassFluencyStats, ClassOperatorAverages, FluencyStudent } from './fluencyTeacher.types'
+
+export const getCellColor = (box: number | null, colorMap: Record<number, string>): string =>
+  box ? (colorMap[box] ?? COLORS.NEUTRAL_2) : COLORS.NEUTRAL_2
+
+export const toAverageLabel = (overallPercent: number): string => {
+  if (overallPercent >= 0.9) return 'Very Strong'
+  if (overallPercent >= 0.8) return 'Strong'
+  if (overallPercent >= 0.7) return 'Moderate'
+  if (overallPercent > 0) return 'Weak'
+  return 'Not started'
+}
+
+const toPercent = (decimal: number): number => Math.round(decimal * 100)
+
+type BuildStudentsFluencyTableProps = {
+  students: FluencyStudent[]
+  response: ClassFluencySummaryResponse
+}
+
+const buildOperatorAverages = (response: ClassFluencySummaryResponse): ClassOperatorAverages => {
+  const count = response.students.length
+  if (count === 0) return { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
+
+  const sums = response.students.reduce(
+    (acc, row) => ({
+      addition: acc.addition + row.byOperator.addition,
+      subtraction: acc.subtraction + row.byOperator.subtraction,
+      multiplication: acc.multiplication + row.byOperator.multiplication,
+      division: acc.division + row.byOperator.division,
+    }),
+    { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
+  )
+
+  return {
+    addition: toPercent(sums.addition / count),
+    subtraction: toPercent(sums.subtraction / count),
+    multiplication: toPercent(sums.multiplication / count),
+    division: toPercent(sums.division / count),
+  }
+}
+
+export const buildClassAverageStats = (response: ClassFluencySummaryResponse): ClassFluencyStats => ({
+  ...response,
+  classAverage: toPercent(response.classAverage),
+  operatorAverages: buildOperatorAverages(response),
+})
+
+export const buildStudentsFluencyTable = ({
+  students,
+  response,
+}: BuildStudentsFluencyTableProps) => {
+  return response.students
+    .map((row) => {
+      const student = students.find(({ id }) => id === row.studentId)
+      if (!student) return null
+      return {
+        id: row.studentId,
+        name: student?.name ?? '',
+        averagePercent: toPercent(row.overallPercent),
+        averageLabel: toAverageLabel(row.overallPercent),
+        scores: {
+          addition: toPercent(row.byOperator.addition),
+          subtraction: toPercent(row.byOperator.subtraction),
+          multiplication: toPercent(row.byOperator.multiplication),
+          division: toPercent(row.byOperator.division),
+        },
+      }
+    })
+    .filter((item) => item !== null)
+}

package/src/features/fluency-teacher/fluencyTeacher.types.ts

@@ -0,0 +1,135 @@
+export enum FluencyOperator {
+  ADDITION = 'addition',
+  SUBTRACTION = 'subtraction',
+  MULTIPLICATION = 'multiplication',
+  DIVISION = 'division',
+}
+
+export enum FluencyMathOperatorSymbol {
+  ADDITION = '+',
+  SUBTRACTION = '−',
+  MULTIPLICATION = '×',
+  DIVISION = '÷',
+}
+
+type FactId = string
+
+type FactPosition = {
+  column: number
+  row: number
+}
+
+type FactState = {
+  box: number
+  lastAttemptedAt: string | null
+  lastSolvedAt: string | null
+  attemptsCount: number
+  correctCount: number
+  averageTimeMs: number | null
+  numbers: [number, number]
+  position: FactPosition
+  streak: number
+}
+
+type ClassFluencyOperationView = {
+  facts: Record<FactId, FactState>
+}
+
+type TeacherFluencyTableRow = {
+  studentId: string
+  overallPercent: number
+  byOperator: {
+    addition: number
+    subtraction: number
+    multiplication: number
+    division: number
+  }
+  lastAttemptedAt: string | null
+  weeklyTimeMs: number
+}
+
+type TeacherFluencyHardestFact = {
+  factId: string
+  operator: FluencyOperator
+  correctRate: number
+  attemptCount: number
+  strugglingStudentIds: string[]
+  numbers: [number, number]
+}
+
+export type FluencyStudent = {
+  id: string
+  name: string
+}
+
+export type ClassFluencySummaryPayload = {
+  studentIds: string[]
+}
+
+export type ClassFluencySummaryResponse = {
+  classAverage: number
+  students: TeacherFluencyTableRow[]
+  hardestFacts: TeacherFluencyHardestFact[]
+}
+
+export type ClassOperatorAverages = {
+  addition: number
+  subtraction: number
+  multiplication: number
+  division: number
+}
+
+export type ClassFluencyStats = ClassFluencySummaryResponse & {
+  operatorAverages: ClassOperatorAverages
+}
+
+export type StudFluencyDetailsResponse = {
+  operations: Record<FluencyOperator, ClassFluencyOperationView>
+}
+
+export type StudFluencyDetailsPayload = {
+  studentId: string
+  grade: number
+}
+
+export type SortColumn = 'average' | FluencyOperator
+export type SortDirection = 'asc' | 'desc'
+
+export type SortState = {
+  column: SortColumn
+  direction: SortDirection
+}
+
+export type StudentOperatorScores = Record<FluencyOperator, number>
+
+export type StudentResult = {
+  id: string
+  name: string
+  averagePercent: number
+  averageLabel: string
+  scores: StudentOperatorScores
+}
+
+export type StudentDrawerInfo = StudentResult & {
+  details: StudFluencyDetailsResponse | null
+}
+
+export type OperatorColumnConfig = {
+  operator: FluencyOperator
+  label: string
+  symbol: string
+  badgeBg: string
+  badgeText: string
+}
+
+export type TeacherFluencyGateProps = {
+  students: FluencyStudent[]
+  grade: number
+}
+
+export type TeacherFluencyModelProps = {
+  api: {
+    getClassSummary: (payload: ClassFluencySummaryPayload) => Promise<ClassFluencySummaryResponse>
+    getStudentDetails: (payload: StudFluencyDetailsPayload) => Promise<StudFluencyDetailsResponse>
+  }
+}

package/src/features/fluency-teacher/hooks/useDrawerGrid.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+import { useUnit } from 'effector-react'
+import { FluencyOperator } from '../fluencyTeacher.types'
+import { useTeacherFluency } from '../context/TeacherFluencyContext'
+
+export type DrawerGridCell = { box: number | null; isEmpty: boolean }
+export type DrawerGridRow = { label: number; cells: DrawerGridCell[] }
+export type DrawerGrid = { colLabels: number[]; rows: DrawerGridRow[] }
+
+export const useDrawerGrid = (operator: FluencyOperator): DrawerGrid | null => {
+  const { model } = useTeacherFluency()
+  const drawerInfo = useUnit(model.table.$studentInfoDrawer)
+
+  return useMemo(() => {
+    const factRecord = drawerInfo?.details?.operations[operator]?.facts ?? {}
+    const factList = Object.values(factRecord)
+
+    if (!factList.length) return null
+
+    const isDivision = operator === FluencyOperator.DIVISION
+    const isSubtraction = operator === FluencyOperator.SUBTRACTION
+    const isCommutative =
+      operator === FluencyOperator.ADDITION || operator === FluencyOperator.MULTIPLICATION
+
+    const maxRow = Math.max(...factList.map((f) => f.position.row))
+    const maxCol = Math.max(...factList.map((f) => f.position.column))
+
+    const factAt = (row: number, col: number) =>
+      factList.find((f) => f.position.row === row && f.position.column === col)
+
+    const colLabels = isDivision
+      ? Array.from({ length: maxCol }, (_, i) => i + 1)
+      : Array.from({ length: maxCol + 1 }, (_, i) => i)
+
+    const maxMinuend = isSubtraction ? Math.max(...factList.map((f) => f.numbers[0])) : maxRow
+    const rowNums = Array.from({ length: maxMinuend + 1 }, (_, i) => i)
+
+    const rows = rowNums.map((rowNum) => ({
+      label: rowNum,
+      cells: colLabels.map((colLabel) => {
+        if (isSubtraction && colLabel > rowNum) return { box: null, isEmpty: true }
+
+        const fact = isSubtraction ? factAt(rowNum - colLabel, colLabel) : factAt(rowNum, colLabel)
+        const mirrorFact = isCommutative ? factAt(colLabel, rowNum) : null
+        const primaryBox = fact?.box ?? null
+        const mirrorBox = mirrorFact?.box ?? null
+        const box =
+          primaryBox !== null && mirrorBox !== null
+            ? Math.max(primaryBox, mirrorBox)
+            : (primaryBox ?? mirrorBox)
+
+        return { box, isEmpty: false }
+      }),
+    }))
+
+    return { colLabels, rows }
+  }, [drawerInfo, operator])
+}

package/src/features/fluency-teacher/hooks/useDrawerMatrix.ts

@@ -0,0 +1,45 @@
+import { useMemo, useState } from 'react'
+import type { LayoutChangeEvent } from 'react-native'
+import { FluencyOperator } from '../fluencyTeacher.types'
+import { MATRIX_CELL_COLORS } from '../fluencyTeacher.constants'
+import { useDrawerGrid, type DrawerGrid } from './useDrawerGrid'
+
+const MATRIX_CELL_GAP = 2
+
+type DrawerMatrixLayout = {
+  grid: DrawerGrid | null
+  cellSize: number
+  fontSize: number
+  borderRadius: number
+  cellColorMap: Record<number, string>
+  onLayout: (e: LayoutChangeEvent) => void
+}
+
+export const useDrawerMatrix = (operator: FluencyOperator): DrawerMatrixLayout => {
+  const grid = useDrawerGrid(operator)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width)
+    setContainerHeight(e.nativeEvent.layout.height)
+  }
+
+  const cellSize = useMemo(() => {
+    if (!grid || !containerWidth || !containerHeight) return 0
+    const totalCols = grid.colLabels.length + 1
+    const totalRows = grid.rows.length + 1
+    const cellW = Math.floor((containerWidth - MATRIX_CELL_GAP * (totalCols - 1)) / totalCols)
+    const cellH = Math.floor((containerHeight - MATRIX_CELL_GAP * (totalRows - 1)) / totalRows)
+    return Math.min(cellW, cellH)
+  }, [grid, containerWidth, containerHeight])
+
+  return {
+    grid,
+    cellSize,
+    fontSize: Math.max(8, Math.floor(cellSize * 0.55)),
+    borderRadius: Math.max(2, Math.floor(cellSize * 0.25)),
+    cellColorMap: MATRIX_CELL_COLORS[operator],
+    onLayout,
+  }
+}

package/src/features/fluency-teacher/index.ts

@@ -0,0 +1,2 @@
+export { TeacherFluencyModel } from './model/TeacherFluencyModel'
+export { FluencyTeacher } from './components/FluencyTeacher'

package/src/features/fluency-teacher/model/TeacherFluencyApiModel.ts

@@ -0,0 +1,18 @@
+import { createEffect, Effect } from 'effector'
+import type {
+  TeacherFluencyModelProps,
+  ClassFluencySummaryPayload,
+  ClassFluencySummaryResponse,
+  StudFluencyDetailsPayload,
+  StudFluencyDetailsResponse,
+} from '../fluencyTeacher.types'
+
+export class TeacherFluencyApiModel {
+  public readonly getClassSummaryFx: Effect<ClassFluencySummaryPayload, ClassFluencySummaryResponse>
+  public readonly getStudentDetailsFx: Effect<StudFluencyDetailsPayload, StudFluencyDetailsResponse>
+
+  constructor(api: TeacherFluencyModelProps['api']) {
+    this.getClassSummaryFx = createEffect(api.getClassSummary)
+    this.getStudentDetailsFx = createEffect(api.getStudentDetails)
+  }
+}

package/src/features/fluency-teacher/model/TeacherFluencyFiltersModel.ts

@@ -0,0 +1,17 @@
+import { createEvent, createStore, restore } from 'effector'
+import type { SortColumn, SortState } from '../fluencyTeacher.types'
+
+export class TeacherFluencyFiltersModel {
+  public readonly setSearch = createEvent<string>()
+  public readonly $search = restore(this.setSearch, '')
+
+  public readonly toggleSort = createEvent<SortColumn>()
+  public readonly $sort = createStore<SortState>({ column: 'average', direction: 'desc' }).on(
+    this.toggleSort,
+    (state, column) => {
+      if (state.column !== column) return { column, direction: 'desc' }
+      const direction = state.direction === 'desc' ? 'asc' : 'desc'
+      return { column, direction }
+    },
+  )
+}

package/src/features/fluency-teacher/model/TeacherFluencyModel.ts

@@ -0,0 +1,36 @@
+import { sample } from 'effector'
+import { createGate } from 'effector-react'
+import { TeacherFluencyApiModel } from './TeacherFluencyApiModel'
+import { TeacherFluencyFiltersModel } from './TeacherFluencyFiltersModel'
+import { TeacherFluencyTableModel } from './TeacherFluencyTableModel'
+import type { TeacherFluencyGateProps, TeacherFluencyModelProps } from '../fluencyTeacher.types'
+
+export class TeacherFluencyModel {
+  public readonly gate = createGate<TeacherFluencyGateProps>()
+
+  public readonly api: TeacherFluencyApiModel
+  public readonly filters: TeacherFluencyFiltersModel
+  public readonly table: TeacherFluencyTableModel
+
+  constructor({ api }: TeacherFluencyModelProps) {
+    this.api = new TeacherFluencyApiModel(api)
+    this.filters = new TeacherFluencyFiltersModel()
+    this.table = new TeacherFluencyTableModel(this.api)
+    this.init()
+  }
+
+  private init() {
+    sample({
+      clock: this.gate.open,
+      target: this.table.initFx,
+    })
+
+    sample({
+      clock: this.table.setStudentInfoDrawer,
+      source: this.gate.state,
+      filter: (_, student) => student !== null,
+      fn: (gateProps, student) => ({ studentId: student!.id, grade: gateProps.grade }),
+      target: this.api.getStudentDetailsFx,
+    })
+  }
+}

package/src/features/fluency-teacher/model/TeacherFluencyTableModel.ts

@@ -0,0 +1,46 @@
+import { createEvent, createStore, createEffect } from 'effector'
+import { spread } from 'patronum'
+import { TeacherFluencyApiModel } from './TeacherFluencyApiModel'
+import { buildClassAverageStats, buildStudentsFluencyTable } from '../fluencyTeacher.helpers'
+import type {
+  ClassFluencyStats,
+  StudentDrawerInfo,
+  StudentResult,
+  TeacherFluencyGateProps,
+} from '../fluencyTeacher.types'
+
+export class TeacherFluencyTableModel {
+  public readonly reset = createEvent()
+
+  public readonly $stats = createStore<ClassFluencyStats | null>(null).reset(this.reset)
+  public readonly $table = createStore<StudentResult[]>([]).reset(this.reset)
+
+  public readonly setStudentInfoDrawer = createEvent<StudentResult | null>()
+  public readonly $studentInfoDrawer = createStore<StudentDrawerInfo | null>(null)
+    .reset(this.reset)
+    .on(this.setStudentInfoDrawer, (_, student) => (student ? { ...student, details: null } : null))
+
+  constructor(private readonly api: TeacherFluencyApiModel) {
+    spread({
+      source: this.initFx.doneData,
+      targets: {
+        stats: this.$stats,
+        table: this.$table,
+      },
+    })
+
+    this.$studentInfoDrawer.on(this.api.getStudentDetailsFx.doneData, (state, details) =>
+      state ? { ...state, details } : null,
+    )
+  }
+
+  public readonly initFx = createEffect(async (props: TeacherFluencyGateProps) => {
+    const response = await this.api.getClassSummaryFx({
+      studentIds: props.students.map(({ id }) => id),
+    })
+    return {
+      stats: buildClassAverageStats(response),
+      table: buildStudentsFluencyTable({ response, students: props.students }),
+    }
+  })
+}

package/src/features/pmProgress/components/content/PmContent.tsx

@@ -7,7 +7,6 @@ import { PmDomainList } from '../list/PmDomainList'
 import { PmInsights } from '../insights/PmInsights'
 import { PmStatusOverlay } from '../locked/PmStatusOverlay'
 import { usePmProgress } from '../../context/PmProgressContext'
-import { PmProgressStatus } from '@magmamath/students-features'
 
 export const PmProgressContent = () => {
   const { model } = usePmProgress()

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -22,7 +22,7 @@ import { formatGradeLabel } from '../../shared/pmProgress.helpers'
 import { MenuIcon } from '../../../../shared/icons/MenuIcon'
 import { TEST_IDS } from '@magmamath/students-qa'
 import { NextUp } from './NextUp'
-import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '@magmamath/students-features'
+import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '../../shared/pmProgress.constants'
 import { useText } from '../../../../i18n/i18n'
 
 const menuItemProps: MenuItemProps = {

package/src/features/pmProgress/components/locked/PmStatusOverlay.tsx

@@ -1,6 +1,13 @@
 import React, { ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, ErrorIcon, HeadingVariants, LockIcon, SPACING, Typography, } from '@magmamath/react-native-ui'
+import {
+  COLORS,
+  ErrorIcon,
+  HeadingVariants,
+  LockIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
 import { PmProgressStatus } from '../../shared/pmProgress.constants'
 import { TranslationKey, useText } from '../../../../i18n/i18n'
 

package/src/features/pmProgress/components/standard/StandardTag.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native'
-import { PmProgressModel } from '@magmamath/students-features'
+import { PmProgressModel } from '../../model/PmProgressModel'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
 import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
 import { useStoreMap } from 'effector-react'

package/src/features/pmProgress/context/PmProgressContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import { PmProgressModel } from '../model/PmProgressModel'
-import { Skill, GradeLabelsMap } from '@magmamath/students-features'
+import { Skill, GradeLabelsMap } from '../shared/pmProgress.types'
 
 export type PmProgressContextValue = {
   model: PmProgressModel

package/src/index.ts

@@ -15,3 +15,4 @@ export * from './features/voice'
 export * from './features/featureUsage'
 export * from './features/uiMode'
 export * from './features/fluency'
+export * from './features/fluency-teacher'