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

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'

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

@@ -0,0 +1,255 @@
+import { createEffect, createEvent, createStore, Effect, restore, sample, StoreWritable } from 'effector'
+import {
+  CommentsEntity,
+  GetCommentsByIdProps,
+  Locale,
+  TeacherComment,
+  UpdateCommentSeenStatusProps,
+} from '../types/teacherFeedback.types'
+import { EMPTY_COMMENT_ID, getEmptyComment } from '../constants'
+
+type TeacherFeedbackModelProps = {
+  credits: {
+    assignmentId: StoreWritable<string>
+    problemId: StoreWritable<string>
+    locale: StoreWritable<Locale | null>
+  }
+  api: {
+    getCommentsByAssignmentId: (props: GetCommentsByIdProps) => Promise<Record<string, { comments: TeacherComment[] }>>
+    updateCommentSeenStatus: (props: UpdateCommentSeenStatusProps) => Promise<void>
+  }
+}
+
+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())
+
+  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
+    }
+  >
+  updateCommentSeenFx: Effect<UpdateCommentSeenStatusProps, void>
+
+  sockets = {
+    onCreate: createEvent<TeacherComment>(),
+    onDeleted: createEvent<TeacherComment>(),
+  }
+
+  constructor({ api, credits }: TeacherFeedbackModelProps) {
+    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
+
+    sample({
+      clock: this.$currentProblemId,
+      fn: () => false,
+      target: this.setIsOpened,
+    })
+
+    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 }) => ({
+        currentProblemId,
+        assignmentId,
+        ids: [_id],
+      }),
+      target: [this.setCommentsSeen, this.updateCommentSeenFx],
+    })
+
+    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 ?? []
+        const hasUnreadComments = comments.some((comment) => !comment.isRead)
+        return isOpen && hasUnreadComments
+      },
+      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, (_, { data }) => {
+      return Object.values(data).some((problemFeedback) => problemFeedback.comments?.length > 0)
+    })
+
+    this.$comments
+      .on(this.getCommentsByAssignmentIdFx.doneData, (state, { assignmentId, data }) => {
+        const problemsMap: Record<string, CommentsEntity> = {}
+
+        for (const [problemId, { comments }] of Object.entries(data)) {
+          const unreadMessages = comments.filter((comment) => !comment.isRead)
+          problemsMap[problemId] = {
+            comments,
+            unreadMessagesCount: unreadMessages.length,
+          }
+        }
+
+        const updatedState = new Map(state)
+        updatedState.set(assignmentId, problemsMap)
+        return updatedState
+      })
+      .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) =>
+          ids.includes(comment._id) ? { ...comment, isRead: true } : comment
+        )
+
+        const updatedFeedback = {
+          ...feedback,
+          comments: updatedComments,
+          unreadMessagesCount: 0,
+        }
+
+        const updatedAssignmentComments = {
+          ...assignmentComments,
+          [currentProblemId]: updatedFeedback,
+        }
+
+        const updatedState = new Map(state)
+        updatedState.set(assignmentId, updatedAssignmentComments)
+
+        return updatedState
+      })
+      .on(this.sockets.onCreate, (state, payload) => {
+        const assignmentComments = state.get(payload.exerciseId) || {}
+        const feedback = assignmentComments[payload.problemId] ?? { comments: [], unreadMessagesCount: 0 }
+
+        const updatedFeedback = {
+          ...feedback,
+          comments: [...feedback.comments, payload],
+          unreadMessagesCount: feedback.unreadMessagesCount + 1,
+        }
+
+        const updatedAssignmentComments = {
+          ...assignmentComments,
+          [payload.problemId]: updatedFeedback,
+        }
+
+        const updatedState = new Map(state)
+        updatedState.set(payload.exerciseId, updatedAssignmentComments)
+
+        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]
+        if (!feedback) return state
+
+        const isDeleteMessageUnread = feedback.comments.some(
+          (comment) => comment._id === payload._id && !comment.isRead
+        )
+
+        const updatedFeedback = {
+          comments: feedback.comments.filter((comment) => comment._id !== payload._id),
+          unreadMessagesCount: isDeleteMessageUnread ? feedback.unreadMessagesCount - 1 : feedback.unreadMessagesCount,
+        }
+
+        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())],
+            }
+          }
+
+          const updatedState = new Map(state)
+          updatedState.set(assignmentId, updatedAssignmentComments)
+          return updatedState
+        }
+
+        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 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.set(assignmentId, updatedAssignmentComments)
+          return updatedState
+        }
+
+        return state
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+export type GetCommentsByIdProps = { id: string }
+export type UpdateCommentSeenStatusProps = { ids: string[] }
+
+export type TeacherComment = {
+  _id: string
+  teacherId: string
+  teacherName: string
+  studentId: string
+  problemId: string
+  exerciseId: string
+  content: string
+  isRead: boolean
+  createdAt: Date
+  updatedAt: Date
+  __v: number
+}
+
+export type CommentsEntity = {
+  comments: TeacherComment[]
+  unreadMessagesCount: number
+}
+
+export enum Locale {
+  US = 'en-US',
+  SV = 'sv-SE',
+  GB = 'en-GB',
+}
+
+export enum TeacherFeedbackSocketEvent {
+  COMMENT_CREATED = 'exerciseCommentCreated',
+  COMMENT_DELETED = 'exerciseCommentDeleted',
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
 export type { LocalizationConfig } from './shared/translation'
 export * from './features/chatbot'
+export * from './features/feedback'