2024-06-02 03:48:21 -04:00
|
|
|
"use client";
|
|
|
|
import { createClient } from "@/utils/supabase/client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import Search from "@/components/neroshitron/search";
|
|
|
|
import Gallery from "@/components/neroshitron/gallery";
|
|
|
|
import Masonry from "react-masonry-css";
|
|
|
|
import SearchInput from "@/components/neroshitron/search_input";
|
2024-06-02 04:42:34 -04:00
|
|
|
import GalleryThumbnail from "@/components/neroshitron/gallery_thumbnail";
|
2024-06-02 03:48:21 -04:00
|
|
|
|
|
|
|
function PageComponent() {
|
|
|
|
const [filePreviews, setFilePreviews] = useState<string[]>([]);
|
|
|
|
const supabase = createClient();
|
|
|
|
const user = supabase.auth.getUser();
|
2024-06-02 22:52:44 -04:00
|
|
|
const [gallery , setGallery] = useState<any>(null);
|
|
|
|
const [galleryName, setGalleryName] = useState<string>('');
|
|
|
|
const [nsfw, setNsfw] = useState<boolean>(false);
|
|
|
|
const [tags, setTags] = useState<string[]>([]);
|
|
|
|
const [tier, setTier] = useState<string>('Free');
|
|
|
|
|
|
|
|
const getData = async () => {
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
const id = urlParams.get('id');
|
|
|
|
const galleryResponse = await fetch(`/api/galleries/admin/${id}`, {
|
|
|
|
method: 'GET',
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const galleryData = await galleryResponse.json();
|
|
|
|
setGallery(galleryData.gallery);
|
|
|
|
setNsfw(galleryData.gallery.nsfw);
|
|
|
|
setTags(galleryData.gallery.tags);
|
|
|
|
setTier(galleryData.gallery.tier);
|
|
|
|
setGalleryName(galleryData.gallery.name);
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
|
|
getData();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
}, [gallery, nsfw, tags, galleryName, tier]);
|
2024-06-02 03:48:21 -04:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="w-full text-white flex justify-center items-center animate-in">
|
2024-06-02 22:52:44 -04:00
|
|
|
<div className="w-full lg:w-1/2 rounded-md p-12 mt-14 ">
|
|
|
|
<div className="w-full flex pb-60">
|
|
|
|
{gallery != null && (
|
|
|
|
<GalleryThumbnail
|
|
|
|
key={"galleryThumbnail"}
|
|
|
|
id={galleryName}
|
|
|
|
columns={3}
|
|
|
|
onSelect={function (id: string, columns: number): void {}}
|
|
|
|
title={galleryName}
|
|
|
|
subscription={tier}
|
|
|
|
tags={tags}
|
|
|
|
showNsfw={true}
|
|
|
|
nsfw={nsfw}
|
|
|
|
></GalleryThumbnail>
|
|
|
|
)}
|
2024-06-02 04:42:34 -04:00
|
|
|
</div>
|
2024-06-02 22:52:44 -04:00
|
|
|
<div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pb-0 rounded">
|
2024-06-02 03:48:21 -04:00
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
|
|
|
|
placeholder="Gallery Name"
|
2024-06-02 22:52:44 -04:00
|
|
|
value={galleryName}
|
|
|
|
onChange={(e) => setGalleryName(e.target.value)}
|
2024-06-02 03:48:21 -04:00
|
|
|
/>
|
2024-06-02 04:46:21 -04:00
|
|
|
<div className="w-1/6">
|
2024-06-02 22:52:44 -04:00
|
|
|
<button
|
|
|
|
onClick={() => (window.location.href = "/gallery/admin")}
|
|
|
|
className="w-full bg-error hover:bg-error-light text-white rounded-md p-2"
|
|
|
|
>
|
2024-06-02 04:46:21 -04:00
|
|
|
Delete
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div className="w-1/6">
|
2024-06-02 22:52:44 -04:00
|
|
|
<button
|
|
|
|
onClick={() => (window.location.href = "/gallery/admin")}
|
|
|
|
className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2"
|
|
|
|
>
|
2024-06-02 04:25:36 -04:00
|
|
|
Back
|
2024-06-02 03:48:21 -04:00
|
|
|
</button>
|
|
|
|
</div>
|
2024-06-02 04:25:36 -04:00
|
|
|
<div className="w-1/4">
|
2024-06-02 04:46:21 -04:00
|
|
|
<button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2 ml-4">
|
2024-06-02 07:43:33 -04:00
|
|
|
Save
|
2024-06-02 04:25:36 -04:00
|
|
|
</button>
|
2024-06-02 03:48:21 -04:00
|
|
|
</div>
|
2024-06-02 04:25:36 -04:00
|
|
|
</div>
|
2024-06-02 22:52:44 -04:00
|
|
|
<div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pt-0 rounded">
|
2024-06-02 04:25:36 -04:00
|
|
|
<div className="w-1/2 mr-2">
|
2024-06-02 03:48:21 -04:00
|
|
|
<SearchInput
|
2024-06-02 03:51:53 -04:00
|
|
|
placeholderTags={[
|
|
|
|
{ value: "tags", label: "❗️ click here to add tags" },
|
|
|
|
]}
|
2024-06-02 22:52:44 -04:00
|
|
|
nsfwButtonEnabled={true}
|
2024-06-02 03:48:21 -04:00
|
|
|
searchChanged={(search) => {}}
|
|
|
|
nsfwChanged={(nsfw) => {}}
|
|
|
|
tagsChanged={(tags) => {}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="w-1/2">
|
2024-06-02 22:52:44 -04:00
|
|
|
{gallery != null && (<>
|
|
|
|
<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>
|
2024-06-02 04:37:59 -04:00
|
|
|
</select>
|
2024-06-02 07:49:41 -04:00
|
|
|
<select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
|
2024-06-02 22:52:44 -04:00
|
|
|
<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>
|
2024-06-02 04:37:59 -04:00
|
|
|
</select>
|
2024-06-02 07:49:41 -04:00
|
|
|
<select className="mb-2 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white">
|
2024-06-02 04:37:59 -04:00
|
|
|
<option value="" disabled selected>Select New Thumbnail</option>
|
2024-06-02 04:35:15 -04:00
|
|
|
</select>
|
2024-06-02 03:48:21 -04:00
|
|
|
<Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
|
|
|
|
{filePreviews.map((preview, index) => (
|
|
|
|
<img key={index} src={preview} alt={`Preview ${index}`} />
|
|
|
|
))}
|
|
|
|
</Masonry>
|
2024-06-02 22:52:44 -04:00
|
|
|
</>
|
|
|
|
)}
|
2024-06-02 03:48:21 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
export default PageComponent;
|