implement new invitation system

* fix comments on the frontend
* move jwt token service to its own module
* other fixes and updates

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

@@ -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>
   );
 }

apps/client/src/features/comment/components/comment-list.tsx

@@ -18,7 +18,7 @@ function CommentList() {
     data: comments,
     isLoading: isCommentsLoading,
     isError,
-  } = useCommentsQuery(pageId);
+  } = useCommentsQuery({ pageId, limit: 100 });
   const [isLoading, setIsLoading] = useState(false);
   const createCommentMutation = useCreateCommentMutation();
 

apps/client/src/features/comment/queries/comment-query.ts

@@ -12,6 +12,7 @@ import {
   updateComment,
 } from "@/features/comment/services/comment-service";
 import {
+  ICommentParams,
   IComment,
   IResolveComment,
 } from "@/features/comment/types/comment.types";
@@ -21,12 +22,13 @@ import { IPagination } from "@/lib/types.ts";
 export const RQ_KEY = (pageId: string) => ["comments", pageId];
 
 export function useCommentsQuery(
-  pageId: string,
+  params: ICommentParams,
 ): UseQueryResult<IPagination<IComment>, Error> {
   return useQuery({
-    queryKey: RQ_KEY(pageId),
-    queryFn: () => getPageComments(pageId),
-    enabled: !!pageId,
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: RQ_KEY(params.pageId),
+    queryFn: () => getPageComments(params),
+    enabled: !!params.pageId,
   });
 }
 
@@ -36,13 +38,14 @@ export function useCreateCommentMutation() {
   return useMutation<IComment, Error, Partial<IComment>>({
     mutationFn: (data) => createComment(data),
     onSuccess: (data) => {
-      const newComment = data;
-      let comments = queryClient.getQueryData(RQ_KEY(data.pageId));
-      if (comments) {
-        // comments = prevComments => [...prevComments, newComment];
-        //queryClient.setQueryData(RQ_KEY(data.pageId), comments);
-      }
+      //const newComment = data;
+      // let comments = queryClient.getQueryData(RQ_KEY(data.pageId));
+      // if (comments) {
+      //comments = prevComments => [...prevComments, newComment];
+      //queryClient.setQueryData(RQ_KEY(data.pageId), comments);
+      //}
 
+      queryClient.invalidateQueries({ queryKey: RQ_KEY(data.pageId) });
       notifications.show({ message: "Comment created successfully" });
     },
     onError: (error) => {
@@ -69,11 +72,21 @@ export function useDeleteCommentMutation(pageId?: string) {
   return useMutation({
     mutationFn: (commentId: string) => deleteComment(commentId),
     onSuccess: (data, variables) => {
-      let comments = queryClient.getQueryData(RQ_KEY(pageId)) as IComment[];
-      if (comments) {
-        // comments = comments.filter(comment => comment.id !== variables);
-        // queryClient.setQueryData(RQ_KEY(pageId), comments);
+      const comments = queryClient.getQueryData(
+        RQ_KEY(pageId),
+      ) as IPagination<IComment>;
+
+      if (comments && comments.items) {
+        const commentId = variables;
+        const newComments = comments.items.filter(
+          (comment) => comment.id !== commentId,
+        );
+        queryClient.setQueryData(RQ_KEY(pageId), {
+          ...comments,
+          items: newComments,
+        });
       }
+
       notifications.show({ message: "Comment deleted successfully" });
     },
     onError: (error) => {
@@ -92,6 +105,7 @@ export function useResolveCommentMutation() {
         RQ_KEY(data.pageId),
       ) as IComment[];
 
+      /*
       if (currentComments) {
         const updatedComments = currentComments.map((comment) =>
           comment.id === variables.commentId
@@ -99,7 +113,7 @@ export function useResolveCommentMutation() {
             : comment,
         );
         queryClient.setQueryData(RQ_KEY(data.pageId), updatedComments);
-      }
+      }*/
 
       notifications.show({ message: "Comment resolved successfully" });
     },

apps/client/src/features/comment/services/comment-service.ts

@@ -1,5 +1,6 @@
 import api from "@/lib/api-client";
 import {
+  ICommentParams,
   IComment,
   IResolveComment,
 } from "@/features/comment/types/comment.types";
@@ -9,30 +10,30 @@ export async function createComment(
   data: Partial<IComment>,
 ): Promise<IComment> {
   const req = await api.post<IComment>("/comments/create", data);
-  return req.data as IComment;
+  return req.data;
 }
 
 export async function resolveComment(data: IResolveComment): Promise<IComment> {
   const req = await api.post<IComment>(`/comments/resolve`, data);
-  return req.data as IComment;
+  return req.data;
 }
 
 export async function updateComment(
   data: Partial<IComment>,
 ): Promise<IComment> {
   const req = await api.post<IComment>(`/comments/update`, data);
-  return req.data as IComment;
+  return req.data;
 }
 
 export async function getCommentById(commentId: string): Promise<IComment> {
   const req = await api.post<IComment>("/comments/info", { commentId });
-  return req.data as IComment;
+  return req.data;
 }
 
 export async function getPageComments(
-  pageId: string,
+  data: ICommentParams,
 ): Promise<IPagination<IComment>> {
-  const req = await api.post("/comments", { pageId });
+  const req = await api.post("/comments", data);
   return req.data;
 }
 

apps/client/src/features/comment/types/comment.types.ts

@@ -1,4 +1,5 @@
-import { IUser } from '@/features/user/types/user.types';
+import { IUser } from "@/features/user/types/user.types";
+import { QueryParams } from "@/lib/types.ts";
 
 export interface IComment {
   id: string;
@@ -14,7 +15,7 @@ export interface IComment {
   createdAt: Date;
   editedAt?: Date;
   deletedAt?: Date;
-  creator: IUser
+  creator: IUser;
 }
 
 export interface ICommentData {
@@ -29,3 +30,7 @@ export interface IResolveComment {
   commentId: string;
   resolved: boolean;
 }
+
+export interface ICommentParams extends QueryParams {
+  pageId: string;
+}