feat: community galleries

fisirc · Nov 28, 2024 · 831feed · 831feed
1 parent 8357282
commit 831feed
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 46 deletions.
diff --git a/app/src/pages/Dashboard/Dashboard.tsx b/app/src/pages/Dashboard/Dashboard.tsx
@@ -1,14 +1,5 @@
-import React, { useState, useEffect } from "react";
-import {
-  Menu,
-  Search,
-  Share2,
-  Plus,
-  Layout,
-  Edit,
-  Copy,
-  Check,
-} from "lucide-react";
+import { useState, useEffect } from "react";
+import { Menu, Search, Plus, Layout, Edit, Copy, Check } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { Modal, useMantineTheme } from "@mantine/core";
 import { NewGalleryForm } from "@/pages/Dashboard/components/NewGalleryForm";
@@ -89,9 +80,19 @@ export const GalleryDashboard = () => {
   const [sharePopupOpen, setSharePopupOpen] = useState(false);
   const [currentGallerySlug, setCurrentGallerySlug] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [communityGalleries, setCommunityGalleries] = useState<
+    Array<{ ownerid: number; title: string; thumbnail: string, slug: string }>
+  >([]);
+  const [showCommunityProjects, setShowCommunityProjects] = useState(false);
   const theme = useMantineTheme();
   const [, setLocation] = useLocation();
-  const { user, galleries, fetchGalleries, loading } = useUser();
+  const {
+    user,
+    galleries,
+    fetchUserGalleries: fetchGalleries,
+    fetchCommunityGalleries,
+    loading,
+  } = useUser();
 
   useEffect(() => {
     if (user) {
@@ -110,6 +111,16 @@ export const GalleryDashboard = () => {
     setSharePopupOpen(true);
   };
 
+  const loadCommunityProjects = async () => {
+    try {
+      const communityGalleries = await fetchCommunityGalleries();
+      setCommunityGalleries(communityGalleries);
+      setShowCommunityProjects(true);
+    } catch (error) {
+      console.error("Error loading community galleries:", error);
+    }
+  };
+
   if (!user || loading) {
     return <LoadingScreen />;
   }
@@ -172,46 +183,78 @@ export const GalleryDashboard = () => {
           </div>
           <div className={styles.filters}>
             <button
-              className={`${styles.filterButton} ${styles.active}`}
+              className={`${styles.filterButton} ${
+                !showCommunityProjects ? styles.active : ""
+              }`}
+              onClick={() => setShowCommunityProjects(false)}
             >
               Mis proyectos
             </button>
-            <button className={styles.filterButton}>
+            <button
+              className={`${styles.filterButton} ${
+                showCommunityProjects ? styles.active : ""
+              }`}
+              onClick={loadCommunityProjects}
+            >
               Proyectos de la comunidad
             </button>
           </div>
         </div>
 
         <div className={styles.galleryGrid}>
-          {galleries?.map((gallery) => (
-            <div key={gallery.id} className={styles.galleryCard}>
-              <img
-                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>
-                <div className={styles.galleryActions}>
-                  <Link
-                    href={`/${gallery.slug}/edit`}
-                    className={styles.openButton}
-                  >
-                    Abrir
-                  </Link>
-                  <button
-                    onClick={() => handleShareGallery(gallery.slug)}
-                    className={styles.shareButton}
-                  >
-                    Compartir
-                  </button>
+          {showCommunityProjects
+            ? communityGalleries.map((gallery, index) => (
+                <div key={index} className={styles.galleryCard}>
+                  <img
+                    src={gallery.thumbnail}
+                    alt={gallery.title}
+                    className={styles.galleryImage}
+                  />
+                  <div className={styles.galleryOverlay}>
+                    <h2 className={styles.galleryTitle}>{gallery.title}</h2>
+                    <p className={styles.galleryDescription}>
+                      Creador: {gallery.ownerid}
+                    </p>
+                    <div className={styles.galleryActions}>
+                      <Link
+                        href={`/${gallery.slug}`}
+                        className={styles.openButton}
+                      >
+                        Visitar
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              ))
+            : galleries?.map((gallery) => (
+                <div key={gallery.id} className={styles.galleryCard}>
+                  <img
+                    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>
+                    <div className={styles.galleryActions}>
+                      <Link
+                        href={`/${gallery.slug}/edit`}
+                        className={styles.openButton}
+                      >
+                        Abrir
+                      </Link>
+                      <button
+                        onClick={() => handleShareGallery(gallery.slug)}
+                        className={styles.shareButton}
+                      >
+                        Compartir
+                      </button>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          ))}
+              ))}
         </div>
       </main>
 
@@ -240,5 +283,3 @@ export const GalleryDashboard = () => {
     </div>
   );
 };
-
-export default GalleryDashboard;
diff --git a/app/src/stores/useUser.ts b/app/src/stores/useUser.ts
@@ -33,7 +33,8 @@ interface MetagalleryUserState {
   }) => Promise<MetagalleryUser | null>,
   logout: () => void,
   galleries: Array<{ id: number; title: string; description: string, slug: string, templateid: number, thumbnail: string }> | null;
-  fetchGalleries: () => Promise<void>;
+  fetchUserGalleries: () => Promise<void>;
+  fetchCommunityGalleries: () => Promise<Array<{ ownerid: number; title: string; thumbnail: string, slug: string }>>;
 }
 
 const token = window.localStorage.getItem(TOKEN_LC_KEY);
@@ -134,7 +135,7 @@ export const useUser = create<MetagalleryUserState>()(
       window.localStorage.removeItem(TOKEN_LC_KEY);
       set({ user: null, loading: false, token: null });
     },
-    fetchGalleries: async () => {
+    fetchUserGalleries: async () => {
       try {
         const { token } = get();
         if (!token) throw new Error('No token available');
@@ -183,5 +184,57 @@ export const useUser = create<MetagalleryUserState>()(
         set({ galleries: null });
       }
     },
+    fetchCommunityGalleries: async () => {
+      try {
+        const { token } = get();
+        if (!token) throw new Error('No token available');
+
+        const response = await fetch('https://pandadiestro.xyz/services/stiller/galleryall', {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            token,
+          },
+        });
+
+        if (!response.ok) throw new Error('Failed to fetch community galleries');
+
+        const galleries = await response.json();
+
+        const communityGalleriesWithThumbnails = 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 { ownerid: gallery.ownerid, title: gallery.title, thumbnail, slug: gallery.slug };
+            } catch (error) {
+              console.error(`Error fetching thumbnail for template ID ${gallery.templateid}:`, error);
+              return { ownerid: gallery.ownerid, title: gallery.title, thumbnail: '/assets/examples/thumbnail.png' };
+            }
+          })
+        );
+
+        return communityGalleriesWithThumbnails;
+      } catch (error) {
+        console.error('Error fetching community galleries:', error);
+        return [];
+      }
+    },
   }),
 );