fixed pagination

streamethorg · Aug 12, 2024 · 3ec9e26 · 3ec9e26
1 parent 54f1c7d
commit 3ec9e26
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 32 deletions.
diff --git a/packages/app/app/[organization]/videos/components/ArchiveVideos.tsx b/packages/app/app/[organization]/videos/components/ArchiveVideos.tsx
@@ -5,29 +5,28 @@ import Pagination from './pagination';
 import { useEffect, useState } from 'react';
 import { IExtendedSession, IPagination } from '@/lib/types';
 import { fetchAllSessions } from '@/lib/services/sessionService';
-import ArchiveVideoSkeleton from '../../../[organization]/livestream/components/ArchiveVideosSkeleton';
 
 const ArchiveVideos = ({
   organizationSlug,
   event,
   searchQuery,
-  page,
 }: {
   organizationSlug?: string;
   event?: string;
   searchQuery?: string;
-  page?: number;
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [videos, setVideos] = useState<IExtendedSession[]>([]);
+  const [pagination, setPagination] = useState<IPagination | null>(null);
   const [currentSearchQuery, setCurrentSearchQuery] = useState('');
-  const [pagination, setPagination] = useState<IPagination>({
-    currentPage: 1,
-    totalPages: 0,
-    totalItems: 0,
-    limit: 0,
-  });
-  useEffect(() => {
+
+  const fetchSessions = ({
+    page = 1,
+    reset,
+  }: {
+    page?: number;
+    reset?: boolean;
+  }) => {
     setIsLoading(true);
     fetchAllSessions({
       organizationSlug,
@@ -36,12 +35,11 @@ const ArchiveVideos = ({
       onlyVideos: true,
       published: true,
       searchQuery,
-      page: Number(page || 1),
+      page,
     })
       .then((data) => {
-        if (searchQuery && searchQuery !== currentSearchQuery) {
+        if (reset) {
           setVideos(data.sessions);
-          setCurrentSearchQuery(searchQuery);
         } else {
           setVideos([...videos, ...data.sessions]);
         }
@@ -50,7 +48,17 @@ const ArchiveVideos = ({
       .finally(() => {
         setIsLoading(false);
       });
-  }, [organizationSlug, event, searchQuery, page]);
+  };
+
+  useEffect(() => {
+    fetchSessions({
+      page: 1,
+      reset: searchQuery !== currentSearchQuery,
+    });
+    if (searchQuery && searchQuery !== currentSearchQuery) {
+      setCurrentSearchQuery(searchQuery);
+    }
+  }, [searchQuery]);
 
   if (Videos.length === 0) {
     return (
@@ -67,7 +75,7 @@ const ArchiveVideos = ({
     <>
       <Videos OrganizationSlug={organizationSlug} videos={videos} />
       <Pagination
-        setPagination={setPagination}
+        fetch={fetchSessions}
         pagination={pagination}
         isLoading={isLoading}
       />

diff --git a/packages/app/app/[organization]/videos/components/pagination.tsx b/packages/app/app/[organization]/videos/components/pagination.tsx
@@ -6,40 +6,43 @@ import { useEffect } from 'react';
 
 const Pagination = ({
   pagination,
-  setPagination,
+  fetch,
   isLoading,
 }: {
-  pagination: IPagination;
-  setPagination: (pagination: IPagination) => void;
+  pagination: IPagination | null;
+  fetch: (params: { page: number }) => void;
   isLoading: boolean;
 }) => {
-  const [jumpPage, setJumpPage] = useState(pagination.currentPage);
-  const { handleTermChange, searchParams } = useSearchParams();
-  const currentPage = Number(searchParams.get('page')) || 1;
-
   // trigger when reaching bottom of the page
   useEffect(() => {
     const handleScroll = () => {
+      console.log(
+        isLoading,
+        window.innerHeight + document.documentElement.scrollTop + 1 <
+          document.documentElement.offsetHeight
+      );
       if (isLoading) return;
-
       if (
         window.innerHeight + document.documentElement.scrollTop + 1 <
         document.documentElement.offsetHeight
       ) {
         return;
       }
-      if (currentPage < pagination.totalPages) {
-        setPagination({
-          currentPage: currentPage + 1,
-          totalPages: pagination.totalPages,
-          totalItems: pagination.totalItems,
-          limit: pagination.limit,
-        });
+      console.log('fetching next page');
+      console.log(pagination);
+      if (
+        !pagination ||
+        pagination.currentPage === pagination.totalPages ||
+        pagination.totalPages === 0
+      ) {
+        return;
       }
+
+      fetch({ page: pagination.currentPage + 1 });
     };
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [currentPage, pagination.totalPages, handleTermChange]);
+  }, [pagination]);
 
   if (isLoading) {
     return <div className="flex justify-center items-center">Loading...</div>;

diff --git a/packages/app/lib/types.ts b/packages/app/lib/types.ts
@@ -86,7 +86,7 @@ export interface WatchPageProps {
 }
 
 export interface IPagination {
-  currentPage?: number;
+  currentPage: number;
   totalPages: number;
   totalItems: number;
   limit: number;