From e4d1ff2523a68e3984993090417a99a0151127b3 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Mon, 13 Feb 2023 23:14:35 -0500
Subject: [PATCH] rearrange convo fetching for performance in progress

---
 src/App.jsx                            |  5 ++++-
 src/components/Conversations/index.jsx |  7 ++-----
 src/components/Nav/index.jsx           |  2 ++
 src/store/convoSlice.js                |  5 ++++-
 src/utils/fetchers.js                  | 10 +++++++++-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d865fc5cf4..fa303d94ce 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,11 +5,14 @@ import TextChat from './components/main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { setConvos } from '~/store/convoSlice';
 
 const App = () => {
   const { messages } = useSelector((state) => state.messages);
   const { title } = useSelector((state) => state.convo);
+  const dispatch = useDispatch();
+  const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos', (res) => dispatch(setConvos(res)));
 
   useDocumentTitle(title);
 
diff --git a/src/components/Conversations/index.jsx b/src/components/Conversations/index.jsx
index d74f23314f..bc90bb1e19 100644
--- a/src/components/Conversations/index.jsx
+++ b/src/components/Conversations/index.jsx
@@ -1,16 +1,13 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import Conversation from './Conversation';
-import { swr } from '~/utils/fetchers';
+// import { swr } from '~/utils/fetchers';
 import useDidMountEffect from '~/hooks/useDidMountEffect';
 
 export default function Conversations() {
-  const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
-  const conversations = data;
   const [isHovering, setIsHovering] = useState(false);
   const { conversationId } = useSelector((state) => state.convo);
-
-  useDidMountEffect(() => mutate(), [conversationId]);
+  // useDidMountEffect(() => mutate(), [conversationId]);
   // const currentRef = useRef(null);
 
   // const scrollToTop = () => {
diff --git a/src/components/Nav/index.jsx b/src/components/Nav/index.jsx
index ce3b32319b..a50bcc0627 100644
--- a/src/components/Nav/index.jsx
+++ b/src/components/Nav/index.jsx
@@ -4,6 +4,8 @@ import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
 
 export default function Nav() {
+  const { conversationId } = useSelector((state) => state.convo);
+
   return (
     <div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
       <div className="flex h-full min-h-0 flex-col ">
diff --git a/src/store/convoSlice.js b/src/store/convoSlice.js
index 4d76bffced..43309bb698 100644
--- a/src/store/convoSlice.js
+++ b/src/store/convoSlice.js
@@ -5,6 +5,8 @@ const initialState = {
   title: 'ChatGPT Clone',
   conversationId: null,
   parentMessageId: null,
+  convos: [],
+  convosLoading: false,
 };
 
 const currentSlice = createSlice({
@@ -17,9 +19,10 @@ const currentSlice = createSlice({
     setError: (state, action) => {
       state.error = action.payload;
     },
+    setConvos: (state, action) => state.convos = action.payload,
   }
 });
 
-export const { setConversation, setError } = currentSlice.actions;
+export const { setConversation, setConvos, setError } = currentSlice.actions;
 
 export default currentSlice.reducer;
diff --git a/src/utils/fetchers.js b/src/utils/fetchers.js
index 360268b34a..8cda1e4a53 100644
--- a/src/utils/fetchers.js
+++ b/src/utils/fetchers.js
@@ -8,7 +8,15 @@ const postRequest = async (url, { arg }) => {
   return await axios.post(url, { arg });
 };
 
-export const swr = (path) => useSWR(path, fetcher);
+export const swr = (path, successCallback) => {
+  const options = {};
+
+  if (successCallback) {
+    options.onSuccess = successCallback;
+  }
+
+  return useSWR(path, fetcher);
+}
 
 export default function manualSWR(path, type, successCallback) {
   const options = {};