@magmamath/students-features 0.4.4 → 0.5.0-rc.0

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

@@ -1,141 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import { View, StyleSheet } from 'react-native'
-
-import { useUnit } from 'effector-react'
-import { SPACING, Typography, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
-
-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 '../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../lib/constants'
-
-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 = false,
-    newerAssignmentAvailable,
-  } = popUpData ?? {}
-
-  const isPracticeButtonVisible = !!(
-    user?.practiceMode &&
-    !newerAssignmentAvailable &&
-    (isExam || hasRecommendations)
-  )
-
-  const handlePracticeButtonPress = () => {
-    onPracticePress?.()
-    model.hidePopUp()
-  }
-
-  const onCorrectAnswerAnimationEnd = useCallback(() => {
-    if (stats?.goodDrawingAmount === 0) {
-      setCardsAnimationCompleted(true)
-    }
-  }, [])
-
-  const onGBDAnimationEnd = useCallback(() => {
-    setCardsAnimationCompleted(true)
-  }, [])
-
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      isPracticeButtonVisible ? handlePracticeButtonPress() : model.hidePopUpAndLeave()
-    }
-  })
-
-  return (
-    <View
-      style={[
-        styles.wrapper,
-        modalVariant !== EOAModalVariant.HAS_GOOD_DRAWING && { alignItems: 'center' },
-      ]}
-    >
-      <View style={styles.header}>
-        <Typography variant="large" style={styles.title}>
-          {textContent?.title}
-        </Typography>
-        <Typography variant="h4" style={styles.subtitle}>
-          {`${textContent?.subtitle} ${user?.firstName}!`}
-        </Typography>
-      </View>
-
-      <View style={styles.animationContainer}>
-        <AnimatedCard
-          variant={AnimatedCardVariant.CORRECT_ANSWER}
-          textContent={textContent}
-          solvedAmount={stats?.solvedAmount}
-          problemsAmount={stats?.problemsAmount}
-          shouldTriggerSparkles={cardsAnimationCompleted}
-          onAnimationEnd={onCorrectAnswerAnimationEnd}
-        />
-
-        {modalVariant === EOAModalVariant.HAS_GOOD_DRAWING && (
-          <AnimatedCard
-            variant={AnimatedCardVariant.GOOD_DRAWING}
-            textContent={textContent}
-            gbdAmount={stats?.goodDrawingAmount}
-            shouldTriggerSparkles={cardsAnimationCompleted}
-            onAnimationEnd={onGBDAnimationEnd}
-            delay={GOOD_DRAWING_CARD_APPEARENCE_DELAY}
-          />
-        )}
-      </View>
-
-      <PracticeButtonGroup
-        textContent={textContent}
-        isPracticeButtonVisible={isPracticeButtonVisible}
-        isExam={isExam}
-        onLeftButtonPress={model.hidePopUpAndLeave}
-        onRightButtonPress={handlePracticeButtonPress}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-    gap: SPACING[400],
-  },
-  header: {
-    gap: SPACING[100],
-    alignItems: 'center',
-  },
-  title: {
-    fontWeight: '900',
-    lineHeight: 54,
-    fontSize: 36,
-    paddingVertical: SPACING[100],
-    color: COLORS.NEUTRAL_9,
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  subtitle: {
-    color: COLORS.NEUTRAL_7,
-    paddingVertical: SPACING[100],
-    lineHeight: 25,
-  },
-  animationContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: SPACING[800],
-    paddingTop: SPACING[800],
-    paddingBottom: SPACING[1600],
-  },
-  buttonsContainer: {
-    height: 62,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-    paddingVertical: SPACING[300],
-  },
-})

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

@@ -1,39 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { Spark } from './Spark'
-import { SPARKS_ANIMATION_DELAY } from '../../constants'
-
-type CorrectAnswerProps = {
-  shouldStartAnimation: boolean
-  color: string
-}
-
-const CA_SPARKS_MAP = [
-  { id: '1', x: 22, y: 20, size: 14, initialDelay: SPARKS_ANIMATION_DELAY * 1.3 },
-  { id: '2', x: 128, y: 127, size: 21, initialDelay: SPARKS_ANIMATION_DELAY * 1.14 },
-  { id: '3', x: 268, y: 44, size: 28, initialDelay: SPARKS_ANIMATION_DELAY * 1.4 },
-]
-
-export const CorrectAnswerSparks = ({ color, shouldStartAnimation }: CorrectAnswerProps) => {
-  if (!shouldStartAnimation) {
-    return null
-  }
-
-  return (
-    <View style={styles.container}>
-      {CA_SPARKS_MAP.map((star) => (
-        <Spark key={star.id} color={color} {...star} />
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    zIndex: 110,
-    width: '100%',
-    height: '100%',
-  },
-})

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

@@ -1,40 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Spark } from './Spark'
-import { SPARKS_ANIMATION_DELAY } from '../../constants'
-
-const GD_SPARKS_MAP = [
-  { id: '1', x: 20, y: 135.5, size: 14, initialDelay: SPARKS_ANIMATION_DELAY * 1.25 },
-  { id: '2', x: 25, y: 19.5, size: 21, initialDelay: SPARKS_ANIMATION_DELAY },
-  { id: '3', x: 115, y: 132, size: 28, initialDelay: SPARKS_ANIMATION_DELAY * 1.1 },
-  { id: '4', x: 315, y: 42, size: 14, initialDelay: SPARKS_ANIMATION_DELAY * 1.31 },
-  { id: '5', x: 326, y: 24.5, size: 21, initialDelay: SPARKS_ANIMATION_DELAY * 1.36 },
-]
-
-type GoodDrawingSparksProps = {
-  shouldStartAnimation: boolean
-  color: string
-}
-
-export const GoodDrawingSparks = ({ color, shouldStartAnimation }: GoodDrawingSparksProps) => {
-  if (!shouldStartAnimation) {
-    return null
-  }
-
-  return (
-    <View style={styles.container}>
-      {GD_SPARKS_MAP.map((star) => (
-        <Spark key={star.id} color={color} {...star} />
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    zIndex: 110,
-    width: '100%',
-    height: '100%',
-  },
-})

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

@@ -1,45 +0,0 @@
-import React from 'react'
-import { COLORS } from '@magmamath/react-native-ui'
-import { SparkIcon } from '../../ui/SparkIcon'
-import { useSparkAnimation } from '../../hooks/useSparkAnimation'
-import Animated from 'react-native-reanimated'
-
-type SparkProps = {
-  id: string
-  x: number
-  y: number
-  size: number
-  color: string
-  initialDelay: number
-}
-
-const SPARKS_SPRING_CONFIG = {
-  mass: 1.8,
-  damping: 25,
-  stiffness: 293,
-  overshootClamping: false,
-  restDisplacementThreshold: 0.01,
-  restSpeedThreshold: 2,
-}
-
-const HOLD_DELAY = 800
-const ROTATION_ANGLE = 90
-
-export const Spark = ({ id, x, y, size, initialDelay = 350, color = COLORS.GREEN_3 }: SparkProps) => {
-  const { animatedStyle } = useSparkAnimation({
-    id,
-    initialDelay,
-    rotationAngle: ROTATION_ANGLE,
-    holdDelay: HOLD_DELAY,
-    springConfig: SPARKS_SPRING_CONFIG,
-    x,
-    y,
-    size,
-  })
-
-  return (
-    <Animated.View style={animatedStyle}>
-      <SparkIcon size={size} color={color} />
-    </Animated.View>
-  )
-}

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

@@ -1,64 +0,0 @@
-import React from 'react'
-import { useUnit } from 'effector-react'
-
-import { EOAModel } from '../model/model'
-import { EOAEventType, EOAModalText, EOAModalVariant } from '../types'
-
-import { Modal } from './Modal/Modal'
-
-import { NoAnswer } from './NoAnswer/NoAnswer'
-import { CheatDetected } from './CheatDetected/CheatDetected'
-import { CorrectAnswer } from './CorrectAnswer/CorrectAnswer'
-import { ExamLeave } from './ExamLeave/ExamLeave'
-import { ExamPaused } from './ExamPaused/ExamPaused'
-import { ExamSubmit } from './ExamSubmit/ExamSubmit'
-
-import { getModalContainerSize, shouldDisplayModalBackground } from '../helpers'
-
-const MODAL_CONTENT_VARIANTS_MAP = new Map([
-  [EOAModalVariant.NO_CORRECT_ANSWERS, NoAnswer],
-  [EOAModalVariant.HAS_CORRECT_ANSWERS, CorrectAnswer],
-  [EOAModalVariant.HAS_GOOD_DRAWING, CorrectAnswer],
-  [EOAModalVariant.EXAM_FINISHED_NO_CORRECT_ANSWERS, NoAnswer],
-  [EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS, CorrectAnswer],
-  [EOAModalVariant.EXAM_SAFE_MODE_SUBMIT, ExamSubmit],
-  [EOAModalVariant.EXAM_SUBMIT, ExamSubmit],
-  [EOAModalVariant.EXAM_PAUSED, ExamPaused],
-  [EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED, CheatDetected],
-  [EOAModalVariant.EXAM_SAFE_MODE_LEAVE, ExamLeave],
-])
-
-type EOAModalProps = {
-  model: EOAModel
-  textContent: EOAModalText
-  onPracticePress: () => void
-}
-
-export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps) => {
-  const popUpData = useUnit(model.$popUpData)
-  const modalVariant = useUnit(model.$modalVariant)
-
-  if (!popUpData || !modalVariant) return null
-
-  const withBackground = shouldDisplayModalBackground(modalVariant)
-  const isDismissable =
-    popUpData.eventType !== EOAEventType.CHEAT_DETECTED &&
-    popUpData.eventType !== EOAEventType.EXAM_PAUSED
-
-  const ModalContent = MODAL_CONTENT_VARIANTS_MAP.get(modalVariant)
-
-  if (!ModalContent) return null
-
-  return (
-    <Modal
-      isVisible={true}
-      isDismissable={isDismissable}
-      style={getModalContainerSize(modalVariant)}
-      onClose={model.hidePopUp}
-      content={
-        <ModalContent model={model} textContent={textContent} onPracticePress={onPracticePress} />
-      }
-      withBackground={withBackground}
-    />
-  )
-}

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

@@ -1,77 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-import { EOAModalContentProps } from '../../types'
-import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../lib/constants'
-
-export const ExamLeave = ({ textContent, model }: EOAModalContentProps) => {
-  const handleDismiss = () => model.hidePopUp()
-
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      model.hidePopUpAndLeave()
-    }
-  })
-
-  return (
-    <View style={styles.container}>
-      <Typography variant="h1" style={styles.description}>
-        {textContent.description}
-      </Typography>
-
-      <View style={styles.buttonsContainer}>
-        <Button
-          variant={ButtonVariant.TERTIARY}
-          size={ButtonSize.LARGE}
-          style={{ text: styles.buttonText }}
-          onPress={handleDismiss}
-        >
-          {textContent.leftButtonText}
-        </Button>
-
-        <Button
-          variant={ButtonVariant.PRIMARY}
-          colorScheme={ButtonColor.RED}
-          size={ButtonSize.LARGE}
-          style={{ text: styles.buttonText }}
-          onPress={model.hidePopUpAndLeave}
-        >
-          {textContent.rightButtonText}
-        </Button>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    gap: SPACING[800],
-    paddingTop: SPACING[800],
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  description: {
-    textAlign: 'center',
-    fontWeight: '700',
-    color: COLORS.NEUTRAL_9,
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-  },
-  buttonText: {
-    textTransform: 'uppercase',
-  },
-})

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

@@ -1,62 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-import { EOAModalContentProps } from '../../types'
-import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../lib/constants'
-
-export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      model.hidePopUpAndLeave()
-    }
-  })
-
-  return (
-    <View style={styles.container}>
-      <Typography variant="h2" style={styles.title}>
-        {textContent.title}
-      </Typography>
-
-      <Typography variant="h1" style={styles.description}>
-        {textContent.description}
-      </Typography>
-
-      <Button
-        variant={ButtonVariant.PRIMARY}
-        colorScheme={ButtonColor.PURPLE}
-        size={ButtonSize.LARGE}
-        style={{ text: styles.buttonText }}
-        onPress={model.hidePopUpAndLeave}
-      >
-        {textContent.leftButtonText}
-      </Button>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: SPACING[800],
-    alignItems: 'center',
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-  },
-  description: {
-    textAlign: 'center',
-    fontWeight: '700',
-  },
-  buttonText: {
-    textTransform: 'uppercase',
-  },
-})

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

@@ -1,110 +0,0 @@
-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,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-import { ExamSubmitContent } from './ExamSubmitContent'
-import { EOAModalContentProps } from '../../types'
-import { PracticeButton } from '../../ui/PracticeButton'
-import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../lib/constants'
-
-export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
-  const popUpData = useUnit(model.$popUpData)
-
-  const problemsAmount = popUpData?.stats?.problemsAmount ?? 0
-  const practiceModeEnabled = popUpData?.user.practiceMode
-
-  const isPracticeButtonVisible = !!practiceModeEnabled && !popUpData?.newerAssignmentAvailable
-
-  const handlePracticePress = () => {
-    onPracticePress?.()
-    model.hidePopUp()
-  }
-
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      isPracticeButtonVisible ? handlePracticePress() : model.hidePopUpAndLeave()
-    }
-  })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.contentBackground}>
-        {IS_MOBILE ? (
-          <Image source={require('./blurred-card.png')} />
-        ) : (
-          <ExamSubmitContent problemsAmount={problemsAmount} />
-        )}
-      </View>
-      <Typography variant="h2" style={styles.title}>
-        {textContent.title}
-      </Typography>
-      <Typography variant="h1" style={styles.description}>
-        {textContent.description}
-      </Typography>
-
-      <View style={styles.buttonsContainer}>
-        <Button
-          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>
-        {isPracticeButtonVisible && (
-          <PracticeButton onPress={handlePracticePress} text={textContent.rightButtonText} />
-        )}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    gap: SPACING[400],
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-    paddingVertical: SPACING[100],
-  },
-  description: {
-    color: COLORS.NEUTRAL_9,
-    textAlign: 'center',
-    fontWeight: 700,
-    paddingTop: SPACING[800],
-    paddingBottom: SPACING[1600],
-  },
-  contentBackground: {
-    position: 'absolute',
-    zIndex: -1,
-    top: '22%',
-    ...(Platform.OS === 'web' && {
-      filter: 'blur(4px)',
-    }),
-  },
-  buttonsContainer: {
-    height: 62,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-  },
-  buttonText: {
-    textTransform: 'uppercase',
-  },
-})

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

@@ -1,69 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS, CorrectIcon, SPACING, Typography } from '@magmamath/react-native-ui'
-
-type ExamSumitContentProps = {
-  problemsAmount: number
-  description?: string
-}
-
-export const ExamSubmitContent = ({ problemsAmount, description }: ExamSumitContentProps) => {
-  return (
-    <View style={styles.container}>
-      <View style={styles.content}>
-        <View style={styles.iconContainer}>
-          <CorrectIcon size={70} color={COLORS.NEUTRAL_1} />
-        </View>
-        <View style={styles.textContainer}>
-          <Typography variant="xxl" style={styles.largeText}>
-            {description || '?'}
-          </Typography>
-          <Typography style={styles.text}>/{problemsAmount}</Typography>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    opacity: 0.4,
-    paddingHorizontal: SPACING[100],
-    paddingTop: SPACING[100],
-    paddingBottom: 38,
-    marginBottom: SPACING[800],
-    backgroundColor: COLORS.NEUTRAL_5,
-    borderRadius: BORDER_RADIUS[400],
-  },
-  content: {
-    flexDirection: 'row',
-    borderRadius: BORDER_RADIUS[200],
-    paddingVertical: SPACING[400],
-    paddingHorizontal: SPACING[800],
-    backgroundColor: COLORS.NEUTRAL_1,
-    gap: SPACING[500],
-  },
-  iconContainer: {
-    backgroundColor: COLORS.NEUTRAL_5,
-    padding: SPACING[200],
-    borderRadius: 100,
-    height: 70,
-    width: 70,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  textContainer: {
-    flexDirection: 'row',
-  },
-  text: {
-    fontWeight: '700',
-    color: COLORS.NEUTRAL_5,
-    alignSelf: 'flex-end',
-  },
-  largeText: {
-    fontSize: 48,
-    fontWeight: '700',
-    lineHeight: 48,
-    color: COLORS.NEUTRAL_5,
-  },
-})