save comment input on session storage to persist on reload or page navigation

Author: suzit-10

frontend/src/components/comments/commentInput.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import MDEditor from '@uiw/react-md-editor';
 import Tribute from 'tributejs';
@@ -21,6 +21,7 @@ import { CurrentUserAvatar } from '../user/avatar';
 const maxFileSize = 1 * 1024 * 1024; // 1MB
 
 function CommentInputField({
+  sessionkey,
   comment,
   setComment,
   contributors,
@@ -130,6 +131,23 @@ function CommentInputField({
     });
   };
 
+  useEffect(() => {
+    if (!sessionkey) return;
+    const commenEvent = sessionStorage.getItem(sessionkey);
+    if (commenEvent) {
+      setComment(commenEvent);
+    }
+  }, [sessionkey, setComment]);
+
+  const onCommentChange = useCallback(
+    (e) => {
+      setComment(e);
+      if (!sessionkey) return;
+      sessionStorage.setItem(sessionkey, e);
+    },
+    [sessionkey, setComment],
+  );
+
   return (
     <div {...getRootProps()}>
       {isShowTabNavs && (
@@ -165,7 +183,7 @@ function CommentInputField({
           extraCommands={[]}
           height={200}
           value={comment}
-          onChange={setComment}
+          onChange={onCommentChange}
           textareaProps={{
             ...getInputProps(),
             spellCheck: 'true',

frontend/src/components/projectDetail/questionsAndComments.js

@@ -26,12 +26,14 @@ export const PostProjectComment = ({ projectId, refetchComments, contributors })
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
   const [comment, setComment] = useState('');
+  const SESSION_KEY = 'project-comment';
 
   const mutation = useMutation({
     mutationFn: () => postProjectComment(projectId, comment, token, locale),
     onSuccess: () => {
       refetchComments();
       setComment('');
+      sessionStorage.clear(SESSION_KEY);
     },
   });
 
@@ -44,6 +46,7 @@ export const PostProjectComment = ({ projectId, refetchComments, contributors })
       <div className={`w-100 h-100`} style={{ position: 'relative', display: 'block' }}>
         <Suspense fallback={<ReactPlaceholder showLoadingAnimation={true} rows={13} delay={300} />}>
           <CommentInputField
+            sessionkey={SESSION_KEY}
             comment={comment}
             setComment={setComment}
             enableHashtagPaste