@magmamath/students-features 0.2.0 → 0.2.1

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

@@ -4,32 +4,38 @@ import { View, StyleSheet } from 'react-native'
 import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
 import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
 import { TeacherFeedbackModel } from '../model/teacherFeedback.model'
+import { FeedbackButtonColors, FeedbackButtonSize, FeedbackMode } from '../constants'
 
 type TeacherFeedbackProps = {
   model: TeacherFeedbackModel
+  mode: FeedbackMode
+  isExam: boolean
 }
 
-export const TeacherFeedback = ({ model }: TeacherFeedbackProps) => {
+export const TeacherFeedback = ({ model, mode, isExam = false }: TeacherFeedbackProps) => {
   const isOpen = useUnit(model.$isOpened)
+  const assignmentId = useUnit(model.$assignmentId)
   const problemId = useUnit(model.$currentProblemId)
   const locale = useUnit(model.$locale)
   const isLoading = useUnit(model.getCommentsByAssignmentIdFx.pending)
   const teacherFeedback = useStoreMap({
     store: model.$comments,
-    fn: (feedback, [problemId]) => feedback.get(problemId) ?? null,
-    keys: [problemId],
+    fn: (feedback, [assignmentId, problemId]) => feedback.get(assignmentId)?.[problemId] ?? null,
+    keys: [assignmentId, problemId],
   })
 
   if (!problemId || !teacherFeedback) return null
 
   return (
     <View style={styles.container}>
-      {isOpen && <TeacherFeedbackComments comments={teacherFeedback.comments} locale={locale} />}
+      {isOpen && <TeacherFeedbackComments comments={teacherFeedback.comments} locale={locale} mode={mode} />}
       <TeacherFeedbackButton
         onPress={() => model.setIsOpened(!isOpen)}
         unreadCommentsCount={teacherFeedback.unreadMessagesCount}
         isOpen={isOpen}
         isLoading={isLoading}
+        size={mode === FeedbackMode.NORMAL ? FeedbackButtonSize.SMALL : FeedbackButtonSize.LARGE}
+        color={isExam ? FeedbackButtonColors.PURPLE : FeedbackButtonColors.BLUE}
       />
     </View>
   )

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

@@ -5,58 +5,84 @@ import { UnreadMessagesBadge } from '../UnreadMessagesBadge'
 import { MessageBubbleIcon } from '../icons/MessageBubbleIcon'
 import { XCloseIcon } from '../icons/XCloseIcon'
 import { COLOR_SCHEMES } from './colorSchemes'
+import { FeedbackButtonColors, FeedbackButtonSize, TEACHER_FEEDBACK_BUTTON_ID } from '../../constants'
+
+const ICON_SIZES = {
+  [FeedbackButtonSize.LARGE]: 37,
+  [FeedbackButtonSize.SMALL]: 26
+}
 
 type TeacherFeedbackButtonProps = {
   isOpen: boolean
   isLoading: boolean
   onPress?: () => void
   unreadCommentsCount?: number
+  size?: FeedbackButtonSize
+  color?: FeedbackButtonColors
 }
 
 export const TeacherFeedbackButton = ({
   isOpen,
   onPress,
-  unreadCommentsCount,
+  // unreadCommentsCount,
   isLoading,
+  size = FeedbackButtonSize.LARGE,
+  color = FeedbackButtonColors.BLUE,
 }: TeacherFeedbackButtonProps) => {
+
+  const unreadCommentsCount = 5
+  const isLarge = size === FeedbackButtonSize.LARGE
+  const isPurpleColor = color === FeedbackButtonColors.PURPLE
+
   if (isOpen) {
     return (
       <Button
-        key='open'
+        id={TEACHER_FEEDBACK_BUTTON_ID}
         onPress={onPress}
         size='large'
         variant='primary'
         disabled={isLoading}
         isLoading={isLoading}
         style={{
-          container: styles.container,
-          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }],
+          container: isLarge ? styles.containerLarge : styles.container,
+          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }, styles[size]],
         }}
         customColorScheme={COLOR_SCHEMES.GREY}
-        icon={<XCloseIcon />}
+        icon={<XCloseIcon size={ICON_SIZES[size]} />}
       />
     )
   }
 
   return (
     <Button
-      key='closed'
+      id={TEACHER_FEEDBACK_BUTTON_ID}
       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 }],
+        container: isLarge ? styles.containerLarge : styles.container,
+        button: [
+          styles.button,
+          { borderColor: !!unreadCommentsCount ? (isPurpleColor ? COLORS.PURPLE_6 : COLORS.BLUE_6) : COLORS.NEUTRAL_5 },
+          styles[size],
+        ],
       }}
-      customColorScheme={!!unreadCommentsCount ? COLOR_SCHEMES.BLUE : COLOR_SCHEMES.GREY}
+      customColorScheme={!!unreadCommentsCount ? (isPurpleColor ? COLOR_SCHEMES.PURPLE : COLOR_SCHEMES.BLUE) : COLOR_SCHEMES.GREY}
       icon={
         <View style={styles.iconContainer}>
-          <MessageBubbleIcon color={!!unreadCommentsCount ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} />
+          <MessageBubbleIcon
+            color={!!unreadCommentsCount ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+            size={ICON_SIZES[size]}
+          />
           {!!unreadCommentsCount && (
-            <View style={styles.badgeContainer}>
-              <UnreadMessagesBadge badgeContent={unreadCommentsCount} />
+            <View style={isLarge ? styles.badgeContainerLarge : styles.badgeContainer}>
+              <UnreadMessagesBadge
+                badgeContent={unreadCommentsCount}
+                textStyle={isLarge && styles.textLarge}
+                style={isLarge && styles.badgeLarge}
+              />
             </View>
           )}
         </View>
@@ -70,17 +96,49 @@ const styles = StyleSheet.create({
     width: 54,
     height: 54,
   },
-  button: {
+  containerLarge: {
+    width: 80,
+    height: 80,
+  },
+  [FeedbackButtonSize.SMALL]: {
     width: 50,
     height: 50,
+  },
+  [FeedbackButtonSize.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,
     right: -17,
   },
+  textLarge: {
+    fontSize: 18,
+    lineHeight: 0,
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeLarge: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  }
 })

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

@@ -1,6 +1,23 @@
 import { ButtonStates, COLORS } from '@magmamath/react-native-ui'
 
 export const COLOR_SCHEMES = {
+  PURPLE: {
+    [ButtonStates.DEFAULT]: {
+      borderColor: COLORS.PURPLE_6,
+      raiseColor: COLORS.PURPLE_6,
+      backgroundColor: COLORS.PRIMARY_PURPLE,
+    },
+    [ButtonStates.PRESSED]: {
+      borderColor: COLORS.PURPLE_6,
+      raiseColor: COLORS.PURPLE_6,
+      backgroundColor: COLORS.PRIMARY_PURPLE,
+    },
+    [ButtonStates.HOVER]: {
+      borderColor: COLORS.PURPLE_6,
+      raiseColor: COLORS.PURPLE_6,
+      backgroundColor: COLORS.PRIMARY_PURPLE,
+    },
+  },
   BLUE: {
     [ButtonStates.DEFAULT]: {
       borderColor: COLORS.BLUE_6,

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

@@ -1,17 +1,22 @@
 import { Platform } from 'react-native'
 import { Locale } from './types/teacherFeedback.types'
 
-export const BUENOS_AIRES_FONT = Platform.OS === 'web' ? 'Buenos Aires, sans-serif' : 'BuenosAires-Regular'
-
-export const NO_COMMENTS_ENG = 'No comments yet'
-export const NO_COMMENTS_SWE = 'Inga kommentarer än'
+export const TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'
 export const EMPTY_COMMENT_ID = 'empty-comment'
+export const BUENOS_AIRES_FONT =
+  Platform.OS === 'web' ? 'Buenos Aires, sans-serif' : 'BuenosAires-Regular'
+
+export const NO_COMMENTS_TRANSLATIONS: Record<Locale, string> = {
+  [Locale.SV]: 'Inga kommentarer än',
+  [Locale.GB]: 'No comments yet',
+  [Locale.US]: 'No comments yet',
+}
 
 export const getEmptyComment = (problemId: string, locale: Locale | null) => {
   return {
     __v: 0,
     _id: EMPTY_COMMENT_ID,
-    content: locale === Locale.SV ? NO_COMMENTS_SWE : NO_COMMENTS_ENG,
+    content: NO_COMMENTS_TRANSLATIONS[locale ?? Locale.US],
     createdAt: new Date(),
     exerciseId: '',
     isRead: true,
@@ -22,3 +27,18 @@ export const getEmptyComment = (problemId: string, locale: Locale | null) => {
     updatedAt: new Date(),
   }
 }
+
+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'