Merge pull request #19 from techx/eddie/reduce_post_requests

reduce post requests when clicking through emails

client/package.json

@@ -23,6 +23,7 @@
     "@tiptap/pm": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
+    "@types/react-icons": "^3.0.0",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/routes/inbox.tsx

@@ -82,6 +82,10 @@ export default function InboxPage() {
 
   const [response, setResponse] = useState<Response | undefined>(undefined);
 
+  const [storedResponses, setStoredResponses] = useState<{
+    [key: number]: Response;
+  }>({});
+
   const viewport = useRef<HTMLDivElement>(null);
 
   const editor = useEditor(
@@ -153,11 +157,20 @@ export default function InboxPage() {
   };
 
   const getResponse = () => {
+    // Checks if response is already stored
+    const currEmailID =
+      activeThread.emailList[activeThread.emailList.length - 1].id;
+    if (storedResponses[currEmailID]) {
+      const oldResponse = storedResponses[currEmailID];
+      setResponse(oldResponse);
+      setContent(oldResponse.content.replace("\n", "<br/>"));
+      return;
+    }
+
+    // Otherwise fetches response from server
     const formData = new FormData();
-    formData.append(
-      "id",
-      activeThread.emailList[activeThread.emailList.length - 1].id.toString(),
-    );
+    formData.append("id", currEmailID.toString());
+
     fetch(`/api/emails/get_response`, {
       method: "POST",
       body: formData,
@@ -171,6 +184,9 @@ export default function InboxPage() {
         });
       })
       .then((data) => {
+        setStoredResponses((oldResponses) => {
+          return { ...oldResponses, [currEmailID]: data };
+        });
         setResponse(data);
         setContent(data.content.replaceAll("\n", "<br/>"));
       });