From e86a8fa4817a5250d48fa1ea1d55e2ce1eb17fe3 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sat, 1 Jun 2024 01:57:45 -0400
Subject: [PATCH] feat: search components

---
 app/api/galleries/[id]/images/route.ts    |  4 +-
 components/neroshitron/navigation_bar.tsx |  4 --
 components/neroshitron/search.tsx         |  6 ++-
 components/neroshitron/search_input.tsx   | 28 +++++++++----
 components/neroshitron/tag_pill.tsx       |  8 ++--
 components/neroshitron/tag_selector.tsx   | 49 ++++++++++++++---------
 6 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/app/api/galleries/[id]/images/route.ts b/app/api/galleries/[id]/images/route.ts
index 7821de4..9858114 100644
--- a/app/api/galleries/[id]/images/route.ts
+++ b/app/api/galleries/[id]/images/route.ts
@@ -54,8 +54,8 @@ export async function GET(
     .select('*')
     .eq('user_id', userId)
     .single();
-    console.log(subscription)
-    console.log(gallery.tier)
+    //console.log(subscription)
+    //console.log(gallery.tier)
     switch(gallery.tier){
       case "Tier 3":
         if(subscription?.tier!="Tier 3"){
diff --git a/components/neroshitron/navigation_bar.tsx b/components/neroshitron/navigation_bar.tsx
index 3eee64d..a67c5e5 100644
--- a/components/neroshitron/navigation_bar.tsx
+++ b/components/neroshitron/navigation_bar.tsx
@@ -20,10 +20,6 @@ export default async function AuthButton() {
     return redirect("/login");
   };
 
-  
- 
-  // ...
-
   const heads = headers()
   const currentPage = heads.get('x-path')
 
diff --git a/components/neroshitron/search.tsx b/components/neroshitron/search.tsx
index 07971d7..1dba84c 100644
--- a/components/neroshitron/search.tsx
+++ b/components/neroshitron/search.tsx
@@ -6,7 +6,9 @@ import SearchInput from '@/components/neroshitron/search_input';
 interface SearchProps { }
 
 const Search = ({ }:SearchProps) => {
-  const [tags, setTags] = useState<any[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [search, setSearch] = useState<string>('');
+  const [nsfw, setNsfw] = useState<boolean>(false);
   const [selectingTags, setSelectingTags] = useState<boolean>(false);
 
   const getData = async () => {
@@ -20,7 +22,7 @@ const Search = ({ }:SearchProps) => {
       <>
       <section className="fixed flex items-center w-full p-8 pt-20 opacity-90 animate-in animate-once animate-duration-500">
           <div className="container mx-auto py-8">
-            <SearchInput />
+            <SearchInput searchChanged={(search)=>{setSearch(search)}} nsfwChanged={(nsfw)=>{setNsfw(nsfw)}} tagsChanged={(tags)=>{setTags(tags);}} />
           </div>
       </section>
       </>
diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx
index 533f484..0e5c8a4 100644
--- a/components/neroshitron/search_input.tsx
+++ b/components/neroshitron/search_input.tsx
@@ -4,23 +4,27 @@ import { on } from 'events';
 import TagSelector from '../neroshitron/tag_selector';
 
 interface SearchInputProps {
-
+  tagsChanged: (tags: string[]) => void;
+  searchChanged: (search: string) => void;
+  nsfwChanged: (nsfw: boolean) => void;
 }
 
-const SearchInput = ({ }: SearchInputProps) => {
+const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProps) => {
 
   const [search, setSearch] = useState<string>('');
   const [nsfw, setNsfw] = useState<boolean>(false);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [selectingTags, setSelectingTags] = useState<boolean>(false);
   const tagSelectorRef = React.useRef(null);
-  
+
+
+  const updateTags = (newTags: string[]) => {
+    setSelectedTags(newTags)
+    tagsChanged(newTags);
+  }
+
   const onTagsClosed = (tags:string[]) => {
-    if(tagSelectorRef.current !== null){
-      setSelectedTags((tagSelectorRef.current as any).getSelectedTags());
-    }
     setSelectingTags(false);
-    setSelectedTags(tags);
   }
 
   const openTags = () => {
@@ -30,6 +34,14 @@ const SearchInput = ({ }: SearchInputProps) => {
     }
   }
 
+  const getData = async () => {
+    setSelectedTags(selectedTags)
+  }
+
+  useEffect(() => {
+    getData();
+  }, [selectedTags]);
+
   return (
     <>
       <div className="relative md:w-full lg:w-1/2 mx-auto flex flex-col items-center justify-center">
@@ -48,7 +60,7 @@ const SearchInput = ({ }: SearchInputProps) => {
           </div>
         </div>
       </div>
-      {(selectingTags) && <TagSelector ref={tagSelectorRef} />}
+      {(selectingTags) && <TagSelector tagsChanged={(newTags:string[])=>{ updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />}
     </>
   );
 };
diff --git a/components/neroshitron/tag_pill.tsx b/components/neroshitron/tag_pill.tsx
index 025f1a0..81899d4 100644
--- a/components/neroshitron/tag_pill.tsx
+++ b/components/neroshitron/tag_pill.tsx
@@ -6,14 +6,14 @@ interface TagProps { onTagClicked: (tag: string ) => void, selected:boolean, tag
 const Tag = ({ onTagClicked, selected, tag, }:TagProps) => {
 
     return (
-        <a
-          key={"select-tags"}
+        <button
+        key={tag+"-button"}
+        type="button"
           className={`w-full m-4 rounded-md no-underline text-white py-1 font-medium text-center ${selected ? 'hover:bg-pink-800 bg-pink-900' : 'hover:bg-neroshi-blue-700 bg-neroshi-blue-800'}`}
-          href="#"
           onClick={() => onTagClicked(tag)}
         >
           {tag}
-        </a>
+        </button>
     );
 };
 
diff --git a/components/neroshitron/tag_selector.tsx b/components/neroshitron/tag_selector.tsx
index 10d51e5..892a236 100644
--- a/components/neroshitron/tag_selector.tsx
+++ b/components/neroshitron/tag_selector.tsx
@@ -5,44 +5,55 @@ import Tag from './tag_pill';
 import Masonry from 'react-masonry-css';
 
 interface TagSelectorProps { 
-    
+    selectedTagsInput: string[],
+    tagsChanged: (tags: string[]) => void
  }
 
-const TagSelector = forwardRef<TagSelectorProps, {}>((props, ref) => {
+const TagSelector = forwardRef<TagSelectorProps, { selectedTagsInput: string[], tagsChanged: (tags: string[]) => void }>((props, ref) => {
 
     const [tags, setTags] = useState<any[]>([]);
-    const [selectedTags, setSelectedTags] = useState<string[]>([]);
-    const supabase = createClient();
+    const [selectedTags, setSelectedTags] = useState<string[]>(props.selectedTagsInput);
+
 
-    useImperativeHandle(ref, () => ({
-        getSelectedTags: () => {
-            return tags.map(tag => tag.name);
-        },
-      }));
-    
-    const getData = async () => {
-        const tagsResponse = await fetch(`/api/galleries/tags`);
-        const tagsData = await tagsResponse.json();
-        setTags(tagsData);
-    }
-    
     const handleTag = (tag: string) => {
         if (selectedTags.includes(tag)) {
             setSelectedTags(selectedTags.filter(t => t !== tag));
         } else {
             setSelectedTags([...selectedTags, tag]);
         }
+        setTags(selectedTags);
     };
 
+    const getData = async () => {
+        const tagsResponse = await fetch(`/api/galleries/tags`);
+        const tagsData = await tagsResponse.json();
+        setTags(tagsData);
+    }
+
+    const generateRandomString = (length: number): string => {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    };
+
+    useEffect(() => {
+        props.tagsChanged(selectedTags);
+        getData();
+    }, [selectedTags]);
+
     useEffect(() => {
         getData();
     }, []);
-    console.log(selectedTags)
+
     return (
         <div className="flex md:w-full lg:w-1/2 animate-in mx-auto pt-4">
-            <div className="grid grid-cols-6 gap-4 w-full animate-in mx-auto pt-4 bg-neroshi-blue-900 pr-8 pb-4 rounded-md">                
+            <div className="grid grid-cols-6 gap-4 w-full mx-auto pt-4 bg-neroshi-blue-900 pr-8 pb-4 rounded-md opacity-75 backdrop-filter backdrop-blur-md">
                 {tags.map((tag: any) => (
-                    <Tag key={tag.id} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
+                    <Tag key={tag.name} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
                 ))}
             </div>
         </div>