convo fetching in increments of 12

src/components/Conversations/index.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations({ conversations, conversationId }) {
+export default function Conversations({ conversations, conversationId, showMore }) {
+  const clickHandler = async (e) => {
+    e.preventDefault();
+    await showMore();
+  };
 
   return (
     <>
@@ -29,8 +33,11 @@ export default function Conversations({ conversations, conversationId }) {
             />
           );
         })}
-      {conversations && conversations.length >= 12 && (
-        <button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
+      {conversations && conversations.length >= 12 && conversations.length % 12 === 0 && (
+        <button
+          onClick={clickHandler}
+          className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2"
+        >
           Show more
         </button>
       )}

src/components/Nav/index.jsx

@@ -1,20 +1,46 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import NewChat from './NewChat';
 import Spinner from '../svg/Spinner';
 import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
 import useDidMountEffect from '~/hooks/useDidMountEffect';
 import { swr } from '~/utils/fetchers';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { incrementPage } from '~/store/convoSlice';
 
 export default function Nav() {
+  const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId } = useSelector((state) => state.convo);
-  const { data, isLoading, mutate } = swr('http://localhost:3050/convos');
+  const { conversationId, pageNumber } = useSelector((state) => state.convo);
+  const { data, isLoading, mutate } = swr(
+    `http://localhost:3050/convos?pageNumber=${pageNumber}`
+  );
+  const containerRef = useRef(null);
+  const scrollPositionRef = useRef(null);
+
+  const showMore = async () => {
+    const container = containerRef.current;
+    if (container) {
+      scrollPositionRef.current = container.scrollTop;
+    }
+    dispatch(incrementPage());
+    await mutate();
+  };
 
   useDidMountEffect(() => mutate(), [conversationId]);
 
-  const containerClasses = isLoading
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (container && scrollPositionRef.current !== null) {
+      const { scrollHeight, clientHeight } = container;
+      const maxScrollTop = scrollHeight - clientHeight;
+
+      container.scrollTop = Math.min(maxScrollTop, scrollPositionRef.current);
+    }
+  }, [data]);
+
+  const containerClasses = isLoading && pageNumber === 1
     ? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
     : 'flex flex-col gap-2 text-gray-100 text-sm';
 
@@ -30,14 +56,17 @@ export default function Nav() {
               } border-b border-white/20`}
               onMouseEnter={() => setIsHovering(true)}
               onMouseLeave={() => setIsHovering(false)}
+              ref={containerRef}
             >
               <div className={containerClasses}>
-                {isLoading ? (
+                {isLoading && pageNumber === 1 ? (
                   <Spinner />
                 ) : (
                   <Conversations
                     conversations={data}
                     conversationId={conversationId}
+                    showMore={showMore}
+                    pageNumber={pageNumber}
                   />
                 )}
               </div>

src/store/convoSlice.js

@@ -10,7 +10,9 @@ const initialState = {
   invocationId: null,
   chatGptLabel: null,
   promptPrefix: null,
-  convosLoading: false
+  convosLoading: false,
+  pageNumber: 1,
+  convos: [],
 };
 
 const currentSlice = createSlice({
@@ -22,11 +24,14 @@ const currentSlice = createSlice({
     },
     setError: (state, action) => {
       state.error = action.payload;
+    },
+    incrementPage: (state) => {
+      state.pageNumber = state.pageNumber + 1;
     }
     // setConvos: (state, action) => state.convos = action.payload,
   }
 });
 
-export const { setConversation, setConvos, setError } = currentSlice.actions;
+export const { setConversation, setConvos, setError, incrementPage } = currentSlice.actions;
 
 export default currentSlice.reducer;