@magmamath/students-features 1.3.11 → 1.3.12-rc.1

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

@@ -4,33 +4,26 @@ import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-n
 import { SketchArrowRight } from '../../../../shared/icons/SketchArrowRight'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
 import { useText } from '../../../../shared/translation'
-import { useUnit, useStoreMap } from 'effector-react'
+import { useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
-import { isFluencyDomain } from '../../shared/pmProgress.helpers'
 import { OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
 import { StartButton } from './StartButton'
+import { useNextUpDomain } from '../../hooks/useNextUpDomain'
 
 export const NextUp = () => {
   const t = useText()
   const { model, onStartPress } = usePmProgress()
+  const nextUp = useNextUpDomain()
 
   const status = useUnit(model.tree.$status)
   const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
 
-  const nextUp = useStoreMap(model.tree.$domains, (domains) =>
-    domains.find((domain) => {
-      const isFluency = isFluencyDomain(domain.title)
-      const isDomainCompleted = domain.standards.every((standard) => standard.isCompleted)
-      return !isFluency && !isDomainCompleted
-    }),
-  )
-
   const isLoading = loaderOpeningId === OpeningLoaderId.START_BUTTON
   const isSkillOpeningActionPending = !!(loaderOpeningId !== null || status)
 
   return (
     <View style={styles.container}>
-      {nextUp && !status && (
+      {nextUp.domain && !status && (
         <>
           <View style={styles.content}>
             <View style={styles.subtitle}>
@@ -40,10 +33,10 @@ export const NextUp = () => {
             </View>
             <View style={[styles.row, styles.tilted]}>
               <Typography variant={HeadingVariants.H7} style={styles.muted}>
-                {nextUp?.title}
+                {nextUp.domain.title}
               </Typography>
               <View style={styles.diamond}>
-                <SliceDiamondIcon color={nextUp?.color} />
+                <SliceDiamondIcon color={nextUp.domain.color} />
               </View>
             </View>
           </View>

package/src/features/pmProgress/components/insights/PmInsights.tsx

@@ -15,7 +15,7 @@ import {
 export const PmInsights = () => {
   const { model } = usePmProgress()
   const [chartSize, setChartSize] = useState(MAX_PIE_CHART_SIZE)
-  const chartData = useStoreMap(model.tree.$domains, (domains) =>
+  const chartData = useStoreMap(model.tree.$domainsInGrade, (domains) =>
     domains.map((domain) => ({
       value: 1,
       fillPercent: Math.round(domain.scorePercentage),

package/src/features/pmProgress/components/list/PmDomainList.tsx

@@ -11,7 +11,7 @@ import { SolvingFlow } from '../../shared/pmProgress.constants'
 
 export const PmDomainList = () => {
   const { model, onStandardPress } = usePmProgress()
-  const domains = useUnit(model.tree.$domains)
+  const domains = useUnit(model.tree.$domainsInGrade)
   const expandedId = useUnit(model.highlight.$expandedId)
   const hoveredId = useUnit(model.highlight.$hoveredId)
   const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)

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

@@ -118,7 +118,7 @@ type StandardTagProps = {
 
 export const StandardTag = ({ skillId, model }: StandardTagProps) => {
   const standardInfo = useStoreMap({
-    store: model.tree.$domains,
+    store: model.tree.$domainsInGrade,
     keys: [skillId],
     fn: (domains, [skillId]) => {
       const domain = domains.find((d) => d.standards.some((s) => s.skillIds.includes(skillId)))

package/src/features/pmProgress/hooks/useNextUpDomain.ts

@@ -0,0 +1,31 @@
+import { useUnit, useStoreMap } from 'effector-react'
+import { usePmProgress } from '../context/PmProgressContext'
+import { findDomainBySkillId, isFluencyDomain } from '../shared/pmProgress.helpers'
+
+export const useNextUpDomain = () => {
+  const { model } = usePmProgress()
+  const magmaRecs = useUnit(model.recommendations.$magma)
+  const domainsInTree = useUnit(model.tree.$domains)
+
+  return useStoreMap({
+    store: model.tree.$domainsInGrade,
+    keys: [magmaRecs, domainsInTree],
+    fn: (domainsInGrade) => {
+      const firstRec = magmaRecs.items[0]
+      if (firstRec) {
+        const allDomains = Object.values(domainsInTree).flat()
+        const domain = findDomainBySkillId(firstRec._id, allDomains) ?? null
+        return { domain, isFromRecommendation: true }
+      }
+
+      const domain =
+        domainsInGrade.find((domain) => {
+          const isFluency = isFluencyDomain(domain.title)
+          const isDomainCompleted = domain.standards.every((standard) => standard.isCompleted)
+          return !isFluency && !isDomainCompleted
+        }) ?? null
+
+      return { domain, isFromRecommendation: false }
+    },
+  })
+}

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

@@ -1,4 +1,4 @@
-import { attach, createEffect, createEvent, createStore, restore, sample } from 'effector'
+import { attach, combine, createEffect, createEvent, createStore, restore, sample } from 'effector'
 import { createAction } from 'effector-action'
 import {
   Domain,
@@ -18,6 +18,7 @@ import {
   getInitialPmGrade,
   getTreeGrades,
   isTreeDataReady,
+  isTreeDataWithoutGradeReady,
 } from '../shared/pmProgress.helpers'
 import { TreeNormalizer } from '../shared/TreeNormalizer'
 import { persist } from 'effector-storage/session'
@@ -30,12 +31,14 @@ export class PmTreeModel {
   private readonly $user = createStore<User | null>(null)
 
   private readonly setupInitialGrade = createEvent<SetupInitialGradeProps>()
-  private readonly setDomains = createEvent<Domain[]>()
   public readonly setGrade = createEvent<number | null>()
 
   public readonly $isInitialized = createStore(false)
   public readonly $grade = restore(this.setGrade, null)
-  public readonly $domains = restore(this.setDomains, [])
+  public readonly $domains = createStore<Record<number, Domain[]>>({})
+  public readonly $domainsInGrade = combine(this.$domains, this.$grade, (domains, grade) =>
+    grade !== null ? (domains[grade] ?? []) : [],
+  )
   public readonly $grades = createStore<Grade[]>([])
   public readonly $status = createStore<PmProgressStatus | null>(null)
 
@@ -48,7 +51,7 @@ export class PmTreeModel {
     this.setupFailedAndLockedStatus()
     this.setupTreeInit()
     this.setupGradeInit()
-    this.setupDomainStructure()
+    this.setupDomainsInTree()
   }
 
   public readonly initTreeFx = createEffect(async ({ user }: PmProgressGateProps) => {
@@ -150,22 +153,28 @@ export class PmTreeModel {
     })
   }
 
-  private setupDomainStructure() {
+  private setupDomainsInTree() {
     sample({
-      clock: [this.$grade, this.initTreeFx.doneData],
-      source: { tree: this.$tree, stats: this.$stats, user: this.$user, grade: this.$grade },
-      filter: isTreeDataReady,
-      fn: ({ tree, stats, user, grade }) => {
-        const [treeWithUserStats] = enhanceProgressMatrixData(
-          Object.values(tree.treeMapping),
-          stats,
-          [{ entityId: user._id, name: user.fullName }],
-          grade as number,
+      clock: this.initTreeFx.doneData,
+      source: { tree: this.$tree, stats: this.$stats, user: this.$user },
+      filter: isTreeDataWithoutGradeReady,
+      fn: ({ tree, stats, user }) => {
+        const treeNodes = Object.values(tree.treeMapping)
+        const grades = getTreeGrades(tree, user).filter((g) => !g.isLocked)
+
+        return Object.fromEntries(
+          grades.map((grade) => {
+            const [treeWithStats] = enhanceProgressMatrixData(
+              treeNodes,
+              stats,
+              [{ entityId: user._id, name: user.fullName }],
+              grade.value,
+            )
+            return [grade.value, getDomainStructure(treeWithStats, tree.treeMapping)]
+          }),
         )
-
-        return getDomainStructure(treeWithUserStats, tree.treeMapping)
       },
-      target: this.setDomains,
+      target: this.$domains,
     })
   }
 }

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

@@ -171,6 +171,14 @@ type TreeDataReady = {
 export const isTreeDataReady = (source: TreeDataSource): source is TreeDataReady =>
   source.tree !== null && source.stats !== null && source.user !== null && source.grade !== null
 
+type TreeDataWithoutGrade = Omit<TreeDataSource, 'grade'>
+type TreeDataWithoutGradeReady = Omit<TreeDataReady, 'grade'>
+
+export const isTreeDataWithoutGradeReady = (
+  source: TreeDataWithoutGrade,
+): source is TreeDataWithoutGradeReady =>
+  source.tree !== null && source.stats !== null && source.user !== null
+
 export const createChartConfig = (size: number): PieChartManagerConfig => {
   const OUTER_MARGIN = 5
   return {
@@ -261,6 +269,9 @@ export const withoutDuplicates = (skills: (Skill | undefined)[]): Skill[] => {
   })
 }
 
+export const findDomainBySkillId = (skillId: string, domains: Domain[]): Domain | undefined =>
+  domains.find((d) => d.standards.some((s) => s.skillIds.includes(skillId)))
+
 // Reorders grades starting from the given grade, wrapping around. [1,2,3] with start=2 → [2,3,1]
 export const startGradesFrom = (grades: Grade[], startGrade: number): Grade[] => {
   const index = grades.findIndex(({ value }) => value === startGrade)