switch to nx monorepo

2025-11-13 03:22:38 +10:00 · 2024-01-09 18:58:26 +01:00
parent e1bb2632b8
commit 093e634c0b
273 changed files with 11419 additions and 31 deletions
--- a/apps/client/src/features/comment/components/comment-list-item.tsx
+++ b/apps/client/src/features/comment/components/comment-list-item.tsx
@ -0,0 +1,110 @@
+import { Group, Text, Box } from '@mantine/core';
+import React, { useState } from 'react';
+import classes from './comment.module.css';
+import { useAtomValue } from 'jotai';
+import { timeAgo } from '@/lib/time';
+import CommentEditor from '@/features/comment/components/comment-editor';
+import { pageEditorAtom } from '@/features/editor/atoms/editor-atoms';
+import CommentActions from '@/features/comment/components/comment-actions';
+import CommentMenu from '@/features/comment/components/comment-menu';
+import { useHover } from '@mantine/hooks';
+import { useDeleteCommentMutation, useUpdateCommentMutation } from '@/features/comment/queries/comment-query';
+import { IComment } from '@/features/comment/types/comment.types';
+import { UserAvatar } from '@/components/ui/user-avatar';
+
+interface CommentListItemProps {
+  comment: IComment;
+}
+
+function CommentListItem({ comment }: CommentListItemProps) {
+
+  const { hovered, ref } = useHover();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const editor = useAtomValue(pageEditorAtom);
+  const [content, setContent] = useState(comment.content);
+  const updateCommentMutation = useUpdateCommentMutation();
+  const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
+
+  async function handleUpdateComment() {
+    try {
+      setIsLoading(true);
+      const commentToUpdate = {
+        id: comment.id,
+        content: JSON.stringify(content),
+      };
+      await updateCommentMutation.mutateAsync(commentToUpdate);
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Failed to update comment:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleDeleteComment() {
+    try {
+      await deleteCommentMutation.mutateAsync(comment.id);
+      editor?.commands.unsetComment(comment.id);
+    } catch (error) {
+      console.error('Failed to delete comment:', error);
+    }
+  }
+
+  function handleEditToggle() {
+    setIsEditing(true);
+  }
+
+  return (
+    <Box ref={ref} pb="xs">
+      <Group>
+        <UserAvatar color="blue" size="sm" avatarUrl={comment.creator.avatarUrl}
+                    name={comment.creator.name}
+        />
+
+        <div style={{ flex: 1 }}>
+          <Group justify="space-between" wrap="nowrap">
+            <Text size="sm" fw={500} lineClamp={1}>{comment.creator.name}</Text>
+
+            <div style={{ visibility: hovered ? 'visible' : 'hidden' }}>
+              {/*!comment.parentCommentId && (
+                <ResolveComment commentId={comment.id} pageId={comment.pageId} resolvedAt={comment.resolvedAt} />
+              )*/}
+
+              <CommentMenu onEditComment={handleEditToggle} onDeleteComment={handleDeleteComment} />
+            </div>
+          </Group>
+
+          <Text size="xs" fw={500} c="dimmed">
+            {timeAgo(comment.createdAt)}
+          </Text>
+        </div>
+      </Group>
+
+      <div>
+        {!comment.parentCommentId && comment?.selection &&
+          <Box className={classes.textSelection}>
+            <Text size="sm">{comment?.selection}</Text>
+          </Box>
+        }
+
+        {
+          !isEditing ?
+            (<CommentEditor defaultContent={content} editable={false} />)
+            :
+            (<>
+              <CommentEditor defaultContent={content} editable={true} onUpdate={(newContent) => setContent(newContent)}
+                             autofocus={true} />
+
+              <CommentActions onSave={handleUpdateComment} isLoading={isLoading} />
+            </>)
+        }
+
+      </div>
+
+    </Box>
+  );
+}
+
+export default CommentListItem;