@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/banner/BannerDashboard.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAuth } from "@clerk/nextjs";
+import { UploadedImage } from "@/lib/types";
+import { GALLERY_COMPLEX } from "../galleries/constants/galleryComplex";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { SubmitButton } from "@/components/other/button";
+
+interface BannerDashboardProps {
+  onUpdate?: (updatedImages: UploadedImage[]) => void;
+}
+
+export function BannerDashboard({ onUpdate }: BannerDashboardProps) {
+  const { getToken } = useAuth();
+  const [bannerData, setBannerData] = useState<UploadedImage | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [form, setForm] = useState({
+    title: "",
+    description: "",
+    startDate: "",
+    endDate: "",
+  });
+
+  useEffect(() => {
+    const fetchBanner = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/gallery-data?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          const images = Array.isArray(result.data)
+            ? result.data.map((item: any) => ({
+                id: Number(item.id) || 0,
+                documentId: item.documentId || "",
+                title: item.title || "Untitled",
+                description: item.description || "",
+                url: item.image?.url
+                  ? item.image.url.startsWith("http")
+                    ? item.image.url
+                    : `${process.env.STRAPI_API_URL}${item.image.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,
+              }))
+            : [];
+          const banner = images.find((image: UploadedImage) => image.banner);
+          setBannerData((prev) =>
+            JSON.stringify(prev) !== JSON.stringify(banner) ? banner : prev
+          );
+          if (banner) {
+            setForm({
+              title: banner.title || "",
+              description: banner.description || "",
+              startDate: banner.startDate
+                ? new Date(banner.startDate).toISOString().slice(0, 10)
+                : "",
+              endDate: banner.endDate
+                ? new Date(banner.endDate).toISOString().slice(0, 10)
+                : "",
+            });
+          }
+        } else {
+          setError("Failed to fetch banner data");
+        }
+      } catch (err) {
+        setError("Error fetching banner data");
+        console.error("BannerDashboard: Fetch Error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBanner();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!bannerData) {
+      setError("No banner image selected");
+      return;
+    }
+    if (!form.startDate || !form.endDate) {
+      setError("Both start date and end date are required");
+      return;
+    }
+    if (new Date(form.startDate) > new Date(form.endDate)) {
+      setError("End date must be after start date");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const token = await getToken();
+      if (!token) {
+        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+        console.error("BannerDashboard: No authentication token available", {
+          timestamp: new Date().toISOString(),
+        });
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("documentId", bannerData.documentId);
+      formData.append("title", form.title);
+      formData.append("description", form.description);
+      formData.append("banner", String(bannerData.banner));
+      formData.append("startDate", new Date(form.startDate).toISOString());
+      formData.append("endDate", new Date(form.endDate).toISOString());
+
+      console.log("Submitting FormData:", Object.fromEntries(formData));
+
+      const response = await fetch("/api/gallery-data", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("BannerDashboard: Update failed", {
+          status: response.status,
+          errorData,
+          timestamp: new Date().toISOString(),
+        });
+        if (response.status === 401) {
+          setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(
+          errorData.error ||
+            GALLERY_COMPLEX.ERRORS.EDIT_FAILED_STATUS.replace(
+              "${response.status}",
+              response.status.toString()
+            )
+        );
+      }
+
+      const { data } = await response.json();
+      if (onUpdate) {
+        onUpdate(data || []);
+      }
+      setBannerData((prev) =>
+        prev
+          ? {
+              ...prev,
+              title: form.title,
+              description: form.description,
+              startDate: form.startDate
+                ? new Date(form.startDate).toISOString()
+                : undefined,
+              endDate: form.endDate
+                ? new Date(form.endDate).toISOString()
+                : undefined,
+              banner: prev.banner,
+            }
+          : prev
+      );
+      setError(null);
+    } catch (err) {
+      console.error("BannerDashboard: Update Error", {
+        error: err instanceof Error ? err.message : "Unknown error",
+        timestamp: new Date().toISOString(),
+      });
+      setError(
+        err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-4 sm:p-6 bg-gray-800 rounded-lg min-h-[200px] flex items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 bg-gray-800 rounded-lg shadow-lg max-w-2xl mx-auto">
+      <h3 className="text-lg sm:text-xl font-bold text-white mb-4">Manage Banner</h3>
+      {error && <p className="text-red-500 text-sm mb-4">{error}</p>}
+      {bannerData ? (
+        <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
+          <div>
+            <label
+              htmlFor="title"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              Banner Title
+            </label>
+            <input
+              id="title"
+              type="text"
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              placeholder="Enter banner title"
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="description"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              Banner Description
+            </label>
+            <textarea
+              id="description"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              placeholder="Enter banner description"
+              rows={4}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="start-date"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              Start Date
+            </label>
+            <input
+              id="start-date"
+              type="date"
+              value={form.startDate}
+              onChange={(e) => setForm({ ...form, startDate: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              required
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="end-date"
+              className="block text-sm font-medium text-gray-300 mb-1"
+            >
+              End Date
+            </label>
+            <input
+              id="end-date"
+              type="date"
+              value={form.endDate}
+              onChange={(e) => setForm({ ...form, endDate: e.target.value })}
+              className="p-2 bg-gray-700 text-white rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm sm:text-base"
+              disabled={isLoading}
+              required
+            />
+          </div>
+          <div className="flex justify-end">
+            <SubmitButton
+              type="submit"
+              disabled={isLoading}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:bg-blue-400 text-sm sm:text-base"
+            >
+              {isLoading
+                ? GALLERY_COMPLEX.BUTTONS.SAVING_BUTTON
+                : GALLERY_COMPLEX.BUTTONS.SAVE_BUTTON}
+            </SubmitButton>
+          </div>
+        </form>
+      ) : (
+        <p className="text-gray-400 text-sm sm:text-base">
+          No banner image found. Please upload an image with banner: true in the gallery.
+        </p>
+      )}
+    </div>
+  );
+}