@magmamath/students-features 1.2.1-rc.2 → 1.2.1-rc.21

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

@@ -0,0 +1,177 @@
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import { DomainColor, PmProgressModel } from '@magmamath/students-features'
+import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { useStoreMap } from 'effector-react'
+
+type ColorPreset = {
+  background: string
+  titleColor: string
+  tagColor: string
+}
+
+const DOMAIN_COLOR_PRESETS: Record<DomainColor, ColorPreset> = {
+  [COLORS.PRIMARY_RED]: {
+    background: COLORS.RED_1,
+    titleColor: COLORS.RED_6,
+    tagColor: COLORS.PRIMARY_RED,
+  },
+  [COLORS.PRIMARY_MAGENTA]: {
+    background: COLORS.MAGENTA_1,
+    titleColor: COLORS.MAGENTA_6,
+    tagColor: COLORS.PRIMARY_MAGENTA,
+  },
+  [COLORS.PRIMARY_PURPLE]: {
+    background: COLORS.PURPLE_1,
+    titleColor: COLORS.PURPLE_6,
+    tagColor: COLORS.PRIMARY_PURPLE,
+  },
+  [COLORS.PRIMARY_INDIGO]: {
+    background: COLORS.INDIGO_1,
+    titleColor: COLORS.INDIGO_6,
+    tagColor: COLORS.PRIMARY_INDIGO,
+  },
+  [COLORS.PRIMARY_TURQUOISE]: {
+    background: COLORS.TURQUOISE_1,
+    titleColor: COLORS.TURQUOISE_6,
+    tagColor: COLORS.PRIMARY_TURQUOISE,
+  },
+  [COLORS.PRIMARY_GREEN]: {
+    background: COLORS.GREEN_1,
+    titleColor: COLORS.GREEN_6,
+    tagColor: COLORS.PRIMARY_GREEN,
+  },
+  [COLORS.PRIMARY_ORANGE]: {
+    background: COLORS.ORANGE_1,
+    titleColor: COLORS.ORANGE_6,
+    tagColor: COLORS.PRIMARY_ORANGE,
+  },
+  [COLORS.RED_4]: { background: COLORS.RED_1, titleColor: COLORS.RED_6, tagColor: COLORS.RED_4 },
+  [COLORS.MAGENTA_4]: {
+    background: COLORS.MAGENTA_1,
+    titleColor: COLORS.MAGENTA_6,
+    tagColor: COLORS.MAGENTA_4,
+  },
+  [COLORS.PURPLE_4]: {
+    background: COLORS.PURPLE_1,
+    titleColor: COLORS.PURPLE_6,
+    tagColor: COLORS.PURPLE_4,
+  },
+  [COLORS.INDIGO_4]: {
+    background: COLORS.INDIGO_1,
+    titleColor: COLORS.INDIGO_6,
+    tagColor: COLORS.INDIGO_4,
+  },
+  [COLORS.TURQUOISE_4]: {
+    background: COLORS.TURQUOISE_1,
+    titleColor: COLORS.TURQUOISE_6,
+    tagColor: COLORS.TURQUOISE_4,
+  },
+  [COLORS.GREEN_4]: {
+    background: COLORS.GREEN_1,
+    titleColor: COLORS.GREEN_6,
+    tagColor: COLORS.GREEN_4,
+  },
+  [COLORS.ORANGE_4]: {
+    background: COLORS.ORANGE_1,
+    titleColor: COLORS.ORANGE_6,
+    tagColor: COLORS.ORANGE_4,
+  },
+  [COLORS.RED_6]: { background: COLORS.RED_1, titleColor: COLORS.RED_6, tagColor: COLORS.RED_6 },
+  [COLORS.MAGENTA_6]: {
+    background: COLORS.MAGENTA_1,
+    titleColor: COLORS.MAGENTA_6,
+    tagColor: COLORS.MAGENTA_6,
+  },
+  [COLORS.PURPLE_6]: {
+    background: COLORS.PURPLE_1,
+    titleColor: COLORS.PURPLE_6,
+    tagColor: COLORS.PURPLE_6,
+  },
+  [COLORS.INDIGO_6]: {
+    background: COLORS.INDIGO_1,
+    titleColor: COLORS.INDIGO_6,
+    tagColor: COLORS.INDIGO_6,
+  },
+  [COLORS.TURQUOISE_6]: {
+    background: COLORS.TURQUOISE_1,
+    titleColor: COLORS.TURQUOISE_6,
+    tagColor: COLORS.TURQUOISE_6,
+  },
+  [COLORS.GREEN_6]: {
+    background: COLORS.GREEN_1,
+    titleColor: COLORS.GREEN_6,
+    tagColor: COLORS.GREEN_6,
+  },
+  [COLORS.ORANGE_6]: {
+    background: COLORS.ORANGE_1,
+    titleColor: COLORS.ORANGE_6,
+    tagColor: COLORS.ORANGE_6,
+  },
+}
+
+type StandardTagProps = {
+  skillId: string
+  model: PmProgressModel
+}
+
+export const StandardTag = ({ skillId, model }: StandardTagProps) => {
+  const standardInfo = useStoreMap({
+    store: model.tree.$domains,
+    keys: [skillId],
+    fn: (domains, [skillId]) => {
+      const domain = domains.find((d) => d.standards.some((s) => s.skillIds.includes(skillId)))
+      const standard = domain?.standards.find(({ skillIds }) => skillIds.includes(skillId))
+      if (!standard || !domain) return null
+      return { title: standard.title, tag: standard.subtitle, color: domain.color }
+    },
+  })
+
+  if (!standardInfo) return null
+
+  const preset = DOMAIN_COLOR_PRESETS[standardInfo.color as DomainColor]
+
+  return (
+    <View style={[styles.container, { backgroundColor: preset.background }]}>
+      <SliceDiamondIcon color={preset.tagColor} />
+      <View style={styles.textContainer}>
+        <Text numberOfLines={1} style={[styles.title, { color: preset.titleColor }]}>{standardInfo.title}</Text>
+        <Text numberOfLines={1} style={[styles.tag, { color: preset.tagColor }]}>{standardInfo.tag}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 175,
+    maxWidth: 200,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    alignSelf: 'flex-start',
+    shadowColor: '#333333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  textContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 13,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  tag: {
+    fontSize: 10,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+})

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

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react'
+import { PmProgressModel } from '../model/PmProgressModel'
+import { Skill } from '@magmamath/students-features'
+
+export type PmProgressContextValue = {
+  model: PmProgressModel
+  onStartPress?: (skill: Skill) => Promise<void>
+  onPracticePress?: (skill: Skill) => Promise<void>
+  onStandardPress?: (skill: Skill) => Promise<void>
+  onTeacherRecommendationPress?: (skill: Skill) => Promise<void>
+}
+
+const PmProgressContext = createContext<PmProgressContextValue | null>(null)
+
+export function usePmProgress(): PmProgressContextValue {
+  const value = useContext(PmProgressContext)
+  if (!value) {
+    throw new Error('usePmProgress must be used within PmProgressProvider')
+  }
+  return value
+}
+
+export const PmProgressProvider = PmProgressContext.Provider

package/src/features/pmProgress/index.ts

@@ -0,0 +1,8 @@
+export { PmProgress } from './PmProgress'
+export { PmProgressModel } from './model/PmProgressModel'
+export { StandardTag } from './components/standard/StandardTag'
+export * from './shared/pmProgress.types'
+export * from './shared/pmProgress.constants'
+
+// TODO:
+// !!! case when card is failed and easier card suggested !!!

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

@@ -0,0 +1,11 @@
+import { createEvent, createStore, restore } from 'effector'
+
+export class PmHighlightModel {
+  public readonly expand = createEvent<string>()
+  public readonly hover = createEvent<string | null>()
+
+  public readonly $hoveredId = restore(this.hover, null)
+  public readonly $expandedId = createStore<string | null>(null).on(this.expand, (current, id) =>
+    current === id ? null : id,
+  )
+}

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

@@ -0,0 +1,23 @@
+import { combine, createEvent, createStore, restore } from 'effector'
+import { UserTimeframeStats } from '../shared/pmProgress.types'
+import { PmProgressApi } from './PmProgressApi'
+import { InsightsTimeframe } from '../shared/pmProgress.constants'
+
+export class PmInsightsModel {
+  public readonly setTimeframe = createEvent<InsightsTimeframe>()
+
+  private readonly $data = createStore<UserTimeframeStats['practiceModeStatsByTimeFrame'] | null>(
+    null,
+  )
+  public readonly $timeframe = restore(this.setTimeframe, InsightsTimeframe.WEEK)
+  public readonly $insights = combine(this.$data, this.$timeframe, (stats, timeframe) => {
+    return stats ? stats[timeframe] : null
+  })
+
+  constructor(private readonly api: PmProgressApi) {
+    this.$data.on(
+      this.api.getUserInsightsFx.doneData,
+      (_, response) => response.practiceModeStatsByTimeFrame,
+    )
+  }
+}

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

@@ -0,0 +1,34 @@
+import { createEffect } from 'effector'
+import {
+  GetRecommendationsPayload,
+  RecsResponse,
+  StatsPayload,
+  StatsResponse,
+  TreeId,
+  TreeMappingResponse,
+  UserTimeframeStats,
+} from '../shared/pmProgress.types'
+
+export type PmProgressApiProps = {
+  getTree: (treeId: TreeId) => Promise<TreeMappingResponse>
+  getStatistics: (payload: StatsPayload) => Promise<StatsResponse>
+  getTeacherRecs: (payload: GetRecommendationsPayload) => Promise<RecsResponse>
+  getMagmaRecs: (payload: GetRecommendationsPayload) => Promise<RecsResponse>
+  getUserInsights: () => Promise<UserTimeframeStats>
+}
+
+export class PmProgressApi {
+  public readonly getTreeFx
+  public readonly getStatisticsFx
+  public readonly getTeacherRecsFx
+  public readonly getMagmaRecsFx
+  public readonly getUserInsightsFx
+
+  constructor(props: PmProgressApiProps) {
+    this.getTreeFx = createEffect(props.getTree)
+    this.getStatisticsFx = createEffect(props.getStatistics)
+    this.getTeacherRecsFx = createEffect(props.getTeacherRecs)
+    this.getMagmaRecsFx = createEffect(props.getMagmaRecs)
+    this.getUserInsightsFx = createEffect(() => props.getUserInsights())
+  }
+}

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

@@ -0,0 +1,48 @@
+import { sample } from 'effector'
+import { createGate } from 'effector-react'
+import { PmProgressGateProps } from '../shared/pmProgress.types'
+import { PmProgressApi, type PmProgressApiProps } from './PmProgressApi'
+import { PmTreeModel } from './PmTreeModel'
+import { PmInsightsModel } from './PmInsightsModel'
+import { PmRecommendationsModel } from './PmRecommendationsModel'
+import { PmSolvingFlowModel } from './PmSolvingFlowModel'
+import { PmHighlightModel } from './PmHighlightModel'
+
+type PmProgressModelProps = {
+  api: PmProgressApiProps
+}
+
+export class PmProgressModel {
+  public readonly gate = createGate<PmProgressGateProps>()
+
+  public readonly api: PmProgressApi
+  public readonly tree: PmTreeModel
+  public readonly highlight: PmHighlightModel
+  public readonly insights: PmInsightsModel
+  public readonly recommendations: PmRecommendationsModel
+  public readonly solving: PmSolvingFlowModel
+
+  constructor({ api }: PmProgressModelProps) {
+    this.api = new PmProgressApi(api)
+    this.highlight = new PmHighlightModel()
+    this.insights = new PmInsightsModel(this.api)
+    this.tree = new PmTreeModel(this.api)
+    this.recommendations = new PmRecommendationsModel(this.api)
+    this.solving = new PmSolvingFlowModel(this.tree, this.recommendations)
+
+    this.init()
+  }
+
+  private init() {
+    sample({
+      clock: this.gate.open,
+      target: [this.tree.initTreeFx, this.api.getUserInsightsFx],
+    })
+
+    sample({
+      clock: this.tree.initTreeFx.done,
+      fn: ({ result: [tree] }) => tree,
+      target: this.recommendations.initRecommendationsFx,
+    })
+  }
+}

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

@@ -0,0 +1,47 @@
+import { PmProgressApi } from './PmProgressApi'
+import { createEffect, createStore } from 'effector'
+import { Recommendations, RecsResponse, TreeMappingResponse } from '../shared/pmProgress.types'
+import { RECOMMENDATIONS_LIMIT_PARAM, SolvingFlow } from '../shared/pmProgress.constants'
+
+const INITIAL_RECOMMENDATION_STATE: Recommendations = { items: [], offset: 0, limit: 0, total: 0 }
+
+export class PmRecommendationsModel {
+  public readonly $teacher = createStore<Recommendations>(INITIAL_RECOMMENDATION_STATE)
+  public readonly $magma = createStore<Recommendations>(INITIAL_RECOMMENDATION_STATE)
+
+  constructor(private readonly api: PmProgressApi) {
+    this.$teacher.on(this.fetchTeacherRecsFx.doneData, (_, data) => data)
+    this.$magma.on(this.fetchMagmaRecsFx.doneData, (_, data) => data)
+  }
+
+  public readonly fetchTeacherRecsFx = createEffect((tree: TreeMappingResponse) =>
+    this.fetchRecs(tree, SolvingFlow.TEACHER, () =>
+      this.api.getTeacherRecsFx({ limit: RECOMMENDATIONS_LIMIT_PARAM }),
+    ),
+  )
+
+  public readonly fetchMagmaRecsFx = createEffect((tree: TreeMappingResponse) =>
+    this.fetchRecs(tree, SolvingFlow.MAGMA, () =>
+      this.api.getMagmaRecsFx({ limit: RECOMMENDATIONS_LIMIT_PARAM }),
+    ),
+  )
+
+  public readonly initRecommendationsFx = createEffect((tree: TreeMappingResponse) =>
+    Promise.all([this.fetchTeacherRecsFx(tree), this.fetchMagmaRecsFx(tree)]),
+  )
+
+  private fetchRecs = async (
+    tree: TreeMappingResponse,
+    type: SolvingFlow,
+    fetcher: () => Promise<RecsResponse>,
+  ) => {
+    const recommendations = await fetcher()
+    return {
+      ...recommendations,
+      items: recommendations.items.flatMap(({ skillId }) => {
+        const skill = tree.skillsMapping[skillId]
+        return skill ? [{ ...skill, type }] : []
+      }),
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+import { createEvent, restore } from 'effector'
+import { persist } from 'effector-storage/session'
+import { SessionStorageKeys, SolvingFlow } from '../shared/pmProgress.constants'
+
+import type { PmTreeModel } from './PmTreeModel'
+import type { PmRecommendationsModel } from './PmRecommendationsModel'
+import {
+  Domain,
+  MagmaQueueData,
+  QueueBuilderData,
+  Skill,
+  StandardQueueData,
+  StartSolvingProps,
+  TeacherQueueData,
+  TreeContext,
+} from '../shared/pmProgress.types'
+import {
+  getAllUncompletedSkills,
+  getDomainStructure,
+  getUncompletedSkillsFromDomain,
+  getUncompletedSkillsFromStandard,
+  startGradesFrom,
+  shiftToBeginningOfArray,
+  withoutDuplicates,
+} from '../shared/pmProgress.helpers'
+import { enhanceProgressMatrixData } from '@matteappen/skills-utils'
+
+export class PmSolvingFlowModel {
+  public readonly reset = createEvent()
+
+  public readonly setQueue = createEvent<Skill[]>()
+  public readonly advance = createEvent()
+
+  public readonly $queue = restore(this.setQueue, [])
+    .on(this.advance, (queue) => queue.slice(1))
+    .reset(this.reset)
+
+  constructor(
+    private readonly treeModel: PmTreeModel,
+    private readonly recommendationsModel: PmRecommendationsModel,
+  ) {
+    persist({ key: SessionStorageKeys.SOLVING_QUEUE, store: this.$queue })
+  }
+
+  public async start(props: StartSolvingProps): Promise<Skill> {
+    const buildQueue = await this.getBuilder(props)
+    const queue = buildQueue[props.type]()
+
+    this.setQueue(queue)
+    console.log('queue', queue)
+
+    return queue[0]
+  }
+
+  public async next() {
+    this.advance()
+    return this.$queue.getState()[0]
+  }
+
+  private buildTeacherQueue({ domains, context, skillId }: TeacherQueueData): Skill[] {
+    const teacherSkills = this.recommendationsModel.$teacher.getState().items
+    const magmaRecommendations = this.recommendationsModel.$magma.getState().items
+    const fromUncompletedDomains = getAllUncompletedSkills(domains, context.tree.skillsMapping)
+
+    const teacherRecommendations = skillId
+      ? shiftToBeginningOfArray(skillId, teacherSkills)
+      : teacherSkills
+
+    return withoutDuplicates([
+      ...teacherRecommendations,
+      ...magmaRecommendations,
+      ...fromUncompletedDomains,
+    ])
+  }
+
+  private buildMagmaQueue({ domains, context }: MagmaQueueData): Skill[] {
+    const magmaRecommendations = this.recommendationsModel.$magma.getState().items
+    const fromUncompletedDomains = getAllUncompletedSkills(domains, context.tree.skillsMapping)
+    return withoutDuplicates([...magmaRecommendations, ...fromUncompletedDomains])
+  }
+
+  private buildStandardQueue({ domains, context, standardId }: StandardQueueData): Skill[] {
+    const domain = domains.find((d) => d.standards.some((s) => s.standardId === standardId))
+    if (!domain) return []
+
+    const standard = domain.standards.find((s) => s.standardId === standardId)
+    if (!standard) return []
+
+    const fromStandard = getUncompletedSkillsFromStandard(standard, context.tree.skillsMapping)
+    const fromDomain = getUncompletedSkillsFromDomain(
+      domain,
+      context.tree.skillsMapping,
+      standardId,
+    )
+    const fromOtherDomains = domains
+      .filter((d) => d !== domain)
+      .flatMap((domain) => getUncompletedSkillsFromDomain(domain, context.tree.skillsMapping))
+
+    return withoutDuplicates([...fromStandard, ...fromDomain, ...fromOtherDomains])
+  }
+
+  private getAllGradeDomains(context: TreeContext): Domain[] {
+    const grade = this.treeModel.$grade.getState()
+    const treeGrades = this.treeModel.$grades.getState()
+
+    const grades = startGradesFrom(treeGrades, grade as number).filter(({ isLocked }) => !isLocked)
+    const treeNodes = Object.values(context.tree.treeMapping)
+
+    return grades.flatMap((grade) => {
+      const [treeWithStats] = enhanceProgressMatrixData(
+        treeNodes,
+        context.stats,
+        [{ entityId: context.user._id, name: context.user.fullName }],
+        grade.value,
+      )
+      return getDomainStructure(treeWithStats, context.tree.treeMapping)
+    })
+  }
+
+  private async getBuilder(props: StartSolvingProps): Promise<Record<SolvingFlow, () => Skill[]>> {
+    const context = await this.treeModel.getTreeContextFx()
+    const domains = this.getAllGradeDomains(context)
+    const data: QueueBuilderData = { domains, context, ...props }
+
+    return {
+      [SolvingFlow.TEACHER]: () => this.buildTeacherQueue(data as TeacherQueueData),
+      [SolvingFlow.MAGMA]: () => this.buildMagmaQueue(data as MagmaQueueData),
+      [SolvingFlow.STANDARD]: () => this.buildStandardQueue(data as StandardQueueData),
+    }
+  }
+}

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

@@ -0,0 +1,130 @@
+import { attach, createEffect, createEvent, createStore, restore, sample } from 'effector'
+import { createAction } from 'effector-action'
+import {
+  Domain,
+  Grade,
+  PmProgressGateProps,
+  SetupInitialGradeProps,
+  StatsResponse,
+  GetTreeContextFxParams,
+  TreeContext,
+  TreeMappingResponse,
+  User,
+} from '../shared/pmProgress.types'
+import { PmProgressApi } from './PmProgressApi'
+import { enhanceProgressMatrixData } from '@matteappen/skills-utils'
+import {
+  getDomainStructure,
+  getInitialPmGrade,
+  getTreeGrades,
+  isTreeDataReady,
+} from '../shared/pmProgress.helpers'
+import { persist } from 'effector-storage/session'
+import { SessionStorageKeys } from '../shared/pmProgress.constants'
+
+export class PmTreeModel {
+  private readonly $tree = createStore<TreeMappingResponse | null>(null)
+  private readonly $stats = createStore<StatsResponse | null>(null)
+  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 $grades = createStore<Grade[]>([])
+
+  constructor(private readonly api: PmProgressApi) {
+    persist({ key: SessionStorageKeys.GRADE, store: this.$grade })
+    persist({ key: SessionStorageKeys.DOMAINS, store: this.$domains })
+
+    createAction(this.initTreeFx.done, {
+      target: {
+        $tree: this.$tree,
+        $stats: this.$stats,
+        $user: this.$user,
+        $grades: this.$grades,
+        $isInitialized: this.$isInitialized,
+        setupInitialGrade: this.setupInitialGrade,
+      },
+      fn: (target, { params: { user }, result: [tree, stats] }) => {
+        target.$tree(tree)
+        target.$stats(stats)
+        target.$user(user)
+        target.$grades(getTreeGrades(tree, user))
+        target.setupInitialGrade({ tree, user })
+        target.$isInitialized(true)
+      },
+    })
+
+    sample({
+      clock: this.setupInitialGrade,
+      filter: () => sessionStorage.getItem(SessionStorageKeys.GRADE) === null,
+      fn: ({ tree, user }) => {
+        const treeGrades = Object.values(tree.treeMapping)
+          .filter((node) => node.type === 'grade')
+          .map((node) => node.attributes.grade)
+
+        return getInitialPmGrade({
+          userGrade: user.grade,
+          treeGrades,
+          lockedGrades: user.setting.practiceModeLockedGrades,
+          enrolledGrades: user.enrolledGrades,
+        })
+      },
+      target: this.setGrade,
+    })
+
+    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,
+        )
+
+        return getDomainStructure(treeWithUserStats, tree.treeMapping)
+      },
+      target: this.setDomains,
+    })
+  }
+
+  public initTreeFx = createEffect(({ user }: PmProgressGateProps) => {
+    return Promise.all([
+      this.api.getTreeFx(user.setting.practiceModeTreeId),
+      this.api.getStatisticsFx({ entityIds: [user._id] }),
+    ])
+  })
+
+  public readonly getTreeContextFx = attach({
+    source: { tree: this.$tree, stats: this.$stats, user: this.$user, grade: this.$grade },
+    mapParams: (_: void, source): GetTreeContextFxParams => {
+      if (!isTreeDataReady(source)) {
+        throw new Error(
+          'Cannot create treeWithUserStats in getTreeWithStatsFx - tree data is not ready.',
+        )
+      }
+      return source as GetTreeContextFxParams
+    },
+    effect: createEffect(({ tree, stats, user, grade }: GetTreeContextFxParams): TreeContext => {
+      const [treeWithStats] = enhanceProgressMatrixData(
+        Object.values(tree.treeMapping),
+        stats,
+        [{ entityId: user._id, name: user.fullName }],
+        grade,
+      )
+      return {
+        tree,
+        stats,
+        user,
+        treeWithStats,
+      }
+    }),
+  })
+}