From fc831d6340bc4f9af18d332cb1f372d70109791f Mon Sep 17 00:00:00 2001 From: Damien Ostler Date: Sat, 1 Jun 2024 06:21:24 -0400 Subject: [PATCH] fix: tags and search --- app/gallery/page.tsx | 13 ++-- components/neroshitron/galleries.tsx | 61 +++++++++++++++ components/{ui => neroshitron}/gallery.tsx | 0 .../{ui => neroshitron}/gallery_thumbnail.tsx | 0 components/neroshitron/search.tsx | 13 +++- components/neroshitron/search_input.tsx | 75 ++++++++++++++----- components/neroshitron/tag_pill.tsx | 3 +- components/neroshitron/tag_selector.tsx | 65 ++++++++-------- 8 files changed, 170 insertions(+), 60 deletions(-) create mode 100644 components/neroshitron/galleries.tsx rename components/{ui => neroshitron}/gallery.tsx (100%) rename components/{ui => neroshitron}/gallery_thumbnail.tsx (100%) diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index 0a772c6..f1c6255 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -1,12 +1,6 @@ "use client"; import { createClient } from "@/utils/supabase/client"; -import { redirect } from "next/navigation"; -import GalleryThumbnail from "@/components/ui/gallery_thumbnail"; - - import React, { useState, useEffect } from 'react'; -import { User } from "@supabase/supabase-js"; -import Gallery from "@/components/ui/gallery"; import Search from "@/components/neroshitron/search"; function PageComponent() { @@ -23,6 +17,13 @@ function PageComponent() { return (
+
+ Background +
); diff --git a/components/neroshitron/galleries.tsx b/components/neroshitron/galleries.tsx new file mode 100644 index 0000000..78c87a4 --- /dev/null +++ b/components/neroshitron/galleries.tsx @@ -0,0 +1,61 @@ +"use client;" +import React, { useState, useEffect } from 'react'; +import GalleryThumbnail from './gallery_thumbnail'; + +interface TagProps { + nsfw: boolean; + tags: string[]; + search: string; +} + +const Galleries = ({ nsfw, tags, search }:TagProps) => { + + const [galleries, setGalleries] = useState([]); + const [nsfwState, setNsfwState] = useState(nsfw); + const [tagsState, setTagsState] = useState(tags); + const [searchState, setSearchState] = useState(search); + + const [selectedGallery, setSelectedGallery] = useState(null); + + const selectGallery = (gallery: string) => { + setSelectedGallery(gallery); + }; + + console.log(tags) + + const getData = async () => { + const galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ tags: tagsState }) + }); + const galleriesData = await galleriesResponse.json(); + setGalleries(galleriesData); + } + + useEffect(() => { + getData(); + }, [tagsState]); + + return ( +
+ {galleries && galleries.map((gallery, index) => ( + + ))} +
+ ); +}; + +export default Galleries; \ No newline at end of file diff --git a/components/ui/gallery.tsx b/components/neroshitron/gallery.tsx similarity index 100% rename from components/ui/gallery.tsx rename to components/neroshitron/gallery.tsx diff --git a/components/ui/gallery_thumbnail.tsx b/components/neroshitron/gallery_thumbnail.tsx similarity index 100% rename from components/ui/gallery_thumbnail.tsx rename to components/neroshitron/gallery_thumbnail.tsx diff --git a/components/neroshitron/search.tsx b/components/neroshitron/search.tsx index f57a605..20976cd 100644 --- a/components/neroshitron/search.tsx +++ b/components/neroshitron/search.tsx @@ -1,7 +1,7 @@ "use client;" import React, { useState, useEffect } from 'react'; -import Tag from "@/components/neroshitron/tag_pill"; import SearchInput from '@/components/neroshitron/search_input'; +import Galleries from './galleries'; interface SearchProps { } @@ -13,16 +13,27 @@ const Search = ({ }:SearchProps) => { const getData = async () => { } + useEffect(() => { + getData(); + }, [search]); + useEffect(() => { + getData(); + }, [nsfw]); + useEffect(() => { + getData(); + }, [tags]); useEffect(() => { getData(); }, []); return ( <> +
{setSearch(search)}} nsfwChanged={(nsfw)=>{setNsfw(nsfw)}} tagsChanged={(tags)=>{setTags(tags);}} />
+
); diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx index fbd0e2a..1ba173f 100644 --- a/components/neroshitron/search_input.tsx +++ b/components/neroshitron/search_input.tsx @@ -1,6 +1,5 @@ "use client;" import React, { useState, useEffect, useRef,forwardRef } from 'react'; -import { on } from 'events'; import TagSelector from '../neroshitron/tag_selector'; interface SearchInputProps { @@ -12,15 +11,16 @@ interface SearchInputProps { const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProps) => { const [search, setSearch] = useState(''); + const [tagSearch, setTagSearch] = useState(''); const [nsfw, setNsfw] = useState(false); const [selectedTags, setSelectedTags] = useState([]); const [selectingTags, setSelectingTags] = useState(false); const tagSelectorRef = React.useRef(null); + const [tags, setTags] = useState([]); const updateTags = (newTags: string[]) => { setSelectedTags(newTags) - tagsChanged(newTags); } const onTagsClosed = (tags:string[]) => { @@ -35,32 +35,73 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp } const getData = async () => { - setSelectedTags(selectedTags) + const tagsResponse = await fetch(`/api/galleries/tags`); + const tagsData = await tagsResponse.json(); + setTags(tagsData); } - + useEffect(() => { + searchChanged(search); + }, [search]); + useEffect(() => { + tagsChanged(selectedTags); + }, [selectedTags]); + useEffect(() => { + nsfwChanged(nsfw); + }, [nsfw]); useEffect(() => { getData(); - }, [selectedTags]); + }, []); + return ( <> -
+
- setSearch(e.target.value)} className="rounded-l-md h-16 bg-gray-100 text-grey-darker py-2 font-normal text-grey-darkest border border-gray-100 font-bold w-full py-1 px-2 outline-none text-lg text-gray-600" type="text" placeholder="Looking for a specific collection?" /> - - - - + + {(selectingTags) ? ( + <> + setTagSearch(e.target.value)} className="rounded-l-md h-16 bg-gray-100 text-grey-darker py-2 font-normal text-grey-darkest border border-gray-100 font-bold w-full py-1 px-2 outline-none text-lg text-gray-600" type="text" placeholder="Looking for specific tag?" /> + + + + + + + ) + :( + <> + setSearch(e.target.value)} className="rounded-l-md h-16 bg-gray-100 text-grey-darker py-2 font-normal text-grey-darkest border border-gray-100 font-bold w-full py-1 px-2 outline-none text-lg text-gray-600" type="text" placeholder="Looking for a specific collection?" /> + + + + + + + + + + )}
- {(selectingTags) && { updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />} + {(selectingTags) && + { updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />} ); }; diff --git a/components/neroshitron/tag_pill.tsx b/components/neroshitron/tag_pill.tsx index b9f197b..16265a7 100644 --- a/components/neroshitron/tag_pill.tsx +++ b/components/neroshitron/tag_pill.tsx @@ -7,9 +7,8 @@ const Tag = ({ onTagClicked, selected, tag, }:TagProps) => { return (