mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-22 03:40:14 +00:00
Added WIP Pagination
This commit is contained in:
parent
3c8434eb42
commit
e5fc4a3282
@ -3,8 +3,8 @@ import { getTAUrl } from "./constants";
|
|||||||
|
|
||||||
const TA_BASE_URL = getTAUrl();
|
const TA_BASE_URL = getTAUrl();
|
||||||
|
|
||||||
export const getDownloads = async (token: string, filter: boolean): Promise<Download> => {
|
export const getDownloads = async (token: string, filter: boolean, pageNumber: number): Promise<Download> => {
|
||||||
const response = await fetch(`${TA_BASE_URL.server}/api/download/?filter=${filter ? 'ignore' : 'pending'}`, {
|
const response = await fetch(`${TA_BASE_URL.server}/api/download/?filter=${filter ? 'ignore' : 'pending'}&page=${pageNumber}`, {
|
||||||
headers: {
|
headers: {
|
||||||
Accept: "application/json",
|
Accept: "application/json",
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
|
@ -22,6 +22,7 @@ type ViewStyle = "grid" | "list";
|
|||||||
type IgnoredStatus = boolean;
|
type IgnoredStatus = boolean;
|
||||||
type FormHidden = boolean;
|
type FormHidden = boolean;
|
||||||
type ErrorMessage = string;
|
type ErrorMessage = string;
|
||||||
|
type PageNumber = number;
|
||||||
|
|
||||||
export const getServerSideProps: GetServerSideProps = async (context) => {
|
export const getServerSideProps: GetServerSideProps = async (context) => {
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
@ -36,8 +37,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
await queryClient.prefetchQuery(["downloads", session.ta_token.token, false], () =>
|
await queryClient.prefetchQuery(["downloads", session.ta_token.token, false, 1], () =>
|
||||||
getDownloads(session.ta_token.token, false)
|
getDownloads(session.ta_token.token, false, 1)
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -52,6 +53,7 @@ const Download: NextPage = () => {
|
|||||||
const { data: session } = useSession();
|
const { data: session } = useSession();
|
||||||
|
|
||||||
const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
|
const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
|
||||||
|
const [pageNumber, setPageNumber] = useState<PageNumber>(1);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: downloads,
|
data: downloads,
|
||||||
@ -59,8 +61,8 @@ const Download: NextPage = () => {
|
|||||||
isLoading,
|
isLoading,
|
||||||
refetch,
|
refetch,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
["downloads", session.ta_token.token, ignoredStatus],
|
["downloads", session.ta_token.token, ignoredStatus, pageNumber],
|
||||||
() => getDownloads(session.ta_token.token, ignoredStatus),
|
() => getDownloads(session.ta_token.token, ignoredStatus, pageNumber),
|
||||||
{
|
{
|
||||||
enabled: !!session?.ta_token?.token,
|
enabled: !!session?.ta_token?.token,
|
||||||
refetchInterval: 1500,
|
refetchInterval: 1500,
|
||||||
@ -88,6 +90,11 @@ const Download: NextPage = () => {
|
|||||||
const handleSetErrorMessage = (selectedErrorMessage: ErrorMessage) => {
|
const handleSetErrorMessage = (selectedErrorMessage: ErrorMessage) => {
|
||||||
setErrorMessage(selectedErrorMessage);
|
setErrorMessage(selectedErrorMessage);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSetPageNumber = (selectedPageNumber: PageNumber) => {
|
||||||
|
setPageNumber(selectedPageNumber);
|
||||||
|
};
|
||||||
|
|
||||||
const addToDownloadQueue = event => {
|
const addToDownloadQueue = event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
sendDownloads(session.ta_token.token, event.target.vid_url.value).then(() => {
|
sendDownloads(session.ta_token.token, event.target.vid_url.value).then(() => {
|
||||||
@ -284,7 +291,7 @@ const Download: NextPage = () => {
|
|||||||
<button onClick={() => handleDeleteAllQueuedIgnored(session.ta_token.token, "pending")} title="Remove all videos from the queue.">Remove all queued</button>
|
<button onClick={() => handleDeleteAllQueuedIgnored(session.ta_token.token, "pending")} title="Remove all videos from the queue.">Remove all queued</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<h3>Total videos: {downloads?.data?.length} {!downloads?.data?.length && !downloads?.message && !ignoredStatus && <p>No videos queued for download. Press rescan subscriptions to check if there are any new videos.</p>}</h3>
|
<h3>Total videos: {downloads?.paginate?.total_hits} {!downloads?.paginate?.total_hits && !downloads?.message && !ignoredStatus && <p>No videos queued for download. Press rescan subscriptions to check if there are any new videos.</p>}</h3>
|
||||||
<div className={`dl-list ${viewStyle}`}>
|
<div className={`dl-list ${viewStyle}`}>
|
||||||
{!isLoading && !error && !downloads?.message &&
|
{!isLoading && !error && !downloads?.message &&
|
||||||
downloads?.data?.map((video) => {
|
downloads?.data?.map((video) => {
|
||||||
@ -368,6 +375,31 @@ const Download: NextPage = () => {
|
|||||||
{/* {% endif %} */}
|
{/* {% endif %} */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="boxed-content">
|
||||||
|
<div className="pagination">
|
||||||
|
{pageNumber != 1 ? <a className="pagination-item" onClick={() => handleSetPageNumber(1)}>First</a> : ``}
|
||||||
|
{downloads?.paginate?.prev_pages &&
|
||||||
|
downloads?.paginate?.prev_pages?.map((page) => {
|
||||||
|
return (
|
||||||
|
<a key={`${page}`} className="pagination-item" onClick={() => handleSetPageNumber(page)}>{page}</a>
|
||||||
|
)})
|
||||||
|
}
|
||||||
|
<span>< Page {pageNumber}</span>
|
||||||
|
<span> ></span>
|
||||||
|
{downloads?.paginate?.next_pages &&
|
||||||
|
downloads?.paginate?.next_pages?.map((page) => {
|
||||||
|
return (
|
||||||
|
<a key={`${page}`} className="pagination-item" onClick={() => handleSetPageNumber(page)}>{page}</a>
|
||||||
|
)})
|
||||||
|
}
|
||||||
|
{downloads?.paginate?.next_pages?.forEach((page) =>
|
||||||
|
<a className="pagination-item" onClick={() => handleSetPageNumber(page)}>{page}</a>
|
||||||
|
)}
|
||||||
|
{downloads?.paginate?.last_page &&
|
||||||
|
<a className="pagination-item" onClick={() => handleSetPageNumber(downloads?.paginate?.last_page)}> Last ({downloads?.paginate?.last_page}) </a>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */}
|
{/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */}
|
||||||
</Layout>
|
</Layout>
|
||||||
</>
|
</>
|
||||||
|
@ -1,10 +1,21 @@
|
|||||||
export interface Download {
|
export interface Download {
|
||||||
data: Datum[];
|
data: Datum[];
|
||||||
config: Config;
|
config: Config;
|
||||||
paginate: boolean;
|
paginate: Paginate;
|
||||||
message: string;
|
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 {
|
// export interface DownloadResponse {
|
||||||
// data: Datum[];
|
// data: Datum[];
|
||||||
// message: string;
|
// message: string;
|
||||||
|
Loading…
Reference in New Issue
Block a user