From 87ba2e032d5dca9e8461e7359ec85a831b871e46 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Mon, 3 Jun 2024 02:10:39 -0400
Subject: [PATCH] fix

---
 app/api/galleries/[id]/images/route.ts |  2 +-
 app/gallery/admin/view/page.tsx        | 24 +++++++++++++++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/api/galleries/[id]/images/route.ts b/app/api/galleries/[id]/images/route.ts
index 98601e2..a538fdd 100644
--- a/app/api/galleries/[id]/images/route.ts
+++ b/app/api/galleries/[id]/images/route.ts
@@ -18,7 +18,7 @@ export async function GET(
     { params }: { params: { id: string } }
   ) {
 
-  const galleryId = params.id.toLowerCase().replace(/\s+/g, '_');  const supabase = createClient();
+  const galleryId = params.id;  const supabase = createClient();
   const user = await supabase.auth.getUser();
 
   
diff --git a/app/gallery/admin/view/page.tsx b/app/gallery/admin/view/page.tsx
index 3306359..5105c30 100644
--- a/app/gallery/admin/view/page.tsx
+++ b/app/gallery/admin/view/page.tsx
@@ -21,6 +21,7 @@ function PageComponent() {
     const [fileNames, setFileNames] = useState<string[]>([]);
     const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
+    const [images, setImages] = useState<string[]>([]);
     const getData = async () => {
         const urlParams = new URLSearchParams(window.location.search);
         const id = urlParams.get('id');
@@ -49,6 +50,9 @@ function PageComponent() {
         if(originalName === ''){
             setOriginalGalleryName(galleryData.gallery.name);
         }
+        const imagesResponse = await fetch('/api/galleries/' + galleryData.gallery.name+ '/images');
+        const imagesUrls = await imagesResponse.json() as string[];
+        setImages(imagesUrls);
     }
     useEffect(() => {
         getData();
@@ -202,15 +206,25 @@ function PageComponent() {
                                 <option selected={name==gallery.thumbnail_file} key={index} value={name}>{name}</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 className="w-full flex opacity-90 backdrop-blur-lg bg-primary  shadow-lg p-8 pt-0 rounded">
+                    
+                            <Masonry
+                                breakpointCols={3}
+                                className="my-masonry-grid pl-6 "
+                            >
+                                {images.map((image, index) => (
+                                        <img
+                                        key={index}
+                                            src={image}
+                                            className={`animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse hover:scale-105 p-2 cursor-pointer my-2 transition-all opacity-100 duration-500 ease-in-out transform`}
+                                        />
+                                    ))}
+                            </Masonry>
+                </div>
             </div>
         </div>
     );