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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, Pressable, StyleSheet } from 'react-native'
+import { ActivityIndicator, View, Pressable, StyleSheet, Text } from 'react-native'
 import {
   ArrowRightIcon,
   CheckIcon,
@@ -24,6 +24,7 @@ export type ListItemProps = {
   subtitle: string
   skillsLeft: number
   isFinished?: boolean
+  isLoading?: boolean
   onPress?: () => void
   isSkillsLeftHidden?: boolean
 }
@@ -33,6 +34,7 @@ export const ListItem = ({
   subtitle,
   skillsLeft,
   isFinished = false,
+  isLoading = false,
   onPress,
   isSkillsLeftHidden = false,
 }: ListItemProps) => {
@@ -43,7 +45,13 @@ export const ListItem = ({
   return (
     <Pressable
       onPress={onPress}
-      style={[styles.card, isFinished && styles.finished, isHovered && styles.hovered]}
+      disabled={isLoading}
+      style={[
+        styles.card,
+        isFinished && styles.finished,
+        isHovered && styles.hovered,
+        isLoading && styles.loading,
+      ]}
       onHoverIn={() => setIsHovered(true)}
       onHoverOut={() => setIsHovered(false)}
     >
@@ -63,18 +71,28 @@ export const ListItem = ({
         </Typography>
       </View>
       <View style={styles.trailing}>
-        {isSkillsLeftVisible && (
-          <Typography variant={HeadingVariants.H10} style={styles.skills}>
-            {skillsLeft} {skillsLeft === 1 ? t('pmProgress.skillLeft') : t('pmProgress.skillsLeft')}
-          </Typography>
+        {isLoading ? (
+          <View style={styles.loadingIndicator}>
+            <Text>{t('pmProgress.loading')} </Text>
+            <ActivityIndicator size="small" color={COLORS.NEUTRAL_7} />
+          </View>
+        ) : (
+          <>
+            {isSkillsLeftVisible && (
+              <Typography variant={HeadingVariants.H10} style={styles.skills}>
+                {skillsLeft}{' '}
+                {skillsLeft === 1 ? t('pmProgress.skillLeft') : t('pmProgress.skillsLeft')}
+              </Typography>
+            )}
+            <View style={styles.icon}>
+              {isFinished ? (
+                <CheckIcon color={FINISHED_ICON} />
+              ) : (
+                <ArrowRightIcon color={COLORS.NEUTRAL_9} />
+              )}
+            </View>
+          </>
         )}
-        <View style={styles.icon}>
-          {isFinished ? (
-            <CheckIcon color={FINISHED_ICON} />
-          ) : (
-            <ArrowRightIcon color={COLORS.NEUTRAL_9} />
-          )}
-        </View>
       </View>
     </Pressable>
   )
@@ -133,4 +151,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  loading: {
+    opacity: 0.5,
+  },
+  loadingIndicator: {
+    flexDirection: 'row',
+    gap: 8,
+  },
 })

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

@@ -14,6 +14,7 @@ export const PmDomainList = () => {
   const domains = useUnit(model.tree.$domains)
   const expandedId = useUnit(model.highlight.$expandedId)
   const hoveredId = useUnit(model.highlight.$hoveredId)
+  const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
 
   const fluency = domains.find(({ title }) => isFluencyDomain(title))
   const list = fluency ? domains.filter(({ title }) => !isFluencyDomain(title)) : domains
@@ -37,12 +38,15 @@ export const PmDomainList = () => {
             onHoverIn={() => model.highlight.hover(item.domainId)}
             onHoverOut={() => model.highlight.hover(null)}
             onItemPress={async (item) => {
+              model.solving.setLoaderOpeningId(item.id)
               const skill = await model.solving.start({
                 type: SolvingFlow.STANDARD,
                 standardId: item.standardId,
               })
-              onStandardPress?.(skill)
+              await onStandardPress?.(skill)
+              model.solving.setLoaderOpeningId(null)
             }}
+            loadingItemId={loaderOpeningId}
             isLast={index === list.length - 1}
             isFirst={index === 0}
             isExpanded={expandedId === item.domainId}

package/src/features/pmProgress/components/recs/PmTeacherRecs.tsx

@@ -11,14 +11,15 @@ import {
   SPACING,
 } from '@magmamath/react-native-ui'
 import { useText } from '../../../../shared/translation'
-import { useStoreMap, useUnit } from 'effector-react'
-import { CustomDomain, SolvingFlow } from '../../shared/pmProgress.constants'
+import { useUnit, useStoreMap } from 'effector-react'
+import { CustomDomain, OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
 import { usePmProgress } from '../../context/PmProgressContext'
 
 export const PmTeacherRecs = () => {
   const t = useText()
   const { model, onPracticePress, onTeacherRecommendationPress } = usePmProgress()
   const expandedId = useUnit(model.highlight.$expandedId)
+  const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
 
   // TODO: rework this, probably split and pass renderer to ListCard
   const recommendations = useStoreMap(model.recommendations.$teacher, ({ items }) =>
@@ -44,12 +45,15 @@ export const PmTeacherRecs = () => {
           expandedColor={COLORS.YELLOW_1}
           onPress={() => model.highlight.expand(CustomDomain.TEACHER)}
           onItemPress={async (item) => {
+            model.solving.setLoaderOpeningId(item.id)
             const skill = await model.solving.start({
               type: SolvingFlow.TEACHER,
               skillId: item.skillId,
             })
-            onPracticePress?.(skill)
+            await onPracticePress?.(skill)
+            model.solving.setLoaderOpeningId(null)
           }}
+          loadingItemId={loaderOpeningId}
           isLast
           isFirst
           isSkillsLeftHidden
@@ -59,9 +63,13 @@ export const PmTeacherRecs = () => {
           rightContent={
             <Button
               onPress={async () => {
+                model.solving.setLoaderOpeningId(OpeningLoaderId.PRACTICE_BUTTON)
                 const skill = await model.solving.start({ type: SolvingFlow.TEACHER })
-                onTeacherRecommendationPress?.(skill)
+                await onTeacherRecommendationPress?.(skill)
+                model.solving.setLoaderOpeningId(null)
               }}
+              disabled={loaderOpeningId !== null}
+              isLoading={loaderOpeningId === OpeningLoaderId.PRACTICE_BUTTON}
               size={ButtonSize.SMALL}
               variant={ButtonVariant.SECONDARY}
             >

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

@@ -30,6 +30,9 @@ export class PmSolvingFlowModel {
 
   public readonly setQueue = createEvent<Skill[]>()
   public readonly advance = createEvent()
+  public readonly setLoaderOpeningId = createEvent<string | null>()
+
+  public readonly $loaderOpeningId = restore(this.setLoaderOpeningId, null)
 
   public readonly $queue = restore(this.setQueue, [])
     .on(this.advance, (queue) => queue.slice(1))

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

@@ -21,6 +21,11 @@ export enum SolvingFlow {
   STANDARD = 'STANDARD',
 }
 
+export enum OpeningLoaderId {
+  START_BUTTON = 'START_BUTTON',
+  PRACTICE_BUTTON = 'PRACTICE_BUTTON',
+}
+
 export enum SessionStorageKeys {
   SOLVING_QUEUE = 'PM_SOLVING_QUEUE',
   GRADE = 'PM_GRADE',

package/src/shared/translation/localization/ca.json

@@ -75,6 +75,7 @@
     "skillLeft": "skill left",
     "grade": "Grade",
     "gradeK": "K",
-    "gradeOther": "Other"
+    "gradeOther": "Other",
+    "loading": "Loading..."
   }
 }

package/src/shared/translation/localization/de.json

@@ -75,6 +75,7 @@
     "skillLeft": "",
     "grade": "",
     "gradeK": "",
-    "gradeOther": ""
+    "gradeOther": "",
+    "loading": ""
   }
 }

package/src/shared/translation/localization/en.json

@@ -75,6 +75,7 @@
     "skillLeft": "skill left",
     "grade": "Grade",
     "gradeK": "K",
-    "gradeOther": "Other"
+    "gradeOther": "Other",
+    "loading": "Loading..."
   }
 }

package/src/shared/translation/localization/gb.json

@@ -75,6 +75,7 @@
     "skillLeft": "skill left",
     "grade": "Grade",
     "gradeK": "K",
-    "gradeOther": "Other"
+    "gradeOther": "Other",
+    "loading": "Loading..."
   }
 }

package/src/shared/translation/localization/sct.json

@@ -75,6 +75,7 @@
     "skillLeft": "skill left",
     "grade": "Grade",
     "gradeK": "K",
-    "gradeOther": "Other"
+    "gradeOther": "Other",
+    "loading": "Loading..."
   }
 }

package/src/shared/translation/localization/sw.json

@@ -75,6 +75,7 @@
     "skillLeft": "",
     "grade": "",
     "gradeK": "",
-    "gradeOther": ""
+    "gradeOther": "",
+    "loading": ""
   }
 }