tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-25 05:00:16 +00:00
Code Issues Projects Releases Wiki Activity

Added invalid input message.

Browse Source
This commit is contained in:
n8detar 2022-04-18 09:00:53 -07:00
parent 46c6e7e925
commit a5c50fd690
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,8 @@ export const sendDownloads = async (token: string, input: string): Promise<Downl
method: "POST" method: "POST"
}); });
if (!response.ok) { if (!response.ok) {
throw new Error("Error adding content to the download queue."); // throw new Error("Error adding content to the download queue.");
// return response.json();
} }
return response.json(); return response.json();
}; };

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

@ -19,6 +19,7 @@ const TA_BASE_URL = getTAUrl();
type ViewStyle = "grid" | "list"; type ViewStyle = "grid" | "list";
type IgnoredStatus = boolean; type IgnoredStatus = boolean;
type FormHidden = boolean; type FormHidden = boolean;
type ErrorMessage = boolean;
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
@ -52,6 +53,7 @@ const Download: NextPage = () => {
const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false); const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
const [formHidden, setFormHidden] = useState<FormHidden>(true); const [formHidden, setFormHidden] = useState<FormHidden>(true);
const { const {
data: downloads, data: downloads,
error, error,
@ -62,13 +64,13 @@ const Download: NextPage = () => {
() => getDownloads(session.ta_token.token, ignoredStatus), () => getDownloads(session.ta_token.token, ignoredStatus),
{ {
enabled: !!session?.ta_token?.token, enabled: !!session?.ta_token?.token,
// refetchInterval: 1500, refetchInterval: 1500,
// refetchIntervalInBackground: false, refetchIntervalInBackground: false,
} }
); );
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 handleSetViewstyle = (selectedViewStyle: ViewStyle) => { const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
setViewStyle(selectedViewStyle); setViewStyle(selectedViewStyle);
@ -85,10 +87,14 @@ const Download: NextPage = () => {
setFormHidden(selectedFormHidden); setFormHidden(selectedFormHidden);
}; };
const handleSetErrorMessage = (selectedErrorMessage: ErrorMessage) => {
setErrorMessage(selectedErrorMessage);
};
const addToDownloadQueue = event => { const addToDownloadQueue = event => {
event.preventDefault(); event.preventDefault();
sendDownloads(session.ta_token.token, event.target.vid_url.value); sendDownloads(session.ta_token.token, event.target.vid_url.value).then((response) => !response.message ? handleSetErrorMessage(false) : handleSetErrorMessage(true));
handleSetFormHidden(true); errorMessage ? handleSetFormHidden(false) : handleSetFormHidden(true);
} }
return ( return (
@ -141,6 +147,9 @@ const Download: NextPage = () => {
<div className="show-form"> <div className="show-form">
<form id="hidden-form" onSubmit={addToDownloadQueue}> <form id="hidden-form" onSubmit={addToDownloadQueue}>
<textarea name="vid_url" cols={40} rows={4} placeholder="Enter Video Urls or IDs here..." required id="id_vid_url" spellCheck="false" /> <textarea name="vid_url" cols={40} rows={4} placeholder="Enter Video Urls or IDs here..." required id="id_vid_url" spellCheck="false" />
{errorMessage &&
<p><span className="danger-zone">Invalid input!</span></p>
}
<button type="submit">Add to download queue</button> <button type="submit">Add to download queue</button>
</form> </form>
</div> </div>
@ -197,7 +206,7 @@ const Download: NextPage = () => {
} }
<h3>Total videos: {downloads?.data?.length} {!downloads?.data?.length && <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 && <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}`}>
{downloads?.data && {!isLoading && !error && downloads?.data &&
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}`}>