fp/packages/next/app/components/upload-form.tsx

382 lines
17 KiB
TypeScript

'use client';
import { IVtuber } from "@/lib/vtubers";
import { IStream } from "@/lib/streams";
import { useSearchParams } from 'next/navigation';
import React, { useContext, useState, useEffect } from 'react';
import { UppyContext } from 'app/uppy';
import { LoginButton, useAuth } from '@/components/auth';
import { Dashboard } from '@uppy/react';
import styles from '@/assets/styles/fp.module.css'
import { projektMelodyEpoch } from "@/lib/constants";
import add from "date-fns/add";
import sub from "date-fns/sub";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle, faEraser, faPaperPlane, faSpinner, faX, faXmark } from "@fortawesome/free-solid-svg-icons";
import { useForm, useFieldArray, ValidationMode } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';
import qs from 'qs';
import { toast } from "react-toastify";
import { ErrorMessage } from "@hookform/error-message"
interface IUploadFormProps {
vtubers: IVtuber[];
}
interface IValidationResults {
valid: boolean;
issues: string[] | null;
}
interface IFormSchema extends Yup.InferType<typeof validationSchema> { };
const validationSchema = Yup.object().shape({
vtuber: Yup.number()
.required('VTuber is required'),
streamCuid: Yup.string().optional(),
date: Yup.date()
.typeError('Invalid date') // https://stackoverflow.com/a/72985532/1004931
.min(sub(projektMelodyEpoch, { days: 1 }), 'Date must be after February 7 2020')
.max(add(new Date(), { days: 1 }), 'Date cannot be in the future')
.required('Date is required'),
notes: Yup.string().optional(),
attribution: Yup.boolean().optional(),
files: Yup.array()
.of(
Yup.object().shape({
key: Yup.string().required('key is required'),
uploadId: Yup.string().required('uploadId is required')
}),
)
.min(1, 'At least one file is required'),
});
export default function UploadForm({ vtubers }: IUploadFormProps) {
const searchParams = useSearchParams();
const cuid = searchParams.get('cuid');
const uppy = useContext(UppyContext);
const { authData } = useAuth();
const formOptions = {
resolver: yupResolver(validationSchema),
mode: 'onChange' as keyof ValidationMode,
};
const {
register,
handleSubmit,
setError,
clearErrors,
formState: {
errors,
isValid,
isSubmitted,
isSubmitSuccessful,
isSubmitting
},
setValue,
watch,
reset
} = useForm(formOptions);
// useEffect(() => {
// if (!cuid) return;
// (async () => {
// console.log('query')
// const query = qs.stringify({
// filters: {
// cuid: {
// '$eq': cuid
// }
// }
// });
// const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/streams?${query}`);
// if (!res.ok) return;
// const matchingStream = (await res.json()).data as IStream;
// console.log(matchingStream);
// setValue('vtuber', matchingStream.attributes.vtuber.data.id);
// })();
// }, [cuid]);
// setValue('streamCuid', cuid||'');
const files = watch('files');
async function createUSC(data: IFormSchema) {
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/user-submitted-contents/createFromUppy`, {
method: 'POST',
headers: {
'authorization': `Bearer ${authData?.accessToken}`,
'content-type': 'application/json',
'accept': 'application/json'
},
body: JSON.stringify({
data: {
files: data.files,
attribution: data.attribution,
notes: data.notes,
vtuber: data.vtuber,
date: data.date,
streamCuid: cuid
}
})
});
if (!res.ok) {
console.error('failed to fetch /api/user-submitted-contents/createFromUppy');
const body = await res.json();
const error = body.error;
toast.error(`${error.type} ${error.message}`, { theme: 'dark' });
setError('root.serverError', {
type: error.type,
message: error.message
})
}
} catch (e) {
if (e instanceof Error) {
toast.error(`${e.message}`, { theme: 'dark' });
setError('root.serverError', {
type: "remote",
message: e.message,
});
} else {
toast.error(`Something went wrong. Please try again.`, { theme: 'dark' });
setError('root.serverError', {
type: 'remote',
message: 'Something went wrong. Please try again.'
})
}
}
}
uppy.on('complete', async (result: any) => {
let files = result.successful.map((f: any) => ({ key: f.s3Multipart.key, uploadId: f.s3Multipart.uploadId }));
setValue('files', files);
});
return (
<>
<div className='section'>
<h2 className='title is-2'>Upload VOD</h2>
<p className="mb-5"><i>Together we can archive all lewdtuber livestreams!</i></p>
{(!authData?.accessToken)
?
<>
<aside className='notification is-danger'><p>Please log in to upload VODs</p></aside>
<LoginButton />
</>
: (
<div className='columns is-multiline'>
<form id="vod-details" onSubmit={handleSubmit(createUSC)}>
{(!isSubmitSuccessful) && <div className='column is-full'>
<section className="hero is-info mb-3">
<div className="hero-body">
<p className="title">
Step 1
</p>
<p className="subtitle">
Upload the file
</p>
</div>
</section>
<section className="section mb-5">
<Dashboard
uppy={uppy}
theme='dark'
proudlyDisplayPoweredByUppy={false}
/>
<input
required
hidden={true}
style={{ display: 'none' }}
className="input" type="text"
{...register('files')}
></input>
{errors.files && <p className="help is-danger">{errors.files.message?.toString()}</p>}
</section>
</div>}
{(!isSubmitSuccessful) && <div className='column is-full '>
{/* {(!cuid) && <aside className='notification is-info'>Hint: Some of these fields are filled out automatically when uploading from a <Link href="/streams">stream</Link> page.</aside>} */}
<section className="hero is-info mb-3">
<div className="hero-body">
<p className="title">
Step 2
</p>
<p className="subtitle">
Tell us about the VOD
</p>
</div>
</section>
<section className="section">
{/* <input
required
// hidden={false}
// style={{ display: 'none' }}
className="input" type="text"
{...register('streamCuid')}
></input> */}
<div className="field">
<label className="label">VTuber</label>
<div className="select">
<select
required
// value={vtuber}
// onChange={(evt) => setVtuber(parseInt(evt.target.value))}
{...register('vtuber')}
>
{vtubers.map((vtuber: IVtuber) => (
<option value={vtuber.id}>{vtuber.attributes.displayName}</option>
))}
</select>
</div>
<p className="help is-info">Choose the VTuber this VOD belongs to. (More VTubers will be added when storage/bandwidth funding is secured.)</p>
{errors.vtuber && <p className="help is-danger">vtuber error</p>}
</div>
<div className="field">
<label className="label">Stream Date</label>
<input
required
className="input" type="date"
{...register('date')}
// onChange={(evt) => setDate(evt.target.value)}
></input>
<p className="help is-info">The date when the VOD was originally streamed.</p>
{errors.date && <p className="help is-danger">{errors.date.message?.toString()}</p>}
</div>
<div className="field">
<label className="label">Notes</label>
<textarea
className="textarea"
placeholder="e.g. Missing first 10 minutes of stream"
// onChange={(evt) => setNote(evt.target.value)}
{...register('notes')}
></textarea>
<p className="help is-info">If there are any issues with the VOD, put a note here. If there are no VOD issues, leave this field blank.</p>
</div>
<div className="field">
<label className="label">Attribution</label>
<label className="checkbox">
<input
type="checkbox"
// onChange={(evt) => setAttribution(evt.target.checked)}
{...register('attribution')}
/>
<span className={`ml-2 ${styles.noselect}`}>Credit {authData.user?.username} for the upload.</span>
<p className="help is-info">Check this box if you want your username displayed on the website. Thank you for uploading!</p>
</label>
</div>
</section>
</div>}
<div className="column is-full">
<section className="hero is-info">
<div className="hero-body">
<p className="title">
Step 3
</p>
<p className="subtitle">
Send the form
</p>
</div>
</section>
<section className="section">
{errors.root?.serverError && (
<div className="notification">
<button className="delete" onClick={() => clearErrors()}></button>
<ErrorMessage name="root" errors={errors} ></ErrorMessage>
</div>
)}
{!isSubmitSuccessful && (
<button className="button is-primary is-large mt-5">
<span className="icon is-small">
<FontAwesomeIcon icon={faPaperPlane}></FontAwesomeIcon>
</span>
<span>Send</span>
</button>
)}
{isSubmitting && (
<p>
<FontAwesomeIcon className="mt-5 fa-spin-pulse" icon={faSpinner} ></FontAwesomeIcon>
</p>
)}
{isSubmitSuccessful && (
<>
<aside className="notification mt-5 is-success">Thank you for uploading! </aside>
<button onClick={() => {
reset(); // reset form
const files = uppy.getFiles()
for (const file of files) {
uppy.removeFile(file.id); // reset uppy
}
}} className="button is-primary">
<span className="icon is-small">
<FontAwesomeIcon icon={faEraser}></FontAwesomeIcon>
</span>
<span>Reset form</span>
</button>
</>
)}
</section>
</div>
</form>
</div>
)
}
</div>
</>
)
}