@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/products/productTwo/page.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { ProductList } from "@/components/addOns/functional/ProductList";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { useAuth } from "@clerk/nextjs";
+import { PRODUCT_PAGE } from "../constants/product";
+import { StrapiUser, UploadedImage, Category } from "@/lib/types";
+import { compressImage } from "@/lib/utils/compressImage";
+import { ArrowLeft } from 'lucide-react';
+import Link from "next/link";
+import ProductHero from "@/components/addOns/non-functional/heros/ProductHero";
+
+
+export default function SolidSurfaceProducts() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { isSignedIn, getToken } = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+  const [galleryUser, setUser] = useState<StrapiUser | null>(null);
+  const [subCategories, setSubCategories] = useState<string[]>([]);
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+  const category: Category = "indoor";
+
+  useEffect(() => {
+    setUser(user);
+  }, [user, authLoading, isSignedIn]);
+
+  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(PRODUCT_PAGE.ERRORS.NO_AUTH_TOKEN);
+        }
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      const response = await fetch("/api/gallery-data", { headers });
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error("Gallery fetch failed:", { status: response.status, errorText });
+        throw new Error(PRODUCT_PAGE.ERRORS.FETCH_IMAGES_FAILED.replace("${errorText}", errorText));
+      }
+
+      const { data: images, meta }: { data: UploadedImage[]; meta?: { pagination?: { total: number } } } = await response.json();
+
+      if (meta && meta.pagination && meta.pagination.total > 100) {
+        setError(PRODUCT_PAGE.ERRORS.PAGINATION_WARNING);
+      }
+
+      setUploadedImages(images || []);
+      const subCats: string[] = images
+        .filter((img) => img.category === category && typeof img.subCategory === "string" && img.subCategory !== "")
+        .reduce<string[]>((acc, img) => {
+          const subCategory = img.subCategory as string;
+          return acc.includes(subCategory) ? acc : [...acc, subCategory];
+        }, []);
+      setSubCategories(subCats);
+    } catch (err) {
+      console.error("Fetch error details:", err);
+      setError(err instanceof Error ? err.message : PRODUCT_PAGE.ERRORS.FETCH_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isSignedIn, getToken, category]);
+
+  useEffect(() => {
+    fetchInitialData();
+  }, [fetchInitialData]);
+
+  const handleImageUpload = async (
+    e: React.FormEvent<HTMLFormElement>,
+    file: File | null,
+    title: string,
+    description: string,
+    category: Category,
+    subCategory: string
+  ) => {
+    e.preventDefault();
+
+    if (!file) {
+      setError(PRODUCT_PAGE.ERRORS.NO_FILE_SELECTED);
+      return;
+    }
+
+    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+      setError(PRODUCT_PAGE.ERRORS.INVALID_FILE_TYPE);
+      return;
+    }
+
+    if (!isAdmin) {
+      setError(PRODUCT_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+
+    if (!subCategory) {
+      setError("Subcategory is required");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const token = await getToken();
+      if (!token) {
+        setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const compressedFile = await compressImage(file);
+
+      const formData = new FormData();
+      formData.append("file", compressedFile);
+      formData.append("title", title || `Image ${new Date().toISOString()}`);
+      formData.append("description", description || "");
+      formData.append("category", category);
+      formData.append("subCategory", subCategory);
+
+      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("Upload error response:", errorData);
+        if (response.status === 401) {
+          setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(PRODUCT_PAGE.ERRORS.UPLOAD_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data }: { data: UploadedImage[] } = await response.json();
+      setUploadedImages(data || []);
+      if (subCategory && !subCategories.includes(subCategory)) {
+        setSubCategories([...subCategories, subCategory]);
+      }
+      setError(null);
+    } catch (err) {
+      console.error("Upload error details:", err);
+      setError(err instanceof Error ? err.message : PRODUCT_PAGE.ERRORS.UPLOAD_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteImage = async (documentId: string) => {
+    if (!isAdmin) {
+      setError(PRODUCT_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const token = await getToken();
+      if (!token) {
+        setError(PRODUCT_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("Delete error response:", errorData);
+        if (response.status === 401) {
+          setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(PRODUCT_PAGE.ERRORS.DELETE_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data }: { data: UploadedImage[] } = await response.json();
+
+      setUploadedImages(data || []);
+      const subCats: string[] = data
+        .filter((img) => img.category === category && typeof img.subCategory === "string" && img.subCategory !== "")
+        .reduce<string[]>((acc, img) => {
+          const subCategory = img.subCategory as string;
+          return acc.includes(subCategory) ? acc : [...acc, subCategory];
+        }, []);
+      setSubCategories(subCats);
+      setError(null);
+    } catch (err) {
+      console.error("Delete error details:", err);
+      setError(err instanceof Error ? err.message : PRODUCT_PAGE.ERRORS.DELETE_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading || authLoading) {
+    return <Spinner />;
+  }
+
+  const imageSrc = uploadedImages[0]?.url ?? "/placeholder.jpg";
+
+  return (
+    <div className="min-h-screen w-full bg-white font-sans">
+      <div className="w-full pt-20 lg:pt-40 pb-16 relative z-10 container-padding">
+        {error && (
+          <div className="text-red-600 text-center p-4 mb-4 max-w-4xl mx-auto bg-red-50 border border-red-200 rounded-lg backdrop-blur-sm">
+            {error}
+          </div>
+        )}
+
+        <ProductHero />
+
+        <div className="mb-8">
+          <ProductList
+            user={galleryUser}
+            uploadedImages={uploadedImages}
+            setUploadedImages={setUploadedImages}
+            error={error}
+            setError={setError}
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            handleImageUpload={handleImageUpload}
+            handleDeleteImage={handleDeleteImage}
+            visibleCategories={[category]}
+            category={category}
+            visibleSubCategories={subCategories}
+            setVisibleSubCategories={setSubCategories}
+          />
+        </div>
+        <div className="text-center mt-8">
+          <Link
+            href="/gallery"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gray-600 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            Back to Services
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}