@magmamath/students-features 0.4.0 → 0.4.1-rc.0

package/dist/typescript/module/features/endOfAssignment/hooks/useKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.d.ts","sourceRoot":"","sources":["../../../../../../src/features/endOfAssignment/hooks/useKeyboard.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,0GAGtB,CAAC"}

package/dist/typescript/module/features/endOfAssignment/model/model.d.ts

@@ -5,7 +5,7 @@ export declare class EOAModel {
     readonly practicePressed: import("effector").EventCallable<void>;
     readonly leavePressed: import("effector").EventCallable<void>;
     readonly goToFirstProblemPressed: import("effector").EventCallable<void>;
-    readonly updateRecommendations: import("effector").EventCallable<boolean>;
+    readonly recommendationsUpdated: import("effector").EventCallable<boolean>;
     readonly popUpTriggered: import("effector").EventCallable<EOAEventType>;
     readonly $popUpData: import("effector").StoreWritable<EOAModalData | null>;
     readonly $modalVariant: import("effector").StoreWritable<EOAModalVariant | null>;

package/dist/typescript/module/features/endOfAssignment/model/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/endOfAssignment/model/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEtE,qBAAa,QAAQ;IACnB,SAAgB,SAAS,iDAA8B;IACvD,SAAgB,SAAS,yCAAgB;IAEzC,SAAgB,eAAe,yCAAgB;IAC/C,SAAgB,YAAY,yCAAgB;IAC5C,SAAgB,uBAAuB,yCAAgB;IACvD,SAAgB,qBAAqB,4CAAyB;IAC9D,SAAgB,cAAc,iDAA8B;IAE5D,SAAgB,UAAU,wDAGF;IAEtB,SAAgB,aAAa,2DA8BN;IAGzB,SAAgB,iBAAiB,aAGhC;CAEF"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/endOfAssignment/model/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEtE,qBAAa,QAAQ;IACnB,SAAgB,SAAS,iDAA8B;IACvD,SAAgB,SAAS,yCAAgB;IAEzC,SAAgB,eAAe,yCAAgB;IAC/C,SAAgB,YAAY,yCAAgB;IAC5C,SAAgB,uBAAuB,yCAAgB;IACvD,SAAgB,sBAAsB,4CAAyB;IAC/D,SAAgB,cAAc,iDAA8B;IAE5D,SAAgB,UAAU,wDAGF;IAEtB,SAAgB,aAAa,2DA8BN;IAGzB,SAAgB,iBAAiB,aAGhC;CAEF"}

package/dist/typescript/module/features/endOfAssignment/ui/PracticeButtonGroup.d.ts

@@ -7,7 +7,7 @@ type PracticeButtonGroupProps = {
     isPracticeButtonVisible: boolean;
     onLeftButtonPress: () => void;
     onRightButtonPress: () => void;
-    isExam?: boolean;
+    isExam: boolean;
 };
 export declare const PracticeButtonGroup: ({ textContent, isPracticeButtonVisible, onLeftButtonPress, onRightButtonPress, isExam, }: PracticeButtonGroupProps) => React.JSX.Element;
 export {};

package/dist/typescript/module/features/endOfAssignment/ui/PracticeButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PracticeButtonGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/features/endOfAssignment/ui/PracticeButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAexC,KAAK,wBAAwB,GAAG;IAC9B,WAAW,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,CAAC;QAAC,eAAe,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,uBAAuB,EAAE,OAAO,CAAA;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,6FAM7B,wBAAwB,sBAmC1B,CAAA"}
+{"version":3,"file":"PracticeButtonGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/features/endOfAssignment/ui/PracticeButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAexC,KAAK,wBAAwB,GAAG;IAC9B,WAAW,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,CAAC;QAAC,eAAe,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,uBAAuB,EAAE,OAAO,CAAA;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,mBAAmB,6FAM7B,wBAAwB,sBAiC1B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.4.0",
+  "version": "0.4.1-rc.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "dist/commonjs/index.js",

package/src/features/endOfAssignment/components/CheatDetected/CheatDetected.tsx

@@ -1,23 +1,39 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Button, SPACING, COLORS, Typography } from '@magmamath/react-native-ui'
+import {
+  Button,
+  SPACING,
+  COLORS,
+  Typography,
+  ButtonVariant,
+  ButtonColor,
+  ButtonSize,
+} from '@magmamath/react-native-ui'
+
 import { EOAModalContentProps } from '../../types'
+import { useKeyBoard } from '../../hooks/useKeyboard'
 
 export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
+  useKeyBoard((event) => {
+    if (event.key === 'Enter') {
+      model.hidePopUpAndLeave()
+    }
+  })
+
   return (
     <View style={styles.container}>
-      <Typography variant='h2' style={styles.title}>
+      <Typography variant="h2" style={styles.title}>
         {textContent.title}
       </Typography>
 
-      <Typography variant='h1' style={styles.description}>
+      <Typography variant="h1" style={styles.description}>
         {textContent.description}
       </Typography>
 
       <Button
-        variant='primary'
-        colorScheme='red'
-        size='large'
+        variant={ButtonVariant.PRIMARY}
+        colorScheme={ButtonColor.RED}
+        size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}
       >

package/src/features/endOfAssignment/components/CorrectAnswer/AnimatedCard.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useRef } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Text } from 'react-native'
 
 import Animated, {
   useSharedValue,
@@ -208,7 +208,8 @@ export const AnimatedCard = memo(
                 </Typography>
                 {variant === AnimatedCardVariant.CORRECT_ANSWER && (
                   <Typography variant="h5" style={styles.smallText}>
-                    /{problemsAmount}
+                    <Text style={styles.slash}>{'/'}</Text>
+                    {problemsAmount}
                   </Typography>
                 )}
               </View>
@@ -264,6 +265,9 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     lineHeight: IS_MOBILE ? 54 : 46,
   },
+  slash: {
+    paddingRight: 1,
+  },
   smallText: {
     fontSize: 16,
     fontWeight: '700',

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswer.tsx

@@ -9,14 +9,20 @@ import { AnimatedCard } from './AnimatedCard'
 import { PracticeButtonGroup } from '../../ui/PracticeButtonGroup'
 import { GOOD_DRAWING_CARD_APPEARENCE_DELAY } from '../../constants'
 import { AnimatedCardVariant, EOAModalContentProps, EOAModalVariant } from '../../types'
+import { useKeyBoard } from '../../hooks/useKeyboard'
 
 export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
   const modalVariant = useUnit(model.$modalVariant)
   const [cardsAnimationCompleted, setCardsAnimationCompleted] = useState(false)
 
-  const { user, stats, hasRecommendations, isExam, newerAssignmentAvailable } = popUpData ?? {}
-  const { solvedAmount, problemsAmount, goodDrawingAmount } = stats ?? {}
+  const {
+    user,
+    stats,
+    hasRecommendations,
+    isExam = false,
+    newerAssignmentAvailable,
+  } = popUpData ?? {}
 
   const isPracticeButtonVisible = !!(
     user?.practiceMode &&
@@ -24,13 +30,13 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
     (isExam || hasRecommendations)
   )
 
-  const handlePracticePress = () => {
+  const handlePracticeButtonPress = () => {
     onPracticePress?.()
     model.hidePopUp()
   }
 
   const onCorrectAnswerAnimationEnd = useCallback(() => {
-    if (goodDrawingAmount === 0) {
+    if (stats?.goodDrawingAmount === 0) {
       setCardsAnimationCompleted(true)
     }
   }, [])
@@ -39,6 +45,12 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
     setCardsAnimationCompleted(true)
   }, [])
 
+  useKeyBoard((event) => {
+    if (event.key === 'Enter') {
+      isPracticeButtonVisible ? handlePracticeButtonPress() : model.hidePopUpAndLeave()
+    }
+  })
+
   return (
     <View
       style={[
@@ -59,8 +71,8 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
         <AnimatedCard
           variant={AnimatedCardVariant.CORRECT_ANSWER}
           textContent={textContent}
-          solvedAmount={solvedAmount}
-          problemsAmount={problemsAmount}
+          solvedAmount={stats?.solvedAmount}
+          problemsAmount={stats?.problemsAmount}
           shouldTriggerSparkles={cardsAnimationCompleted}
           onAnimationEnd={onCorrectAnswerAnimationEnd}
         />
@@ -69,7 +81,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
           <AnimatedCard
             variant={AnimatedCardVariant.GOOD_DRAWING}
             textContent={textContent}
-            gbdAmount={goodDrawingAmount}
+            gbdAmount={stats?.goodDrawingAmount}
             shouldTriggerSparkles={cardsAnimationCompleted}
             onAnimationEnd={onGBDAnimationEnd}
             delay={GOOD_DRAWING_CARD_APPEARENCE_DELAY}
@@ -82,7 +94,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
         isPracticeButtonVisible={isPracticeButtonVisible}
         isExam={isExam}
         onLeftButtonPress={model.hidePopUpAndLeave}
-        onRightButtonPress={handlePracticePress}
+        onRightButtonPress={handlePracticeButtonPress}
       />
     </View>
   )

package/src/features/endOfAssignment/components/ExamLeave/ExamLeave.tsx

@@ -1,27 +1,47 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Button, COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
 
 import { EOAModalContentProps } from '../../types'
+import { useKeyBoard } from '../../hooks/useKeyboard'
 
 export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
   const handleDismiss = () => model.hidePopUp()
 
+  useKeyBoard((event) => {
+    if (event.key === 'Enter') {
+      model.hidePopUpAndLeave()
+    }
+  })
+
   return (
     <View style={styles.container}>
-      <Typography variant='h1' style={styles.description}>
+      <Typography variant="h1" style={styles.description}>
         {textContent.description}
       </Typography>
 
       <View style={styles.buttonsContainer}>
-        <Button variant='tertiary' size='large' style={{ text: styles.buttonText }} onPress={handleDismiss}>
+        <Button
+          variant={ButtonVariant.TERTIARY}
+          size={ButtonSize.LARGE}
+          style={{ text: styles.buttonText }}
+          onPress={handleDismiss}
+        >
           {textContent.leftButtonText}
         </Button>
 
         <Button
-          variant='primary'
-          colorScheme='red'
-          size='large'
+          variant={ButtonVariant.PRIMARY}
+          colorScheme={ButtonColor.RED}
+          size={ButtonSize.LARGE}
           style={{ text: styles.buttonText }}
           onPress={model.hidePopUpAndLeave}
         >

package/src/features/endOfAssignment/components/ExamPaused/ExamPaused.tsx

@@ -1,24 +1,39 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Button, COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
 
 import { EOAModalContentProps } from '../../types'
+import { useKeyBoard } from '../../hooks/useKeyboard'
 
 export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
+  useKeyBoard((event) => {
+    if (event.key === 'Enter') {
+      model.hidePopUpAndLeave()
+    }
+  })
+
   return (
     <View style={styles.container}>
-      <Typography variant='h2' style={styles.title}>
+      <Typography variant="h2" style={styles.title}>
         {textContent.title}
       </Typography>
 
-      <Typography variant='h1' style={styles.description}>
+      <Typography variant="h1" style={styles.description}>
         {textContent.description}
       </Typography>
 
       <Button
-        variant='primary'
-        colorScheme='purple'
-        size='large'
+        variant={ButtonVariant.PRIMARY}
+        colorScheme={ButtonColor.PURPLE}
+        size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}
       >

package/src/features/endOfAssignment/components/ExamSubmit/ExamSubmit.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import { View, StyleSheet, Platform, Image } from 'react-native'
+
 import { useUnit } from 'effector-react'
 import {
   Button,
+  ButtonColor,
+  ButtonSize,
   ButtonVariant,
   COLORS,
   IS_MOBILE,
@@ -13,6 +16,7 @@ import {
 import { ExamSubmitContent } from './ExamSubmitContent'
 import { EOAModalContentProps } from '../../types'
 import { PracticeButton } from '../../ui/PracticeButton'
+import { useKeyBoard } from '../../hooks/useKeyboard'
 
 export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -20,16 +24,19 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
   const problemsAmount = popUpData?.stats?.problemsAmount ?? 0
   const practiceModeEnabled = popUpData?.user.practiceMode
 
-  const leaveAssignmentButtonVariant =
-    !practiceModeEnabled || popUpData?.newerAssignmentAvailable
-      ? ButtonVariant.PRIMARY
-      : ButtonVariant.TERTIARY
+  const isPracticeButtonVisible = !!practiceModeEnabled && !popUpData?.newerAssignmentAvailable
 
   const handlePracticePress = () => {
     onPracticePress?.()
     model.hidePopUp()
   }
 
+  useKeyBoard((event) => {
+    if (event.key === 'Enter') {
+      isPracticeButtonVisible ? handlePracticePress() : model.hidePopUpAndLeave()
+    }
+  })
+
   return (
     <View style={styles.container}>
       <View style={styles.contentBackground}>
@@ -48,15 +55,15 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
 
       <View style={styles.buttonsContainer}>
         <Button
-          variant={leaveAssignmentButtonVariant}
-          size="large"
-          colorScheme={popUpData?.isExam ? 'purple' : 'blue'}
+          variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
+          size={ButtonSize.LARGE}
+          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={model.hidePopUpAndLeave}
         >
           {textContent.leftButtonText ?? ''}
         </Button>
-        {!!practiceModeEnabled && !popUpData?.newerAssignmentAvailable && (
+        {isPracticeButtonVisible && (
           <PracticeButton onPress={handlePracticePress} text={textContent.rightButtonText} />
         )}
       </View>

package/src/features/endOfAssignment/components/Modal/Modal.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, useEffect, useState } from 'react'
-import { ButtonVariant, CrossIcon, COLORS, BORDER_RADIUS, SPACING, SHADOWS, Button } from '@magmamath/react-native-ui'
 import {
   Animated,
   GestureResponderEvent,
@@ -11,6 +10,16 @@ import {
   ViewStyle,
 } from 'react-native'
 
+import {
+  ButtonVariant,
+  CrossIcon,
+  COLORS,
+  BORDER_RADIUS,
+  SPACING,
+  SHADOWS,
+  Button,
+} from '@magmamath/react-native-ui'
+
 import { ModalModel } from './model'
 import { ModalBackground } from './ModalBackground'
 
@@ -40,7 +49,14 @@ export type ModalProps = {
   }
 }
 
-export const Modal = ({ isVisible, isDismissable = true, onClose, style, content, withBackground }: ModalProps) => {
+export const Modal = ({
+  isVisible,
+  isDismissable = true,
+  onClose,
+  style,
+  content,
+  withBackground,
+}: ModalProps) => {
   const [modalModel] = useState(() => new ModalModel())
 
   useEffect(() => {

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -13,6 +13,7 @@ import {
 import { EOAModalContentProps } from '../../types'
 import { NoAnswerContent } from './NoAnswerContent'
 import { PracticeButton } from '../../ui/PracticeButton'
+import { useKeyBoard } from '../../hooks/useKeyboard'
 
 export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -30,6 +31,12 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
     model.hidePopUp()
   }
 
+  useKeyBoard((event) => {
+    if (event.key === 'Enter') {
+      practiceButtonVisible ? handlePrimaryButtonPress() : model.hidePopUpAndLeave
+    }
+  })
+
   return (
     <View style={styles.container}>
       <View style={styles.container}>
@@ -49,7 +56,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
         <Button
           variant={practiceButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
           size="large"
-          colorScheme={popUpData?.isExam ? 'purple' : 'blue'}
+          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={model.hidePopUpAndLeave}
         >

package/src/features/endOfAssignment/components/NoAnswer/NoAnswerContent.tsx

@@ -47,7 +47,7 @@ export const NoAnswerContent = ({ solvedAmount, problemsAmount }: NoAnswerConten
             {solvedAmount}
           </Typography>
           <Typography style={styles.text}>
-            <Text style={{ paddingRight: 1 }}>{'/'}</Text>
+            <Text style={styles.slash}>{'/'}</Text>
             {problemsAmount}
           </Typography>
         </View>
@@ -104,4 +104,5 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     color: '#E0E0E0',
   },
+  slash: { paddingRight: 1 },
 })

package/src/features/endOfAssignment/constants.ts

@@ -5,6 +5,10 @@ import { AnimatedCardVariant, EOAModalVariant } from './types'
 export const SPARKS_ANIMATION_DELAY = 2000
 export const GOOD_DRAWING_CARD_APPEARENCE_DELAY = 1800
 
+export enum KeyboardKeys {
+  ENTER = 'Enter',
+}
+
 export const MODALS_WITH_BACKGROUND = [
   EOAModalVariant.HAS_CORRECT_ANSWERS,
   EOAModalVariant.HAS_GOOD_DRAWING,

package/src/features/endOfAssignment/hooks/useKeyDownListener.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react'
+import { KeyboardKeys } from '../constants'
+
+export const useKeyDownListener = (
+  callback: (event: KeyboardEvent) => void,
+  overrideKeys = [KeyboardKeys.ENTER],
+) => {
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const eventHandler = (event: KeyboardEvent) => {
+      if (overrideKeys.includes(event.key as KeyboardKeys)) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+
+      callbackRef.current(event)
+    }
+
+    document.addEventListener('keydown', eventHandler, true)
+    return () => {
+      document.removeEventListener('keydown', eventHandler, true)
+    }
+  }, [])
+}

package/src/features/endOfAssignment/hooks/useKeyboard.ts

@@ -0,0 +1,19 @@
+import { Platform } from 'react-native';
+import { useKeyDownListener } from './useKeyDownListener';
+
+
+const noop = () => {};
+
+/**
+ * A cross-platform hook for handling keyboard events.
+ *
+ * - On native platforms (iOS, Android), it returns a no-op function because 
+ *   keyboard events are generally not applicable.
+ *
+ * - On web (default), it returns the `useKeyDownListener` hook, which allows you 
+ *   to register a callback that is triggered on keydown events.
+ */
+export const useKeyBoard = Platform.select({
+  native: noop,         
+  default: useKeyDownListener,
+});

package/src/features/endOfAssignment/model/model.ts

@@ -1,4 +1,4 @@
-import { createStore, createEvent, sample } from 'effector'
+import { createStore, createEvent } from 'effector'
 import { EOAModalVariant, EOAModalData, EOAEventType } from '../types'
 
 export class EOAModel {
@@ -8,12 +8,12 @@ export class EOAModel {
   public readonly practicePressed = createEvent()
   public readonly leavePressed = createEvent()
   public readonly goToFirstProblemPressed = createEvent()
-  public readonly updateRecommendations = createEvent<boolean>()
+  public readonly recommendationsUpdated = createEvent<boolean>()
   public readonly popUpTriggered = createEvent<EOAEventType>()
 
   public readonly $popUpData = createStore<EOAModalData | null>(null)
     .on(this.showPopUp, (_, payload) => payload)
-    .on(this.updateRecommendations, (state, hasRecommendations) => (state ? { ...state, hasRecommendations } : state))
+    .on(this.recommendationsUpdated, (state, hasRecommendations) => (state ? { ...state, hasRecommendations } : state))
     .reset(this.hidePopUp)
 
     public readonly $modalVariant = createStore<EOAModalVariant | null>(null)

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -9,7 +9,7 @@ import Animated, {
   FadeInUp,
   withTiming,
 } from 'react-native-reanimated'
-import { ButtonVariant, SPACING, Button } from '@magmamath/react-native-ui'
+import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
 
@@ -18,7 +18,7 @@ type PracticeButtonGroupProps = {
   isPracticeButtonVisible: boolean
   onLeftButtonPress: () => void
   onRightButtonPress: () => void
-  isExam?: boolean
+  isExam: boolean
 }
 
 export const PracticeButtonGroup = ({
@@ -30,8 +30,6 @@ export const PracticeButtonGroup = ({
 }: PracticeButtonGroupProps) => {
   const buttonsContainerOpacity = useSharedValue(0)
 
-  console.log('rerender')
-
   useEffect(() => {
     buttonsContainerOpacity.value = withDelay(1000, withTiming(1, { duration: 500 }))
   }, [])
@@ -47,17 +45,17 @@ export const PracticeButtonGroup = ({
       >
         <Button
           variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
-          size="large"
-          colorScheme={isExam ? 'purple' : 'blue'}
+          size={ButtonSize.LARGE}
+          colorScheme={isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={onLeftButtonPress}
         >
-          {textContent.leftButtonText ?? ''}
+          {textContent.leftButtonText}
         </Button>
       </Animated.View>
       <Animated.View>
         {isPracticeButtonVisible && (
-          <PracticeButton onPress={onRightButtonPress} text={textContent.rightButtonText ?? ''} />
+          <PracticeButton onPress={onRightButtonPress} text={textContent.rightButtonText} />
         )}
       </Animated.View>
     </Animated.View>