fix: clicking tag breaks tag ui

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# GitHub Copilot persisted chat sessions
+/copilot/chatSessions

.idea/aws.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="accountSettings">
+    <option name="activeProfile" value="profile:default" />
+    <option name="activeRegion" value="us-east-1" />
+    <option name="recentlyUsedProfiles">
+      <list>
+        <option value="profile:default" />
+      </list>
+    </option>
+    <option name="recentlyUsedRegions">
+      <list>
+        <option value="us-east-1" />
+      </list>
+    </option>
+  </component>
+</project>

.idea/encodings.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_22" default="true" project-jdk-name="openjdk-22" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/neroshitron.iml" filepath="$PROJECT_DIR$/.idea/neroshitron.iml" />
+    </modules>
+  </component>
+</project>

.idea/neroshitron.iml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.idea/copilot/chatSessions" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

app/gallery/page.tsx

@@ -2,9 +2,11 @@
 import { createClient } from "@/utils/supabase/client";
 import React, { useState, useEffect } from 'react';
 import Search from "@/components/neroshitron/search";
+import Gallery from "@/components/neroshitron/gallery";
 
 function PageComponent() {
 
+  const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
   const supabase = createClient();
 
   const getData = async () => {
@@ -12,7 +14,12 @@ function PageComponent() {
 
   useEffect(() => {
     getData();
-  }, []);
+    console.log(selectedGallery)
+  }, [selectedGallery]);
+
+   const closeGallery = () => {
+    setSelectedGallery(null);
+   }
 
 
   return (
@@ -24,7 +31,31 @@ function PageComponent() {
           alt="Background"
         />
       </div>
-        <Search/>
+        <Search gallerySelected={(gallery:string)=>{setSelectedGallery(gallery)}}/>
+
+       {selectedGallery!=null ? (
+         <>
+           {/*
+                 This is the modal for holding the gallery
+           */}
+           <div
+             className={`fixed inset-0 transition-opacity z-30 animate-in`}
+             aria-hidden="true"
+           >
+             <div
+               className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
+               onClick={() => closeGallery()}
+             ></div>
+             <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
+               <Gallery
+                 id={selectedGallery as string}
+                 columns={3}
+                 closeMenu={() => closeGallery()}
+               ></Gallery>
+             </div>
+           </div>
+         </>
+       ) : null}
     </div>
   );
 }

components/neroshitron/search.tsx

@@ -3,12 +3,15 @@ import React, { useState, useEffect } from 'react';
 import SearchInput from '@/components/neroshitron/search_input';
 import Galleries from './galleries';
 
-interface SearchProps { }
+interface SearchProps { 
+  gallerySelected: (gallery: string) => void;
+}
 
-const Search = ({ }:SearchProps) => {
+const Search = ({gallerySelected }:SearchProps) => {
   const [tags, setTags] = useState<string[]>([]);
   const [search, setSearch] = useState<string>('');
   const [nsfw, setNsfw] = useState<boolean>(false);
+  const [gallery, setGallery] = useState<string | null>(null);
 
   const getData = async () => {
   }
@@ -22,18 +25,27 @@ const Search = ({ }:SearchProps) => {
   useEffect(() => {
     getData();
   }, [tags]);
+  useEffect(() => {
+    getData();
+    if(gallery!=null)
+      gallerySelected(gallery);
+  }, [gallery]);
+//TRY TESTING WITH THIS REMOVED!
+
+
+
+
   useEffect(() => {
     getData();
   }, []);
   
     return (
       <>
-      <Galleries key={search+"-"+tags.length+"-"+nsfw} search={search} nsfw={nsfw} tags={tags} />
+      <Galleries gallerySelected={(gallery:string)=>{setGallery(gallery)}} key={search+"-"+tags.length+"-"+nsfw} search={search} nsfw={nsfw} tags={tags} />
       <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 searchChanged={(search)=>{setSearch(search)}} nsfwChanged={(nsfw)=>{setNsfw(nsfw)}} tagsChanged={(tags)=>{setTags(tags);}} />
           </div>
-
       </section>
       </>
     );

components/neroshitron/search_input.tsx

@@ -34,11 +34,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
     }
   }
 
-  const getData = async () => {
-    const tagsResponse = await fetch(`/api/galleries/tags`);
-    const tagsData = await tagsResponse.json();
-    setTags(tagsData);
-  }
   useEffect(() => {
     searchChanged(search);
   }, [search]);
@@ -49,7 +44,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
     nsfwChanged(nsfw);
   }, [nsfw]);
   useEffect(() => {
-    getData();
   }, []);
 
 
@@ -101,7 +95,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
         </div>
       </div>
       {(selectingTags) && 
-      <TagSelector tagsInput={tags} key={tagSearch} tagSearch={tagSearch} tagsChanged={(newTags:string[])=>{ updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />}
+      <TagSelector key={tagSearch} tagSearch={tagSearch} tagsChanged={(newTags:string[])=>{ updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />}
     </>
   );
 };

components/neroshitron/tag_pill.tsx

@@ -7,6 +7,7 @@ const Tag = ({ onTagClicked, selected, tag, }:TagProps) => {
 
     return (
         <button
+          key={tag}
           type="button"
           className={`animate-in w-full h-8 rounded-md no-underline text-sm text-white py-1 font-medium text-center ${selected ? 'hover:bg-pink-800 bg-pink-900' : 'hover:bg-pink-600 bg-neroshi-blue-800 border-neroshi-blue-900 border-2'}`}
           onClick={() => onTagClicked(tag)}

components/neroshitron/tag_selector.tsx

@@ -3,15 +3,14 @@ import React, { forwardRef, useState, useEffect } from 'react';
 import Tag from './tag_pill';
 
 interface TagSelectorProps { 
-    tagsInput: any[],
     tagSearch: string,
     selectedTagsInput: string[],
     tagsChanged: (tags: string[]) => void
  }
 
-const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: string, selectedTagsInput: string[], tagsChanged: (tags: string[]) => void }>((props, ref) => {
+const TagSelector = forwardRef<TagSelectorProps, {tagSearch: string, selectedTagsInput: string[], tagsChanged: (tags: string[]) => void }>((props, ref) => {
 
-    const [tags, setTags] = useState<any[]>(props.tagsInput);
+    const [tags, setTags] = useState<any[]>([]);
     const [tagSearch, setTagSearch] = useState<string>(props.tagSearch);
     const [selectedTags, setSelectedTags] = useState<string[]>(props.selectedTagsInput);
 
@@ -26,14 +25,25 @@ const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: st
         setTags(selectedTags);
     };
 
-
     const getData = async () => {
+        const tagsResponse = await fetch(`/api/galleries/tags`);
+        const tagsData = await tagsResponse.json();
+        setTags(tagsData);
       }
       
       useEffect(() => {
           props.tagsChanged(selectedTags);
           getData();
-    }, [selectedTags,tagSearch,tags]);
+      }, [selectedTags,tagSearch]);
+      
+    useEffect(() => {
+        props.tagsChanged(selectedTags);
+        getData();
+    }, [selectedTags,tagSearch]);
+
+    useEffect(() => {
+        getData();
+    }, []);
     
     const generateRandomString = () => {
         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -43,17 +53,19 @@ const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: st
         }
         return result;
     };
+    console.log(tags.length)
         return (
-            (tags.length > 0)? (
+
             <div className="animate-in flex md:w-full animate-in pt-4 justify-center items-center">
+            {(tags.length > 0) && (
                     <div className="z-10 grid p-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-1 w-full max-h-96 overflow-y-scroll pt-4 bg-neroshi-blue-900 rounded-md opacity-90 backdrop-filter backdrop-blur-md mx-auto">
-                    {props.tagsInput.map((tag: any) => (
+                    {tags.map((tag: any) => (
                             (tagSearch === '' || tag.name.toLowerCase().includes(tagSearch.toLowerCase())) && // Updated condition
-                            <Tag key={generateRandomString()} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
+                            <Tag  tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
                         ))}
                     </div>  
+            )}
             </div>
-            ):(<></>)
         );
 });