From e5fc4a3282d5521c960ddda352c660ba1a8d0620 Mon Sep 17 00:00:00 2001 From: n8detar Date: Thu, 21 Apr 2022 10:39:48 -0700 Subject: [PATCH] Added WIP Pagination --- tubearchivist/www/src/lib/getDownloads.ts | 4 +-- tubearchivist/www/src/pages/download.tsx | 42 ++++++++++++++++++++--- tubearchivist/www/src/types/download.ts | 13 ++++++- 3 files changed, 51 insertions(+), 8 deletions(-) diff --git a/tubearchivist/www/src/lib/getDownloads.ts b/tubearchivist/www/src/lib/getDownloads.ts index ef81fa0..02f9ead 100755 --- a/tubearchivist/www/src/lib/getDownloads.ts +++ b/tubearchivist/www/src/lib/getDownloads.ts @@ -3,8 +3,8 @@ import { getTAUrl } from "./constants"; const TA_BASE_URL = getTAUrl(); -export const getDownloads = async (token: string, filter: boolean): Promise => { - const response = await fetch(`${TA_BASE_URL.server}/api/download/?filter=${filter ? 'ignore' : 'pending'}`, { +export const getDownloads = async (token: string, filter: boolean, pageNumber: number): Promise => { + const response = await fetch(`${TA_BASE_URL.server}/api/download/?filter=${filter ? 'ignore' : 'pending'}&page=${pageNumber}`, { headers: { Accept: "application/json", "Content-Type": "application/json", diff --git a/tubearchivist/www/src/pages/download.tsx b/tubearchivist/www/src/pages/download.tsx index 2cda7ed..0761ebc 100755 --- a/tubearchivist/www/src/pages/download.tsx +++ b/tubearchivist/www/src/pages/download.tsx @@ -22,6 +22,7 @@ type ViewStyle = "grid" | "list"; type IgnoredStatus = boolean; type FormHidden = boolean; type ErrorMessage = string; +type PageNumber = number; export const getServerSideProps: GetServerSideProps = async (context) => { const queryClient = new QueryClient(); @@ -36,8 +37,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }; } - await queryClient.prefetchQuery(["downloads", session.ta_token.token, false], () => - getDownloads(session.ta_token.token, false) + await queryClient.prefetchQuery(["downloads", session.ta_token.token, false, 1], () => + getDownloads(session.ta_token.token, false, 1) ); return { @@ -52,6 +53,7 @@ const Download: NextPage = () => { const { data: session } = useSession(); const [ignoredStatus, setIgnoredStatus] = useState(false); + const [pageNumber, setPageNumber] = useState(1); const { data: downloads, @@ -59,8 +61,8 @@ const Download: NextPage = () => { isLoading, refetch, } = useQuery( - ["downloads", session.ta_token.token, ignoredStatus], - () => getDownloads(session.ta_token.token, ignoredStatus), + ["downloads", session.ta_token.token, ignoredStatus, pageNumber], + () => getDownloads(session.ta_token.token, ignoredStatus, pageNumber), { enabled: !!session?.ta_token?.token, refetchInterval: 1500, @@ -88,6 +90,11 @@ const Download: NextPage = () => { const handleSetErrorMessage = (selectedErrorMessage: ErrorMessage) => { setErrorMessage(selectedErrorMessage); }; + + const handleSetPageNumber = (selectedPageNumber: PageNumber) => { + setPageNumber(selectedPageNumber); + }; + const addToDownloadQueue = event => { event.preventDefault(); sendDownloads(session.ta_token.token, event.target.vid_url.value).then(() => { @@ -284,7 +291,7 @@ const Download: NextPage = () => { } -

Total videos: {downloads?.data?.length} {!downloads?.data?.length && !downloads?.message && !ignoredStatus &&

No videos queued for download. Press rescan subscriptions to check if there are any new videos.

}

+

Total videos: {downloads?.paginate?.total_hits} {!downloads?.paginate?.total_hits && !downloads?.message && !ignoredStatus &&

No videos queued for download. Press rescan subscriptions to check if there are any new videos.

}

{!isLoading && !error && !downloads?.message && downloads?.data?.map((video) => { @@ -368,6 +375,31 @@ const Download: NextPage = () => { {/* {% endif %} */}
+
+
+ {pageNumber != 1 ? handleSetPageNumber(1)}>First : ``} + {downloads?.paginate?.prev_pages && + downloads?.paginate?.prev_pages?.map((page) => { + return ( + handleSetPageNumber(page)}>{page} + )}) + } + < Page {pageNumber} + > + {downloads?.paginate?.next_pages && + downloads?.paginate?.next_pages?.map((page) => { + return ( + handleSetPageNumber(page)}>{page} + )}) + } + {downloads?.paginate?.next_pages?.forEach((page) => + handleSetPageNumber(page)}>{page} + )} + {downloads?.paginate?.last_page && + handleSetPageNumber(downloads?.paginate?.last_page)}> Last ({downloads?.paginate?.last_page}) + } +
+
{/* */} diff --git a/tubearchivist/www/src/types/download.ts b/tubearchivist/www/src/types/download.ts index a3eb771..c14eadb 100755 --- a/tubearchivist/www/src/types/download.ts +++ b/tubearchivist/www/src/types/download.ts @@ -1,10 +1,21 @@ export interface Download { data: Datum[]; config: Config; - paginate: boolean; + paginate: Paginate; message: string; } +export interface Paginate { + page_size: number; + page_from: number; + prev_pages: number[]; + current_page: number; + max_hits: boolean; + last_page: number; + next_pages: number[]; + total_hits: number; +} + // export interface DownloadResponse { // data: Datum[]; // message: string;