From 164aec1c514f83d7bdcc3c6df276f4a2a30c9452 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sat, 8 Jun 2024 19:11:32 -0400
Subject: [PATCH] fix: hooked up tiers to galleries page

---
 components/neroshitron/galleries.tsx         | 44 ++++++++++++++------
 components/neroshitron/gallery_thumbnail.tsx | 20 +++------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/components/neroshitron/galleries.tsx b/components/neroshitron/galleries.tsx
index 93f21f5..fb3528c 100644
--- a/components/neroshitron/galleries.tsx
+++ b/components/neroshitron/galleries.tsx
@@ -17,6 +17,7 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
     const [searchState, setSearchState] = useState<string>(search);
 
     const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
+    const [tiers, setTiers] = useState<any[]>([]);
 
     const selectGallery = (gallery: string) => {
         setSelectedGallery(gallery);
@@ -25,6 +26,17 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
 
 
     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 galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, {
             method: 'POST',
             headers: {
@@ -43,19 +55,25 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
     return (
         <div className="absolute inset-0 mx-auto ml-16 md:ml-0 pt-48 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-48 gap-x-4 animate-in overflow-y-scroll no-scrollbar z-0">
 
-            {galleries && galleries.map((gallery: any, index) => (
-                <GalleryThumbnail
-                    key={gallery.name + " " + nsfw}
-                    id={gallery.name}
-                    title={gallery.name}
-                    tags={gallery.tags}
-                    columns={gallery.columns}
-                    showNsfw={nsfw}
-                    subscription={gallery.tier as string}
-                    onSelect={selectGallery}
-                    nsfw={gallery.nsfw}
-                ></GalleryThumbnail>
-            ))}
+            {galleries && galleries.map((gallery: any, index) => {
+                const tier = tiers.find((tier) => tier.name == gallery.tier);
+                const subscriptionColor = tier ? tier.color : null;
+                
+                return (
+                    <GalleryThumbnail
+                        key={gallery.name + " " + nsfw}
+                        id={gallery.name}
+                        title={gallery.name}
+                        tags={gallery.tags}
+                        columns={gallery.columns}
+                        showNsfw={nsfw}
+                        subscription={gallery.tier as string}
+                        subscriptionColor={subscriptionColor}
+                        onSelect={selectGallery}
+                        nsfw={gallery.nsfw}
+                    ></GalleryThumbnail>
+                );
+            })}
         </div>
     );
 };
diff --git a/components/neroshitron/gallery_thumbnail.tsx b/components/neroshitron/gallery_thumbnail.tsx
index 1ecb598..c306d69 100644
--- a/components/neroshitron/gallery_thumbnail.tsx
+++ b/components/neroshitron/gallery_thumbnail.tsx
@@ -6,12 +6,13 @@ interface GalleryThumbnailProps {
     onSelect: (id: string, columns: number) => void;
     title: string;
     subscription: string;
+    subscriptionColor: string;
     tags: string[];
     showNsfw: boolean;
     nsfw: boolean;
 }
 
-const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscription, tags }: GalleryThumbnailProps) => {
+const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscription, subscriptionColor, tags }: GalleryThumbnailProps) => {
     const [galleryId, setGalleryId] = useState<string>(id);
     const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -21,6 +22,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
     const [showNsfwState, setShowNsfw] = useState<boolean>(showNsfw);
     const [subscriptionState, setSubscription] = useState<string>(subscription);
     const [tagsState, setTags] = useState<string[]>(tags);
+    console.log(subscriptionColor)
     const openGallery = () => {
         onSelect(galleryId, galleryCollumns);
     };
@@ -42,7 +44,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
 
     return (
         <div className=" py-3 sm:max-w-xl sm:mx-auto flex-3 animate-fade-up animate-once animate-duration-1000 animate-ease-out animate-normal animate-fill-forwards">
-            <div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl" style={{ cursor: 'pointer' }}>
+            <div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl" style={{ cursor: 'pointer'}}>
                 {!isLoading ? (
                     <>
                         <img
@@ -72,18 +74,8 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
                                     {nsfwState && (
                                         <span className=" bg-error text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
                                     )}
-                                    {subscriptionState === "Free" && (
-                                        <span className=" bg-free text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
-                                    )}
-                                    {subscriptionState === "Tier 1" && (
-                                        <span className=" bg-tier1 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
-                                    )}
-                                    {subscriptionState === "Tier 2" && (
-                                        <span className=" bg-tier2 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
-                                    )}
-                                    {subscriptionState === "Tier 3" && (
-                                        <span className=" bg-tier3 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
-                                    )}
+                                    <span className="text-white px-2 py-1 rounded-md text-sm h-full flex items-center" style={{ cursor: 'pointer', backgroundColor: subscriptionColor }}>Free</span>
+
                                 </div>
                             </div>
                             {/* <div className="text-white flex justify-between">