From 29f9a4dd007066067b4d4cbaea9dd9fefd7f5554 Mon Sep 17 00:00:00 2001 From: nnivxix Date: Wed, 9 Oct 2024 15:05:09 +0700 Subject: [PATCH 1/5] wip: paginate page on watchlist movies --- app/watchlist/movie/page.tsx | 42 +++++++++++++++++++++++------------ src/components/Pagination.tsx | 30 +++++++++++++++++++++++++ src/utils/pagination-pages.ts | 38 +++++++++++++++++++++++++++++++ 3 files changed, 96 insertions(+), 14 deletions(-) create mode 100644 src/components/Pagination.tsx create mode 100644 src/utils/pagination-pages.ts diff --git a/app/watchlist/movie/page.tsx b/app/watchlist/movie/page.tsx index 7e1f63c..fd28a61 100644 --- a/app/watchlist/movie/page.tsx +++ b/app/watchlist/movie/page.tsx @@ -1,17 +1,18 @@ "use client" import BackdropCard from "@/components/BackdropCard"; +import Pagination from "@/components/Pagination"; import useFetch from "@/hooks/useFetch"; import useHead from "@/hooks/useHead"; import { useAccountStore } from "@/stores/account"; import type { SimpleMovie } from "@/types/movie" import type { Response } from "@/types/response" +import paginationPages from "@/utils/pagination-pages"; import Link from "next/link"; export default function Page() { - const { isAuthenticated } = useAccountStore(); - const { data: movies } = useFetch>(`/account/9578292/watchlist/movies`) + const { data: movies } = useFetch>(`/account/9578292/watchlist/movies`); useHead({ title: 'Vilm - Movies Watchlist', @@ -29,20 +30,33 @@ export default function Page() { ); } + // Todo: fix this to actual data + const pages = paginationPages(5, 19) return ( -
- {movies?.results.length && ( - movies.results.map((movie, index) => ( - - media={movie} - title={movie.title} - key={index} - className="lg:col-span-1 md:col-span-2 col-span-3" /> - )) - ) - - } +
+ +
+ {movies?.results.length && ( + movies.results.map((movie, index) => ( + + media={movie} + title={movie.title} + key={index} + className="lg:col-span-1 md:col-span-2 col-span-3" /> + )) + ) + + } +
+
+ + + {pages.length && ( + + + )} +
) } diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx new file mode 100644 index 0000000..fd5acb7 --- /dev/null +++ b/src/components/Pagination.tsx @@ -0,0 +1,30 @@ +"use client" + +import Link from "next/link" + +export default function Pagination({ pages }: { pages: (number | string)[] }) { + return ( +
+
+ {pages.length && pages.map((page, index) => ( + typeof page === "number" ? ( + + {page} + + ) : ( + + )) + )} +
+
+ ) +} diff --git a/src/utils/pagination-pages.ts b/src/utils/pagination-pages.ts new file mode 100644 index 0000000..bc08969 --- /dev/null +++ b/src/utils/pagination-pages.ts @@ -0,0 +1,38 @@ +const paginationPages = (currentPage: number, totalPages: number) => { + const pages = []; + const MAX_PAGES_TO_SHOW = 7; // Adjust this if you want to show more or fewer numbers + + if (totalPages <= MAX_PAGES_TO_SHOW) { + for (let i = 1; i <= totalPages; i++) { + pages.push(i); + } + } else { + if (currentPage <= 4) { + pages.push(1, 2, 3, 4, "...", totalPages - 1, totalPages); + } else if (currentPage > totalPages - 4) { + pages.push( + 1, + 2, + "...", + totalPages - 3, + totalPages - 2, + totalPages - 1, + totalPages + ); + } else { + pages.push( + 1, + "...", + currentPage - 1, + currentPage, + currentPage + 1, + "...", + totalPages + ); + } + } + + return pages; +}; + +export default paginationPages; From ea314f59fcd1a5e58bddfd1d17a18ca05f6b21ae Mon Sep 17 00:00:00 2001 From: nnivxix Date: Wed, 9 Oct 2024 15:31:50 +0700 Subject: [PATCH 2/5] feat: paginate page on watchlist movies --- app/watchlist/movie/page.tsx | 14 ++++++++------ src/components/Pagination.tsx | 18 +++++++++++------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/app/watchlist/movie/page.tsx b/app/watchlist/movie/page.tsx index fd28a61..bdb4704 100644 --- a/app/watchlist/movie/page.tsx +++ b/app/watchlist/movie/page.tsx @@ -8,11 +8,16 @@ import { useAccountStore } from "@/stores/account"; import type { SimpleMovie } from "@/types/movie" import type { Response } from "@/types/response" import paginationPages from "@/utils/pagination-pages"; +import { useSearchParams } from "next/navigation"; import Link from "next/link"; export default function Page() { - const { isAuthenticated } = useAccountStore(); - const { data: movies } = useFetch>(`/account/9578292/watchlist/movies`); + const searchParams = useSearchParams() + + const currentPage = searchParams.get('page') ?? '1' + + const { isAuthenticated, account } = useAccountStore(); + const { data: movies } = useFetch>(`/account/${account?.id}/watchlist/movies?page=${currentPage}&sort_by=created_at.desc`); useHead({ title: 'Vilm - Movies Watchlist', @@ -30,8 +35,7 @@ export default function Page() { ); } - // Todo: fix this to actual data - const pages = paginationPages(5, 19) + const pages = paginationPages(Number(currentPage), movies?.total_pages as number) return (
@@ -50,8 +54,6 @@ export default function Page() { }
- - {pages.length && ( diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx index fd5acb7..093edc7 100644 --- a/src/components/Pagination.tsx +++ b/src/components/Pagination.tsx @@ -1,20 +1,24 @@ "use client" -import Link from "next/link" +import { usePathname, useSearchParams } from "next/navigation" + export default function Pagination({ pages }: { pages: (number | string)[] }) { + const pathname = usePathname(); + const currentPage = useSearchParams().get("page") ?? "1"; + return ( -
-
+
+
{pages.length && pages.map((page, index) => ( typeof page === "number" ? ( - {page} - + ) : (