feat: pagination in nav

client/src/components/Conversations/index.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations({ conversations, conversationId, showMore }) {
-  const clickHandler = async (e) => {
+export default function Conversations({ conversations, conversationId, pageNumber, pages, nextPage, previousPage, moveToTop }) {
+  const clickHandler = (func) => async (e) => {
     e.preventDefault();
-    await showMore();
+    await func();
   };
 
   return (
@@ -33,18 +33,29 @@ export default function Conversations({ conversations, conversationId, showMore
               chatGptLabel={convo.chatGptLabel}
               promptPrefix={convo.promptPrefix}
               bingData={bingData}
-              retainView={showMore.bind(null, false)}
+              retainView={moveToTop}
             />
           );
         })}
-      {conversations?.length >= 12 && (
-        <button
-          onClick={clickHandler}
-          className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2"
-        >
-          Show more
-        </button>
-      )}
+        <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/MobileNav.jsx

@@ -7,7 +7,7 @@ import { setText } from '~/store/textSlice';
 
 export default function MobileNav({ setNavVisible }) {
   const dispatch = useDispatch();
-  const { conversationId, convos } = useSelector((state) => state.convo);
+  const { conversationId, convos, title } = useSelector((state) => state.convo);
 
   const toggleNavVisible = () => {
     setNavVisible((prev) => {
@@ -22,8 +22,6 @@ export default function MobileNav({ setNavVisible }) {
     dispatch(setSubmission({}));
   }
 
-  const title = convos?.find(element => element?.conversationId == conversationId)?.title || 'New Chat';
-
   return (
     <div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
       <button
@@ -64,7 +62,7 @@ export default function MobileNav({ setNavVisible }) {
           />
         </svg>
       </button>
-      <h1 className="flex-1 text-center text-base font-normal">{title}</h1>
+      <h1 className="flex-1 text-center text-base font-normal">{title || 'New Chat'}</h1>
       <button
         type="button"
         className="px-3"

client/src/components/Nav/index.jsx

@@ -6,37 +6,53 @@ import NavLinks from './NavLinks';
 import useDidMountEffect from '~/hooks/useDidMountEffect';
 import { swr } from '~/utils/fetchers';
 import { useDispatch, useSelector } from 'react-redux';
-import { incrementPage, setConvos } from '~/store/convoSlice';
+import { increasePage, decreasePage, setPage, setConvos, setPages } from '~/store/convoSlice';
 
 export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId, convos, pageNumber, refreshConvoHint } = useSelector((state) => state.convo);
+  const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector((state) => state.convo);
   const onSuccess = (data) => {
-    dispatch(setConvos(data));
+    const { conversations, pages } = data;
+
+    if (pageNumber > pages)
+      dispatch(setPage(pages));
+    else 
+      dispatch(setConvos(conversations));
+    dispatch(setPages(pages));
   };
 
   const { data, isLoading, mutate } = swr(
     `/api/convos?pageNumber=${pageNumber}`,
-    onSuccess
+    onSuccess,
+    {revalidateOnMount: false}
   );
 
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
 
-  const showMore = async (increment = true) => {
+  const moveToTop = () => {
     const container = containerRef.current;
     if (container) {
       scrollPositionRef.current = container.scrollTop;
     }
+  }
 
-    if (increment) {
-      dispatch(incrementPage());
-      await mutate();
-    }
+  const nextPage = async () => {
+    moveToTop()
+
+    dispatch(increasePage());
+    await mutate();
   };
 
-  useDidMountEffect(() => mutate(), [conversationId, refreshConvoHint]);
+  const previousPage = async () => {
+    moveToTop()
+    
+    dispatch(decreasePage());
+    await mutate();
+  };
+
+  useEffect(() => {mutate()}, [pageNumber, conversationId, refreshConvoHint]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -86,8 +102,11 @@ export default function Nav({ navVisible, setNavVisible }) {
                     <Conversations
                       conversations={convos}
                       conversationId={conversationId}
-                      showMore={showMore}
+                      nextPage={nextPage}
+                      previousPage={previousPage}
+                      moveToTop={moveToTop}
                       pageNumber={pageNumber}
+                      pages={pages}
                     />
                   )}
                 </div>