@magmamath/students-features 0.1.2 → 0.2.0-fix-teacher-feedback-button2

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+import { MessageBubbleIcon } from '../icons/MessageBubbleIcon'
+import { COLORS } from '@magmamath/react-native-ui'
+import { BUENOS_AIRES_FONT } from '../../constants'
+
+type ListCardCommentsCountProps = {
+  count: number
+}
+
+export const ListCardCommentsCount = ({ count }: ListCardCommentsCountProps) => {
+  return (
+    <View style={styles.container}>
+      <MessageBubbleIcon size={23} color={COLORS.NEUTRAL_7} />
+      <Text style={styles.text}>{count}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  text: {
+    fontSize: 14,
+    fontFamily: BUENOS_AIRES_FONT,
+    color: COLORS.NEUTRAL_7,
+    fontWeight: 400,
+  },
+})

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useStoreMap, useUnit } from 'effector-react'
+import { View, StyleSheet } from 'react-native'
+import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
+import { TeacherFeedbackModel } from '../model/teacherFeedback.model'
+
+type TeacherFeedbackProps = {
+  model: TeacherFeedbackModel
+  mode: 'regular' | 'simple'
+}
+
+export const TeacherFeedback = ({ model, mode }: 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, [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} mode={mode} />}
+      <TeacherFeedbackButton
+        onPress={() => model.setIsOpened(!isOpen)}
+        unreadCommentsCount={teacherFeedback.unreadMessagesCount}
+        isOpen={isOpen}
+        isLoading={isLoading}
+        size={mode === 'regular' ? 'small' : 'large'}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-end',
+    gap: 11,
+  },
+})

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

@@ -0,0 +1,117 @@
+import React from 'react'
+import { GestureResponderEvent, 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 = ({
+  isOpen,
+  onPress,
+  unreadCommentsCount,
+  isLoading,
+  size = 'large',
+}: TeacherFeedbackButtonProps) => {
+  const handlePress = (event: GestureResponderEvent) => {
+    event.stopPropagation()
+    onPress?.()
+    // @ts-ignore
+    event.isFromFeedbackButton = true
+  }
+
+  if (isOpen) {
+    return (
+      <Button
+        key='open'
+        id={TEACHER_FEEDBACK_BUTTON_ID}
+        onPress={handlePress}
+        size='large'
+        variant='primary'
+        disabled={isLoading}
+        isLoading={isLoading}
+        style={{
+          container: styles.container,
+          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }, styles[size]],
+        }}
+        data-skip-confetti='true'
+        customColorScheme={COLOR_SCHEMES.GREY}
+        icon={<XCloseIcon size={size === 'large' ? 37 : 26} />}
+      />
+    )
+  }
+
+  return (
+    <Button
+      key='closed'
+      id={TEACHER_FEEDBACK_BUTTON_ID}
+      onPress={handlePress}
+      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],
+        ],
+      }}
+      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}
+          />
+          {!!unreadCommentsCount && (
+            <View style={styles.badgeContainer}>
+              <UnreadMessagesBadge badgeContent={unreadCommentsCount} />
+            </View>
+          )}
+        </View>
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 54,
+    height: 54,
+  },
+  small: {
+    width: 50,
+    height: 50,
+  },
+  large: {
+    width: 75,
+    height: 75,
+  },
+  button: {
+    borderWidth: 2,
+  },
+  buttonLarge: {
+    width: 75,
+    height: 75,
+    borderWidth: 2,
+  },
+  iconContainer: {
+    position: 'relative',
+  },
+  badgeContainer: {
+    position: 'absolute',
+    top: -17,
+    right: -17,
+  },
+})

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

@@ -0,0 +1,38 @@
+import { ButtonStates, COLORS } from '@magmamath/react-native-ui'
+
+export const COLOR_SCHEMES = {
+  BLUE: {
+    [ButtonStates.DEFAULT]: {
+      borderColor: COLORS.BLUE_6,
+      raiseColor: COLORS.BLUE_6,
+      backgroundColor: COLORS.PRIMARY_BLUE,
+    },
+    [ButtonStates.PRESSED]: {
+      borderColor: COLORS.BLUE_6,
+      raiseColor: COLORS.BLUE_6,
+      backgroundColor: COLORS.PRIMARY_BLUE,
+    },
+    [ButtonStates.HOVER]: {
+      borderColor: COLORS.BLUE_6,
+      raiseColor: COLORS.BLUE_6,
+      backgroundColor: COLORS.PRIMARY_BLUE,
+    },
+  },
+  GREY: {
+    [ButtonStates.DEFAULT]: {
+      borderColor: COLORS.NEUTRAL_5,
+      raiseColor: COLORS.NEUTRAL_5,
+      backgroundColor: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.PRESSED]: {
+      borderColor: COLORS.NEUTRAL_5,
+      raiseColor: COLORS.NEUTRAL_5,
+      backgroundColor: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.HOVER]: {
+      borderColor: COLORS.NEUTRAL_5,
+      raiseColor: COLORS.NEUTRAL_5,
+      backgroundColor: COLORS.NEUTRAL_1,
+    },
+  },
+}

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

@@ -0,0 +1,80 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { COLORS } from '@magmamath/react-native-ui'
+import { getRelativeTime } from '../../helpers'
+import { BUENOS_AIRES_FONT } from '../../constants'
+import { Locale } from '../../types/teacherFeedback.types'
+
+type TeacherCommentProps = {
+  content: string
+  teacherName: string
+  createdAt: Date
+  locale: Locale | null
+  isLastComment: boolean
+}
+
+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}
+        </Text>
+        <View style={styles.spacer} />
+        <Text style={styles.dateAdded} numberOfLines={1}>
+          {getRelativeTime(createdAt, locale ?? Locale.US)}
+        </Text>
+      </View>
+
+      <View style={styles.container}>
+        <Text style={styles.text}>{content}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    gap: 8,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+    shadowColor: COLORS.PRIMARY_SHADOW,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    backgroundColor: COLORS.NEUTRAL_3,
+  },
+  text: {
+    fontSize: 20,
+    fontFamily: BUENOS_AIRES_FONT,
+    color: COLORS.NEUTRAL_10,
+    lineHeight: 20,
+  },
+  authorInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  teacherName: {
+    maxWidth: 200,
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: BUENOS_AIRES_FONT,
+    color: COLORS.NEUTRAL_9,
+  },
+  dateAdded: {
+    maxWidth: 140,
+    fontSize: 16,
+    fontFamily: BUENOS_AIRES_FONT,
+    fontWeight: '400',
+    color: COLORS.NEUTRAL_7,
+  },
+  spacer: {
+    height: 14,
+    width: 2,
+    backgroundColor: COLORS.NEUTRAL_6,
+  },
+})

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

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react'
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+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 { 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) => {
+  const ref = useRef<ScrollView | null>(null)
+  const dimensions = useWindowDimensions()
+  const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+
+  useEffect(() => {
+    ref.current?.scrollToEnd({ animated: false })
+  }, [])
+
+  if (!comments) return null
+
+  return (
+    <View style={[styles.container, { maxHeight: MAX_HEIGHT - (mode === 'simple' ? SIMPLE_MODE_OFFSET : 0) }]}>
+      <ScrollView
+        ref={ref}
+        contentContainerStyle={styles.commentsList}
+        onContentSizeChange={() => ref.current?.scrollToEnd()}
+      >
+        {comments.length === 1 && comments[0]._id === EMPTY_COMMENT_ID ? (
+          <EmptyComment locale={locale} />
+        ) : (
+          comments.map((comment, index) => (
+            <TeacherComment
+              key={comment._id}
+              teacherName={comment.teacherName}
+              content={comment.content}
+              createdAt={comment.createdAt}
+              locale={locale}
+              isLastComment={index === comments.length - 1}
+            />
+          ))
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+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

@@ -0,0 +1,61 @@
+import React from 'react'
+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>
+}
+
+export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style }: UnreadMessagesBadgeProps) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        style,
+        !badgeContent && styles.emptyBadge,
+        withBorder && styles.border,
+        withBorder && (badgeContent ? styles.withBorderSize : styles.withBorderSizeEmpty),
+      ]}
+    >
+      <Text style={styles.text}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+  emptyBadge: {
+    width: 10,
+    height: 10,
+  },
+  border: {
+    borderWidth: 1.5,
+    borderColor: COLORS.NEUTRAL_1,
+  },
+  withBorderSize: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
+  withBorderSizeEmpty: {
+    width: 11.5,
+    height: 11.5,
+    borderRadius: 5.75,
+  },
+  text: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '600',
+    fontFamily: Platform.OS === 'web' ? 'Open Sans, sans-serif' : 'OpenSans-SemiBold',
+    color: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/feedback/components/icons/MessageBubbleIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps, COLORS } from '@magmamath/react-native-ui'
+
+export const MessageBubbleIcon = ({ size = 26, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 26 26' fill='none'>
+      <Path
+        d='M1.46731 10.0594C0.934026 14.231 2.94959 17.0124 4.72827 18.403C5.15473 20.0717 4.90596 21.8796 4.72827 22.5749C6.86227 22.1577 8.40099 20.946 8.93496 20.2507C12.6702 21.2937 23.0923 21.063 24.4129 14.7527C25.5097 9.51166 22.2158 5.12788 15.3416 3.80165C7.2255 2.23582 2.01279 5.79234 1.46731 10.0594Z'
+        stroke={color}
+        strokeWidth='2'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  )
+}

package/src/features/feedback/components/icons/XCloseIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps, COLORS } from '@magmamath/react-native-ui'
+
+export const XCloseIcon = ({ size = 26, color = COLORS.NEUTRAL_9 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 26 26' fill='none'>
+      <Path
+        d='M4.38388 2.61612C3.89573 2.12796 3.10427 2.12796 2.61612 2.61612C2.12796 3.10427 2.12796 3.89573 2.61612 4.38388L11.2322 13L2.61612 21.6161C2.12796 22.1043 2.12796 22.8957 2.61612 23.3839C3.10427 23.872 3.89573 23.872 4.38388 23.3839L13 14.7678L21.6161 23.3839C22.1043 23.872 22.8957 23.872 23.3839 23.3839C23.872 22.8957 23.872 22.1043 23.3839 21.6161L14.7678 13L23.3839 4.38388C23.872 3.89573 23.872 3.10427 23.3839 2.61612C22.8957 2.12796 22.1043 2.12796 21.6161 2.61612L13 11.2322L4.38388 2.61612Z'
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/feedback/components/index.ts

@@ -0,0 +1,5 @@
+export { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
+export { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+export { TeacherFeedback } from './TeacherFeedback'
+export { UnreadMessagesBadge } from './UnreadMessagesBadge'
+export { ListCardCommentsCount } from './ListCardCommentsCount/ListCardCommentsCount'

package/src/features/feedback/constants.ts

@@ -0,0 +1,26 @@
+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 EMPTY_COMMENT_ID = 'empty-comment'
+
+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,
+    createdAt: new Date(),
+    exerciseId: '',
+    isRead: true,
+    problemId,
+    studentId: '',
+    teacherId: '',
+    teacherName: '',
+    updatedAt: new Date(),
+  }
+}
+
+export const TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'

package/src/features/feedback/helpers.ts

@@ -0,0 +1,66 @@
+import { Locale } from './types/teacherFeedback.types'
+
+const RELATIVE_TIME_LABELS = {
+  [Locale.US]: {
+    justNow: 'just now',
+    minuteAgo: 'minute ago',
+    minutesAgo: 'minutes ago',
+    hourAgo: 'hour ago',
+    hoursAgo: 'hours ago',
+    dayAgo: 'day ago',
+    daysAgo: 'days ago',
+    monthAgo: 'month ago',
+    monthsAgo: 'months ago',
+    yearAgo: 'year ago',
+    yearsAgo: 'years ago',
+  },
+  [Locale.SV]: {
+    justNow: 'alldeles nyss',
+    minuteAgo: 'minut sedan',
+    minutesAgo: 'minuter sedan',
+    hourAgo: 'timme sedan',
+    hoursAgo: 'timmar sedan',
+    dayAgo: 'dag sedan',
+    daysAgo: 'dagar sedan',
+    monthAgo: 'månad sedan',
+    monthsAgo: 'månader sedan',
+    yearAgo: 'år sedan',
+    yearsAgo: 'år sedan',
+  },
+  [Locale.GB]: {
+    justNow: 'just now',
+    minuteAgo: 'minute ago',
+    minutesAgo: 'minutes ago',
+    hourAgo: 'hour ago',
+    hoursAgo: 'hours ago',
+    dayAgo: 'day ago',
+    daysAgo: 'days ago',
+    monthAgo: 'month ago',
+    monthsAgo: 'months ago',
+    yearAgo: 'year ago',
+    yearsAgo: 'years ago',
+  },
+}
+
+export const getRelativeTime = (date: Date, lang: Locale) => {
+  const t = RELATIVE_TIME_LABELS[lang] || RELATIVE_TIME_LABELS[Locale.US]
+  const timeBufferMs = 2000 // adds 2 seconds time buffer because when used with sockets, it displayed -1 seconds ago, instead of 1 second ago.
+
+  const now = new Date().getTime()
+  const targetDate = new Date(date).getTime() - timeBufferMs
+  const diffTime = now - targetDate
+
+  const seconds = Math.floor(diffTime / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  const months = Math.floor(days / 30)
+  const years = Math.floor(days / 365)
+
+  if (seconds < 60) return t.justNow
+  if (minutes < 60) return `${minutes} ${minutes === 1 ? t.minuteAgo : t.minutesAgo}`
+  if (hours < 24) return `${hours} ${hours === 1 ? t.hourAgo : t.hoursAgo}`
+  if (days < 30) return `${days} ${days === 1 ? t.dayAgo : t.daysAgo}`
+  if (months < 12) return `${months} ${months === 1 ? t.monthAgo : t.monthsAgo}`
+  return `${years} ${years === 1 ? t.yearAgo : t.yearsAgo}`
+}

package/src/features/feedback/index.ts

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