Update old pagination components props

discordplace · Mar 24, 2024 · 26d3904 · 26d3904
1 parent 1c13c71
commit 26d3904
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 66 deletions.
diff --git a/client/app/(emojis)/emojis/components/Hero/Emojis.jsx b/client/app/(emojis)/emojis/components/Hero/Emojis.jsx
@@ -12,7 +12,7 @@ import EmojiCard from '@/app/(emojis)/emojis/components/Hero/EmojiCard';
 import EmojiPackageCard from '@/app/(emojis)/emojis/components/Hero/EmojiPackageCard';
 
 export default function Emojis() {
-  const { page, setPage, search, setSearch, loading, emojis, fetchEmojis, maxReached, setSort, setCategory } = useSearchStore(useShallow(state => ({
+  const { page, setPage, search, setSearch, loading, emojis, fetchEmojis, maxReached, setSort, setCategory, totalEmojis, limit } = useSearchStore(useShallow(state => ({
     page: state.page,
     setPage: state.setPage,
     search: state.search,
@@ -22,7 +22,9 @@ export default function Emojis() {
     fetchEmojis: state.fetchEmojis,
     maxReached: state.maxReached,
     setSort: state.setSort,
-    setCategory: state.setCategory
+    setCategory: state.setCategory,
+    totalEmojis: state.totalEmojis,
+    limit: state.limit
   })));
 
   const emojiCardTransition = {
@@ -60,17 +62,7 @@ export default function Emojis() {
       opacity: 0
     },
   };
-
-  function next(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page + 1));
-    fetchEmojis(search);
-  }
-
-  function previous(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page - 1));
-    fetchEmojis(search);
-  }
-
+
   const showPagination = !loading && emojis.length > 0;
 
   return (
@@ -137,7 +129,16 @@ export default function Emojis() {
 
         <div className='flex items-center justify-center w-full' key='pagination'> 
           {showPagination && (
-            <Pagination page={page} next={next} previous={previous} maxReached={maxReached} loading={loading} />
+            <Pagination 
+              page={page} 
+              setPage={newPage => {
+                setPage(newPage);
+                fetchEmojis(search);
+              }} 
+              loading={loading} 
+              total={totalEmojis} 
+              limit={limit} 
+            />
           )}
         </div>
       </AnimatePresence>

diff --git a/client/app/(profiles)/profiles/components/Hero/Profiles/index.jsx b/client/app/(profiles)/profiles/components/Hero/Profiles/index.jsx
@@ -12,27 +12,18 @@ import Pagination from '@/app/components/Pagination';
 
 export default function Profiles() {
 
-  const { search, setSearch, profiles, fetchProfiles, loading, page, setPage, maxReached } = useSearchStore(useShallow(state => ({ 
+  const { search, setSearch, profiles, fetchProfiles, loading, page, setPage, totalProfiles, limit } = useSearchStore(useShallow(state => ({ 
     search: state.search,
     setSearch: state.setSearch,
     profiles: state.profiles,
     fetchProfiles: state.fetchProfiles,
     loading: state.loading,
     page: state.page,
     setPage: state.setPage,
-    maxReached: state.maxReached
+    totalProfiles: state.totalProfiles,
+    limit: state.limit
   })));
 
-  function next(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page + 1));
-    fetchProfiles(search);
-  }
-
-  function previous(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page - 1));
-    fetchProfiles(search);
-  }
-
   const showPagination = !loading && profiles.length > 0;
 
   const profileCardTransition = {
@@ -132,7 +123,16 @@ export default function Profiles() {
           )}
 
           {showPagination && (
-            <Pagination page={page} next={next} previous={previous} maxReached={maxReached} loading={loading} />
+            <Pagination 
+              page={page} 
+              setPage={newPage => {
+                setPage(newPage);
+                fetchProfiles(search);
+              }} 
+              loading={loading} 
+              total={totalProfiles} 
+              limit={limit} 
+            />          
           )}
         </AnimatePresence>
       </section>

diff --git a/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx b/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx
@@ -11,27 +11,20 @@ import cn from '@/lib/cn';
 
 export default function Reviews({ server }) {
   const [page, setPage] = useState(1);
-  const maxPages = server.reviews.length / 6;
-  const [reviews, setReviews] = useState(server.reviews.slice(0, 6));
+  const limit = 6;
+  const maxPages = server.reviews.length / limit;
+  const [reviews, setReviews] = useState(server.reviews.slice(0, limit));
   const [loading, setLoading] = useState(false);
   const [selectedRating, setSelectedRating] = useState(0);
   const [reviewSubmitted, setReviewSubmitted] = useState(false);
   const [review, setReview] = useState('');
   const [hoveredRating, setHoveredRating] = useState(0);
   const user = useAuthStore(state => state.user);
   const loggedIn = useAuthStore(state => state.loggedIn);
-
-  function next(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page + 1));
-  }
-
-  function previous(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page - 1));
-  }
 
   useEffect(() => {
-    const start = (page - 1) * 12;
-    const end = start + 12;
+    const start = (page - 1) * limit;
+    const end = start + limit;
     setReviews(server.reviews.slice(start, end));
 
     // eslint-disable-next-line
@@ -229,7 +222,13 @@ export default function Reviews({ server }) {
 
       {maxPages > 1 && (
         <div className='flex items-center justify-center w-full'>
-          <Pagination page={page} next={next} previous={previous} maxReached={page >= maxPages} loading={false} />
+          <Pagination 
+            page={page} 
+            setPage={setPage} 
+            loading={loading} 
+            total={server.reviews.length} 
+            limit={limit} 
+          />
         </div>
       )}
     </div>

diff --git a/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx b/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx
@@ -6,20 +6,13 @@ import { TbSquareRoundedChevronUp } from 'react-icons/tb';
 
 export default function TopVoters({ server }) {
   const [page, setPage] = useState(1);
-  const maxPages = server.voters.length / 12;
-  const [voters, setVoters] = useState(server.voters.slice(0, 12));
-
-  function next(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page + 1));
-  }
-
-  function previous(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page - 1));
-  }
+  const limit = 12;
+  const maxPages = server.voters.length / limit;
+  const [voters, setVoters] = useState(server.voters.slice(0, limit));
 
   useEffect(() => {
-    const start = (page - 1) * 12;
-    const end = start + 12;
+    const start = (page - 1) * limit;
+    const end = start + limit;
     setVoters(server.voters.slice(start, end));
 
     // eslint-disable-next-line
@@ -76,7 +69,13 @@ export default function TopVoters({ server }) {
 
         {maxPages > 1 && (
           <div className='flex items-center justify-center w-full'>
-            <Pagination page={page} next={next} previous={previous} maxReached={page >= maxPages} loading={false} />
+            <Pagination 
+              page={page} 
+              setPage={setPage}
+              loading={false} 
+              total={server.voters.length} 
+              limit={limit} 
+            />
           </div>
         )}
       </div>

diff --git a/client/app/(servers)/servers/components/Hero/index.jsx b/client/app/(servers)/servers/components/Hero/index.jsx
@@ -27,7 +27,7 @@ const SourceSerif4 = Source_Serif_4({ subsets: ['latin'] });
 
 export default function Hero() {
 
-  const { category, setCategory, sort, setSort, search, setSearch, loading, servers, fetchServers, page, setPage, maxReached } = useSearchStore(useShallow(state => ({
+  const { category, setCategory, sort, setSort, search, setSearch, loading, servers, fetchServers, page, setPage, totalServers, limit } = useSearchStore(useShallow(state => ({
     category: state.category,
     setCategory: state.setCategory,
     sort: state.sort,
@@ -39,7 +39,8 @@ export default function Hero() {
     fetchServers: state.fetchServers,
     page: state.page,
     setPage: state.setPage,
-    maxReached: state.maxReached
+    totalServers: state.totalServers,
+    limit: state.limit
   })));
 
   const [categoryDrawerOpenState, setCategoryDrawerOpenState] = useState(false);
@@ -71,16 +72,6 @@ export default function Hero() {
 
   const showPagination = !loading && servers.length > 0;
 
-  function next(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page + 1));
-    fetchServers(search);
-  }
-
-  function previous(selectedPage) {
-    setPage(selectedPage ? selectedPage : (page - 1));
-    fetchServers(search);
-  }
-
   return (
     <div className="z-0 relative flex flex-col pt-[14rem] items-center px-4 sm:px-0">
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
@@ -230,7 +221,16 @@ export default function Hero() {
 
             {showPagination && (
               <div className='flex justify-center w-full'>
-                <Pagination page={page} next={next} previous={previous} maxReached={maxReached} loading={loading} />
+                <Pagination 
+                  page={page} 
+                  setPage={newPage => {
+                    setPage(newPage);
+                    fetchServers(search);
+                  }} 
+                  loading={loading} 
+                  total={totalServers} 
+                  limit={limit} 
+                />
               </div>
             )}
           </AnimatePresence>