@magmamath/students-features 0.6.0 → 0.6.1-2.rc-2

package/src/features/exampleSolution/components/MessageBlock.tsx

@@ -0,0 +1,67 @@
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import React from 'react'
+import { COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type MessageBlockProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const MessageBlock = ({ status, style }: MessageBlockProps) => {
+  const localisation = useUnit($localization)
+
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withDelay(
+        2000,
+        withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 350 }),
+      ),
+    }
+  }, [status])
+
+  if (status === ExampleSolutionStatuses.CACHE) return null
+
+  return (
+    <Animated.View
+      layout={LinearTransition.duration(250)}
+      style={[styles.container, opacityAnimation, style]}
+    >
+      <Typography variant={'small'} numberOfLines={1}>
+        {status === ExampleSolutionStatuses.LOADING
+          ? localisation.exampleSolution.letMeThink
+          : localisation.exampleSolution.aha}
+      </Typography>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_3,
+    height: 44,
+    borderRadius: 12,
+    borderBottomRightRadius: 2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: COLORS.NEUTRAL_5,
+
+    shadowColor: COLORS.NEUTRAL_10,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+
+    elevation: 3,
+  },
+})

package/src/features/exampleSolution/components/QuestionSection.tsx

@@ -0,0 +1,56 @@
+import { StyleSheet, View, ScrollView } from 'react-native'
+import React from 'react'
+import { COLORS, Loader, LoaderColor, SPACING, Typography } from '@magmamath/react-native-ui'
+import Animated, { FadeOut } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type QuestionSectionProps = {
+  question?: string
+  status: ExampleSolutionStatuses
+}
+
+export const QuestionSection = ({ question, status }: QuestionSectionProps) => {
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollView}>
+        <Typography>{question}</Typography>
+      </ScrollView>
+      {status === ExampleSolutionStatuses.LOADING && (
+        <Animated.View exiting={FadeOut} style={styles.loaderContainer}>
+          <Loader size="large" color={LoaderColor.BLUE} />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SPACING[400],
+  },
+  errorText: {
+    color: COLORS.PRIMARY_RED,
+    textAlign: 'center',
+  },
+})

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, View, Image, Text } from 'react-native'
+import React from 'react'
+import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
+import Animated, { FadeIn } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+import gridImage from '../assets/grid.png'
+
+type SolutionSectionProps = {
+  answer?: string
+  status: ExampleSolutionStatuses
+}
+
+const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
+
+export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
+  const shouldShowAnswer =
+    answer &&
+    (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: gridImagePath }}
+        style={[styles.gridImage, IS_WEB && styles.gridImageWeb]}
+      />
+      {shouldShowAnswer && (
+        <Animated.ScrollView
+          style={styles.solutionScroll}
+          contentContainerStyle={styles.solutionScrollContent}
+          entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+        >
+          <Text style={styles.solutionText}>{answer}</Text>
+        </Animated.ScrollView>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 351,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  gridImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+    aspectRatio: 28 / 8,
+  },
+  gridImageWeb: {
+    transform: [{ scale: 3.5 }],
+  },
+  solutionScroll: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  solutionScrollContent: {
+    paddingHorizontal: SPACING[800],
+    paddingVertical: SPACING[400],
+  },
+  solutionText: {
+    fontFamily: 'PlaypenSans-Light',
+    fontSize: 22,
+  },
+})

package/src/features/exampleSolution/constants.ts

@@ -0,0 +1,5 @@
+export const enum ExampleSolutionStatuses {
+  LOADING = 'loading',
+  DONE_DATA = 'doneData',
+  CACHE = 'cache',
+}

package/src/features/exampleSolution/hooks/useExampleSolution.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+import { useUnit } from 'effector-react'
+import { ExampleSolutionPayload, ExampleSolutionResponse } from '../types'
+import { ExampleSolutionModel } from '../model/ExampleSolution.model'
+import { ExampleSolutionStatuses } from '../constants'
+
+const ANIMATION_DELAY = 600
+
+type UseExampleSolutionParams = {
+  model: ExampleSolutionModel
+  payload: ExampleSolutionPayload
+  problemId: string
+}
+
+type UseExampleSolutionReturn = {
+  result: ExampleSolutionResponse | null
+  status: ExampleSolutionStatuses
+}
+
+export const useExampleSolution = ({
+  model,
+  payload,
+  problemId,
+}: UseExampleSolutionParams): UseExampleSolutionReturn => {
+  const exampleSolutionsCache = useUnit(model.cache.$state)
+  const [result, setResult] = useState<ExampleSolutionResponse | null>(null)
+  const [status, setStatus] = useState<ExampleSolutionStatuses>(ExampleSolutionStatuses.LOADING)
+
+  useEffect(() => {
+    const fetchExampleSolution = async () => {
+      try {
+        if (exampleSolutionsCache[problemId]) {
+          setResult(exampleSolutionsCache[problemId])
+          setStatus(ExampleSolutionStatuses.CACHE)
+          return
+        }
+
+        const startTime = Date.now()
+        const response = await model.api.generateExampleSolutionFx(payload)
+
+        setResult(response)
+        model.cache.addExampleSolution({ problemId, response })
+
+        const elapsedTime = Date.now() - startTime
+        if (elapsedTime >= ANIMATION_DELAY) {
+          setStatus(ExampleSolutionStatuses.DONE_DATA)
+        } else {
+          setTimeout(() => {
+            setStatus(ExampleSolutionStatuses.DONE_DATA)
+          }, ANIMATION_DELAY)
+        }
+      } catch (error) {
+        console.error('Failed to fetch example solution:', error)
+      }
+    }
+
+    fetchExampleSolution()
+  }, [])
+
+  return {
+    result,
+    status,
+  }
+}

package/src/features/exampleSolution/index.ts

@@ -0,0 +1,3 @@
+export * from './ExampleSolutionModal'
+export * from './model/ExampleSolution.model'
+export * from './types'

package/src/features/exampleSolution/model/ExampleSolution.model.ts

@@ -0,0 +1,12 @@
+import { GifCelebrationsModelProps } from '../types'
+import { ExampleSolutionsApi } from './ExampleSolutionApi'
+import { ExampleSolutionCache } from './ExampleSolutionCache'
+
+export class ExampleSolutionModel {
+  public readonly api
+  public readonly cache = new ExampleSolutionCache()
+
+  constructor({ api, errorHandler }: GifCelebrationsModelProps) {
+    this.api = new ExampleSolutionsApi({ api, errorHandler })
+  }
+}

package/src/features/exampleSolution/model/ExampleSolutionApi.ts

@@ -0,0 +1,23 @@
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+import { ExampleSolutionApiRequests } from '../types'
+import { $localization } from '../../../shared/translation'
+
+type ExampleSolutionApiProps = {
+  api: ExampleSolutionApiRequests
+  errorHandler?: (errorMessage: string) => void
+}
+
+export class ExampleSolutionsApi {
+  public readonly generateExampleSolutionFx
+
+  constructor({ api, errorHandler }: ExampleSolutionApiProps) {
+    this.generateExampleSolutionFx = createControllerEffect(api.generateExampleSolution)
+
+    this.generateExampleSolutionFx.fail.watch(() => {
+      if (errorHandler) {
+        const errorMessage = $localization.getState().exampleSolution.errorMessage
+        errorHandler(errorMessage)
+      }
+    })
+  }
+}

package/src/features/exampleSolution/model/ExampleSolutionCache.ts

@@ -0,0 +1,20 @@
+import { createEvent, createStore } from 'effector'
+import { ExampleSolutionResponse } from '../types'
+
+type AddExampleSolution = {
+  problemId: string
+  response: ExampleSolutionResponse
+}
+
+export class ExampleSolutionCache {
+  public readonly resetState = createEvent()
+  public readonly addExampleSolution = createEvent<AddExampleSolution>()
+  public readonly $state = createStore<Record<string, ExampleSolutionResponse>>({})
+    .reset(this.resetState)
+    .on(this.addExampleSolution, (state, exampleSolution) => {
+      return {
+        ...state,
+        [exampleSolution.problemId]: exampleSolution.response,
+      }
+    })
+}

package/src/features/exampleSolution/types.ts

@@ -0,0 +1,25 @@
+import { ExampleSolutionModel } from './model/ExampleSolution.model'
+
+export type ExampleSolutionPayload = {
+  question: string
+  answer: string
+  language: string
+  altText?: string
+  imageCdnId?: string
+}
+export type ExampleSolutionResponse = {
+  question: string
+  answer: string
+}
+export type ExampleSolutionApiRequests = {
+  generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>
+}
+export type GifCelebrationsModelProps = {
+  api: ExampleSolutionApiRequests
+  errorHandler?: (errorMessage: string) => void
+}
+export type ExampleSolutionModalParams = {
+  problemId: string
+  payload: ExampleSolutionPayload
+  model: ExampleSolutionModel
+}

package/src/features/feedback/model/comments.ts

@@ -23,18 +23,18 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: data => ({
-          comments: data.comments.map(comment => ({ ...comment, isRead: true })),
+        fn: (data) => ({
+          comments: data.comments.map((comment) => ({ ...comment, isRead: true })),
           unreadMessagesCount: 0,
         }),
       }),
     )
-    .on(this.add, (state, { assignmentId, problemId, comment, isRead }) =>
+    .on(this.add, (state, { assignmentId, comment, isRead }) =>
       updateCommentsState({
         state,
         assignmentId,
-        problemId,
-        fn: data => ({
+        problemId: comment.problemId,
+        fn: (data) => ({
           comments: [...data.comments, comment],
           unreadMessagesCount: isRead ? data.unreadMessagesCount : data.unreadMessagesCount + 1,
         }),
@@ -45,7 +45,7 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: data => {
+        fn: (data) => {
           const commentToDelete = data.comments.find(({ _id }) => _id === commentId)
           if (!commentToDelete) return data
 
@@ -77,7 +77,7 @@ export class TeacherCommentsModel {
     sample({
       clock: this.add,
       source: { isOpen: $isOpen },
-      filter: ({ isOpen }) => isOpen,
+      filter: ({ isOpen }, { problemId, comment }) => isOpen && comment.problemId === problemId,
       fn: (_, { comment }) => ({
         ids: [comment._id],
       }),

package/src/features/feedback/model/model.ts

@@ -56,7 +56,7 @@ export class TeacherFeedbackModel {
           comments?.length === 1 && comments[0]._id === EMPTY_COMMENT_ID
         return !isOpen && isOnlyNoCommentsMessage
       },
-      fn: ({ assignmentId, problemId }, comment) => ({
+      fn: ({ assignmentId, problemId }) => ({
         assignmentId,
         problemId,
         commentId: EMPTY_COMMENT_ID,
@@ -76,7 +76,7 @@ export class TeacherFeedbackModel {
         const hasUnreadComments = comments.some(({ isRead }) => !isRead)
         return isOpen && hasUnreadComments
       },
-      fn: source => {
+      fn: (source) => {
         const comments = findCommentsByCredits(source)
         return { ids: comments.map(({ _id }) => _id) }
       },
@@ -97,9 +97,8 @@ export class TeacherFeedbackModel {
 
     sample({
       clock: this.sockets.commentDeleted,
-      source: { assignmentId: credits.$assignmentId },
-      fn: ({ assignmentId }, comment) => ({
-        assignmentId,
+      fn: (comment) => ({
+        assignmentId: comment.exerciseId,
         problemId: comment.problemId,
         commentId: comment._id,
       }),
@@ -113,10 +112,11 @@ export class TeacherFeedbackModel {
         problemId: credits.$problemId,
         isOpen: this.$isOpen,
       },
+      filter: ({ assignmentId }, comment) => assignmentId === comment.exerciseId,
       fn: ({ assignmentId, problemId, isOpen }, comment) => ({
         comment,
         assignmentId,
-        problemId: comment.problemId,
+        problemId,
         isRead: isOpen && comment.problemId === problemId,
       }),
       target: this.comments.add,

package/src/features/gifCelebrations/GifCelebrations.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import { Gif } from './components/Gif'
+import { Progress } from './components/Progress'
+import { ContentContainer } from './components/ContentContainer'
+import { Backdrop } from './components/Backdrop'
+import { Easing, runOnJS, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
+import { useUnit } from 'effector-react'
+import { ANIMATION_DURATION } from './constants'
+import { GifCelebrationsModel } from './model/GifCelebrations.model'
+import { ProgressValue, TextComponentType } from './types/model.types'
+
+type GifCelebrationsProps = {
+  model: GifCelebrationsModel
+  TextComponent: TextComponentType
+}
+
+export const GifCelebrations = ({ model, TextComponent }: GifCelebrationsProps) => {
+  const [problemsAmount, resolvedProblemsAmount, activeGif] = useUnit([
+    model.$problemsAmount,
+    model.$resolvedProblemsAmount,
+    model.$activeGif,
+  ])
+
+  const completedPercent =
+    resolvedProblemsAmount &&
+    problemsAmount &&
+    Math.round((resolvedProblemsAmount / problemsAmount) * 100)
+
+  const progress = useSharedValue<ProgressValue>(0)
+
+  const stopAnimation = () => {
+    model.stop()
+    progress.value = 0
+  }
+
+  const playAnimation = () => {
+    progress.value = withSequence(
+      withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.52, 0.16, 0.26, 0.77),
+      }),
+      withTiming(
+        2,
+        {
+          duration: ANIMATION_DURATION,
+          easing: Easing.bezier(0.71, 0.09, 0.49, 0.89),
+        },
+        () => runOnJS(stopAnimation)(),
+      ),
+    )
+  }
+
+  useEffect(() => {
+    if (activeGif) {
+      playAnimation()
+    }
+  }, [activeGif])
+
+  if (!activeGif) {
+    return null
+  }
+
+  return (
+    <Backdrop progress={progress}>
+      <ContentContainer progress={progress}>
+        <Gif
+          gifObject={activeGif}
+          getCachePathMethod={model.cache.getCachePathMethod}
+          TextComponent={TextComponent}
+        />
+        <Progress progress={progress} completedPercent={completedPercent} />
+      </ContentContainer>
+    </Backdrop>
+  )
+}

package/src/features/gifCelebrations/components/Backdrop.tsx

@@ -0,0 +1,41 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import Animated, { useAnimatedStyle, interpolateColor, SharedValue } from 'react-native-reanimated'
+import { BACKDROP_COLOR } from '../constants'
+import { ProgressValue } from '../types/model.types'
+
+type BackdropProps = {
+  children: React.ReactNode
+  progress: SharedValue<ProgressValue>
+}
+
+export const Backdrop = ({ children, progress }: BackdropProps) => {
+  const { width, height } = useWindowDimensions()
+
+  const backdropAnimatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1, 2],
+        [BACKDROP_COLOR.INITIAL, BACKDROP_COLOR.FINAL, BACKDROP_COLOR.INITIAL],
+      ),
+    }),
+    [progress],
+  )
+
+  return (
+    <Animated.View style={[styles.backdrop, { width, height }, backdropAnimatedStyle]}>
+      {children}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    zIndex: 10100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(51, 51, 51, 0.33);',
+  },
+})

package/src/features/gifCelebrations/components/ContentContainer.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import { SPACING } from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
+import { CONTENT_CONTAINER } from '../constants'
+import { ProgressValue } from '../types/model.types'
+
+type ContentContainerProps = {
+  children: React.ReactNode
+  progress: SharedValue<ProgressValue>
+}
+
+export const ContentContainer = ({ children, progress }: ContentContainerProps) => {
+  const { width } = useWindowDimensions()
+
+  const RIGHT_POSITION =
+    width / 2 + CONTENT_CONTAINER.CONTAINER_WIDTH / 2 + CONTENT_CONTAINER.ROTATION_PADDING
+  const LEFT_POSITION = -RIGHT_POSITION - CONTENT_CONTAINER.ROTATION_PADDING
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          translateX: interpolate(progress.value, [0, 1, 2], [LEFT_POSITION, 0, RIGHT_POSITION]),
+        },
+        {
+          rotate: `${interpolate(progress.value, [0, 1, 2], [-CONTENT_CONTAINER.ANGLE, 0, CONTENT_CONTAINER.ANGLE])}deg`,
+        },
+      ],
+    }),
+    [progress, RIGHT_POSITION, LEFT_POSITION],
+  )
+
+  return <Animated.View style={[styles.container, animatedStyles]}>{children}</Animated.View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: CONTENT_CONTAINER.CONTAINER_WIDTH,
+    alignItems: 'center',
+    gap: SPACING[800],
+    position: 'absolute',
+  },
+})