@magmamath/students-features 0.2.9 → 0.2.11

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

@@ -1,47 +1,45 @@
 export declare const LOCALIZATION_CONFIGS: {
-    "en-SE": {};
-    "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;
+        "teacherFeedback.noComments": string;
+        "time.justNow": string;
+        "time.minuteAgo": string;
+        "time.minutesAgo": string;
+        "time.hourAgo": string;
+        "time.hoursAgo": string;
+        "time.dayAgo": string;
+        "time.daysAgo": string;
+        "time.monthAgo": string;
+        "time.monthsAgo": string;
+        "time.yearAgo": string;
+        "time.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;
+        "teacherFeedback.noComments": string;
+        "time.justNow": string;
+        "time.minuteAgo": string;
+        "time.minutesAgo": string;
+        "time.hourAgo": string;
+        "time.hoursAgo": string;
+        "time.dayAgo": string;
+        "time.daysAgo": string;
+        "time.monthAgo": string;
+        "time.monthsAgo": string;
+        "time.yearAgo": string;
+        "time.yearsAgo": string;
+    };
+    "sv-SE": {
+        "teacherFeedback.noComments": string;
+        "time.justNow": string;
+        "time.minuteAgo": string;
+        "time.minutesAgo": string;
+        "time.hourAgo": string;
+        "time.hoursAgo": string;
+        "time.dayAgo": string;
+        "time.daysAgo": string;
+        "time.monthAgo": string;
+        "time.monthsAgo": string;
+        "time.yearAgo": string;
+        "time.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;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwChC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAErD,eAAO,MAAM,oBAAoB,QAAS,MAAM,kBAAiB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,WAWtF,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,OAUrB,CAAA;AAED,eAAO,MAAM,uBAAuB,cACrB,CAAC,CAAC,MAAM,EAAE,OAAO,oBAAoB,KAAK,kBAAkB,CAAC,GAAG,kBAAkB,SAGhG,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAmB,MAAM,SAAS,CAAA;AAEtE,eAAO,MAAM,oBAAoB,QAAS,MAAM,kBAAiB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,WAWtF,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,OAUrB,CAAA;AAED,eAAO,MAAM,uBAAuB,cACvB,CAAC,CAAC,MAAM,EAAE,OAAO,oBAAoB,KAAK,kBAAkB,CAAC,GAAG,kBAAkB,SAG9F,CAAA"}

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

@@ -1,4 +1,7 @@
-export type GetText = (key: string, args?: Record<string, string> | null) => string;
+import enTranslations from '../../lib/localization/en.json';
+export type Translations = typeof enTranslations;
+export type TranslationKeys = keyof Translations;
+export type GetText = <T extends TranslationKeys>(key: T, args?: Record<string, string> | null) => Translations[T];
 export declare enum Locale {
     EN = "en-SE",
     SW = "sv-SE",

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,MAAM,CAAA;AAEnF,oBAAY,MAAM;IACd,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,OAAO,cAAc,CAAA;AAChD,MAAM,MAAM,eAAe,GAAG,MAAM,YAAY,CAAA;AAEhD,MAAM,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,eAAe,EAC9C,GAAG,EAAE,CAAC,EACN,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KACjC,YAAY,CAAC,CAAC,CAAC,CAAA;AAEpB,oBAAY,MAAM;IAChB,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;CACb;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}

package/package.json

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

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

@@ -1,17 +1,14 @@
 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 '../../../shared/translation/types'
+import { BUENOS_AIRES_FONT } from '../constants'
+import { useText } from '../../../shared/translation'
 
-type EmptyCommentProps = {
-  locale: Locale | null
-}
-
-export const EmptyComment = ({ locale }: EmptyCommentProps) => {
+export const EmptyComment = () => {
+  const t = useText()
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>{locale === Locale.SW ? NO_COMMENTS_SWE : NO_COMMENTS_ENG}</Text>
+      <Text style={styles.text}>{t('teacherFeedback.noComments')}</Text>
     </View>
   )
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text, View, StyleSheet } from 'react-native'
-import { MessageBubbleIcon } from '../assets/icons/MessageBubbleIcon'
+import { MessageBubbleIcon } from '../../../shared/icons/MessageBubbleIcon'
 import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../constants'
 

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

@@ -5,15 +5,15 @@ import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackBu
 import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
 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
-  color: FeedbackButtonColors
+  color?: FeedbackButtonColors
+  size?: FeedbackButtonSize
+  heightOffset?: number
 }
 
 export const TeacherFeedback = ({
@@ -21,8 +21,9 @@ export const TeacherFeedback = ({
   mode,
   assignmentId,
   problemId,
-  locale,
   color = FeedbackButtonColors.BLUE,
+  size = FeedbackButtonSize.SMALL,
+  heightOffset = 0,
 }: TeacherFeedbackProps) => {
   const isOpen = useUnit(model.$isOpen)
   const isLoading = useUnit(model.api.getCommentsFx.pending)
@@ -31,7 +32,6 @@ export const TeacherFeedback = ({
     fn: (feedback, [assignmentId, problemId]) => feedback?.get(assignmentId)?.[problemId] ?? null,
     keys: [assignmentId, problemId],
   })
-  const isSimpleMode = mode === FeedbackMode.SIMPLE
 
   if (!problemId || !teacherFeedback) return null
 
@@ -40,9 +40,8 @@ export const TeacherFeedback = ({
       {isOpen && (
         <TeacherFeedbackComments
           comments={teacherFeedback.comments}
-          locale={locale}
           mode={mode}
-          maxHeightOffset={isSimpleMode ? 70 : 0}
+          maxHeightOffset={heightOffset}
         />
       )}
       <TeacherFeedbackButton
@@ -50,7 +49,7 @@ export const TeacherFeedback = ({
         unreadCommentsCount={teacherFeedback.unreadMessagesCount}
         isOpen={isOpen}
         isLoading={isLoading}
-        size={isSimpleMode ? FeedbackButtonSize.LARGE : FeedbackButtonSize.SMALL}
+        size={size}
         color={color}
       />
     </View>

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 '../../assets/icons/MessageBubbleIcon'
-import { XCloseIcon } from '../../assets/icons/XCloseIcon'
+import { MessageBubbleIcon } from '../../../../shared/icons/MessageBubbleIcon'
+import { XCloseIcon } from '../../../../shared/icons/XCloseIcon'
 import { COLOR_SCHEMES } from './colorSchemes'
 import {
   FeedbackButtonColors,
@@ -16,6 +16,26 @@ const ICON_SIZES = {
   [FeedbackButtonSize.SMALL]: 26,
 }
 
+const COLOR_PRESETS = {
+  [FeedbackButtonColors.PURPLE]: {
+    borderColor: COLORS.PURPLE_6,
+    schemeColor: COLOR_SCHEMES.PURPLE,
+  },
+  [FeedbackButtonColors.BLUE]: {
+    borderColor: COLORS.BLUE_6,
+    schemeColor: COLOR_SCHEMES.BLUE,
+  },
+}
+
+const getVariantStyles = (isUnread: boolean, color: FeedbackButtonColors) => {
+  const { borderColor, schemeColor } = COLOR_PRESETS[color]
+  return {
+    iconColor: isUnread ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9,
+    customColorScheme: isUnread ? schemeColor : COLOR_SCHEMES.GREY,
+    borderColor: isUnread ? borderColor : COLORS.NEUTRAL_5,
+  }
+}
+
 type TeacherFeedbackButtonProps = {
   isOpen: boolean
   isLoading: boolean
@@ -34,9 +54,10 @@ export const TeacherFeedbackButton = ({
   color = FeedbackButtonColors.BLUE,
 }: TeacherFeedbackButtonProps) => {
   const isLarge = size === FeedbackButtonSize.LARGE
-  const isPurpleColor = color === FeedbackButtonColors.PURPLE
-  const borderColor = isPurpleColor ? COLORS.PURPLE_6 : COLORS.BLUE_6
-  const schemeColor = isPurpleColor ? COLOR_SCHEMES.PURPLE : COLOR_SCHEMES.BLUE
+  const { borderColor, iconColor, customColorScheme } = getVariantStyles(
+    !!unreadCommentsCount,
+    color,
+  )
 
   if (isOpen) {
     return (
@@ -67,20 +88,13 @@ export const TeacherFeedbackButton = ({
       isLoading={isLoading}
       style={{
         container: isLarge ? styles.containerLarge : styles.container,
-        button: [
-          styles.button,
-          { borderColor: !!unreadCommentsCount ? borderColor : COLORS.NEUTRAL_5 },
-          styles[size],
-        ],
+        button: [styles.button, { borderColor }, styles[size]],
       }}
-      customColorScheme={!!unreadCommentsCount ? schemeColor : COLOR_SCHEMES.GREY}
+      customColorScheme={customColorScheme}
       icon={
         <View style={styles.iconContainer}>
-          <MessageBubbleIcon
-            color={!!unreadCommentsCount ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={ICON_SIZES[size]}
-          />
-          {!!unreadCommentsCount && (
+          <MessageBubbleIcon color={iconColor} size={ICON_SIZES[size]} />
+          {unreadCommentsCount && (
             <View style={isLarge ? styles.badgeContainerLarge : styles.badgeContainer}>
               <UnreadMessagesBadge
                 badgeContent={unreadCommentsCount}

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

@@ -4,15 +4,13 @@ import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../../constants'
 import { getRelativeTimeText } from '../../../../lib/helpers/helpers'
 import { TeacherComment as TeacherCommentEntity } from '../../types'
-import { Locale } from '../../../../shared/translation/types'
 
 type TeacherCommentProps = {
   comment: TeacherCommentEntity
-  locale: Locale | null
-  style: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>
 }
 
-export const TeacherComment = ({ comment, locale, style }: TeacherCommentProps) => {
+export const TeacherComment = ({ comment, style }: TeacherCommentProps) => {
   return (
     <View style={style}>
       <View style={styles.authorInfo}>
@@ -21,7 +19,7 @@ export const TeacherComment = ({ comment, locale, style }: TeacherCommentProps)
         </Text>
         <View style={styles.spacer} />
         <Text style={styles.dateAdded} numberOfLines={1}>
-          {getRelativeTimeText(comment.createdAt, locale ?? Locale.EN)}
+          {getRelativeTimeText(comment.createdAt)}
         </Text>
       </View>
 

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

@@ -4,7 +4,6 @@ import { TeacherComment } from './TeacherComment'
 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
@@ -14,29 +13,23 @@ const BOTTOM_OFFSET = Platform.select({
 })
 
 type TeacherFeedbackCommentsProps = {
-  comments: TeacherCommentEntity[] | null
-  locale: Locale | null
+  comments: TeacherCommentEntity[]
   mode: FeedbackMode
   maxHeightOffset: number
 }
 
 export const TeacherFeedbackComments = ({
   comments,
-  locale,
-  mode,
   maxHeightOffset,
 }: 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 })
   }, [])
 
-  if (!comments) return null
-
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT - maxHeightOffset }]}>
       <ScrollView
@@ -45,13 +38,12 @@ export const TeacherFeedbackComments = ({
         onContentSizeChange={() => ref.current?.scrollToEnd()}
       >
         {comments.length === 1 && comments[0]._id === EMPTY_COMMENT_ID ? (
-          <EmptyComment locale={locale} />
+          <EmptyComment />
         ) : (
           comments.map((comment, index) => (
             <TeacherComment
               key={comment._id}
               comment={comment}
-              locale={locale}
               style={{ marginBottom: index === comments.length - 1 ? 8 : 0 }}
             />
           ))

package/src/features/feedback/constants.ts

@@ -1,12 +1,10 @@
 import { Platform } from 'react-native'
+import { NoCommentsMessage } from './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 TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'
 
 export enum FeedbackButtonColors {
@@ -23,3 +21,14 @@ export enum FeedbackMode {
   SIMPLE = 'SIMPLE',
   NORMAL = 'NORMAL',
 }
+
+export const EMPTY_COMMENT: NoCommentsMessage = {
+  __v: 0,
+  _id: EMPTY_COMMENT_ID,
+  createdAt: new Date(),
+  isRead: true,
+  studentId: '',
+  teacherId: '',
+  teacherName: '',
+  updatedAt: new Date(),
+} as const

package/src/features/feedback/helpers.ts

@@ -31,3 +31,34 @@ export function findCommentsByCredits({
 }: FindCommentsByCreditsProps) {
   return data?.get(assignmentId)?.[problemId]?.comments ?? []
 }
+
+type UpdateCommentsStateProps = {
+  state: CommentsMap | null
+  assignmentId: string
+  problemId: string
+  fn: (data: FeedbackEntity) => FeedbackEntity | undefined
+}
+
+export function updateCommentsState({
+  state,
+  assignmentId,
+  problemId,
+  fn,
+}: UpdateCommentsStateProps) {
+  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/api.ts

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

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

@@ -1,25 +1,25 @@
 import { createEvent, restore, sample, Store } from 'effector'
-import { CommentsMap, Credits, FeedbackEntity, TeacherComment } from '../types'
+import { AddCommentProps, CommentsMap, Credits, DeleteCommentProps, TeacherComment } from '../types'
 import { TeacherFeedbackAPI } from './api'
-import { TeacherFeedbackModelProps } from './model'
+import { updateCommentsState } from '../helpers'
+import { getText } from '../../../shared/translation/helpers'
+import { EMPTY_COMMENT } from '@magmamath/students-features'
 
-type UpdateProps = {
-  state: CommentsMap | null
-  assignmentId: string
-  problemId: string
-  fn: (data: FeedbackEntity) => FeedbackEntity | undefined
+type TeacherCommentsModelProps = {
+  api: TeacherFeedbackAPI
+  $isOpen: Store<boolean>
 }
 
-export class TeacherComments {
+export class TeacherCommentsModel {
   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 add = createEvent<AddCommentProps>()
+  public readonly delete = createEvent<DeleteCommentProps>()
 
   public readonly setData = createEvent<CommentsMap>()
   public readonly $data = restore<CommentsMap | null>(this.setData, null)
     .on(this.setAllCommentsRead, (state, { assignmentId, problemId }) =>
-      this.update({
+      updateCommentsState({
         state,
         assignmentId,
         problemId,
@@ -30,7 +30,7 @@ export class TeacherComments {
       }),
     )
     .on(this.add, (state, { assignmentId, problemId, comment, isRead }) =>
-      this.update({
+      updateCommentsState({
         state,
         assignmentId,
         problemId,
@@ -41,7 +41,7 @@ export class TeacherComments {
       }),
     )
     .on(this.delete, (state, { assignmentId, problemId, commentId }) =>
-      this.update({
+      updateCommentsState({
         state,
         assignmentId,
         problemId,
@@ -62,7 +62,7 @@ export class TeacherComments {
       }),
     )
     .on(this.setNoCommentsMessage, (state, noCommentsMessage) =>
-      this.update({
+      updateCommentsState({
         state,
         assignmentId: noCommentsMessage.exerciseId,
         problemId: noCommentsMessage.problemId,
@@ -73,11 +73,7 @@ export class TeacherComments {
       }),
     )
 
-  constructor(
-    api: TeacherFeedbackAPI,
-    $isOpen: Store<boolean>,
-    EMPTY_COMMENT: TeacherFeedbackModelProps['defaults']['EMPTY_COMMENT'],
-  ) {
+  constructor({ api, $isOpen }: TeacherCommentsModelProps) {
     sample({
       clock: this.add,
       source: { isOpen: $isOpen },
@@ -97,31 +93,13 @@ export class TeacherComments {
           ?.comments.length
         return isOpen && hasNoMessages
       },
-      fn: (_, { assignmentId, problemId }) => ({
+      fn: (_, { assignmentId, problemId }): TeacherComment => ({
         ...EMPTY_COMMENT,
         exerciseId: assignmentId,
         problemId,
+        content: getText('teacherFeedback.noComments'),
       }),
       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

@@ -1,14 +1,9 @@
 import { createEvent, restore, sample, Store } from 'effector'
 import { TeacherFeedbackAPI } from './api'
 import { TeacherFeedbackSockets } from './sockets'
-import { TeacherComments } from './comments'
+import { TeacherCommentsModel } from './comments'
 import { findCommentsByCredits, generateCommentsMap } from '../helpers'
-import {
-  GetCommentsPayload,
-  GetCommentsResponse,
-  NoCommentsMessage,
-  UpdateCommentStatusSeenPayload,
-} from '../types'
+import { GetCommentsPayload, GetCommentsResponse, UpdateCommentStatusSeenPayload } from '../types'
 import { EMPTY_COMMENT_ID } from '../constants'
 
 export type TeacherFeedbackModelProps = {
@@ -21,23 +16,25 @@ export type TeacherFeedbackModelProps = {
     $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 comments: TeacherCommentsModel
   public readonly setIsOpen = createEvent<boolean>()
   public readonly $isOpen = restore(this.setIsOpen, false)
 
   public readonly setIsFeedbackIconDisplayed = createEvent<boolean>()
   public readonly $isFeedbackIconDisplayed = restore(this.setIsFeedbackIconDisplayed, true)
 
-  constructor({ api, socket, credits, defaults }: TeacherFeedbackModelProps) {
+  constructor({ api, socket, credits }: TeacherFeedbackModelProps) {
     this.api = new TeacherFeedbackAPI(api)
     this.sockets = new TeacherFeedbackSockets(socket)
-    this.comments = new TeacherComments(this.api, this.$isOpen, defaults.EMPTY_COMMENT)
+    this.comments = new TeacherCommentsModel({
+      api: this.api,
+      $isOpen: this.$isOpen,
+    })
 
     sample({
       clock: credits.$problemId,

package/src/features/feedback/types.ts

@@ -26,7 +26,10 @@ export type TeacherComment = {
   __v: number
 }
 
-export type NoCommentsMessage = Omit<TeacherComment, '_id' | 'problemId' | 'exerciseId'> & {
+export type NoCommentsMessage = Omit<
+  TeacherComment,
+  '_id' | 'problemId' | 'exerciseId' | 'content'
+> & {
   _id: typeof EMPTY_COMMENT_ID
 }
 
@@ -46,3 +49,6 @@ export enum FeedbackSocketEvents {
   COMMENT_ADDED = 'exerciseCommentCreated',
   COMMENT_DELETED = 'exerciseCommentDeleted',
 }
+
+export type AddCommentProps = Credits & { comment: TeacherComment; isRead: boolean }
+export type DeleteCommentProps = Credits & { commentId: string }