@magmamath/students-features 1.5.0 → 1.5.1

package/src/features/fluency-teacher/components/table/TableRow.tsx

@@ -0,0 +1,114 @@
+import React, { useRef } from 'react'
+import { Animated, Pressable, StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { OperatorBadge } from './OperatorBadge'
+import { TableRowAverageProgress } from './TableRowAverageProgress'
+import type { StudentOperatorScores } from '../../fluencyTeacher.types'
+
+export type TableRowProps = {
+  name: string
+  scores: StudentOperatorScores
+  averagePercent?: number
+  averageLabel?: string
+  onPress?: () => void
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+export const TableRow = ({
+  name,
+  scores,
+  averagePercent = 0,
+  averageLabel = '',
+  onPress,
+}: TableRowProps) => {
+  const hoverProgress = useRef(new Animated.Value(0)).current
+
+  const fadeIn = () => {
+    Animated.timing(hoverProgress, { toValue: 1, duration: 150, useNativeDriver: false }).start()
+  }
+
+  const fadeOut = () => {
+    Animated.timing(hoverProgress, { toValue: 0, duration: 150, useNativeDriver: false }).start()
+  }
+
+  const backgroundColor = hoverProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [COLORS.NEUTRAL_1, COLORS.NEUTRAL_2],
+  })
+
+  return (
+    <AnimatedPressable
+      onHoverIn={fadeIn}
+      onHoverOut={fadeOut}
+      onPress={onPress}
+      style={[styles.row, { backgroundColor }]}
+    >
+      <View style={styles.name}>
+        <Typography variant={HeadingVariants.H7} style={styles.nameText} numberOfLines={1}>
+          {name}
+        </Typography>
+      </View>
+
+      <View style={styles.average}>
+        <TableRowAverageProgress percent={averagePercent} label={averageLabel} />
+      </View>
+
+      <View style={styles.operators}>
+        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
+          <View key={operator} style={styles.operator}>
+            <OperatorBadge value={scores[operator]} bgColor={badgeBg} textColor={badgeText} />
+          </View>
+        ))}
+      </View>
+    </AnimatedPressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
+    gap: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.NEUTRAL_4,
+  },
+  name: {
+    width: 137,
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  icon: {
+    width: 25,
+    height: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  nameText: {
+    width: 100,
+    color: COLORS.NEUTRAL_9,
+  },
+  average: {
+    width: 145,
+    height: 40,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+  },
+  operators: {
+    flex: 1,
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[800],
+  },
+  operator: {
+    flex: 1,
+    alignItems: 'center',
+  },
+})

package/src/features/fluency-teacher/components/table/TableRowAverageProgress.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import {
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+export type TableRowAverageProgressProps = {
+  percent: number
+  label: string
+}
+
+export const TableRowAverageProgress = ({ percent, label }: TableRowAverageProgressProps) => (
+  <View style={styles.progressTrack}>
+    <View style={[styles.progressFill, { width: `${percent}%` }]} />
+    <View style={styles.progressOverlay}>
+      <Typography variant={HeadingVariants.H9} style={styles.progressPercent}>
+        {percent}%
+      </Typography>
+      <Text style={styles.progressLabel} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  progressTrack: {
+    height: 16,
+    borderRadius: 36,
+    backgroundColor: COLORS.NEUTRAL_3,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 36,
+    backgroundColor: COLORS.YELLOW_4,
+  },
+  progressOverlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: SPACING[200],
+  },
+  progressPercent: {
+    color: COLORS.NEUTRAL_9,
+  },
+  progressLabel: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 10,
+    color: COLORS.NEUTRAL_9,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/fluency-teacher/context/TeacherFluencyContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+import type { TeacherFluencyModel } from '../model/TeacherFluencyModel'
+
+type TeacherFluencyContextValue = {
+  model: TeacherFluencyModel
+}
+
+const TeacherFluencyContext = createContext<TeacherFluencyContextValue | null>(null)
+
+export const useTeacherFluency = (): TeacherFluencyContextValue => {
+  const value = useContext(TeacherFluencyContext)
+  if (!value) throw new Error('useTeacherFluency must be used within TeacherFluencyProvider')
+  return value
+}
+
+export const TeacherFluencyProvider = TeacherFluencyContext.Provider

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

@@ -0,0 +1,86 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import { type OperatorColumnConfig } from './fluencyTeacher.types'
+
+export const TEACHER_FLUENCY_GOAL_MINUTES = 25
+
+export enum FluencyOperator {
+  ADDITION = 'addition',
+  SUBTRACTION = 'subtraction',
+  MULTIPLICATION = 'multiplication',
+  DIVISION = 'division',
+}
+
+export const MATRIX_CELL_COLORS: Record<FluencyOperator, Record<number, string>> = {
+  [FluencyOperator.ADDITION]: {
+    1: COLORS.GREEN_2,
+    2: COLORS.GREEN_3,
+    3: COLORS.PRIMARY_GREEN,
+    4: COLORS.GREEN_6,
+  },
+  [FluencyOperator.SUBTRACTION]: {
+    1: COLORS.ORANGE_2,
+    2: COLORS.ORANGE_3,
+    3: COLORS.PRIMARY_ORANGE,
+    4: COLORS.ORANGE_6,
+  },
+  [FluencyOperator.MULTIPLICATION]: {
+    1: COLORS.BLUE_2,
+    2: COLORS.BLUE_3,
+    3: COLORS.PRIMARY_BLUE,
+    4: COLORS.BLUE_6,
+  },
+  [FluencyOperator.DIVISION]: {
+    1: COLORS.PURPLE_2,
+    2: COLORS.PURPLE_3,
+    3: COLORS.PRIMARY_PURPLE,
+    4: COLORS.PURPLE_6,
+  },
+}
+
+export enum FluencyTableColumn {
+  AVERAGE = 'average',
+  ADDITION = 'addition',
+  SUBTRACTION = 'subtraction',
+  MULTIPLICATION = 'multiplication',
+  DIVISION = 'division',
+}
+
+export type FluencyOperatorColumn = Exclude<FluencyTableColumn, FluencyTableColumn.AVERAGE>
+
+export enum FluencyMathOperatorSymbol {
+  ADDITION = '+',
+  SUBTRACTION = '−',
+  MULTIPLICATION = '×',
+  DIVISION = '÷',
+}
+
+export const TABLE_OPERATOR_COLUMNS: readonly OperatorColumnConfig[] = [
+  {
+    operator: FluencyTableColumn.ADDITION,
+    labelKey: 'student.fluency.addition',
+    symbol: FluencyMathOperatorSymbol.ADDITION,
+    badgeBg: COLORS.GREEN_3,
+    badgeText: COLORS.GREEN_8,
+  },
+  {
+    operator: FluencyTableColumn.SUBTRACTION,
+    labelKey: 'student.fluency.subtraction',
+    symbol: FluencyMathOperatorSymbol.SUBTRACTION,
+    badgeBg: COLORS.ORANGE_3,
+    badgeText: COLORS.ORANGE_8,
+  },
+  {
+    operator: FluencyTableColumn.DIVISION,
+    labelKey: 'student.fluency.division',
+    symbol: FluencyMathOperatorSymbol.DIVISION,
+    badgeBg: COLORS.BLUE_3,
+    badgeText: COLORS.BLUE_8,
+  },
+  {
+    operator: FluencyTableColumn.MULTIPLICATION,
+    labelKey: 'student.fluency.multiplication',
+    symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
+    badgeBg: COLORS.PURPLE_2,
+    badgeText: COLORS.PURPLE_8,
+  },
+]

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

@@ -0,0 +1,81 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import type { TranslationKey } from '../../i18n/i18n'
+import type {
+  ClassFluencySummaryResponse,
+  ClassFluencyStats,
+  ClassOperatorAverages,
+  FluencyStudent,
+  StudentResult,
+} 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): TranslationKey => {
+  if (overallPercent >= 0.9) return 'teacher.fluency.progressFluent'
+  if (overallPercent >= 0.65) return 'teacher.fluency.progressProficient'
+  if (overallPercent >= 0.35) return 'teacher.fluency.progressDeveloping'
+  if (overallPercent >= 0.05) return 'teacher.fluency.progressLearning'
+  return 'teacher.fluency.progressNotStarted'
+}
+
+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 is StudentResult => item !== null) as StudentResult[]
+}

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

@@ -0,0 +1,117 @@
+import type { TranslationKey } from '../../i18n/i18n'
+import { FluencyOperator, FluencyOperatorColumn, FluencyTableColumn } from './fluencyTeacher.constants'
+import { SortingDirection } from '../../shared/common.constants'
+
+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 = Record<FluencyOperatorColumn, number>
+
+export type ClassFluencyStats = ClassFluencySummaryResponse & {
+  operatorAverages: ClassOperatorAverages
+}
+
+export type StudFluencyDetailsResponse = {
+  operations: Record<FluencyOperator, ClassFluencyOperationView>
+}
+
+export type StudFluencyDetailsPayload = {
+  studentId: string
+  grade: number
+}
+
+export type SortState = {
+  column: FluencyTableColumn
+  direction: SortingDirection
+}
+
+export type StudentOperatorScores = Record<FluencyOperatorColumn, number>
+
+export type StudentResult = {
+  id: string
+  name: string
+  averagePercent: number
+  averageLabel: TranslationKey
+  scores: StudentOperatorScores
+}
+
+export type StudentDrawerInfo = StudentResult & {
+  details: StudFluencyDetailsResponse | null
+}
+
+export type OperatorColumnConfig = {
+  operator: FluencyOperatorColumn
+  labelKey: TranslationKey
+  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 { useTeacherFluency } from '../context/TeacherFluencyContext'
+import { FluencyOperator } from '../fluencyTeacher.constants'
+
+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,44 @@
+import { useMemo, useState } from 'react'
+import type { LayoutChangeEvent } from 'react-native'
+import { FluencyOperator, 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,20 @@
+import { createEvent, createStore, restore } from 'effector'
+import type { SortState } from '../fluencyTeacher.types'
+import { SortingDirection } from '../../../shared/common.constants'
+import { FluencyTableColumn } from '../fluencyTeacher.constants'
+
+export class TeacherFluencyFiltersModel {
+  public readonly setSearch = createEvent<string>()
+  public readonly $search = restore(this.setSearch, '')
+
+  public readonly toggleSort = createEvent<FluencyTableColumn>()
+  public readonly $sort = createStore<SortState>({
+    column: FluencyTableColumn.AVERAGE,
+    direction: SortingDirection.DESC,
+  }).on(this.toggleSort, (state, column) => {
+    if (state.column !== column) return { column, direction: SortingDirection.DESC }
+    const direction =
+      state.direction === SortingDirection.DESC ? SortingDirection.ASC : SortingDirection.DESC
+    return { column, direction }
+  })
+}

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

@@ -0,0 +1,45 @@
+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.filters)
+    this.init()
+  }
+
+  private init() {
+    sample({
+      clock: this.gate.state,
+      filter: (props) => props.students.length === 0,
+      target: this.table.reset,
+    })
+
+    sample({
+      clock: this.gate.state,
+      source: this.table.initFx.pending,
+      filter: (isPending, props) => !isPending && props.students.length > 0,
+      fn: (_, props) => props,
+      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,
+    })
+  }
+}