This commit is contained in:
Damien Ostler 2024-06-02 23:14:30 -04:00
parent 172a3015af
commit 481b4f698c
3 changed files with 79 additions and 14 deletions

View File

@ -11,16 +11,27 @@ export async function GET(request: Request) {
return NextResponse.json(galleries);
}
export async function POST(request: Request) {
const supabase = createClient();
const { files, tags, name, nsfw, tier }: { files: File[], tags: string[], name: string, nsfw:boolean, tier:string } = await request.json();
const formData = await request.formData();
const files = formData.getAll('files');
const tags = formData.getAll('tags');
const name = formData.get('name');
const nsfw = formData.get('nsfw');
const tier = formData.get('tier');
for (let i = 0; i < files.length; i++) {
const file = files[i];
const file = files[i] as File; // Cast 'file' to 'File' type
supabase.storage.from('galleries').upload(`${name}/${file.name}`, file);
}
const { data: gallery, error } = await supabase.from('galleries').insert({ name, tags, nsfw, tier, column_number:3 }).single();
let { data: galleries, error:galleriesError } = await supabase
const { data: gallery, error } = await supabase.from('galleries').insert({ name, tags, nsfw, tier, column_number: 3 }).single();
let { data: galleries, error: galleriesError } = await supabase
.from('galleries')
.select('*');
return NextResponse.json({ success: true, galleries });
}

View File

@ -10,6 +10,12 @@ function PageComponent() {
const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
const [filePreviews, setFilePreviews] = useState<string[]>([]);
const [name, setName] = useState<string>('');
const [nsfw, setNsfw] = useState<boolean>(false);
const [tags, setTags] = useState<string[]>([]);
const [tier, setTier] = useState<string>('Free');
const [files, setFiles] = useState<FileList>();
const supabase = createClient();
const user = supabase.auth.getUser();
const getData = async () => {
@ -22,6 +28,29 @@ function PageComponent() {
setSelectedGallery(null);
}
const createGallery = async () => {
const formData = new FormData();
formData.append('name', name);
if (files) {
Array.from(files).forEach((file: File) => {
formData.append('files', file);
});
}
formData.append('tags', JSON.stringify(tags));
formData.append('nsfw', nsfw.toString());
formData.append('tier', tier);
const response = await fetch('/api/galleries/admin', {
method: 'POST',
body: formData,
});
if (response.ok) {
const data = await response.json();
} else {
console.log(response)
}
}
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
if (files) {
@ -33,6 +62,7 @@ function PageComponent() {
if (e.target && e.target.result) {
previews.push(e.target.result.toString());
if (previews.length === files.length) {
setFiles(files);
setFilePreviews(previews);
}
}
@ -48,6 +78,8 @@ function PageComponent() {
<div className="w-full flex">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white shadow-lg"
placeholder="Gallery Name"
/>
@ -57,7 +89,7 @@ function PageComponent() {
</button>
</div>
<div className="w-1/4">
<button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg ">
<button onClick={()=>{createGallery()}} className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-2 shadow-lg ">
Create Gallery
</button>
</div>
@ -69,12 +101,29 @@ function PageComponent() {
{ value: "tags", label: "❗️ click here to add tags" },
]}
nsfwButtonEnabled={true}
searchChanged={(search) => {}}
nsfwChanged={(nsfw) => {}}
tagsChanged={(tags) => {}}
searchChanged={(search) => { }}
nsfwChanged={(nsfw) => { }}
tagsChanged={(tags) => { setTags(tags) }}
/>
</div>
<div className="w-1/2">
<select value={nsfw ? "NSFW" : "SFW"} className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white" onChange={e=>{
setNsfw(e.target.value === "NSFW");
}}>
<option value="NSFW" selected={nsfw}>NSFW</option>
<option value="SFW" selected={nsfw}>SFW</option>
</select>
<select onChange={e=>{
setTier(e.target.value);
}} className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
<option value="Free" selected={tier === "Free"}>Free</option>
<option value="Tier 1" selected={tier === "Tier 1"}>Tier 1</option>
<option value="Tier 2" selected={tier === "Tier 2"}>Tier 2</option>
<option value="Tier 3" selected={tier === "Tier 3"}>Tier 3</option>
</select>
<select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
<option value="" disabled selected>Select New Thumbnail</option>
</select>
<input
className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3 file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white file:dark:text-white"
type="file"

View File

@ -101,6 +101,12 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
closeMenu();
}
};
const back_page = () => {
if (selectedImage != null) {
setSelectedImage(null);
setImages([]);
}
};
const renderButtons = () => {
return (
@ -108,7 +114,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
<div className='grid grid-cols-5 pl-4 gap-4 pr-4'>
<button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`}
onClick={() => close()}
onClick={() => back_page()}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
@ -159,8 +165,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
return (
<div >
<div className="z-20"
onClick={close} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
<div className="z-20" style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
<div className='flex justify-center items-center pt-2 pb-20'>
{renderButtons()}
</div>