23 replace recenter with back (#36)

* fix:23

* fix

* fix: girl bg

* Update search_input.tsx
This commit is contained in:
Damien Ostler 2024-06-02 22:52:44 -04:00 committed by GitHub
parent 82fdd61170
commit 6541bd94fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 195 additions and 36 deletions

View File

@ -17,7 +17,6 @@ export async function GET(
request: Request,
{ params }: { params: { id: string } }
) {
const galleryId = params.id.toLowerCase().replace(/\s+/g, '_');
const supabase = createClient();
const user = await supabase.auth.getUser();
const url = new URL(request.url);
@ -29,16 +28,13 @@ export async function GET(
.select('*')
.eq('name', params.id)
.single();
let { data: files, error } = await supabase.storage.from('galleries').list(galleryId);
let { data: files, error } = await supabase.storage.from('galleries').list(params.id);
if (files == null || files?.length == 0) {
return NextResponse.error();
}
// Loop through each file, download it, convert it to base64, and add the data URL to the array
let { data: blobdata, error: fileError } = await supabase.storage.from('galleries').download(galleryId + "/" + files[0].name);
let { data: blobdata, error: fileError } = await supabase.storage.from('galleries').download(params.id + "/" + files[0].name);
if (fileError || blobdata == null) {
//console.error('Error downloading file:', error);
return NextResponse.error();

View File

@ -0,0 +1,68 @@
import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";
import path from 'path';
export async function GET(
request: Request,
{ params }: { params: { id: string } }
) {
const id = params.id;
const supabase = createClient();
const { data: gallery, error } = await supabase.from('galleries').select("*").eq('name', id).single();
return NextResponse.json({ gallery });
}
export async function PUT(
request: Request,
{ params }: { params: { id: string } }
) {
const id = params.id;
const supabase = createClient();
const { files, tags, name, nsfw, tier}: { files: File[], tags: string[], name: string, nsfw:boolean, tier:string } = await request.json();
const { data: gallery, error } = await supabase.from('galleries').update({ name, tags, nsfw, tier }).eq('name', id).single();
let { data: galleries, error:galleriesError } = await supabase
.from('galleries')
.select('*');
return NextResponse.json({ success: true, galleries });
}
export async function DELETE(
request: Request,
{ params }: { params: { id: string } }
) {
const id =params.id;
const supabase = createClient();
const { data: gallery, error } = await supabase.from('galleries').delete().eq('name', id).single();
let { data: galleries, error:galleriesError } = await supabase
.from('galleries')
.select('*');
return NextResponse.json({ success: true, galleries });
}
// const tagsResponse = await fetch(`/api/galleries/tags?search=${search}`);
// const tagsData = await tagsResponse.json();
// const galleriesWithTagData = galleriesData.map((gallery: any) => {
// const tags = tagsData.filter((tag: any) => gallery.tags.includes(tag.name));
// return { ...gallery, tags };
// });
// const formData = new FormData();
// formData.append('name', name);
// formData.append('tags', JSON.stringify(tags));
// files.forEach((file: File) => {
// formData.append('files', file);
// });
// const response = await fetch('/api/galleries', {
// method: 'POST',
// body: formData,
// });
// if (response.ok) {
// const data = await response.json();
// // Handle success
// } else {
// // Handle error
// }

View File

@ -0,0 +1,26 @@
import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";
import path from 'path';
export async function GET(request: Request) {
const supabase = createClient();
let { data: galleries, error } = await supabase
.from('galleries')
.select('*');
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();
for (let i = 0; i < files.length; i++) {
const file = files[i];
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
.from('galleries')
.select('*');
return NextResponse.json({ success: true, galleries });
}

View File

@ -15,7 +15,6 @@ export async function POST(request: Request) {
const supabase = createClient();
const data = await request.json();
const { data: tag, error } = await supabase.from('tags').insert({ name: data.tag }).single();
console.log(error)
if (error) {
return NextResponse.error();
}

19
app/api/tiers/route.ts Normal file
View File

@ -0,0 +1,19 @@
import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";
enum customTypeOptions
{
Free,
Tier1,
Tier2,
Tier3
}
export async function GET(request: Request) {
const supabase = createClient();
return NextResponse.json(customTypeOptions);
}

View File

@ -68,7 +68,7 @@ function PageComponent() {
placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags" },
]}
nsfwButtonEnabled={false}
nsfwButtonEnabled={true}
searchChanged={(search) => {}}
nsfwChanged={(nsfw) => {}}
tagsChanged={(tags) => {}}

View File

@ -100,7 +100,7 @@ function PageComponent() {
</table>
</div>
</div>
<div className="w-full lg:w-1/2 h-96 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 m-1 mt-32 shadow-lg">
<div className="w-full lg:w-1/2 h-max rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 m-1 mt-32 shadow-lg">
<div className="w-full flex pb-2">
<SearchInput placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags to search" }
@ -110,7 +110,7 @@ function PageComponent() {
+ Gallery
</a>
</div>
<div className="w-full h-64 overflow-y-scroll no-scrollbar">
<div className="w-full h-96 overflow-y-scroll no-scrollbar">
<table className="w-full mt-8 bg-primary-light rounded">
<tbody>
{/* Replace this with your data mapping logic */}
@ -120,7 +120,7 @@ function PageComponent() {
<td className="px-4 py-2">{item.imageCount}</td>
<td className="px-4 py-2">{item.tier}</td>
<td className="px-4 py-2">
<button className="bg-secondary hover:scale-95 shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
<button onClick={()=>{ window.location.href=`/gallery/admin/view?id=${encodeURIComponent(item.name)}`}} className="bg-secondary hover:scale-95 shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
<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="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>

View File

@ -11,27 +11,74 @@ function PageComponent() {
const [filePreviews, setFilePreviews] = useState<string[]>([]);
const supabase = createClient();
const user = supabase.auth.getUser();
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]);
return (
<div className="w-full text-white flex justify-center items-center animate-in">
<div className="w-full lg:w-1/2 rounded-md opacity-90 backdrop-blur-lg bg-primary p-12 mt-32 shadow-lg ">
<div className="w-full flex pb-48">
<GalleryThumbnail id={"Test Gallery"} columns={3} onSelect={function (id: string, columns: number): void {
} } title={""} subscription={""} tags={[]} showNsfw={false} nsfw={false} ></GalleryThumbnail>
<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>
)}
</div>
<div className="w-full flex">
<div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pb-0 rounded">
<input
type="text"
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
placeholder="Gallery Name"
value={galleryName}
onChange={(e) => setGalleryName(e.target.value)}
/>
<div className="w-1/6">
<button onClick={() => window.location.href = "/gallery/admin"} className="w-full bg-error hover:bg-error-light text-white rounded-md p-2">
<button
onClick={() => (window.location.href = "/gallery/admin")}
className="w-full bg-error hover:bg-error-light text-white rounded-md p-2"
>
Delete
</button>
</div>
<div className="w-1/6">
<button onClick={() => window.location.href = "/gallery/admin"} className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2">
<button
onClick={() => (window.location.href = "/gallery/admin")}
className="w-full bg-error-dark hover:bg-error text-white rounded-md p-2 ml-2"
>
Back
</button>
</div>
@ -41,42 +88,42 @@ function PageComponent() {
</button>
</div>
</div>
<div className="w-full flex">
<div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pt-0 rounded">
<div className="w-1/2 mr-2">
<SearchInput
placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags" },
]}
nsfwButtonEnabled={false}
nsfwButtonEnabled={true}
searchChanged={(search) => {}}
nsfwChanged={(nsfw) => {}}
tagsChanged={(tags) => {}}
/>
</div>
<div className="w-1/2">
<select className="mb-2 shadow-lg rounded-md bg-secondary p-2 w-full text-white">
<option value="" disabled selected> </option>
{filePreviews.map((preview, index) => (
<option key={index} value={preview}>{`Thumbnail ${index}`}</option>
))}
{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>
</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 Tier</option>
{filePreviews.map((preview, index) => (
<option key={index} value={preview}>{`Thumbnail ${index}`}</option>
))}
<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>
{filePreviews.map((preview, index) => (
<option key={index} value={preview}>{`Thumbnail ${index}`}</option>
))}
</select>
<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>
</>
)}
</div>
</div>
</div>

View File

@ -22,7 +22,6 @@ export default async function AuthButton() {
const heads = headers()
const currentPage = heads.get('x-path')
console.log(currentPage)
const getGravatarUrl = () => {
if (user == null) {
return;

View File

@ -5,7 +5,7 @@ const RightHandLayoutImage: React.FC = () => {
return (
<div className="fixed w-full h-full overflow-hidden z-0 animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<img
src="./gallery_girl.png"
src="/gallery_girl.png"
className="float-right object-cover h-screen w-full lg:w-5/6 xl:w-3/6 opacity-50 overflow-hidden"
alt="Background"
/>

View File

@ -63,7 +63,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
console.log("TEST")
if (event.key === 'ArrowUp') {
const currentIndex = tags.findIndex(tag => tag.name === currentTag);
const newIndex = currentIndex === 0 ? tags.length - 1 : currentIndex - 1;
@ -73,6 +72,13 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
const newIndex = currentIndex === tags.length - 1 ? 0 : currentIndex + 1;
setCurrentTag(tags[newIndex].name);
}
else if(event.key === 'Enter'){
const currentIndex = tags.findIndex(tag => tag.name === currentTag);
setSelectedTags([...selectedTags, tags[currentIndex].name]);
const tagsInput = selectedTagsInput;
tagsInput.push({value: tags[currentIndex].name, label: tags[currentIndex].name});
setSelectedTagsInput(tagsInput);
}
};
window.addEventListener('keydown', handleKeyDown);
@ -82,7 +88,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
};
}, [currentTag, tags]);
console.log(currentTag)
const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name }));
return (