rearrange convo fetching for performance in progress

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);
 

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 = () => {

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 ">

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;

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 = {};