@magmamath/students-features 0.2.0-hotfix-circular-dependencies-chatbot → 0.2.0

package/src/features/feedback/components/TeacherFeedbackButton/TeacherFeedbackButton.tsx

@@ -1,18 +1,16 @@
 import React from 'react'
-import { GestureResponderEvent, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { Button, COLORS } from '@magmamath/react-native-ui'
 import { UnreadMessagesBadge } from '../UnreadMessagesBadge'
 import { MessageBubbleIcon } from '../icons/MessageBubbleIcon'
 import { XCloseIcon } from '../icons/XCloseIcon'
 import { COLOR_SCHEMES } from './colorSchemes'
-import { TEACHER_FEEDBACK_BUTTON_ID } from '../../constants'
 
 type TeacherFeedbackButtonProps = {
   isOpen: boolean
   isLoading: boolean
   onPress?: () => void
   unreadCommentsCount?: number
-  size?: 'small' | 'large'
 }
 
 export const TeacherFeedbackButton = ({
@@ -20,30 +18,22 @@ export const TeacherFeedbackButton = ({
   onPress,
   unreadCommentsCount,
   isLoading,
-  size = 'large',
 }: TeacherFeedbackButtonProps) => {
-  const handlePress = (event: GestureResponderEvent) => {
-    event.stopPropagation()
-    onPress?.()
-  }
-
   if (isOpen) {
     return (
       <Button
         key='open'
-        id={TEACHER_FEEDBACK_BUTTON_ID}
-        onPress={handlePress}
+        onPress={onPress}
         size='large'
         variant='primary'
         disabled={isLoading}
         isLoading={isLoading}
         style={{
           container: styles.container,
-          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }, styles[size]],
+          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }],
         }}
-        data-skip-confetti='true'
         customColorScheme={COLOR_SCHEMES.GREY}
-        icon={<XCloseIcon size={size === 'large' ? 37 : 26} />}
+        icon={<XCloseIcon />}
       />
     )
   }
@@ -51,34 +41,22 @@ export const TeacherFeedbackButton = ({
   return (
     <Button
       key='closed'
-      id={TEACHER_FEEDBACK_BUTTON_ID}
-      onPress={handlePress}
+      onPress={onPress}
       size='large'
       variant='primary'
       disabled={isLoading}
       isLoading={isLoading}
       style={{
         container: styles.container,
-        button: [
-          styles.button,
-          { borderColor: !!unreadCommentsCount ? COLORS.BLUE_6 : COLORS.NEUTRAL_5 },
-          styles[size],
-        ],
+        button: [styles.button, { borderColor: !!unreadCommentsCount ? COLORS.BLUE_6 : COLORS.NEUTRAL_5 }],
       }}
       customColorScheme={!!unreadCommentsCount ? COLOR_SCHEMES.BLUE : COLOR_SCHEMES.GREY}
       icon={
         <View style={styles.iconContainer}>
-          <MessageBubbleIcon
-            color={!!unreadCommentsCount ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={size === 'large' ? 37 : 26}
-          />
+          <MessageBubbleIcon color={!!unreadCommentsCount ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} />
           {!!unreadCommentsCount && (
-            <View style={size === 'large' ? styles.badgeContainerLarge : styles.badgeContainer}>
-              <UnreadMessagesBadge
-                badgeContent={unreadCommentsCount}
-                textStyle={size === 'large' && { fontSize: 18 }}
-                style={size === 'large' && { width: 32, height: 32, borderRadius: 16 }}
-              />
+            <View style={styles.badgeContainer}>
+              <UnreadMessagesBadge badgeContent={unreadCommentsCount} />
             </View>
           )}
         </View>
@@ -92,30 +70,14 @@ const styles = StyleSheet.create({
     width: 54,
     height: 54,
   },
-  small: {
+  button: {
     width: 50,
     height: 50,
-  },
-  large: {
-    width: 75,
-    height: 75,
-  },
-  button: {
-    borderWidth: 2,
-  },
-  buttonLarge: {
-    width: 75,
-    height: 75,
     borderWidth: 2,
   },
   iconContainer: {
     position: 'relative',
   },
-  badgeContainerLarge: {
-    position: 'absolute',
-    top: -24,
-    right: -24,
-  },
   badgeContainer: {
     position: 'absolute',
     top: -17,

package/src/features/feedback/components/TeacherFeedbackComments/TeacherComment.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
+import { View, Text, StyleSheet, Platform } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 import { getRelativeTime } from '../../helpers'
 import { BUENOS_AIRES_FONT } from '../../constants'
@@ -10,12 +10,11 @@ type TeacherCommentProps = {
   teacherName: string
   createdAt: Date
   locale: Locale | null
-  isLastComment: boolean
 }
 
-export const TeacherComment = ({ content, teacherName, createdAt, locale, isLastComment }: TeacherCommentProps) => {
+export const TeacherComment = ({ content, teacherName, createdAt, locale }: TeacherCommentProps) => {
   return (
-    <View style={{ marginBottom: isLastComment ? 8 : 0 }}>
+    <>
       <View style={styles.authorInfo}>
         <Text style={styles.teacherName} numberOfLines={1}>
           {teacherName}
@@ -29,7 +28,7 @@ export const TeacherComment = ({ content, teacherName, createdAt, locale, isLast
       <View style={styles.container}>
         <Text style={styles.text}>{content}</Text>
       </View>
-    </View>
+    </>
   )
 }
 
@@ -40,7 +39,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
-    shadowColor: COLORS.NEUTRAL_10,
+    shadowColor: COLORS.PRIMARY_SHADOW,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,

package/src/features/feedback/components/TeacherFeedbackComments/TeacherFeedbackComments.tsx

@@ -4,19 +4,16 @@ import { Locale, TeacherComment as FeedbackComment } from '../../types/teacherFe
 import { TeacherComment } from './TeacherComment'
 import { EmptyComment } from '../EmptyComment/EmptyComment'
 import { EMPTY_COMMENT_ID } from '../../constants'
-import { COLORS } from '@magmamath/react-native-ui'
 
 const TOOLBAR_HEIGHT = 140
 const BOTTOM_OFFSET = Platform.OS === 'web' ? 270 : 304
-const SIMPLE_MODE_OFFSET = 70
 
 type TeacherFeedbackCommentsProps = {
   comments: FeedbackComment[] | null
   locale: Locale | null
-  mode: 'regular' | 'simple'
 }
 
-export const TeacherFeedbackComments = ({ comments, locale, mode }: TeacherFeedbackCommentsProps) => {
+export const TeacherFeedbackComments = ({ comments, locale }: TeacherFeedbackCommentsProps) => {
   const ref = useRef<ScrollView | null>(null)
   const dimensions = useWindowDimensions()
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
@@ -28,7 +25,7 @@ export const TeacherFeedbackComments = ({ comments, locale, mode }: TeacherFeedb
   if (!comments) return null
 
   return (
-    <View style={[styles.container, { maxHeight: MAX_HEIGHT - (mode === 'simple' ? SIMPLE_MODE_OFFSET : 0) }]}>
+    <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
       <ScrollView
         ref={ref}
         contentContainerStyle={styles.commentsList}
@@ -37,14 +34,13 @@ export const TeacherFeedbackComments = ({ comments, locale, mode }: TeacherFeedb
         {comments.length === 1 && comments[0]._id === EMPTY_COMMENT_ID ? (
           <EmptyComment locale={locale} />
         ) : (
-          comments.map((comment, index) => (
+          comments.map((comment) => (
             <TeacherComment
               key={comment._id}
               teacherName={comment.teacherName}
               content={comment.content}
               createdAt={comment.createdAt}
               locale={locale}
-              isLastComment={index === comments.length - 1}
             />
           ))
         )}
@@ -56,12 +52,6 @@ export const TeacherFeedbackComments = ({ comments, locale, mode }: TeacherFeedb
 const styles = StyleSheet.create({
   container: {
     width: 368,
-    backgroundColor: COLORS.NEUTRAL_1,
-    paddingTop: 8,
-    paddingLeft: 8,
-    paddingRight: 8,
-    paddingBottom: 0,
-    borderRadius: 8,
   },
   commentsList: {
     gap: 8,

package/src/features/feedback/components/UnreadMessagesBadge.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle, TextStyle } from 'react-native'
+import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 
 type UnreadMessagesBadgeProps = {
   badgeContent?: number
   withBorder?: boolean
   style?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
 }
 
-export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style, textStyle }: UnreadMessagesBadgeProps) => {
+export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style }: UnreadMessagesBadgeProps) => {
   return (
     <View
       style={[
@@ -20,7 +19,7 @@ export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style, t
         withBorder && (badgeContent ? styles.withBorderSize : styles.withBorderSizeEmpty),
       ]}
     >
-      <Text style={[styles.text, textStyle]}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
+      <Text style={styles.text}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
     </View>
   )
 }
@@ -53,10 +52,8 @@ const styles = StyleSheet.create({
     borderRadius: 5.75,
   },
   text: {
-    alignItems: 'center',
-    justifyContent: 'center',
     fontSize: 12,
-    textAlign: 'center',
+    lineHeight: 16,
     fontWeight: '600',
     fontFamily: Platform.OS === 'web' ? 'Open Sans, sans-serif' : 'OpenSans-SemiBold',
     color: COLORS.NEUTRAL_1,

package/src/features/feedback/constants.ts

@@ -22,5 +22,3 @@ export const getEmptyComment = (problemId: string, locale: Locale | null) => {
     updatedAt: new Date(),
   }
 }
-
-export const TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'

package/src/features/feedback/index.ts

@@ -1,4 +1,3 @@
 export * from './model/teacherFeedback.model'
 export * from './types/teacherFeedback.types'
-export * from './constants'
 export * from './components'

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

@@ -10,7 +10,6 @@ import { EMPTY_COMMENT_ID, getEmptyComment } from '../constants'
 
 type TeacherFeedbackModelProps = {
   credits: {
-    assignmentId: StoreWritable<string>
     problemId: StoreWritable<string>
     locale: StoreWritable<Locale | null>
   }
@@ -20,28 +19,19 @@ type TeacherFeedbackModelProps = {
   }
 }
 
-type CommentsMap = Map<string, Record<string, CommentsEntity>>
-
 export class TeacherFeedbackModel {
-  $assignmentId: StoreWritable<string>
   $currentProblemId: StoreWritable<string>
   $locale: StoreWritable<Locale | null>
 
-  setCommentsSeen = createEvent<{ ids: string[]; currentProblemId: string; assignmentId: string }>()
-  $comments = createStore<CommentsMap>(new Map())
+  setCommentsSeen = createEvent<{ ids: string[]; currentProblemId: string }>()
+  $comments = createStore<Map<string, CommentsEntity>>(new Map())
 
   setIsOpened = createEvent<boolean>()
   $isOpened = restore(this.setIsOpened, false)
   setIsVisible = createEvent<boolean>()
   $isVisible = restore(this.setIsVisible, false)
 
-  getCommentsByAssignmentIdFx: Effect<
-    GetCommentsByIdProps,
-    {
-      data: Record<string, { comments: TeacherComment[] }>
-      assignmentId: string
-    }
-  >
+  getCommentsByAssignmentIdFx: Effect<GetCommentsByIdProps, Record<string, { comments: TeacherComment[] }>>
   updateCommentSeenFx: Effect<UpdateCommentSeenStatusProps, void>
 
   sockets = {
@@ -50,15 +40,8 @@ export class TeacherFeedbackModel {
   }
 
   constructor({ api, credits }: TeacherFeedbackModelProps) {
-    this.getCommentsByAssignmentIdFx = createEffect(async ({ id }: { id: string }) => {
-      const response = await api.getCommentsByAssignmentId({ id })
-      return {
-        data: response,
-        assignmentId: id,
-      }
-    })
+    this.getCommentsByAssignmentIdFx = createEffect(api.getCommentsByAssignmentId)
     this.updateCommentSeenFx = createEffect(api.updateCommentSeenStatus)
-    this.$assignmentId = credits.assignmentId
     this.$currentProblemId = credits.problemId
     this.$locale = credits.locale
 
@@ -70,13 +53,10 @@ export class TeacherFeedbackModel {
 
     sample({
       clock: this.sockets.onCreate,
-      source: [this.$isOpened, this.$currentProblemId, this.$assignmentId] as const,
-      filter: ([isOpen, currentProblemId], payload) => {
-        return isOpen && currentProblemId === payload.problemId
-      },
-      fn: ([_, currentProblemId, assignmentId], { _id }) => ({
+      source: [this.$isOpened, this.$currentProblemId] as const,
+      filter: ([isOpen]) => isOpen,
+      fn: ([_, currentProblemId], { _id }) => ({
         currentProblemId,
-        assignmentId,
         ids: [_id],
       }),
       target: [this.setCommentsSeen, this.updateCommentSeenFx],
@@ -84,50 +64,42 @@ export class TeacherFeedbackModel {
 
     sample({
       clock: this.$isOpened,
-      source: [this.$comments, this.$currentProblemId, this.$assignmentId] as const,
-      filter: ([feedback, currentProblemId, assignmentId], isOpen) => {
-        const assignmentComments = feedback.get(assignmentId) || {}
-        const comments = assignmentComments[currentProblemId]?.comments ?? []
+      source: [this.$comments, this.$currentProblemId] as const,
+      filter: ([feedback, currentProblemId], isOpen) => {
+        const comments = feedback.get(currentProblemId)?.comments ?? []
         const hasUnreadComments = comments.some((comment) => !comment.isRead)
         return isOpen && hasUnreadComments
       },
-      fn: ([feedback, currentProblemId, assignmentId]) => {
-        const assignmentComments = feedback.get(assignmentId) || {}
-        const comments = assignmentComments[currentProblemId]?.comments ?? []
+      fn: ([feedback, currentProblemId]) => {
+        const comments = feedback.get(currentProblemId)?.comments ?? []
         return {
           currentProblemId,
-          assignmentId,
           ids: comments.filter((comment) => !comment.isRead).map((comment) => comment._id),
         }
       },
       target: [this.setCommentsSeen, this.updateCommentSeenFx],
     })
 
-    this.$isVisible.on(this.getCommentsByAssignmentIdFx.doneData, (_, { data }) => {
-      return Object.values(data).some((problemFeedback) => problemFeedback.comments?.length > 0)
+    this.$isVisible.on(this.getCommentsByAssignmentIdFx.doneData, (_, payload) => {
+      return Object.values(payload).some((problemFeedback) => problemFeedback.comments?.length > 0)
     })
 
     this.$comments
-      .on(this.getCommentsByAssignmentIdFx.doneData, (state, { assignmentId, data }) => {
-        const problemsMap: Record<string, CommentsEntity> = {}
+      .on(this.getCommentsByAssignmentIdFx.doneData, (_, payload) => {
+        const state = new Map()
 
-        for (const [problemId, { comments }] of Object.entries(data)) {
+        for (const [problemId, { comments }] of Object.entries(payload)) {
           const unreadMessages = comments.filter((comment) => !comment.isRead)
-          problemsMap[problemId] = {
+          state.set(problemId, {
             comments,
             unreadMessagesCount: unreadMessages.length,
-          }
+          })
         }
 
-        const updatedState = new Map(state)
-        updatedState.set(assignmentId, problemsMap)
-        return updatedState
+        return state
       })
-      .on(this.setCommentsSeen, (state, { ids, currentProblemId, assignmentId }) => {
-        const assignmentComments = state.get(assignmentId)
-        if (!assignmentComments) return state
-
-        const feedback = assignmentComments[currentProblemId]
+      .on(this.setCommentsSeen, (state, { ids, currentProblemId }) => {
+        const feedback = state.get(currentProblemId)
         if (!feedback) return state
 
         const updatedComments = feedback.comments.map((comment) =>
@@ -140,19 +112,13 @@ export class TeacherFeedbackModel {
           unreadMessagesCount: 0,
         }
 
-        const updatedAssignmentComments = {
-          ...assignmentComments,
-          [currentProblemId]: updatedFeedback,
-        }
-
         const updatedState = new Map(state)
-        updatedState.set(assignmentId, updatedAssignmentComments)
+        updatedState.set(currentProblemId, updatedFeedback)
 
         return updatedState
       })
       .on(this.sockets.onCreate, (state, payload) => {
-        const assignmentComments = state.get(payload.exerciseId) || {}
-        const feedback = assignmentComments[payload.problemId] ?? { comments: [], unreadMessagesCount: 0 }
+        const feedback = state.get(payload.problemId) ?? { comments: [], unreadMessagesCount: 0 }
 
         const updatedFeedback = {
           ...feedback,
@@ -160,22 +126,13 @@ export class TeacherFeedbackModel {
           unreadMessagesCount: feedback.unreadMessagesCount + 1,
         }
 
-        const updatedAssignmentComments = {
-          ...assignmentComments,
-          [payload.problemId]: updatedFeedback,
-        }
-
         const updatedState = new Map(state)
-        updatedState.set(payload.exerciseId, updatedAssignmentComments)
+        updatedState.set(payload.problemId, updatedFeedback)
 
         return updatedState
       })
       .on(this.sockets.onDeleted, (state, payload) => {
-        const assignmentId = this.$assignmentId.getState()
-        const assignmentComments = state.get(assignmentId)
-        if (!assignmentComments) return state
-
-        const feedback = assignmentComments[payload.problemId]
+        const feedback = state.get(payload.problemId)
         if (!feedback) return state
 
         const isDeleteMessageUnread = feedback.comments.some(
@@ -187,65 +144,35 @@ export class TeacherFeedbackModel {
           unreadMessagesCount: isDeleteMessageUnread ? feedback.unreadMessagesCount - 1 : feedback.unreadMessagesCount,
         }
 
+        const updatedState = new Map(state)
         const isOpen = this.$isOpened.getState()
 
         if (updatedFeedback.comments.length === 0) {
-          const updatedAssignmentComments = { ...assignmentComments }
-
           if (!isOpen) {
-            delete updatedAssignmentComments[payload.problemId]
-
-            // If no problems left, remove the assignment entirely
-            if (Object.keys(updatedAssignmentComments).length === 0) {
-              const updatedState = new Map(state)
-              updatedState.delete(assignmentId)
-              return updatedState
-            }
-          } else {
-            updatedAssignmentComments[payload.problemId] = {
-              ...updatedFeedback,
-              comments: [getEmptyComment(payload.problemId, this.$locale.getState())],
-            }
+            updatedState.delete(payload.problemId)
+            return updatedState
           }
 
-          const updatedState = new Map(state)
-          updatedState.set(assignmentId, updatedAssignmentComments)
-          return updatedState
-        }
+          const feedbackWithCustomMessage = { ...updatedFeedback }
+          feedbackWithCustomMessage.comments = [getEmptyComment(payload.problemId, this.$locale.getState())]
+          updatedState.set(payload.problemId, feedbackWithCustomMessage)
 
-        const updatedAssignmentComments = {
-          ...assignmentComments,
-          [payload.problemId]: updatedFeedback,
+          return updatedState
         }
 
-        const updatedState = new Map(state)
-        updatedState.set(assignmentId, updatedAssignmentComments)
+        updatedState.set(payload.problemId, updatedFeedback)
         return updatedState
       })
       .on(this.setIsOpened, (state, isOpen) => {
         if (isOpen) return state
 
-        const assignmentId = this.$assignmentId.getState()
         const problemId = this.$currentProblemId.getState()
-        const assignmentComments = state.get(assignmentId)
-        if (!assignmentComments) return state
-
-        const feedback = assignmentComments[problemId]
+        const feedback = state.get(problemId)
         if (!feedback) return state
 
         if (feedback.comments.length === 1 && feedback.comments[0]._id === EMPTY_COMMENT_ID) {
-          const updatedAssignmentComments = { ...assignmentComments }
-          delete updatedAssignmentComments[problemId]
-
-          // If no problems left, remove the assignment entirely
-          if (Object.keys(updatedAssignmentComments).length === 0) {
-            const updatedState = new Map(state)
-            updatedState.delete(assignmentId)
-            return updatedState
-          }
-
           const updatedState = new Map(state)
-          updatedState.set(assignmentId, updatedAssignmentComments)
+          updatedState.delete(problemId)
           return updatedState
         }