From 8d7dfdfca44a1b0e24df2383aa23511287e7b00c Mon Sep 17 00:00:00 2001 From: Eddie Qiao Date: Sat, 27 Apr 2024 16:41:13 -0400 Subject: [PATCH 1/3] reduce post requests when clicking through emails --- client/src/routes/inbox.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/client/src/routes/inbox.tsx b/client/src/routes/inbox.tsx index 6104d0c28..5226760e0 100644 --- a/client/src/routes/inbox.tsx +++ b/client/src/routes/inbox.tsx @@ -82,6 +82,8 @@ export default function InboxPage() { const [response, setResponse] = useState(undefined); + const [storedResponses, setStoredResponses] = useState<{ [key: number]: Response }>({}); + const viewport = useRef(null); const editor = useEditor( @@ -153,11 +155,22 @@ 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", "
")); + return; + } + + // Otherwise fetches response from server const formData = new FormData(); formData.append( "id", - activeThread.emailList[activeThread.emailList.length - 1].id.toString(), + currEmailID.toString(), ); + console.log(formData); 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", "
")); }); From a08b25c185ded8650c41cb0e19ffeef3cab43864 Mon Sep 17 00:00:00 2001 From: Eddie Qiao Date: Sat, 27 Apr 2024 20:53:42 +0000 Subject: [PATCH 2/3] prettier? --- client/src/routes/inbox.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/routes/inbox.tsx b/client/src/routes/inbox.tsx index 5226760e0..89f65918a 100644 --- a/client/src/routes/inbox.tsx +++ b/client/src/routes/inbox.tsx @@ -82,7 +82,9 @@ export default function InboxPage() { const [response, setResponse] = useState(undefined); - const [storedResponses, setStoredResponses] = useState<{ [key: number]: Response }>({}); + const [storedResponses, setStoredResponses] = useState<{ + [key: number]: Response; + }>({}); const viewport = useRef(null); @@ -156,7 +158,8 @@ export default function InboxPage() { const getResponse = () => { // Checks if response is already stored - const currEmailID = activeThread.emailList[activeThread.emailList.length - 1].id; + const currEmailID = + activeThread.emailList[activeThread.emailList.length - 1].id; if (storedResponses[currEmailID]) { const oldResponse = storedResponses[currEmailID]; setResponse(oldResponse); @@ -166,10 +169,7 @@ export default function InboxPage() { // Otherwise fetches response from server const formData = new FormData(); - formData.append( - "id", - currEmailID.toString(), - ); + formData.append("id", currEmailID.toString()); console.log(formData); fetch(`/api/emails/get_response`, { method: "POST", From 200b26b5905cb8bc0f6573f4f76b00af8a89a815 Mon Sep 17 00:00:00 2001 From: Andrew Liu Date: Sat, 27 Apr 2024 22:04:21 +0000 Subject: [PATCH 3/3] remove console log --- client/package-lock.json | 10 ++++++++++ client/package.json | 1 + client/src/routes/inbox.tsx | 2 +- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/client/package-lock.json b/client/package-lock.json index 51880d923..c42901c0d 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -20,6 +20,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", @@ -1648,6 +1649,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-icons": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/react-icons/-/react-icons-3.0.0.tgz", + "integrity": "sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==", + "deprecated": "This is a stub types definition. react-icons provides its own type definitions, so you do not need this installed.", + "dependencies": { + "react-icons": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.5", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz", diff --git a/client/package.json b/client/package.json index 1e532a118..1a5b54071 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/routes/inbox.tsx b/client/src/routes/inbox.tsx index 89f65918a..2d07fbe1b 100644 --- a/client/src/routes/inbox.tsx +++ b/client/src/routes/inbox.tsx @@ -170,7 +170,7 @@ export default function InboxPage() { // Otherwise fetches response from server const formData = new FormData(); formData.append("id", currEmailID.toString()); - console.log(formData); + fetch(`/api/emails/get_response`, { method: "POST", body: formData,