@magmamath/students-features 0.2.6 → 0.2.8

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
 import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
 import { FeedbackButtonColors, FeedbackButtonSize, FeedbackMode } from '../constants'
@@ -13,7 +13,7 @@ type TeacherFeedbackProps = {
   locale: Locale
   assignmentId: string
   problemId: string
-  isExam: boolean
+  color: FeedbackButtonColors
 }
 
 export const TeacherFeedback = ({
@@ -22,7 +22,7 @@ export const TeacherFeedback = ({
   assignmentId,
   problemId,
   locale,
-  isExam = false,
+  color = FeedbackButtonColors.BLUE,
 }: TeacherFeedbackProps) => {
   const isOpen = useUnit(model.$isOpen)
   const isLoading = useUnit(model.api.getCommentsFx.pending)
@@ -31,21 +31,27 @@ export const TeacherFeedback = ({
     fn: (feedback, [assignmentId, problemId]) => feedback?.get(assignmentId)?.[problemId] ?? null,
     keys: [assignmentId, problemId],
   })
+  const isSimpleMode = mode === FeedbackMode.SIMPLE
 
   if (!problemId || !teacherFeedback) return null
 
   return (
     <View style={styles.container}>
       {isOpen && (
-        <TeacherFeedbackComments comments={teacherFeedback.comments} locale={locale} mode={mode} />
+        <TeacherFeedbackComments
+          comments={teacherFeedback.comments}
+          locale={locale}
+          mode={mode}
+          maxHeightOffset={isSimpleMode ? 70 : 0}
+        />
       )}
       <TeacherFeedbackButton
         onPress={() => model.setIsOpen(!isOpen)}
         unreadCommentsCount={teacherFeedback.unreadMessagesCount}
         isOpen={isOpen}
         isLoading={isLoading}
-        size={mode === FeedbackMode.NORMAL ? FeedbackButtonSize.SMALL : FeedbackButtonSize.LARGE}
-        color={isExam ? FeedbackButtonColors.PURPLE : FeedbackButtonColors.BLUE}
+        size={isSimpleMode ? FeedbackButtonSize.LARGE : FeedbackButtonSize.SMALL}
+        color={color}
       />
     </View>
   )

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

@@ -35,6 +35,8 @@ export const TeacherFeedbackButton = ({
 }: TeacherFeedbackButtonProps) => {
   const isLarge = size === FeedbackButtonSize.LARGE
   const isPurpleColor = color === FeedbackButtonColors.PURPLE
+  const borderColor = isPurpleColor ? COLORS.PURPLE_6 : COLORS.BLUE_6
+  const schemeColor = isPurpleColor ? COLOR_SCHEMES.PURPLE : COLOR_SCHEMES.BLUE
 
   if (isOpen) {
     return (
@@ -67,23 +69,11 @@ export const TeacherFeedbackButton = ({
         container: isLarge ? styles.containerLarge : styles.container,
         button: [
           styles.button,
-          {
-            borderColor: !!unreadCommentsCount
-              ? isPurpleColor
-                ? COLORS.PURPLE_6
-                : COLORS.BLUE_6
-              : COLORS.NEUTRAL_5,
-          },
+          { borderColor: !!unreadCommentsCount ? borderColor : COLORS.NEUTRAL_5 },
           styles[size],
         ],
       }}
-      customColorScheme={
-        !!unreadCommentsCount
-          ? isPurpleColor
-            ? COLOR_SCHEMES.PURPLE
-            : COLOR_SCHEMES.BLUE
-          : COLOR_SCHEMES.GREY
-      }
+      customColorScheme={!!unreadCommentsCount ? schemeColor : COLOR_SCHEMES.GREY}
       icon={
         <View style={styles.iconContainer}>
           <MessageBubbleIcon

package/src/features/feedback/components/TeacherFeedbackButton/colorSchemes.ts

@@ -1,6 +1,6 @@
-import { ButtonStates, COLORS } from '@magmamath/react-native-ui'
+import { ButtonElements, ButtonStates, COLORS } from '@magmamath/react-native-ui'
 
-export const COLOR_SCHEMES = {
+export const COLOR_SCHEMES: Record<string, Partial<Record<ButtonStates, ButtonElements>>> = {
   PURPLE: {
     [ButtonStates.DEFAULT]: {
       borderColor: COLORS.PURPLE_6,

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

@@ -1,39 +1,32 @@
 import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
+import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../../constants'
 import { getRelativeTimeText } from '../../../../lib/helpers/helpers'
-import { Locale } from '@magmamath/students-features'
+import { TeacherComment as TeacherCommentEntity } from '../../types'
+import { Locale } from '../../../../shared/translation/types'
 
 type TeacherCommentProps = {
-  content: string
-  teacherName: string
-  createdAt: Date
+  comment: TeacherCommentEntity
   locale: Locale | null
-  isLastComment: boolean
+  style: StyleProp<ViewStyle>
 }
 
-export const TeacherComment = ({
-  content,
-  teacherName,
-  createdAt,
-  locale,
-  isLastComment,
-}: TeacherCommentProps) => {
+export const TeacherComment = ({ comment, locale, style }: TeacherCommentProps) => {
   return (
-    <View style={{ marginBottom: isLastComment ? 8 : 0 }}>
+    <View style={style}>
       <View style={styles.authorInfo}>
         <Text style={styles.teacherName} numberOfLines={1}>
-          {teacherName}
+          {comment.teacherName}
         </Text>
         <View style={styles.spacer} />
         <Text style={styles.dateAdded} numberOfLines={1}>
-          {getRelativeTimeText(createdAt, locale ?? Locale.EN)}
+          {getRelativeTimeText(comment.createdAt, locale ?? Locale.EN)}
         </Text>
       </View>
 
       <View style={styles.container}>
-        <Text style={styles.text}>{content}</Text>
+        <Text style={styles.text}>{comment.content}</Text>
       </View>
     </View>
   )

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

@@ -8,19 +8,23 @@ import { Locale } from '../../../../shared/translation'
 import { TeacherComment as TeacherCommentEntity } from '../../types'
 
 const TOOLBAR_HEIGHT = 140
-const BOTTOM_OFFSET = Platform.OS === 'web' ? 270 : 304
-const SIMPLE_MODE_OFFSET = 70
+const BOTTOM_OFFSET = Platform.select({
+  web: 270,
+  default: 304,
+})
 
 type TeacherFeedbackCommentsProps = {
   comments: TeacherCommentEntity[] | null
   locale: Locale | null
   mode: FeedbackMode
+  maxHeightOffset: number
 }
 
 export const TeacherFeedbackComments = ({
   comments,
   locale,
   mode,
+  maxHeightOffset,
 }: TeacherFeedbackCommentsProps) => {
   const ref = useRef<ScrollView | null>(null)
   const dimensions = useWindowDimensions()
@@ -34,12 +38,7 @@ export const TeacherFeedbackComments = ({
   if (!comments) return null
 
   return (
-    <View
-      style={[
-        styles.container,
-        { maxHeight: MAX_HEIGHT - (isSimpleMode ? SIMPLE_MODE_OFFSET : 0) },
-      ]}
-    >
+    <View style={[styles.container, { maxHeight: MAX_HEIGHT - maxHeightOffset }]}>
       <ScrollView
         ref={ref}
         contentContainerStyle={styles.commentsList}
@@ -51,11 +50,9 @@ export const TeacherFeedbackComments = ({
           comments.map((comment, index) => (
             <TeacherComment
               key={comment._id}
-              teacherName={comment.teacherName}
-              content={comment.content}
-              createdAt={comment.createdAt}
+              comment={comment}
               locale={locale}
-              isLastComment={index === comments.length - 1}
+              style={{ marginBottom: index === comments.length - 1 ? 8 : 0 }}
             />
           ))
         )}