tubearchivist
/
tubearchivist-frontend
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Handle no API endpoint and API failures.

This commit is contained in:
n8detar 2022-04-20 11:33:58 -07:00
parent db148dcdf3
commit d7c45ba966
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
tubearchivist/www/src/lib/getDownloads.ts
View File

@ -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, page: 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=${page}`, {
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json", "Content-Type": "application/json",
@ -12,10 +12,19 @@ export const getDownloads = async (token: string, filter: boolean): Promise<Down
mode: "no-cors", mode: "no-cors",
}, },
}); });
if (!response.ok) { if (response.ok) {
throw new Error("Error getting download queue information"); return response.json();
} else {
var error: Download = {
data: null,
config: null,
paginate: null,
message: response.statusText + " (" + response.status + ")",
}
// error = response.statusText + " (" + response.status + ");
// throw new Error(response.statusText + " (" + response.status + ")");
return error;
} }
return response.json();
}; };
export const sendDownloads = async (token: string, input: string): Promise<Download> => { export const sendDownloads = async (token: string, input: string): Promise<Download> => {

15
tubearchivist/www/src/pages/download.tsx
View File

@ -40,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
} }
await queryClient.prefetchQuery(["downloads", session.ta_token.token, false], () => await queryClient.prefetchQuery(["downloads", session.ta_token.token, false], () =>
getDownloads(session.ta_token.token, false) getDownloads(session.ta_token.token, false, 1)
); );
return { return {
@ -64,7 +64,7 @@ const Download: NextPage = () => {
refetch, refetch,
} = useQuery( } = useQuery(
["downloads", session.ta_token.token, ignoredStatus], ["downloads", session.ta_token.token, ignoredStatus],
() => getDownloads(session.ta_token.token, ignoredStatus), () => getDownloads(session.ta_token.token, ignoredStatus, page),
{ {
enabled: !!session?.ta_token?.token, enabled: !!session?.ta_token?.token,
refetchInterval: 1500, refetchInterval: 1500,
@ -116,6 +116,12 @@ const Download: NextPage = () => {
<h1>Downloads</h1> <h1>Downloads</h1>
</div> </div>
<div id="notifications"> <div id="notifications">
{downloads?.message &&
<div className="error notification">
<h3>{downloads?.message}</h3>
<p></p>
</div>
}
{errorMessage && {errorMessage &&
<div className="error notification"> <div className="error notification">
<h3>Failed to extract links.</h3> <h3>Failed to extract links.</h3>
@ -268,9 +274,9 @@ const Download: NextPage = () => {
<button onClick={() => sendDeleteAllQueuedIgnored(session.ta_token.token, "pending")} title="Delete all pending videos from the queue">Delete all queued</button> <button onClick={() => sendDeleteAllQueuedIgnored(session.ta_token.token, "pending")} title="Delete all pending videos from the queue">Delete all queued</button>
</div> </div>
} }
<h3>Total videos: {downloads?.data?.length} {!downloads?.data?.length && !ignoredStatus && <p>No videos queued for download. Press rescan subscriptions to check if there are any new videos.</p>}</h3> <h3>Total videos: {downloads?.data?.length ? downloads?.data?.length : 'N/A'} {!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>
<div className={`dl-list ${viewStyle}`}> <div className={`dl-list ${viewStyle}`}>
{!isLoading && !error && downloads?.data && {!isLoading && !error && !downloads?.message &&
downloads?.data?.map((video) => { downloads?.data?.map((video) => {
return ( return (
<div key={video?.youtube_id} className={`dl-item ${viewStyle}`}> <div key={video?.youtube_id} className={`dl-item ${viewStyle}`}>
@ -350,7 +356,6 @@ const Download: NextPage = () => {
{/* </div> */} {/* </div> */}
{/* {% endfor %} */} {/* {% endfor %} */}
{/* {% endif %} */} {/* {% endif %} */}
</div> </div>
</div> </div>
<div className="boxed-content"> <div className="boxed-content">