From 26d39046863b1893f6d427c53e67c048ba204d1d Mon Sep 17 00:00:00 2001 From: chimpdev Date: Sun, 24 Mar 2024 03:10:50 +0300 Subject: [PATCH] Update old pagination components props --- .../emojis/components/Hero/Emojis.jsx | 29 ++++++++++--------- .../components/Hero/Profiles/index.jsx | 26 ++++++++--------- .../servers/[id]/components/Tabs/Reviews.jsx | 25 ++++++++-------- .../[id]/components/Tabs/TopVoters.jsx | 25 ++++++++-------- .../servers/components/Hero/index.jsx | 26 ++++++++--------- 5 files changed, 65 insertions(+), 66 deletions(-) diff --git a/client/app/(emojis)/emojis/components/Hero/Emojis.jsx b/client/app/(emojis)/emojis/components/Hero/Emojis.jsx index a49b742f..f92bf005 100644 --- 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() {
{showPagination && ( - + { + setPage(newPage); + fetchEmojis(search); + }} + loading={loading} + total={totalEmojis} + limit={limit} + /> )}
diff --git a/client/app/(profiles)/profiles/components/Hero/Profiles/index.jsx b/client/app/(profiles)/profiles/components/Hero/Profiles/index.jsx index 5302fb09..a356cdfb 100644 --- a/client/app/(profiles)/profiles/components/Hero/Profiles/index.jsx +++ b/client/app/(profiles)/profiles/components/Hero/Profiles/index.jsx @@ -12,7 +12,7 @@ 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, @@ -20,19 +20,10 @@ export default function Profiles() { 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 && ( - + { + setPage(newPage); + fetchProfiles(search); + }} + loading={loading} + total={totalProfiles} + limit={limit} + /> )} diff --git a/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx b/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx index b0c8d90f..4efb8b5a 100644 --- a/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx +++ b/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx @@ -11,8 +11,9 @@ 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); @@ -20,18 +21,10 @@ export default function Reviews({ server }) { 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 && (
- = maxPages} loading={false} /> +
)} diff --git a/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx b/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx index ab5c3502..96eb5f8e 100644 --- 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 && (
- = maxPages} loading={false} /> +
)} diff --git a/client/app/(servers)/servers/components/Hero/index.jsx b/client/app/(servers)/servers/components/Hero/index.jsx index 21d3bca5..04bd22f7 100644 --- 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 (
@@ -230,7 +221,16 @@ export default function Hero() { {showPagination && (
- + { + setPage(newPage); + fetchServers(search); + }} + loading={loading} + total={totalServers} + limit={limit} + />
)}