Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-13 08:14:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

implement new invitation system

Browse Source 
* fix comments on the frontend
* move jwt token service to its own module
* other fixes and updates
This commit is contained in:
Philipinho
2024-05-14 22:55:11 +01:00
parent 525990d6e5
commit eefe63d1cd
75 changed files with 10965 additions and 7846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
apps/client/src/features/comment/components/comment-list-item.tsx
View File

@ -1,29 +1,31 @@
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';
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 [content, setContent] = useState<string>(comment.content);
const updateCommentMutation = useUpdateCommentMutation();
const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
@ -31,13 +33,13 @@ function CommentListItem({ comment }: CommentListItemProps) {
try {
setIsLoading(true);
const commentToUpdate = {
id: comment.id,
commentId: comment.id,
content: JSON.stringify(content),
};
await updateCommentMutation.mutateAsync(commentToUpdate);
setIsEditing(false);
} catch (error) {
console.error('Failed to update comment:', error);
console.error("Failed to update comment:", error);
} finally {
setIsLoading(false);
}
@ -48,7 +50,7 @@ function CommentListItem({ comment }: CommentListItemProps) {
await deleteCommentMutation.mutateAsync(comment.id);
editor?.commands.unsetComment(comment.id);
} catch (error) {
console.error('Failed to delete comment:', error);
console.error("Failed to delete comment:", error);
}
}
@ -59,20 +61,28 @@ function CommentListItem({ comment }: CommentListItemProps) {
return (
<Box ref={ref} pb="xs">
<Group>
<UserAvatar color="blue" size="sm" avatarUrl={comment.creator.avatarUrl}
name={comment.creator.name}
<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>
<Text size="sm" fw={500} lineClamp={1}>
{comment.creator.name}
</Text>
<div style={{ visibility: hovered ? 'visible' : 'hidden' }}>
<div style={{ visibility: hovered ? "visible" : "hidden" }}>
{/*!comment.parentCommentId && (
<ResolveComment commentId={comment.id} pageId={comment.pageId} resolvedAt={comment.resolvedAt} />
)*/}
<CommentMenu onEditComment={handleEditToggle} onDeleteComment={handleDeleteComment} />
<CommentMenu
onEditComment={handleEditToggle}
onDeleteComment={handleDeleteComment}
/>
</div>
</Group>
@ -83,26 +93,30 @@ function CommentListItem({ comment }: CommentListItemProps) {
</Group>
<div>
{!comment.parentCommentId && comment?.selection &&
{!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} />
</>)
}
{!isEditing ? (
<CommentEditor defaultContent={content} editable={false} />
) : (
<>
<CommentEditor
defaultContent={content}
editable={true}
onUpdate={(newContent) => setContent(newContent)}
autofocus={true}
/>
<CommentActions
onSave={handleUpdateComment}
isLoading={isLoading}
/>
</>
)}
</div>
</Box>
);
}