fix: conflicting fetch with /api/convos

client/src/components/Conversations/Pages.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default function Pages({ pageNumber, pages, nextPage, previousPage }) {
+  const clickHandler = (func) => async (e) => {
+    e.preventDefault();
+    await func();
+  };
+
+  return (
+    <div className="m-auto mt-4 mb-2 flex items-center justify-center gap-2">
+      <button
+        onClick={clickHandler(previousPage)}
+        className={
+          'btn btn-small bg-transition m-auto flex gap-2 transition hover:bg-gray-800 disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400' +
+          (pageNumber <= 1 ? ' hidden-visibility' : '')
+        }
+        disabled={pageNumber <= 1}
+      >
+        &lt;&lt;
+      </button>
+      <span className="flex-none text-gray-400">
+        {pageNumber} / {pages}
+      </span>
+      <button
+        onClick={clickHandler(nextPage)}
+        className={
+          'btn btn-small bg-transition m-auto flex gap-2 transition hover:bg-gray-800 disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400' +
+          (pageNumber >= pages ? ' hidden-visibility' : '')
+        }
+        disabled={pageNumber >= pages}
+      >
+        &gt;&gt;
+      </button>
+    </div>
+  );
+}

client/src/components/Conversations/index.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations({ conversations, conversationId, pageNumber, pages, nextPage, previousPage, moveToTop }) {
-  const clickHandler = (func) => async (e) => {
-    e.preventDefault();
-    await func();
-  };
+export default function Conversations({ conversations, conversationId, moveToTop }) {
 
   return (
     <>
@@ -37,25 +33,6 @@ export default function Conversations({ conversations, conversationId, pageNumbe
             />
           );
         })}
-        <div className="m-auto mt-4 mb-2 flex justify-center items-center gap-2">
-          <button
-            onClick={clickHandler(previousPage)}
-            className={"flex btn btn-small transition bg-transition dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400 m-auto gap-2 hover:bg-gray-800" + (pageNumber<=1?" hidden-visibility":"")}
-            disabled={pageNumber<=1}
-          >
-            &lt;&lt;
-          </button>
-          <span className="flex-none text-gray-400">
-            {pageNumber} / {pages}
-          </span>
-          <button
-            onClick={clickHandler(nextPage)}
-            className={"flex btn btn-small transition bg-transition dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400 m-auto gap-2 hover:bg-gray-800" + (pageNumber>=pages?" hidden-visibility":"")}
-            disabled={pageNumber>=pages}
-          >
-            &gt;&gt;
-          </button>
-        </div>
     </>
   );
 }

client/src/components/Nav/NavLinks.jsx

@@ -6,10 +6,10 @@ import ClearConvos from './ClearConvos';
 import DarkMode from './DarkMode';
 import Logout from './Logout';
 
-export default function NavLinks() {
+export default function NavLinks({ onSearchSuccess, clearSearch }) {
   return (
     <>
-      <SearchBar />
+      <SearchBar onSuccess={onSearchSuccess} clearSearch={clearSearch}/>
       <ClearConvos />
       <DarkMode />
       <Logout />

client/src/components/Nav/SearchBar.jsx

@@ -1,18 +1,34 @@
 import React, { useState, useCallback } from 'react';
 import { debounce } from 'lodash';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Search } from 'lucide-react';
 import { setQuery } from '~/store/searchSlice';
-import { setPage, refreshConversation } from '~/store/convoSlice';
+import { setConvos, refreshConversation } from '~/store/convoSlice';
+import axios from 'axios';
 
-export default function SearchBar() {
+const fetch = async (q, pageNumber, callback) => {
+  const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
+  console.log(data);
+  callback(data);
+};
+
+export default function SearchBar({ onSuccess, clearSearch }) {
   const dispatch = useDispatch();
   const [inputValue, setInputValue] = useState('');
-  const { search } = useSelector((state) => state.search);
+
+  // const onSuccess = (data) => {
+  //   const { conversations, pages, pageNumber } = data;
+  //   dispatch(setConvos({ convos: conversations, searchFetch: true }));
+  //   dispatch(setPage(pageNumber));
+  //   dispatch(setPages(pages));
+  // };
 
   const debouncedChangeHandler = useCallback(
     debounce((q) => {
       dispatch(setQuery(q));
+      if (q.length > 0) {
+        fetch(q, 1, onSuccess);
+      }
     }, 750),
     [dispatch]
   );
@@ -22,27 +38,27 @@ export default function SearchBar() {
     if (e.keyCode === 8 && value === '') { 
       // Value after clearing input: ""
       console.log(`Value after clearing input: "${value}"`);
-      dispatch(setPage(1));
       dispatch(setQuery(''));
-      dispatch(refreshConversation());
+      clearSearch();
      }
   };
 
 
   const changeHandler = (e) => {
-    if (!search) {
-      console.log('setting page to 1');
-      dispatch(setPage(1));
-    }
+    // if (!search) {
+    //   console.log('setting page to 1');
+    //   dispatch(setPage(1));
+    // }
 
     let q = e.target.value;
     setInputValue(q);
     q = q.trim();
 
-    if (q === '' || !q) {
-      dispatch(setPage(1));
+    if (q === '') {
       dispatch(setQuery(''));
-      dispatch(refreshConversation());
+      // dispatch(setPage(1));
+      // dispatch(refreshConversation());
+      clearSearch();
     } else {
       debouncedChangeHandler(q);
     }

client/src/components/Nav/index.jsx

@@ -1,36 +1,63 @@
 import React, { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import _ from 'lodash';
 import NewChat from './NewChat';
 import Spinner from '../svg/Spinner';
+import Pages from '../Conversations/Pages';
 import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
 import { swr } from '~/utils/fetchers';
 import { useDispatch, useSelector } from 'react-redux';
-import { increasePage, decreasePage, setPage, setConvos, setPages } from '~/store/convoSlice';
+import { setConvos, refreshConversation } from '~/store/convoSlice';
+
+const fetch = async (q, pageNumber, callback) => {
+  const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
+  console.log(data);
+  callback(data);
+};
 
 export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
+  const [pages, setPages] = useState(1);
+  const [pageNumber, setPage] = useState(1);
   const { search, query } = useSelector((state) => state.search);
-  const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector(
-    (state) => state.convo
-  );
-  const onSuccess = (data) => {
-    const { conversations, pages } = data;
+  const { conversationId, convos, refreshConvoHint } = useSelector((state) => state.convo);
+  const onSuccess = (data, searchFetch = false) => {
+    if (search) {
+      return;
+    }
 
+    const { conversations, pages } = data;
     if (pageNumber > pages) {
-      dispatch(setPage(pages));
+      setPage(pages);
     } else {
-      dispatch(setConvos(conversations));
-      dispatch(setPages(pages));
+      dispatch(setConvos({ convos: conversations, searchFetch }));
+      setPages(pages);
     }
   };
 
-  const { data, isLoading, mutate } = swr(`/api/${search ? `search?q=${query}&pageNumber=${pageNumber}` : `convos?pageNumber=${pageNumber}`}`, onSuccess, {
+  const onSearchSuccess = (data, expectedPage) => {
+    const res = data;
+    dispatch(setConvos({ convos: res.conversations, searchFetch: true }));
+    if (expectedPage) {
+      setPage(expectedPage);
+    }
+    setPage(res.pageNumber);
+    setPages(res.pages);
+  };
+
+  const clearSearch = () => {
+    setPage(1);
+    dispatch(refreshConversation());
+  };
+
+  const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, {
     revalidateOnMount: false,
-    revalidateIfStale: !search,
-    revalidateOnFocus: !search,
-    revalidateOnReconnect: !search,
-    populateCache: !search,
+    // populateCache: false,
+    // revalidateIfStale: false,
+    // revalidateOnFocus: false,
+    // revalidateOnReconnect : false,
   });
 
   const containerRef = useRef(null);
@@ -46,19 +73,29 @@ export default function Nav({ navVisible, setNavVisible }) {
   const nextPage = async () => {
     moveToTop();
 
-    dispatch(increasePage());
-    await mutate();
+    if (!search) {
+      setPage((prev) => prev + 1);
+      await mutate();
+    } else {
+      await fetch(query, +pageNumber + 1, _.partialRight(onSearchSuccess, +pageNumber + 1));
+    }
   };
 
   const previousPage = async () => {
     moveToTop();
 
-    dispatch(decreasePage());
-    await mutate();
+    if (!search) {
+      setPage((prev) => prev - 1);
+      await mutate();
+    } else {
+      await fetch(query, +pageNumber - 1, _.partialRight(onSearchSuccess, +pageNumber - 1));
+    }
   };
 
   useEffect(() => {
-    mutate();
+    if (!search) {
+      mutate();
+    }
   }, [pageNumber, conversationId, refreshConvoHint]);
 
   useEffect(() => {
@@ -114,16 +151,21 @@ export default function Nav({ navVisible, setNavVisible }) {
                     <Conversations
                       conversations={convos}
                       conversationId={conversationId}
-                      nextPage={nextPage}
-                      previousPage={previousPage}
                       moveToTop={moveToTop}
-                      pageNumber={pageNumber}
-                      pages={pages}
                     />
                   )}
+                  <Pages
+                    pageNumber={pageNumber}
+                    pages={pages}
+                    nextPage={nextPage}
+                    previousPage={previousPage}
+                  />
                 </div>
               </div>
-              <NavLinks />
+              <NavLinks
+                onSearchSuccess={onSearchSuccess}
+                clearSearch={clearSearch}
+              />
             </nav>
           </div>
         </div>