@magmamath/students-features 0.2.3 → 0.2.5

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -3,4 +3,45 @@ export declare const LOCALIZATION_CONFIGS: {
     "en-GB": {};
     "sv-SE": {};
 };
+export declare const RELATIVE_TIME_LABELS: {
+    "en-SE": {
+        justNow: string;
+        minuteAgo: string;
+        minutesAgo: string;
+        hourAgo: string;
+        hoursAgo: string;
+        dayAgo: string;
+        daysAgo: string;
+        monthAgo: string;
+        monthsAgo: string;
+        yearAgo: string;
+        yearsAgo: string;
+    };
+    "sv-SE": {
+        justNow: string;
+        minuteAgo: string;
+        minutesAgo: string;
+        hourAgo: string;
+        hoursAgo: string;
+        dayAgo: string;
+        daysAgo: string;
+        monthAgo: string;
+        monthsAgo: string;
+        yearAgo: string;
+        yearsAgo: string;
+    };
+    "en-GB": {
+        justNow: string;
+        minuteAgo: string;
+        minutesAgo: string;
+        hourAgo: string;
+        hoursAgo: string;
+        dayAgo: string;
+        daysAgo: string;
+        monthAgo: string;
+        monthsAgo: string;
+        yearAgo: string;
+        yearsAgo: string;
+    };
+};
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwChC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "dist/commonjs/index.js",

package/src/features/feedback/components/{EmptyComment/EmptyComment.tsx → EmptyComment.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
-import { BUENOS_AIRES_FONT, NO_COMMENTS_SWE, NO_COMMENTS_ENG } from '../../constants'
-import { Locale } from '../../types/teacherFeedback.types'
+import { BUENOS_AIRES_FONT, NO_COMMENTS_SWE, NO_COMMENTS_ENG } from '../constants'
+import { Locale } from '../../../shared/translation/types'
 
 type EmptyCommentProps = {
   locale: Locale | null
@@ -11,7 +11,7 @@ type EmptyCommentProps = {
 export const EmptyComment = ({ locale }: EmptyCommentProps) => {
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>{locale === Locale.SV ? NO_COMMENTS_SWE : NO_COMMENTS_ENG}</Text>
+      <Text style={styles.text}>{locale === Locale.SW ? NO_COMMENTS_SWE : NO_COMMENTS_ENG}</Text>
     </View>
   )
 }

package/src/features/feedback/components/{ListCardCommentsCount/ListCardCommentsCount.tsx → ListCardCommentsCount.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Text, View, StyleSheet } from 'react-native'
-import { MessageBubbleIcon } from '../icons/MessageBubbleIcon'
+import { MessageBubbleIcon } from '../assets/icons/MessageBubbleIcon'
 import { COLORS } from '@magmamath/react-native-ui'
-import { BUENOS_AIRES_FONT } from '../../constants'
+import { BUENOS_AIRES_FONT } from '../constants'
 
 type ListCardCommentsCountProps = {
   count: number

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

@@ -3,24 +3,32 @@ 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'
 import { FeedbackButtonColors, FeedbackButtonSize, FeedbackMode } from '../constants'
+import { TeacherFeedbackModel } from '../model/model'
+import { Locale } from '../../../shared/translation'
 
 type TeacherFeedbackProps = {
   model: TeacherFeedbackModel
   mode: FeedbackMode
+  locale: Locale
+  assignmentId: string
+  problemId: string
   isExam: boolean
 }
 
-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)
+export const TeacherFeedback = ({
+  model,
+  mode,
+  assignmentId,
+  problemId,
+  locale,
+  isExam = false,
+}: TeacherFeedbackProps) => {
+  const isOpen = useUnit(model.$isOpen)
+  const isLoading = useUnit(model.api.getCommentsFx.pending)
   const teacherFeedback = useStoreMap({
-    store: model.$comments,
-    fn: (feedback, [assignmentId, problemId]) => feedback.get(assignmentId)?.[problemId] ?? null,
+    store: model.comments.$data,
+    fn: (feedback, [assignmentId, problemId]) => feedback?.get(assignmentId)?.[problemId] ?? null,
     keys: [assignmentId, problemId],
   })
 
@@ -28,9 +36,11 @@ export const TeacherFeedback = ({ model, mode, isExam = false }: TeacherFeedback
 
   return (
     <View style={styles.container}>
-      {isOpen && <TeacherFeedbackComments comments={teacherFeedback.comments} locale={locale} mode={mode} />}
+      {isOpen && (
+        <TeacherFeedbackComments comments={teacherFeedback.comments} locale={locale} mode={mode} />
+      )}
       <TeacherFeedbackButton
-        onPress={() => model.setIsOpened(!isOpen)}
+        onPress={() => model.setIsOpen(!isOpen)}
         unreadCommentsCount={teacherFeedback.unreadMessagesCount}
         isOpen={isOpen}
         isLoading={isLoading}

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

@@ -2,8 +2,8 @@ import React from 'react'
 import { 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 { MessageBubbleIcon } from '../../assets/icons/MessageBubbleIcon'
+import { XCloseIcon } from '../../assets/icons/XCloseIcon'
 import { COLOR_SCHEMES } from './colorSchemes'
 import {
   FeedbackButtonColors,

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

@@ -1,9 +1,9 @@
 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'
+import { getRelativeTimeText } from '../../../../lib/helpers/helpers'
+import { Locale } from '@magmamath/students-features'
 
 type TeacherCommentProps = {
   content: string
@@ -13,7 +13,13 @@ type TeacherCommentProps = {
   isLastComment: boolean
 }
 
-export const TeacherComment = ({ content, teacherName, createdAt, locale, isLastComment }: TeacherCommentProps) => {
+export const TeacherComment = ({
+  content,
+  teacherName,
+  createdAt,
+  locale,
+  isLastComment,
+}: TeacherCommentProps) => {
   return (
     <View style={{ marginBottom: isLastComment ? 8 : 0 }}>
       <View style={styles.authorInfo}>
@@ -22,7 +28,7 @@ export const TeacherComment = ({ content, teacherName, createdAt, locale, isLast
         </Text>
         <View style={styles.spacer} />
         <Text style={styles.dateAdded} numberOfLines={1}>
-          {getRelativeTime(createdAt, locale ?? Locale.US)}
+          {getRelativeTimeText(createdAt, locale ?? Locale.EN)}
         </Text>
       </View>
 

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

@@ -1,17 +1,18 @@
 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 { EmptyComment } from '../EmptyComment'
 import { EMPTY_COMMENT_ID, FeedbackMode } from '../../constants'
 import { COLORS } from '@magmamath/react-native-ui'
+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
 
 type TeacherFeedbackCommentsProps = {
-  comments: FeedbackComment[] | null
+  comments: TeacherCommentEntity[] | null
   locale: Locale | null
   mode: FeedbackMode
 }

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

@@ -2,4 +2,4 @@ export { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedba
 export { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
 export { TeacherFeedback } from './TeacherFeedback'
 export { UnreadMessagesBadge } from './UnreadMessagesBadge'
-export { ListCardCommentsCount } from './ListCardCommentsCount/ListCardCommentsCount'
+export { ListCardCommentsCount } from './ListCardCommentsCount'

package/src/features/feedback/constants.ts

@@ -1,28 +1,12 @@
 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 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'
 
 export enum FeedbackButtonColors {

package/src/features/feedback/helpers.ts

@@ -1,66 +1,33 @@
-import { Locale } from './types/teacherFeedback.types'
+import { CommentsMap, FeedbackEntity, GetCommentsResponse } from './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 function generateCommentsMap(assignmentId: string, data: GetCommentsResponse): CommentsMap {
+  const problemsMap = Object.entries(data).reduce<Record<string, FeedbackEntity>>(
+    (acc, [problemId, feedback]) => {
+      const unreadMessages = feedback.comments.filter(({ isRead }) => !isRead)
+
+      acc[problemId] = {
+        comments: feedback.comments,
+        unreadMessagesCount: unreadMessages.length,
+      }
 
-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.
+      return acc
+    },
+    {},
+  )
 
-  const now = new Date().getTime()
-  const targetDate = new Date(date).getTime() - timeBufferMs
-  const diffTime = now - targetDate
+  return new Map().set(assignmentId, problemsMap)
+}
 
-  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)
+type FindCommentsByCreditsProps = {
+  data: CommentsMap | null
+  assignmentId: string
+  problemId: string
+}
 
-  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}`
+export function findCommentsByCredits({
+  data,
+  assignmentId,
+  problemId,
+}: FindCommentsByCreditsProps) {
+  return data?.get(assignmentId)?.[problemId]?.comments ?? []
 }

package/src/features/feedback/index.ts

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

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

@@ -0,0 +1,13 @@
+import { createEffect, Effect } from 'effector'
+import { TeacherFeedbackModelProps } from './model'
+import { GetCommentsPayload, GetCommentsResponse, UpdateCommentStatusSeenPayload } from '../types'
+
+export class TeacherFeedbackAPI {
+  public readonly getCommentsFx: Effect<GetCommentsPayload, GetCommentsResponse>
+  public readonly updateCommentStatusSeenFx: Effect<UpdateCommentStatusSeenPayload, void>
+
+  constructor(api: TeacherFeedbackModelProps['api']) {
+    this.getCommentsFx = createEffect(api.getComments)
+    this.updateCommentStatusSeenFx = createEffect(api.updateCommentStatusSeen)
+  }
+}

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

@@ -0,0 +1,127 @@
+import { createEvent, restore, sample, Store } from 'effector'
+import { CommentsMap, Credits, FeedbackEntity, NoCommentsMessage, TeacherComment } from '../types'
+import { TeacherFeedbackAPI } from './api'
+import { TeacherFeedbackModelProps } from './model'
+
+type UpdateProps = {
+  state: CommentsMap | null
+  assignmentId: string
+  problemId: string
+  fn: (data: FeedbackEntity) => FeedbackEntity | undefined
+}
+
+export class TeacherComments {
+  private readonly setNoCommentsMessage = createEvent<TeacherComment>()
+  public readonly setAllCommentsRead = createEvent<Credits>()
+  public readonly add = createEvent<Credits & { comment: TeacherComment; isRead: boolean }>()
+  public readonly delete = createEvent<Credits & { commentId: string }>()
+
+  public readonly setData = createEvent<CommentsMap>()
+  public readonly $data = restore<CommentsMap | null>(this.setData, null)
+    .on(this.setAllCommentsRead, (state, { assignmentId, problemId }) =>
+      this.update({
+        state,
+        assignmentId,
+        problemId,
+        fn: data => ({
+          comments: data.comments.map(comment => ({ ...comment, isRead: true })),
+          unreadMessagesCount: 0,
+        }),
+      }),
+    )
+    .on(this.add, (state, { assignmentId, problemId, comment, isRead }) =>
+      this.update({
+        state,
+        assignmentId,
+        problemId,
+        fn: data => ({
+          comments: [...data.comments, comment],
+          unreadMessagesCount: isRead ? data.unreadMessagesCount : data.unreadMessagesCount + 1,
+        }),
+      }),
+    )
+    .on(this.delete, (state, { assignmentId, problemId, commentId }) =>
+      this.update({
+        state,
+        assignmentId,
+        problemId,
+        fn: data => {
+          const commentToDelete = data.comments.find(({ _id }) => _id === commentId)
+          if (!commentToDelete) return data
+
+          const filteredComments = data.comments.filter(({ _id }) => _id !== commentId)
+          if (!filteredComments.length) return undefined
+
+          return {
+            comments: filteredComments,
+            unreadMessagesCount: commentToDelete.isRead
+              ? data.unreadMessagesCount
+              : data.unreadMessagesCount - 1,
+          }
+        },
+      }),
+    )
+    .on(this.setNoCommentsMessage, (state, noCommentsMessage) =>
+      this.update({
+        state,
+        assignmentId: noCommentsMessage.exerciseId,
+        problemId: noCommentsMessage.problemId,
+        fn: () => ({
+          comments: [noCommentsMessage],
+          unreadMessagesCount: 0,
+        }),
+      }),
+    )
+
+  constructor(
+    api: TeacherFeedbackAPI,
+    $isOpen: Store<boolean>,
+    EMPTY_COMMENT: TeacherFeedbackModelProps['defaults']['EMPTY_COMMENT'],
+  ) {
+    sample({
+      clock: this.add,
+      source: { isOpen: $isOpen },
+      filter: ({ isOpen }) => isOpen,
+      fn: (_, { comment }) => ({
+        ids: [comment._id],
+      }),
+      target: api.updateCommentStatusSeenFx,
+    })
+
+    // Adds message "No comments yet" after removing last comment and list is open
+    sample({
+      clock: this.delete,
+      source: { isOpen: $isOpen, state: this.$data },
+      filter: ({ isOpen, state }, deletedMessage) => {
+        const hasNoMessages = !state?.get(deletedMessage.assignmentId)?.[deletedMessage.problemId]
+          ?.comments.length
+        return isOpen && hasNoMessages
+      },
+      fn: (_, { assignmentId, problemId }) => ({
+        ...EMPTY_COMMENT,
+        exerciseId: assignmentId,
+        problemId,
+      }),
+      target: this.setNoCommentsMessage,
+    })
+  }
+
+  private update({ state, assignmentId, problemId, fn }: UpdateProps) {
+    if (!state) return state
+
+    const updatedState = new Map(state)
+    const assignmentMap = updatedState.get(assignmentId) || {}
+    const currentData = assignmentMap[problemId] || { comments: [], unreadMessagesCount: 0 }
+    const updatedData = fn(currentData)
+
+    if (updatedData === undefined) {
+      delete assignmentMap[problemId]
+      if (Object.keys(assignmentMap).length === 0) updatedState.delete(assignmentId)
+      return updatedState
+    }
+
+    assignmentMap[problemId] = updatedData
+    updatedState.set(assignmentId, assignmentMap)
+    return updatedState
+  }
+}

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

@@ -0,0 +1,125 @@
+import { createEvent, restore, sample, Store } from 'effector'
+import { TeacherFeedbackAPI } from './api'
+import { TeacherFeedbackSockets } from './sockets'
+import { TeacherComments } from './comments'
+import { findCommentsByCredits, generateCommentsMap } from '../helpers'
+import {
+  GetCommentsPayload,
+  GetCommentsResponse,
+  NoCommentsMessage,
+  UpdateCommentStatusSeenPayload,
+} from '../types'
+import { EMPTY_COMMENT_ID } from '../constants'
+
+export type TeacherFeedbackModelProps = {
+  api: {
+    getComments: (props: GetCommentsPayload) => Promise<GetCommentsResponse>
+    updateCommentStatusSeen: (props: UpdateCommentStatusSeenPayload) => Promise<void>
+  }
+  socket: any
+  credits: {
+    $assignmentId: Store<string>
+    $problemId: Store<string>
+  }
+  defaults: { EMPTY_COMMENT: NoCommentsMessage }
+}
+
+export class TeacherFeedbackModel {
+  public readonly sockets: TeacherFeedbackSockets
+  public readonly api: TeacherFeedbackAPI
+  public readonly comments: TeacherComments
+  public readonly setIsOpen = createEvent<boolean>()
+  public readonly $isOpen = restore(this.setIsOpen, false)
+
+  constructor({ api, socket, credits, defaults }: TeacherFeedbackModelProps) {
+    this.api = new TeacherFeedbackAPI(api)
+    this.sockets = new TeacherFeedbackSockets(socket)
+    this.comments = new TeacherComments(this.api, this.$isOpen, defaults.EMPTY_COMMENT)
+
+    sample({
+      clock: credits.$problemId,
+      fn: () => false,
+      target: this.setIsOpen,
+    })
+
+    // Deletes entity when closing list with no comments
+    sample({
+      clock: this.setIsOpen,
+      source: {
+        data: this.comments.$data,
+        assignmentId: credits.$assignmentId,
+        problemId: credits.$problemId,
+      },
+      filter: ({ data, assignmentId, problemId }, isOpen) => {
+        const comments = data?.get(assignmentId)?.[problemId].comments
+        const isOnlyNoCommentsMessage =
+          comments?.length === 1 && comments[0]._id === EMPTY_COMMENT_ID
+        return !isOpen && isOnlyNoCommentsMessage
+      },
+      fn: ({ assignmentId, problemId }, comment) => ({
+        assignmentId,
+        problemId,
+        commentId: EMPTY_COMMENT_ID,
+      }),
+      target: this.comments.delete,
+    })
+
+    sample({
+      clock: this.setIsOpen,
+      source: {
+        data: this.comments.$data,
+        assignmentId: credits.$assignmentId,
+        problemId: credits.$problemId,
+      },
+      filter: (source, isOpen) => {
+        const comments = findCommentsByCredits(source)
+        const hasUnreadComments = comments.some(({ isRead }) => !isRead)
+        return isOpen && hasUnreadComments
+      },
+      fn: source => {
+        const comments = findCommentsByCredits(source)
+        return { ids: comments.map(({ _id }) => _id) }
+      },
+      target: this.api.updateCommentStatusSeenFx,
+    })
+
+    sample({
+      clock: this.api.updateCommentStatusSeenFx.pending,
+      source: { assignmentId: credits.$assignmentId, problemId: credits.$problemId },
+      target: this.comments.setAllCommentsRead,
+    })
+
+    sample({
+      clock: this.api.getCommentsFx.done,
+      fn: ({ params, result }) => generateCommentsMap(params.id, result),
+      target: this.comments.setData,
+    })
+
+    sample({
+      clock: this.sockets.commentDeleted,
+      source: { assignmentId: credits.$assignmentId },
+      fn: ({ assignmentId }, comment) => ({
+        assignmentId,
+        problemId: comment.problemId,
+        commentId: comment._id,
+      }),
+      target: this.comments.delete,
+    })
+
+    sample({
+      clock: this.sockets.commentAdded,
+      source: {
+        assignmentId: credits.$assignmentId,
+        problemId: credits.$problemId,
+        isOpen: this.$isOpen,
+      },
+      fn: ({ assignmentId, problemId, isOpen }, comment) => ({
+        comment,
+        assignmentId,
+        problemId: comment.problemId,
+        isRead: isOpen && comment.problemId === problemId,
+      }),
+      target: this.comments.add,
+    })
+  }
+}

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

@@ -0,0 +1,22 @@
+import { createEvent } from 'effector'
+import { TeacherComment, FeedbackSocketEvents } from '../types'
+
+export class TeacherFeedbackSockets {
+  private readonly socket: any
+  public readonly commentAdded = createEvent<TeacherComment>()
+  public readonly commentDeleted = createEvent<TeacherComment>()
+
+  constructor(socket: any) {
+    this.socket = socket
+  }
+
+  connect() {
+    this.socket.on(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
+    this.socket.on(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
+  }
+
+  off() {
+    this.socket.off(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
+    this.socket.off(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
+  }
+}