@magmamath/students-features 0.2.0 → 0.2.2

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

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

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

@@ -3,20 +3,28 @@ import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'rea
 import { Locale, TeacherComment as FeedbackComment } from '../../types/teacherFeedback.types'
 import { TeacherComment } from './TeacherComment'
 import { EmptyComment } from '../EmptyComment/EmptyComment'
-import { EMPTY_COMMENT_ID } from '../../constants'
+import { EMPTY_COMMENT_ID, FeedbackMode } 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: FeedbackMode
 }
 
-export const TeacherFeedbackComments = ({ comments, locale }: TeacherFeedbackCommentsProps) => {
+export const TeacherFeedbackComments = ({
+  comments,
+  locale,
+  mode,
+}: TeacherFeedbackCommentsProps) => {
   const ref = useRef<ScrollView | null>(null)
   const dimensions = useWindowDimensions()
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+  const isSimpleMode = mode === FeedbackMode.SIMPLE
 
   useEffect(() => {
     ref.current?.scrollToEnd({ animated: false })
@@ -25,7 +33,12 @@ export const TeacherFeedbackComments = ({ comments, locale }: TeacherFeedbackCom
   if (!comments) return null
 
   return (
-    <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
+    <View
+      style={[
+        styles.container,
+        { maxHeight: MAX_HEIGHT - (isSimpleMode ? SIMPLE_MODE_OFFSET : 0) },
+      ]}
+    >
       <ScrollView
         ref={ref}
         contentContainerStyle={styles.commentsList}
@@ -34,13 +47,14 @@ export const TeacherFeedbackComments = ({ comments, locale }: TeacherFeedbackCom
         {comments.length === 1 && comments[0]._id === EMPTY_COMMENT_ID ? (
           <EmptyComment locale={locale} />
         ) : (
-          comments.map((comment) => (
+          comments.map((comment, index) => (
             <TeacherComment
               key={comment._id}
               teacherName={comment.teacherName}
               content={comment.content}
               createdAt={comment.createdAt}
               locale={locale}
+              isLastComment={index === comments.length - 1}
             />
           ))
         )}
@@ -52,6 +66,12 @@ export const TeacherFeedbackComments = ({ comments, locale }: TeacherFeedbackCom
 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,14 +1,15 @@
 import React from 'react'
-import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native'
+import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle, TextStyle } 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 }: UnreadMessagesBadgeProps) => {
+export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style, textStyle }: UnreadMessagesBadgeProps) => {
   return (
     <View
       style={[
@@ -19,7 +20,7 @@ export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style }:
         withBorder && (badgeContent ? styles.withBorderSize : styles.withBorderSizeEmpty),
       ]}
     >
-      <Text style={styles.text}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
+      <Text style={[styles.text, textStyle]}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
     </View>
   )
 }

package/src/features/feedback/constants.ts

@@ -22,3 +22,20 @@ export const getEmptyComment = (problemId: string, locale: Locale | null) => {
     updatedAt: new Date(),
   }
 }
+
+export const TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'
+
+export enum FeedbackButtonColors {
+  BLUE = 'BLUE',
+  PURPLE = 'PURPLE',
+}
+
+export enum FeedbackButtonSize {
+  SMALL = 'SMALL',
+  LARGE = 'LARGE',
+}
+
+export enum FeedbackMode {
+  SIMPLE = 'SIMPLE',
+  NORMAL = 'NORMAL',
+}

package/src/features/feedback/index.ts

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