optimize convo paginations

models/Conversation.js

@@ -75,13 +75,14 @@ module.exports = {
   },
   // getConvos: async () => await Conversation.find({}).sort({ created: -1 }).exec(),
   getConvos: async (pageNumber = 1, pageSize = 12) => {
-    // const skip = (pageNumber - 1) * pageSize;
+    const skip = (pageNumber - 1) * pageSize;
-    const limit = pageNumber * pageSize;
+    // const limit = pageNumber * pageSize;
 
     const conversations = await Conversation.find({})
       .sort({ created: -1 })
-      // .skip(skip)
+      .skip(skip)
-      .limit(limit)
+      // .limit(limit)
+      .limit(pageSize)
       .exec();
 
     return conversations;

src/components/Nav/index.jsx

@@ -6,15 +6,19 @@ import NavLinks from './NavLinks';
 import useDidMountEffect from '~/hooks/useDidMountEffect';
 import { swr } from '~/utils/fetchers';
 import { useDispatch, useSelector } from 'react-redux';
-import { incrementPage } from '~/store/convoSlice';
+import { incrementPage, setConvos } from '~/store/convoSlice';
 
 export default function Nav() {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId, pageNumber } = useSelector((state) => state.convo);
+  const { conversationId, convos, pageNumber } = useSelector((state) => state.convo);
+  const onSuccess = (data) => {
+    dispatch(setConvos(data));
+  };
+
   const { data, isLoading, mutate } = swr(
     `http://localhost:3050/convos?pageNumber=${pageNumber}`
-  );
+  , onSuccess);
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
 
@@ -63,7 +67,7 @@ export default function Nav() {
                   <Spinner />
                 ) : (
                   <Conversations
-                    conversations={data}
+                    conversations={convos}
                     conversationId={conversationId}
                     showMore={showMore}
                     pageNumber={pageNumber}

src/store/convoSlice.js

@@ -27,8 +27,10 @@ const currentSlice = createSlice({
     },
     incrementPage: (state) => {
       state.pageNumber = state.pageNumber + 1;
-    }
+    },
-    // setConvos: (state, action) => state.convos = action.payload,
+    setConvos: (state, action) => {
+      state.convos = [...state.convos, ...action.payload];
+    },
   }
 });