From a98367d27ff97ff18551a55a65ec983c0c1b7cf3 Mon Sep 17 00:00:00 2001 From: Daniel Avila Date: Sun, 5 Mar 2023 14:41:50 -0500 Subject: [PATCH] convo fetching in increments of 12 --- README.md | 6 ++-- models/Conversation.js | 14 ++++++++- server/routes/convos.js | 3 +- src/components/Conversations/index.jsx | 13 ++++++-- src/components/Nav/index.jsx | 41 ++++++++++++++++++++++---- src/store/convoSlice.js | 9 ++++-- 6 files changed, 70 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index ae17173f50..dfc8933473 100644 --- a/README.md +++ b/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) diff --git a/models/Conversation.js b/models/Conversation.js index 111204aab3..e45ab68000 100644 --- a/models/Conversation.js +++ b/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); diff --git a/server/routes/convos.js b/server/routes/convos.js index 31749fa048..4b9320873f 100644 --- a/server/routes/convos.js +++ b/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) => { diff --git a/src/components/Conversations/index.jsx b/src/components/Conversations/index.jsx index fb0c32f046..f265a97483 100644 --- a/src/components/Conversations/index.jsx +++ b/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 && ( - )} diff --git a/src/components/Nav/index.jsx b/src/components/Nav/index.jsx index 119e2acee3..db85b7076c 100644 --- a/src/components/Nav/index.jsx +++ b/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} >
- {isLoading ? ( + {isLoading && pageNumber === 1 ? ( ) : ( )}
diff --git a/src/store/convoSlice.js b/src/store/convoSlice.js index fdc3d6e12f..15e73c1119 100644 --- a/src/store/convoSlice.js +++ b/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;