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

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'