@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/gallery/page.tsx

@@ -1,316 +1,337 @@
-// src/pages/gallery.tsx
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { ImageDescCarousel } from "@/components/addOns/functional/ImageDescCarousel";
-import { GallerySection } from "@/components/addOns/functional/galleries/GalleryComplex";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { motion } from "framer-motion";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { useAuth } from "@clerk/nextjs";
-import { GALLERY_PAGE } from "../../lib/constants/gallery";
-import { StrapiUser, UploadedImage, Category  } from "@/components/types";
-
-export default function GalleryPage() {
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { isSignedIn, getToken } = useAuth();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [currentUploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
-  const [galleryUser, setUser] = useState<StrapiUser | null>(null);
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
-
-  const filteredImages = currentUploadedImages;
-
-  useEffect(() => {
-    setUser(user);
-  }, [user]);
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    const handleLogin = () => checkSession();
-    const handleLogout = () => checkSession();
-    window.addEventListener("user-login", handleLogin);
-    window.addEventListener("user-logout", handleLogout);
-    return () => {
-      window.removeEventListener("user-login", handleLogin);
-      window.removeEventListener("user-logout", handleLogout);
-    };
-  }, [checkSession]);
-
-  const fetchInitialData = useCallback(async () => {
-    try {
-      setIsLoading(true);
-
-      const headers: HeadersInit = { "Content-Type": "application/json" };
-      if (isSignedIn) {
-        const token = await getToken();
-        if (!token) {
-          throw new Error(GALLERY_PAGE.ERRORS.NO_AUTH_TOKEN);
-        }
-        headers.Authorization = `Bearer ${token}`;
-      }
-
-      const imagesResponse = await fetch("/api/gallery-data", {
-        headers,
-      });
-      if (!imagesResponse.ok) {
-        const errorText = await imagesResponse.text();
-        console.error("GalleryPage: Fetch images failed", { status: imagesResponse.status, errorText });
-        throw new Error(GALLERY_PAGE.ERRORS.FETCH_IMAGES_FAILED.replace("${errorText}", errorText));
-      }
-      const { data: images, meta } = await imagesResponse.json();
-
-      if (meta?.pagination?.total > 100) {
-        setError(GALLERY_PAGE.ERRORS.PAGINATION_WARNING);
-      }
-
-      setUploadedImages(images || []);
-    } catch (err) {
-      console.error("GalleryPage: Fetch error", err);
-      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.FETCH_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [isSignedIn, getToken]);
-
-  useEffect(() => {
-    fetchInitialData();
-  }, [fetchInitialData]);
-
-  const handleImageUpload = async (
-    e: React.FormEvent<HTMLFormElement>,
-    file: File | null,
-    title: string,
-    description: string,
-    category: Category
-  ) => {
-    e.preventDefault();
-    if (!file) {
-      setError(GALLERY_PAGE.ERRORS.NO_FILE_SELECTED);
-      return;
-    }
-    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
-      setError(GALLERY_PAGE.ERRORS.INVALID_FILE_TYPE);
-      return;
-    }
-    if (!isAdmin) {
-      console.error("GalleryPage: Unauthorized upload attempt", {
-        isSignedIn,
-        businessAdminId: user?.businessAdminId,
-      });
-      setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      const token = await getToken();
-      if (!token) {
-        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("title", title || `Image ${new Date().toISOString()}`);
-      formData.append("description", description || "");
-      formData.append("category", category);
-
-      const response = await fetch("/api/gallery-data", {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        console.error("GalleryPage: Upload failed", { status: response.status, errorData });
-        if (response.status === 401) {
-          setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
-          return;
-        }
-        throw new Error(errorData.error || GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-
-      const { data } = await response.json();
-      setUploadedImages(data || []);
-      setError(null);
-    } catch (err) {
-      console.error("GalleryPage: Upload Error", err);
-      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleDeleteImage = async (documentId: string) => {
-    if (!isAdmin) {
-      console.error("GalleryPage: Unauthorized delete attempt", {
-        isSignedIn,
-        businessAdminId: user?.businessAdminId,
-      });
-      setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_DELETE);
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      const token = await getToken();
-      if (!token) {
-        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
-        return;
-      }
-
-      const response = await fetch("/api/gallery-data", {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ documentId }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        console.error("GalleryPage: Delete failed", { status: response.status, errorData });
-        if (response.status === 401) {
-          setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
-          return;
-        }
-        throw new Error(errorData.error || GALLERY_PAGE.ERRORS.DELETE_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-
-      const { data } = await response.json();
-      setUploadedImages(data || []);
-      setError(null);
-    } catch (err) {
-      console.error("GalleryPage: Delete Error", err);
-      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.DELETE_IMAGE_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (isLoading || authLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
-      {error && <div className="text-red-500 text-center p-4">{error}</div>}
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF54B4;
-          --modern-purple: #D946EF;
-        }
-
-        * {
-          font-family: "Inter", system-ui, sans-serif;
-        }
-
-        .gradient-text {
-          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-        }
-
-        @media (max-width: 1024px) {
-          .container-padding {
-            padding-left: 1.5rem;
-            padding-right: 1.5rem;
-            padding-top: 5rem;
-            padding-bottom: 5rem;
-          }
-
-          .main-heading {
-            font-size: 3rem;
-            margin-bottom: 3rem;
-          }
-
-          .content-text {
-            font-size: 1.25rem;
-          }
-        }
-
-        @media (max-width: 640px) {
-          .container-padding {
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
-            padding-top: 4rem;
-            padding-bottom: 4rem;
-          }
-
-          .main-heading {
-            font-size: 2.5rem;
-          }
-
-          .content-text {
-            font-size: 1rem;
-          }
-        }
-      `}</style>
-      <div
-        className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-white"
-      >
-        <motion.h1
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
-        >
-          {GALLERY_PAGE.UI.MAIN_HEADING}
-        </motion.h1>
-        <div className="mb-4 text-center">
-          {authLoading || isLoading ? (
-            <p className="text-gray-400 text-sm font-medium">{GALLERY_PAGE.UI.LOADING_TEXT}</p>
-          ) : isAdmin ? (
-            <p className="text-gray-400 text-sm font-medium">
-              {GALLERY_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
-            </p>
-          ) : user ? (
-            <p className="text-gray-400 text-sm font-medium"></p>
-          ) : (
-            <p className="text-gray-400 text-sm font-medium"></p>
-          )}
-        </div>
-        <GallerySection
-          user={galleryUser}
-          setUser={setUser}
-          authLoading={authLoading}
-          uploadedImages={currentUploadedImages}
-          setUploadedImages={setUploadedImages}
-          error={error}
-          setError={setError}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          handleImageUpload={handleImageUpload}
-          handleDeleteImage={handleDeleteImage}
-        />
-        <ImageDescCarousel
-          user={galleryUser}
-          uploadedImages={filteredImages}
-          setUploadedImages={setUploadedImages}
-          error={error}
-          setError={setError}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          handleImageUpload={handleImageUpload}
-          handleDeleteImage={handleDeleteImage}
-        />
-      </div>
-    </div>
-  );
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { ImageDescCarousel } from "@/components/addOns/functional/carousels/ImageDescCarousel";
+import { GallerySection } from "@/components/addOns/functional/galleries/GalleryComplex";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { motion } from "framer-motion";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { useAuth } from "@clerk/nextjs";
+import { GALLERY_PAGE } from "../../lib/constants/gallery";
+import { StrapiUser, UploadedImage, Category } from "@/lib/types";
+
+export default function GalleryPage() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { isSignedIn, getToken } = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentUploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+  const [galleryUser, setUser] = useState<StrapiUser | null>(null);
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+
+  const filteredImages = currentUploadedImages;
+
+  useEffect(() => {
+    setUser(user);
+  }, [user]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
+    return () => {
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+    };
+  }, [checkSession]);
+
+  const fetchInitialData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+
+      const headers: HeadersInit = { "Content-Type": "application/json" };
+      if (isSignedIn) {
+        const token = await getToken();
+        if (!token) {
+          throw new Error(GALLERY_PAGE.ERRORS.NO_AUTH_TOKEN);
+        }
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      const imagesResponse = await fetch("/api/gallery-data", {
+        headers,
+      });
+      if (!imagesResponse.ok) {
+        const errorText = await imagesResponse.text();
+        console.error("GalleryPage: Fetch images failed", { status: imagesResponse.status, errorText });
+        throw new Error(GALLERY_PAGE.ERRORS.FETCH_IMAGES_FAILED.replace("${errorText}", errorText));
+      }
+      const { data: images, meta } = await imagesResponse.json();
+
+      const mappedImages: UploadedImage[] = images.map((item: any) => ({
+        id: Number(item.id) || 0,
+        documentId: item.documentId || "",
+        title: item.title || "",
+        description: item.description || "",
+        url: item.url || "",
+        createdAt: item.createdAt || new Date().toISOString(),
+        category: item.category || "none",
+        subCategory: item.subCategory || "",
+        favorite: item.favorite ?? false,
+        banner: item.banner ?? false,
+        startDate: item.startDate || undefined,
+        endDate: item.endDate || undefined,
+      }));
+
+      if (meta?.pagination?.total > 100) {
+        setError(GALLERY_PAGE.ERRORS.PAGINATION_WARNING);
+      }
+
+      setUploadedImages(mappedImages || []);
+    } catch (err) {
+      console.error("GalleryPage: Fetch error", err);
+      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.FETCH_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isSignedIn, getToken]);
+
+  useEffect(() => {
+    fetchInitialData();
+  }, [fetchInitialData]);
+
+  const handleImageUpload = async (
+    e: React.FormEvent<HTMLFormElement>,
+    file: File | null,
+    title: string,
+    description: string,
+    category: Category,
+    subCategory: string,
+    favorite: boolean
+  ) => {
+    e.preventDefault();
+    if (!file) {
+      setError(GALLERY_PAGE.ERRORS.NO_FILE_SELECTED);
+      return;
+    }
+    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+      setError(GALLERY_PAGE.ERRORS.INVALID_FILE_TYPE);
+      return;
+    }
+    if (!isAdmin) {
+      console.error("GalleryPage: Unauthorized upload attempt", {
+        isSignedIn,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const token = await getToken();
+      if (!token) {
+        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("title", title || `Image ${new Date().toISOString()}`);
+      formData.append("description", description || "");
+      formData.append("category", category);
+      formData.append("subCategory", subCategory || "");
+      formData.append("favorite", String(favorite));
+      formData.append("banner", String(false)); 
+      formData.append("startDate", "");
+      formData.append("endDate", "");
+
+      const response = await fetch("/api/gallery-data", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("GalleryPage: Upload failed", { status: response.status, errorData });
+        if (response.status === 401) {
+          setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(errorData.error || GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data } = await response.json();
+      setUploadedImages(data || []);
+      setError(null);
+    } catch (err) {
+      console.error("GalleryPage: Upload Error", err);
+      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteImage = async (documentId: string) => {
+    if (!isAdmin) {
+      console.error("GalleryPage: Unauthorized delete attempt", {
+        isSignedIn,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const token = await getToken();
+      if (!token) {
+        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const response = await fetch("/api/gallery-data", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("GalleryPage: Delete failed", { status: response.status, errorData });
+        if (response.status === 401) {
+          setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(errorData.error || GALLERY_PAGE.ERRORS.DELETE_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data } = await response.json();
+      setUploadedImages(data || []);
+      setError(null);
+    } catch (err) {
+      console.error("GalleryPage: Delete Error", err);
+      setError(err instanceof Error ? err.message : GALLERY_PAGE.ERRORS.DELETE_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading || authLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
+      {error && <div className="text-red-500 text-center p-4">{error}</div>}
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF54B4;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        }
+
+        @media (max-width: 1024px) {
+          .container-padding {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+            padding-top: 5rem;
+            padding-bottom: 5rem;
+          }
+
+          .main-heading {
+            font-size: 3rem;
+            margin-bottom: 3rem;
+          }
+
+          .content-text {
+            font-size: 1.25rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .container-padding {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            padding-top: 4rem;
+            padding-bottom: 4rem;
+          }
+
+          .main-heading {
+            font-size: 2.5rem;
+          }
+
+          .content-text {
+            font-size: 1rem;
+          }
+        }
+      `}</style>
+      <div
+        className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-white"
+      >
+        <motion.h1
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
+        >
+          {GALLERY_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+        <div className="mb-4 text-center">
+          {authLoading || isLoading ? (
+            <p className="text-gray-400 text-sm font-medium">{GALLERY_PAGE.UI.LOADING_TEXT}</p>
+          ) : isAdmin ? (
+            <p className="text-gray-400 text-sm font-medium">
+              {GALLERY_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
+            </p>
+          ) : user ? (
+            <p className="text-gray-400 text-sm font-medium"></p>
+          ) : (
+            <p className="text-gray-400 text-sm font-medium"></p>
+          )}
+        </div>
+        <GallerySection
+          user={galleryUser}
+          setUser={setUser}
+          authLoading={authLoading}
+          uploadedImages={currentUploadedImages}
+          setUploadedImages={setUploadedImages}
+          error={error}
+          setError={setError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          handleImageUpload={handleImageUpload}
+          handleDeleteImage={handleDeleteImage}
+        />
+        <ImageDescCarousel
+          user={galleryUser}
+          uploadedImages={filteredImages}
+          setUploadedImages={setUploadedImages}
+          error={error}
+          setError={setError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          handleImageUpload={handleImageUpload}
+          handleDeleteImage={handleDeleteImage}
+        />
+      </div>
+    </div>
+  );
 }