convo fetching in increments of 12

README.md

@@ -55,12 +55,12 @@ Here are my planned/recently finished features.
 - [x] 'Copy to clipboard' button for code blocks
 - [x] Customize prompt prefix/label (custom ChatGPT using official API)
 - [x] AI model change handling (start new convos within existing convo)
-- [ ] Server convo pagination (limit fetch and load more with 'show more' button)
+- [x] Server convo pagination (limit fetch and load more with 'show more' button)
+- [ ] Config file for easy startup
 - [ ] Bing AI Styling (for suggested responses, convo end, etc.)
 - [ ] Prompt Templates
 - [ ] Conversation/Prompt Search
-- [ ] Refactor/clean up code
-- [ ] Config file for easy startup
+- [ ] Refactor/clean up code (tech debt)
 - [ ] Mobile styling (half-finished)
 - [ ] Semantic Search Option (requires more tokens)
 

models/Conversation.js

@@ -73,7 +73,19 @@ module.exports = {
       return { message: 'Error updating conversation' };
     }
   },
-  getConvos: async () => await Conversation.find({}).sort({ created: -1 }).exec(),
+  // getConvos: async () => await Conversation.find({}).sort({ created: -1 }).exec(),
+  getConvos: async (pageNumber = 1, pageSize = 12) => {
+    // const skip = (pageNumber - 1) * pageSize;
+    const limit = pageNumber * pageSize;
+
+    const conversations = await Conversation.find({})
+      .sort({ created: -1 })
+      // .skip(skip)
+      .limit(limit)
+      .exec();
+
+    return conversations;
+  },
   deleteConvos: async (filter) => {
     let deleteCount = await Conversation.deleteMany(filter).exec();
     deleteCount.messages = await deleteMessages(filter);

server/routes/convos.js

@@ -3,7 +3,8 @@ const router = express.Router();
 const { getConvos, deleteConvos, updateConvo } = require('../../models/Conversation');
 
 router.get('/', async (req, res) => {
-  res.status(200).send(await getConvos());
+  const pageNumber = req.query.pageNumber || 1;
+  res.status(200).send(await getConvos(pageNumber));
 });
 
 router.post('/clear', async (req, res) => {

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;