tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 03:40:14 +00:00
Code Issues Projects Releases Wiki Activity

Error Handling WIP

Browse Source
This commit is contained in:
n8detar 2022-04-21 08:15:57 -07:00
parent c6571674a8
commit eccf27a434
2 changed files with 17 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
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, page: number): Promise<Download> => { export const getDownloads = async (token: string, filter: boolean): Promise<Download> => {
const response = await fetch(`${TA_BASE_URL.server}/api/download/?filter=${filter ? 'ignore' : 'pending'}&page=${page}`, { const response = await fetch(`${TA_BASE_URL.server}/api/download/?filter=${filter ? 'ignore' : 'pending'}`, {
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json", "Content-Type": "application/json",
@ -12,18 +12,19 @@ export const getDownloads = async (token: string, filter: boolean, page: number)
mode: "no-cors", mode: "no-cors",
}, },
}); });
console.log(response.ok);
if (response.ok) { if (response.ok) {
return response.json(); return response.json();
} else { } else {
var error: Download = { // var error: Download = {
data: null, // data: null,
config: null, // config: null,
paginate: null, // paginate: null,
message: response.statusText + " (" + response.status + ")", // message: response.statusText + " (" + response.status + ")",
} // }
// error = response.statusText + " (" + response.status + "); // error = response.statusText + " (" + response.status + ");
// throw new Error(response.statusText + " (" + response.status + ")"); throw new Error(response.statusText + " (" + response.status + ")");
return error; // return error;
} }
}; };

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

@ -19,7 +19,6 @@ import { getTAUrl } from "../lib/constants";
const TA_BASE_URL = getTAUrl(); const TA_BASE_URL = getTAUrl();
type ViewStyle = "grid" | "list"; type ViewStyle = "grid" | "list";
type Page = number;
type IgnoredStatus = boolean; type IgnoredStatus = boolean;
type FormHidden = boolean; type FormHidden = boolean;
type ErrorMessage = boolean; type ErrorMessage = boolean;
@ -40,7 +39,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, 1) getDownloads(session.ta_token.token, false)
); );
return { return {
@ -55,7 +54,6 @@ const Download: NextPage = () => {
const { data: session } = useSession(); const { data: session } = useSession();
const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false); const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
const [formHidden, setFormHidden] = useState<FormHidden>(true);
const { const {
data: downloads, data: downloads,
@ -64,7 +62,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, page), () => getDownloads(session.ta_token.token, ignoredStatus),
{ {
enabled: !!session?.ta_token?.token, enabled: !!session?.ta_token?.token,
refetchInterval: 1500, refetchInterval: 1500,
@ -72,10 +70,9 @@ const Download: NextPage = () => {
} }
); );
const [formHidden, setFormHidden] = useState<FormHidden>(true);
const [viewStyle, setViewStyle] = useState<ViewStyle>(downloads?.config?.default_view?.downloads); const [viewStyle, setViewStyle] = useState<ViewStyle>(downloads?.config?.default_view?.downloads);
const [errorMessage, setErrorMessage] = useState<ErrorMessage>(false); const [errorMessage, setErrorMessage] = useState<ErrorMessage>(false);
const [page, setPage] = useState<Page>(1);
const handleSetViewstyle = (selectedViewStyle: ViewStyle) => { const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
setViewStyle(selectedViewStyle); setViewStyle(selectedViewStyle);
@ -94,12 +91,6 @@ const Download: NextPage = () => {
setErrorMessage(selectedErrorMessage); setErrorMessage(selectedErrorMessage);
}; };
const handleSetPage = (selectedPage: Page) => {
console.log(page);
setPage(selectedPage);
console.log(page);
};
const addToDownloadQueue = event => { const addToDownloadQueue = event => {
event.preventDefault(); event.preventDefault();
sendDownloads(session.ta_token.token, event.target.vid_url.value).then((response) => !response.message ? handleSetErrorMessage(false) : handleSetErrorMessage(true)); sendDownloads(session.ta_token.token, event.target.vid_url.value).then((response) => !response.message ? handleSetErrorMessage(false) : handleSetErrorMessage(true));
@ -116,7 +107,7 @@ const Download: NextPage = () => {
<h1>Downloads</h1> <h1>Downloads</h1>
</div> </div>
<div id="notifications"> <div id="notifications">
{downloads?.message && {error &&
<div className="error notification"> <div className="error notification">
<h3>{downloads?.message}</h3> <h3>{downloads?.message}</h3>
<p></p> <p></p>
@ -125,7 +116,7 @@ const Download: NextPage = () => {
{errorMessage && {errorMessage &&
<div className="error notification"> <div className="error notification">
<h3>Failed to extract links.</h3> <h3>Failed to extract links.</h3>
<p>Not a video, channel or playlist ID or URL</p> <p>Not a video, channel, playlist ID or URL</p>
</div> </div>
} }
{ {
@ -274,7 +265,7 @@ 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 : '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> <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>
<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) => {
@ -358,22 +349,6 @@ const Download: NextPage = () => {
{/* {% endif %} */} {/* {% endif %} */}
</div> </div>
</div> </div>
<div className="boxed-content">
<div className="pagination">
<a className="pagination-item" onClick={() => handleSetPage(1)}>First</a>
<a className="pagination-item" onClick={() => handleSetPage(2)}>2</a>
<span>&lt; Page 3</span>
<span> &gt;</span>
<a className="pagination-item" onClick={() => handleSetPage(4)}>4</a>
<a className="pagination-item" onClick={() => handleSetPage(5)}> Last (5) </a>
<a className="pagination-item" onClick={() => handleSetPage(5)}> Max (5) </a>
</div>
<div className="pagination">
<a className="pagination-item" href="?page=2">
Last (2)
</a>
</div>
</div>
{/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */} {/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */}
</Layout> </Layout>
</> </>