Autosave local storage and commentThreadcount

front/src/modules/comments/components/CommentThreadCreateMode.tsx

@@ -65,18 +65,26 @@ const StyledEditableTitleInput = styled.input`
 
 export function CommentThreadCreateMode({
   commentableEntityArray,
+  editor,
+  title,
+  handleTitleChange,
 }: {
   commentableEntityArray: CommentableEntity[];
+  editor: BlockNoteEditor | null;
+  title: string;
+  handleTitleChange: (newTitle: string) => void;
 }) {
-  const editor: BlockNoteEditor | null = useBlockNote({
-    theme: 'light',
-  });
-
   return (
     <StyledContainer>
       <StyledTopContainer>
         <CommentThreadTypeDropdown />
-        <StyledEditableTitleInput placeholder="Note title (optional)" />
+        <StyledEditableTitleInput
+          placeholder="Note title (optional)"
+          value={title}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            handleTitleChange(event.target.value)
+          }
+        />
         <PropertyBox>
           <PropertyBoxItem
             icon={<IconArrowUpRight />}

front/src/modules/comments/components/CommentThreadEditMode.tsx

@@ -1,5 +1,7 @@
-import { BlockNoteEditor } from '@blocknote/core';
+import React, { useState } from 'react';
+import { BlockNoteEditor, PartialBlock } from '@blocknote/core';
 import { BlockNoteView, useBlockNote } from '@blocknote/react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { PropertyBox } from '@/ui/components/property-box/PropertyBox';
@@ -78,11 +80,29 @@ export function CommentThreadEditMode({
     skip: !commentThreadId,
   });
 
+  const [editorReady, setEditorReady] = useState(false);
+
+  console.log();
+
   const editor: BlockNoteEditor | null = useBlockNote({
-    theme: 'light',
-    // initialContent: commentThread.body,
+    theme: useTheme().name === 'light' ? 'light' : 'dark',
+    initialContent: undefined,
+    onEditorContentChange: (editor) => {
+      // Todo: save operation here
+      console.log('save');
+    },
+    onEditorReady: (editor) => {
+      setEditorReady(true);
+    },
   });
 
+  React.useEffect(() => {
+    if (editorReady && data?.findManyCommentThreads[0]?.body) {
+      const newContent = JSON.parse(data.findManyCommentThreads[0].body);
+      editor?.replaceBlocks(editor.topLevelBlocks, newContent);
+    }
+  }, [data, editor, editorReady]);
+
   if (typeof data?.findManyCommentThreads[0] === 'undefined') {
     return null;
   }
@@ -95,7 +115,10 @@ export function CommentThreadEditMode({
     <StyledContainer>
       <StyledTopContainer>
         <CommentThreadTypeDropdown />
-        <StyledEditableTitleInput placeholder="Note title (optional)" />
+        <StyledEditableTitleInput
+          placeholder="Note title (optional)"
+          defaultValue={commentThread.title ?? ''}
+        />
         <PropertyBox>
           <PropertyBoxItem
             icon={<IconArrowUpRight />}

front/src/modules/comments/components/RightDrawerCreateCommentThread.tsx

@@ -1,4 +1,8 @@
+import { useEffect, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
+import { BlockNoteEditor } from '@blocknote/core';
+import { useBlockNote } from '@blocknote/react';
+import { useTheme } from '@emotion/react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
@@ -20,6 +24,8 @@ import { commentableEntityArrayState } from '../states/commentableEntityArraySta
 import { CommentThreadCreateMode } from './CommentThreadCreateMode';
 
 export function RightDrawerCreateCommentThread() {
+  const [title, setTitle] = useState('');
+
   const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
 
   const openRightDrawer = useOpenRightDrawer();
@@ -29,8 +35,10 @@ export function RightDrawerCreateCommentThread() {
 
   const currentUser = useRecoilValue(currentUserState);
 
-  function handleNewCommentThread(commentText: string) {
-    if (!isNonEmptyString(commentText)) {
+  const identifier = JSON.stringify(commentableEntityArray);
+
+  function handleNewCommentThread(title: string, body: string) {
+    if (!(isNonEmptyString(title) || isNonEmptyString(body))) {
       return;
     }
 
@@ -44,7 +52,7 @@ export function RightDrawerCreateCommentThread() {
     createCommentThreadWithComment({
       variables: {
         authorId: currentUser.id,
-        commentText: commentText,
+        commentText: body,
         commentThreadId: v4(),
         createdAt: new Date().toISOString(),
         commentThreadTargetArray: commentableEntityArray.map(
@@ -64,19 +72,52 @@ export function RightDrawerCreateCommentThread() {
       onCompleted(data) {
         // TODO : redirect to drawer comment thread with data.createOneCommentThread.id
         openRightDrawer('comments');
+        localStorage.setItem('editorTitle' + identifier, '');
+        localStorage.setItem('editorBody' + identifier, '');
       },
     });
   }
 
+  const initialBody: string | null = localStorage.getItem(
+    'editorBody' + identifier,
+  );
+
+  const editor: BlockNoteEditor | null = useBlockNote({
+    theme: useTheme().name === 'light' ? 'light' : 'dark',
+    initialContent: initialBody ? JSON.parse(initialBody) : undefined,
+    onEditorContentChange: (editor) => {
+      localStorage.setItem(
+        'editorBody' + identifier,
+        JSON.stringify(editor.topLevelBlocks),
+      );
+    },
+  });
+
+  useEffect(() => {
+    const initialTitle: string =
+      localStorage.getItem('editorTitle' + identifier) ?? '';
+    setTitle(initialTitle);
+  }, [identifier]);
+
+  function onTitleUpdate(newTitle: string) {
+    setTitle(newTitle);
+    localStorage.setItem('editorTitle' + identifier, newTitle);
+  }
+
   return (
     <RightDrawerPage>
       <RightDrawerTopBar
         title="New note"
-        onClick={() => handleNewCommentThread('text')}
+        onClick={() =>
+          handleNewCommentThread(title, JSON.stringify(editor?.topLevelBlocks))
+        }
       />
       <RightDrawerBody>
         <CommentThreadCreateMode
           commentableEntityArray={commentableEntityArray}
+          editor={editor}
+          title={title}
+          handleTitleChange={onTitleUpdate}
         />
       </RightDrawerBody>
     </RightDrawerPage>

front/src/modules/comments/components/Timeline.tsx

@@ -2,6 +2,7 @@ import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 
 import { IconNotes, IconPlus } from '@/ui/icons/index';
+import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer';
 import {
   beautifyExactDate,
   beautifyPastDateRelativeToNow,
@@ -181,7 +182,7 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
     },
   });
 
-  const openRightDrawer = useOpenCommentThreadRightDrawer();
+  const openCommentThreadRightDrawer = useOpenCommentThreadRightDrawer();
 
   const commentThreads: CommentThreadForDrawer[] =
     queryResult?.findManyCommentThreads ?? [];
@@ -204,6 +205,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
         );
         const exactCreatedAt = beautifyExactDate(commentThread.createdAt);
 
+        console.log(JSON.parse(commentThread.body ?? '')[0].content[0].text);
+
         return (
           <>
             <StyledTopActionBar>
@@ -242,9 +245,13 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
                 <StyledVerticalLine></StyledVerticalLine>
               </StyledVerticalLineContainer>
               <StyledCardContainer>
-                <StyledCard onClick={() => openRightDrawer(commentThread.id)}>
+                <StyledCard
+                  onClick={() => openCommentThreadRightDrawer(commentThread.id)}
+                >
                   <StyledCardTitle>{commentThread.title}</StyledCardTitle>
-                  <StyledCardContent>{commentThread.body}</StyledCardContent>
+                  <StyledCardContent>
+                    {JSON.parse(commentThread.body ?? '')[0].content[0].text}
+                  </StyledCardContent>
                 </StyledCard>
               </StyledCardContainer>
             </StyledTimelineItemContainer>