"use client"; import { createClient } from "@/utils/supabase/client"; import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; import Gallery from "@/components/neroshitron/gallery"; import SearchInput from "@/components/neroshitron/search_input"; import GalleryThumbnail from "@/components/neroshitron/gallery_thumbnail"; function PageComponent() { const [filePreviews, setFilePreviews] = useState([]); const supabase = createClient(); const user = supabase.auth.getUser(); const [gallery , setGallery] = useState(null); const [originalName, setOriginalGalleryName] = useState(''); const [galleryName, setGalleryName] = useState(''); const [nsfw, setNsfw] = useState(false); const [tags, setTags] = useState([]); const [tier, setTier] = useState('Free'); const [thumbnail, setThumbnail] = useState(); const [fileNames, setFileNames] = useState([]); const [selectedTags, setSelectedTags] = useState([]); const router = useRouter(); const [tiers, setTiers] = useState([]); const [open, setOpen] = useState(false); const [images, setImages] = useState([]); const getData = async () => { try { const response = await fetch('/api/tiers'); if (response.ok) { const data = await response.json(); setTiers(data); } else { console.error('Failed to fetch users'); } } catch (error) { console.error('Error fetching users:', error); } 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); const filesResponse = await fetch(`/api/galleries/${id}/images/names`, { method: 'GET', headers: { 'Content-Type': 'application/json' } }); const filesData = await filesResponse.json(); setFileNames(filesData); setNsfw(galleryData.gallery.nsfw); setTags(galleryData.gallery.tags); setTier(galleryData.gallery.tier); setGalleryName(galleryData.gallery.name); if(originalName === ''){ setOriginalGalleryName(galleryData.gallery.name); } const imagesResponse = await fetch('/api/galleries/' + galleryData.gallery.name+ '/images'); const imagesUrls = await imagesResponse.json() as string[]; setImages(imagesUrls); } useEffect(() => { getData(); }, []); useEffect(() => { }, [gallery]); useEffect(() => { }, [gallery, ]); useEffect(() => { }, [ nsfw ]); useEffect(() => { }, [tags ]); useEffect(() => { }, [galleryName]); useEffect(() => { }, [ tier]); const updateGallery = async () => { const urlParams = new URLSearchParams(window.location.search); const id = urlParams.get('id'); const formData = new FormData(); formData.append('id', gallery.name); formData.append('name', galleryName); formData.append('thumbnail', thumbnail ?? ''); formData.append('originalName', originalName); formData.append('tags', JSON.stringify(selectedTags)); formData.append('nsfw', nsfw.toString()); formData.append('tier', tier); const response = await fetch(`/api/galleries/admin/${originalName}`, { method: 'PUT', body: formData }); if (response.ok) { console.log(response) const data = await response.json(); } else { console.log(response) } if(originalName != galleryName){ router.push(`/gallery/admin/view?id=${galleryName}`) } else{ window.location.reload(); } } const deleteGallery = async () => { const urlParams = new URLSearchParams(window.location.search); const id = urlParams.get('id'); const response = await fetch(`/api/gallery/admin/${gallery.name}`, { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }); if (response.ok) { const data = await response.json(); router.push("/gallery/admin"); } else { console.log(response) } } const tierObj = tiers.find((tier) => tier.name == gallery.tier); const subscriptionColor = tier ? tierObj.color : null; return (
{/* Center the gallery thumbnail */} {gallery != null && ( )}
Editing Gallery
setGalleryName(e.target.value)} />
{gallery &&( {}} nsfwChanged={(nsfw) => {}} tagsChanged={(tags) => { setSelectedTags(tags) }} /> )}
{gallery != null && (<> )}
{(open) && ( <> {/* This is the modal for holding the gallery */} )}
); } export default PageComponent;