@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/blog/page.tsx

@@ -1,217 +1,250 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/other/card";
-import { Button } from "@/components/other/button";
-import { AlertCircle } from "lucide-react";
-import { Alert, AlertDescription } from "@/components/other/alert";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import BlogDashboard from "@/components/addOns/functional/blogSections/BlogDashboard";
-import BlogFormPopUp from "@/components/addOns/functional/blogSections/BlogFormPopUp";
-
-interface BlogPost {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-}
-
-export default function BlogPage() {
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken, isSignedIn } = useAuth();
-  const { user: clerkUser } = useUser();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
-  const [posts, setPosts] = useState<BlogPost[]>([]);
-  const [postToDelete, setPostToDelete] = useState<{ id: number; documentId: string; title: string } | null>(null);
-  const [showSuccess, setShowSuccess] = useState(false);
-  const [formData, setFormData] = useState<BlogPost>({
-    id: 0,
-    documentId: "",
-    title: "",
-    description: "",
-    author: user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : "",
-    publishedAt: "",
-  });
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
-
-  const timeoutPromise = (promise: Promise<any>, timeout: number) => {
-    return Promise.race([
-      promise,
-      new Promise((_, reject) => setTimeout(() => reject(new Error("Session check timed out")), timeout)),
-    ]);
-  };
-
-  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]);
-
-  useEffect(() => {
-    if (isModalOpen && !formData.id && user?.firstName && user?.lastName) {
-      setFormData({
-        ...formData,
-        author: `${user.firstName} ${user.lastName}`,
-      });
-    }
-  }, [isModalOpen, formData.id, user?.firstName, user?.lastName]);
-
-  const fetchData = async () => {
-    if (!isSignedIn || !clerkUser?.id) {
-      setIsLoading(false);
-      return;
-    }
-    setIsLoading(true);
-    try {
-      const token = await getToken();
-      if (!token) {
-        throw new Error("No authentication token available");
-      }
-      const response = await fetch("/api/blog", {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        cache: "no-store",
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || "Failed to fetch blog posts");
-      }
-      const { data } = await response.json();
-      setPosts(
-        data.blogPosts.map((post: BlogPost) => ({
-          ...post,
-          publishedAt: new Date(post.publishedAt).toISOString(),
-        }))
-      );
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "An unknown error occurred");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!isSignedIn || !clerkUser?.id) {
-      setIsLoading(false);
-      return;
-    }
-    fetchData();
-  }, [isSignedIn, clerkUser?.id]);
-
-  if (authLoading || isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  if (!isSignedIn || !clerkUser?.id) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-400">Not authenticated</h1>
-          <p className="mt-4 text-gray-500">
-            You must be logged in to view this page.{" "}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!isAdmin) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-400">Unauthorized</h1>
-          <p className="mt-4 text-gray-500">Only admins can access the blog dashboard.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
-      <div className="max-w-7xl mx-auto">
-        <header className="mb-12 relative">
-          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
-          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
-            Blog Dashboard
-          </h1>
-          <p className="mt-2 text-sm sm:text-base text-gray-400">
-            Create and manage your blog posts
-          </p>
-        </header>
-
-        {error && (
-          <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm mb-8">
-            <div className="flex items-center gap-2">
-              <AlertCircle className="h-5 w-5 text-red-400" />
-              <p className="text-red-300">{error}</p>
-            </div>
-          </div>
-        )}
-
-        <div className="mb-8 text-center">
-          <p className="text-sm text-gray-400 font-medium">Admin access granted</p>
-        </div>
-
-        <BlogDashboard
-          isModalOpen={isModalOpen}
-          setIsModalOpen={setIsModalOpen}
-          isConfirmDeleteOpen={isConfirmDeleteOpen}
-          setIsConfirmDeleteOpen={setIsConfirmDeleteOpen}
-          posts={posts}
-          setPosts={setPosts}
-          setError={setError}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          fetchData={fetchData}
-          formData={formData}
-          setFormData={setFormData}
-          postToDelete={postToDelete}
-          setPostToDelete={setPostToDelete}
-          showSuccess={showSuccess}
-          setShowSuccess={setShowSuccess}
-        />
-
-        <BlogFormPopUp
-          isModalOpen={isModalOpen}
-          setIsModalOpen={setIsModalOpen}
-          isConfirmDeleteOpen={isConfirmDeleteOpen}
-          setIsConfirmDeleteOpen={setIsConfirmDeleteOpen}
-          postToDelete={postToDelete}
-          setPostToDelete={setPostToDelete}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          formData={formData}
-          setFormData={setFormData}
-          setError={setError}
-          setShowSuccess={setShowSuccess}
-          fetchData={fetchData}
-        />
-      </div>
-    </div>
-  );
+"use client";
+
+import { useState, useEffect } from "react";
+import { AlertCircle } from "lucide-react";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { isAdminUser } from "@/lib/auth/auth-utils"; 
+import Spinner from "@/components/addOns/non-functional/spinner";
+import BlogDashboard from "@/components/addOns/functional/blogSections/BlogDashboard";
+import BlogFormPopUp from "@/components/addOns/functional/blogSections/BlogFormPopUp";
+
+interface BlogPost {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+}
+
+export default function BlogPage() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { getToken, isSignedIn } = useAuth();
+  const { user: clerkUser } = useUser();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+  const [postToDelete, setPostToDelete] = useState<{ id: number; documentId: string; title: string } | null>(null);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [formData, setFormData] = useState<BlogPost>({
+    id: 0,
+    documentId: "",
+    title: "",
+    description: "",
+    author: user?.username || "",
+    publishedAt: "",
+  });
+  const [isAdmin, setIsAdmin] = useState(false); 
+
+  const timeoutPromise = (promise: Promise<any>, timeout: number) => {
+    return Promise.race([
+      promise,
+      new Promise((_, reject) => setTimeout(() => reject(new Error("Session check timed out")), timeout)),
+    ]);
+  };
+
+  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]);
+
+  useEffect(() => {
+    if (isModalOpen && !formData.id && user?.username) {
+      setFormData({
+        ...formData,
+        author: user.username,
+      });
+    }
+  }, [isModalOpen, formData.id, user?.username]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async (retries = 3, delay = 1000) => {
+      if (!isSignedIn || !user?.authId) {
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+      for (let attempt = 1; attempt <= retries; attempt++) {
+        try {
+          const adminStatus = await isAdminUser(isSignedIn, user);
+          if (isMounted) {
+            setIsAdmin(adminStatus);
+            setError(null);
+          }
+          return;
+        } catch (error) {
+          console.error("BlogPage: Admin check failed:", {
+            error: error instanceof Error ? error.message : "Unknown error",
+            attempt,
+            timestamp: new Date().toISOString(),
+          });
+          if (attempt < retries) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+          } else if (isMounted) {
+            setIsAdmin(false);
+            setError("Failed to verify admin status");
+          }
+        }
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
+  const fetchData = async () => {
+    if (!isSignedIn || !clerkUser?.id) {
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const token = await getToken();
+      if (!token) {
+        throw new Error("No authentication token available");
+      }
+      const response = await fetch("/api/blog", {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        cache: "no-store",
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to fetch blog posts");
+      }
+      const { data } = await response.json();
+      setPosts(
+        data.blogPosts.map((post: BlogPost) => ({
+          ...post,
+          publishedAt: new Date(post.publishedAt).toISOString(),
+        }))
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isSignedIn || !clerkUser?.id) {
+      setIsLoading(false);
+      return;
+    }
+    fetchData();
+  }, [isSignedIn, clerkUser?.id]);
+
+  if (authLoading || isLoading) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (!isSignedIn || !clerkUser?.id) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">Not authenticated</h1>
+          <p className="mt-4 text-gray-500">
+            You must be logged in to view this page.{" "}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">Unauthorized</h1>
+          <p className="mt-4 text-gray-500">Only admins can access the blog dashboard.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-12 relative">
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
+          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
+            Blog Dashboard
+          </h1>
+          <p className="mt-2 text-sm sm:text-base text-gray-400">
+            Create and manage your blog posts
+          </p>
+        </header>
+
+        {error && (
+          <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm mb-8">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-red-400" />
+              <p className="text-red-300">{error}</p>
+            </div>
+          </div>
+        )}
+
+        <div className="mb-8 text-center">
+          <p className="text-sm text-gray-400 font-medium">Admin access granted</p>
+        </div>
+
+        <BlogDashboard
+          isModalOpen={isModalOpen}
+          setIsModalOpen={setIsModalOpen}
+          isConfirmDeleteOpen={isConfirmDeleteOpen}
+          setIsConfirmDeleteOpen={setIsConfirmDeleteOpen}
+          posts={posts}
+          setPosts={setPosts}
+          setError={setError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          fetchData={fetchData}
+          formData={formData}
+          setFormData={setFormData}
+          postToDelete={postToDelete}
+          setPostToDelete={setPostToDelete}
+          showSuccess={showSuccess}
+          setShowSuccess={setShowSuccess}
+        />
+
+        <BlogFormPopUp
+          isModalOpen={isModalOpen}
+          setIsModalOpen={setIsModalOpen}
+          isConfirmDeleteOpen={isConfirmDeleteOpen}
+          setIsConfirmDeleteOpen={setIsConfirmDeleteOpen}
+          postToDelete={postToDelete}
+          setPostToDelete={setPostToDelete}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          formData={formData}
+          setFormData={setFormData}
+          setError={setError}
+          setShowSuccess={setShowSuccess}
+          fetchData={fetchData}
+        />
+      </div>
+    </div>
+  );
 }