retrieving user's galleries

fisirc · Nov 28, 2024 · e93f408 · e93f408
1 parent 7ff49ad
commit e93f408
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 55 deletions.
diff --git a/app/src/pages/Dashboard/Dashboard.tsx b/app/src/pages/Dashboard/Dashboard.tsx
@@ -6,55 +6,26 @@ import { UserButton } from "@/components/UserButton";
 import { NewGalleryButton } from '@/components/NewGalleryButton';
 import { useUser } from '@/stores/useUser';
 import { useMantineTheme } from '@mantine/core';
+import { LoadingScreen } from '@/components/Overlays/LoadingScreen';
 
-const galleries = [
-  {
-    title: "Salón cúpula",
-    handle: 'salon-cupula',
-    description: "Una colección que refleja el alma de la expresión",
-    image: "/assets/examples/thumbnail.png",
-  },
-  {
-    title: "Habitación de los muros",
-    handle: 'habitacion-muros',
-    description: "Muros y más muros",
-    image: "/assets/examples/thumbnail.png",
-  },
-  {
-    title: "Salón vintage",
-    handle: 'salon-vintage',
-    description: "La colección perfecta para tu arte vintage",
-    image: "/assets/examples/thumbnail.png",
-  },
-  {
-    title: "Golden room",
-    handle: 'golden-room',
-    description: "Un espacio al estilo del golden hour",
-    image: "/assets/examples/thumbnail.png",
-  },
-  {
-    title: "Arte conexo",
-    handle: 'arte-conexo',
-    description: "Conectando el arte con la realidad",
-    image: "/assets/examples/thumbnail.png",
-  },
-  {
-    title: "Ronda de 3D",
-    handle: 'ronda-3d',
-    description: "Experiencia inmersiva en 3D",
-    image: "/assets/examples/thumbnail.png",
-  },
-] as const;
+import { useEffect } from 'react';
 
 export const GalleryDashboard = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const theme = useMantineTheme();
   const [, setLocation] = useLocation();
-  const { user } = useUser();
+  const { user, galleries, fetchGalleries, loading } = useUser();
 
-  if (!user) {
-    setLocation('/');
-    return null;
+  useEffect(() => {
+    if (user) {
+      fetchGalleries();
+    } else {
+      setLocation('/');
+    }
+  }, [user, fetchGalleries, setLocation]);
+
+  if (!user || loading) {
+    return <LoadingScreen />;
   }
 
   const toggleSidebar = () => {
@@ -107,7 +78,6 @@ export const GalleryDashboard = () => {
           </div>
         </div>
       </header>
-
       <main className={styles.main}>
         <div className={styles.profileSection}>
           <h1 className={styles.profileName}>{user.displayname}</h1>
@@ -119,7 +89,6 @@ export const GalleryDashboard = () => {
               className={styles.searchInput}
             />
           </div>
-
           <div className={styles.filters}>
             <button className={`${styles.filterButton} ${styles.active}`}>
               Mis proyectos
@@ -131,24 +100,20 @@ export const GalleryDashboard = () => {
         </div>
 
         <div className={styles.galleryGrid}>
-          {galleries.map((gallery) => (
-            <div key={gallery.handle} className={styles.galleryCard}>
+          {galleries?.map((gallery) => (
+            <div key={gallery.id} className={styles.galleryCard}>
               <img
-                src={gallery.image}
+                src={gallery.thumbnail}
                 alt={gallery.title}
                 className={styles.galleryImage}
               />
               <div className={styles.galleryOverlay}>
                 <h2 className={styles.galleryTitle}>{gallery.title}</h2>
-                <p className={styles.galleryDescription}>
-                  {gallery.description}
-                </p>
+                <p className={styles.galleryDescription}>{gallery.description}</p>
                 <div className={styles.galleryActions}>
-                  <button className={styles.openButton} onClick={() => {
-                    setLocation(`/${gallery.handle}/edit`);
-                  }}>
+                  <Link href={`/${gallery.slug}/edit`} className={styles.openButton}>
                     Abrir
-                  </button>
+                  </Link>
                   <button className={styles.shareButton}>
                     <Share2 className={styles.shareIcon} />
                     Compartir
@@ -161,4 +126,4 @@ export const GalleryDashboard = () => {
       </main>
     </div>
   );
-}
+}
diff --git a/app/src/pages/Dashboard/GalleryDashboard.module.css b/app/src/pages/Dashboard/GalleryDashboard.module.css
@@ -297,6 +297,7 @@
   font-size: 0.875rem;
   border: none;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .openButton {

diff --git a/app/src/stores/useUser.ts b/app/src/stores/useUser.ts
@@ -32,6 +32,8 @@ interface MetagalleryUserState {
     displayname: string
   }) => Promise<MetagalleryUser | null>,
   logout: () => void,
+  galleries: Array<{ id: number; title: string; description: string, slug: string, templateid: number, thumbnail: string }> | null;
+  fetchGalleries: () => Promise<void>;
 }
 
 const token = window.localStorage.getItem(TOKEN_LC_KEY);
@@ -41,6 +43,7 @@ export const useUser = create<MetagalleryUserState>()(
     user: null,
     token: token,
     loading: Boolean(token), // No loading if no token
+    galleries: null,
     loginWithCredentials: async (username, password) => {
       try {
         const response = await fetch('https://pandadiestro.xyz/services/stiller/auth/login', {
@@ -131,5 +134,54 @@ export const useUser = create<MetagalleryUserState>()(
       window.localStorage.removeItem(TOKEN_LC_KEY);
       set({ user: null, loading: false, token: null });
     },
+    fetchGalleries: async () => {
+      try {
+        const { token } = get();
+        if (!token) throw new Error('No token available');
+        const galleryResponse = await fetch('https://pandadiestro.xyz/services/stiller/gallery', {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            token,
+          },
+        });
+        if (!galleryResponse.ok) throw new Error('Failed to fetch galleries');
+        const galleries = await galleryResponse.json();
+        const galleriesWithThumbnails = await Promise.all(
+          galleries.map(async (gallery: any) => {
+            try {
+              const thumbnailResponse = await fetch(
+                `https://pandadiestro.xyz/services/stiller/template/info/${gallery.templateid}/thumbnail`,
+                {
+                  method: 'GET',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    token,
+                  },
+                }
+              );
+
+              if (!thumbnailResponse.ok) {
+                console.warn(`Failed to fetch thumbnail for template ID ${gallery.templateid}`);
+                return { ...gallery, thumbnail: '/assets/examples/thumbnail.png' };
+              }
+
+              const blob = await thumbnailResponse.blob();
+              const thumbnail = URL.createObjectURL(blob);
+              return { ...gallery, thumbnail };
+
+            } catch (error) {
+              console.error(`Error fetching thumbnail for template ID ${gallery.templateid}:`, error);
+              return { ...gallery, thumbnail: '/assets/examples/thumbnail.png' };
+            }
+          })
+        );
+
+        set({ galleries: galleriesWithThumbnails });
+      } catch (error) {
+        console.error('Error fetching galleries:', error);
+        set({ galleries: null });
+      }
+    },
   }),
 );