@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/blogSections/BlogDashboard.tsx

@@ -1,185 +1,185 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { AddButton, EditIconButton, TrashIconButton } from "@/components/other/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/other/card";
-import { Trash2, Edit, Heart, Send } from "lucide-react";
-import { Separator } from "@/components/other/separator";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { BLOG_DASHBOARD } from "./constants/blogDashboard";
-
-interface BlogPost {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-}
-
-interface BlogDashboardProps {
-  isModalOpen: boolean;
-  setIsModalOpen: (open: boolean) => void;
-  isConfirmDeleteOpen: boolean;
-  setIsConfirmDeleteOpen: (open: boolean) => void;
-  posts: BlogPost[];
-  setPosts: (posts: BlogPost[]) => void;
-  setError: (error: string | null) => void;
-  isLoading: boolean;
-  setIsLoading: (loading: boolean) => void;
-  fetchData: () => Promise<void>;
-  formData: BlogPost;
-  setFormData: (data: BlogPost) => void;
-  postToDelete: { id: number; documentId: string; title: string } | null;
-  setPostToDelete: (post: { id: number; documentId: string; title: string } | null) => void;
-  showSuccess: boolean;
-  setShowSuccess: (show: boolean) => void;
-}
-
-const BlogDashboard: React.FC<BlogDashboardProps> = ({
-  isModalOpen,
-  setIsModalOpen,
-  isConfirmDeleteOpen,
-  setIsConfirmDeleteOpen,
-  posts,
-  setPosts,
-  setError,
-  isLoading,
-  setIsLoading,
-  fetchData,
-  formData,
-  setFormData,
-  postToDelete,
-  setPostToDelete,
-  showSuccess,
-  setShowSuccess,
-}) => {
-  const router = useRouter();
-  const { user } = useStrapiAuth();
-  const { getToken, isSignedIn, isLoaded } = useAuth();
-  const [isAdmin, setIsAdmin] = useState(false);
-
-  useEffect(() => {
-    if (isLoaded) {
-      setIsAdmin(isSignedIn && !!user?.businessAdminId);
-    }
-  }, [isLoaded, isSignedIn, user?.businessAdminId]);
-
-  const handleEdit = (post: BlogPost) => {
-    setFormData(post);
-    setIsModalOpen(true);
-  };
-
-  const openModal = (post?: BlogPost) => {
-    if (post) {
-      setFormData(post);
-    } else {
-      setFormData({
-        id: 0,
-        documentId: "",
-        title: "",
-        description: "",
-        author: user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : "",
-        publishedAt: "",
-      });
-    }
-    setIsModalOpen(true);
-  };
-
-  useEffect(() => {
-  }, [posts, isAdmin, isLoaded, isSignedIn, user]);
-
-  if (!isLoaded) {
-    return null; 
-  }
-
-  return (
-    <Card className="rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
-      <CardHeader className="pb-4">
-        <CardTitle className="text-2xl font-bold text-blue-200">{BLOG_DASHBOARD.UI.CARD_TITLE}</CardTitle>
-        <CardDescription className="text-gray-400">{BLOG_DASHBOARD.UI.CARD_DESCRIPTION}</CardDescription>
-      </CardHeader>
-      <CardContent className="p-6 sm:p-8">
-        {showSuccess && (
-          <div className="bg-green-900/50 border-l-4 border-green-600 p-4 rounded-lg backdrop-blur-sm mb-8 animate-pulse">
-            <div className="flex items-center gap-2">
-              <Heart className="h-5 w-5 text-green-400" />
-              <p className="text-green-300">{BLOG_DASHBOARD.UI.SUCCESS_MESSAGE}</p>
-            </div>
-          </div>
-        )}
-        <div className="mb-6">
-          <AddButton onClick={() => openModal()} disabled={isLoading || !isSignedIn}>
-            <Send className="w-5 h-5 mr-2" />
-            {BLOG_DASHBOARD.BUTTONS.ADD_BUTTON}
-          </AddButton>
-        </div>
-        {posts.length > 0 ? (
-          <div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
-            {posts.map((post, index) => (
-              <div key={post.id} className="group">
-                <div
-                  onClick={() => router.push(`/blog/${post.id}`)}
-                  className="cursor-pointer p-4 bg-gray-900/40 rounded-lg border border-gray-700/50 hover:bg-gray-700/30 transition-all relative" // Added relative
-                >
-                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex flex-col max-w-[70%]">
-                      <h4 className="font-medium text-blue-200 mb-1 truncate">{post.title}</h4>
-                      <div className="text-sm text-gray-400">
-                        <span>
-                          {new Date(post.publishedAt).toLocaleDateString("en-US", {
-                            year: "numeric",
-                            month: "short",
-                            day: "numeric",
-                          })}
-                        </span>
-                        <span> | {post.author}</span>
-                      </div>
-                    </div>
-                    {isAdmin && (
-                      <div  className="absolute top-2 right-2 flex space-x-2">
-                        <EditIconButton
-                          variant="edit-icon"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleEdit(post);
-                          }}
-                          aria-label={BLOG_DASHBOARD.BUTTONS.EDIT_BUTTON_ARIA.replace("${post.title}", post.title)}
-                        >
-                        </EditIconButton>
-                        <TrashIconButton
-                          variant="trash-icon"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setPostToDelete({ id: post.id, documentId: post.documentId, title: post.title });
-                            setIsConfirmDeleteOpen(true);
-                          }}
-                          aria-label={BLOG_DASHBOARD.BUTTONS.DELETE_BUTTON_ARIA.replace("${post.title}", post.title)}
-                        >
-                        </TrashIconButton>
-                      </div>
-                    )}
-                  </div>
-                  <p className="text-sm text-gray-400 line-clamp-2">{post.description}</p>
-                </div>
-                {index < posts.length - 1 && <Separator className="my-3 bg-gray-700/50" />}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-10 text-gray-400">
-            <div className="w-16 h-16 bg-gray-900/50 rounded-full flex items-center justify-center mx-auto mb-4">
-              <Send className="w-6 h-6 text-gray-500" />
-            </div>
-            <p className="font-medium">{BLOG_DASHBOARD.UI.NO_POSTS_MESSAGE}</p>
-            <p className="text-sm">{BLOG_DASHBOARD.UI.NO_POSTS_SUBTEXT}</p>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { AddButton, EditIconButton, TrashIconButton } from "@/components/other/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/other/card";
+import { Trash2, Edit, Heart, Send } from "lucide-react";
+import { Separator } from "@/components/other/separator";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { BLOG_DASHBOARD } from "./constants/blogDashboard";
+
+interface BlogPost {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+}
+
+interface BlogDashboardProps {
+  isModalOpen: boolean;
+  setIsModalOpen: (open: boolean) => void;
+  isConfirmDeleteOpen: boolean;
+  setIsConfirmDeleteOpen: (open: boolean) => void;
+  posts: BlogPost[];
+  setPosts: (posts: BlogPost[]) => void;
+  setError: (error: string | null) => void;
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+  fetchData: () => Promise<void>;
+  formData: BlogPost;
+  setFormData: (data: BlogPost) => void;
+  postToDelete: { id: number; documentId: string; title: string } | null;
+  setPostToDelete: (post: { id: number; documentId: string; title: string } | null) => void;
+  showSuccess: boolean;
+  setShowSuccess: (show: boolean) => void;
+}
+
+const BlogDashboard: React.FC<BlogDashboardProps> = ({
+  isModalOpen,
+  setIsModalOpen,
+  isConfirmDeleteOpen,
+  setIsConfirmDeleteOpen,
+  posts,
+  setPosts,
+  setError,
+  isLoading,
+  setIsLoading,
+  fetchData,
+  formData,
+  setFormData,
+  postToDelete,
+  setPostToDelete,
+  showSuccess,
+  setShowSuccess,
+}) => {
+  const router = useRouter();
+  const { user } = useStrapiAuth();
+  const { getToken, isSignedIn, isLoaded } = useAuth();
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  useEffect(() => {
+    if (isLoaded) {
+      setIsAdmin(isSignedIn && !!user?.businessAdminId);
+    }
+  }, [isLoaded, isSignedIn, user?.businessAdminId]);
+
+  const handleEdit = (post: BlogPost) => {
+    setFormData(post);
+    setIsModalOpen(true);
+  };
+
+  const openModal = (post?: BlogPost) => {
+    if (post) {
+      setFormData(post);
+    } else {
+      setFormData({
+        id: 0,
+        documentId: "",
+        title: "",
+        description: "",
+        author: user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : "",
+        publishedAt: "",
+      });
+    }
+    setIsModalOpen(true);
+  };
+
+  useEffect(() => {
+  }, [posts, isAdmin, isLoaded, isSignedIn, user]);
+
+  if (!isLoaded) {
+    return null; 
+  }
+
+  return (
+    <Card className="rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-2xl font-bold text-blue-200">{BLOG_DASHBOARD.UI.CARD_TITLE}</CardTitle>
+        <CardDescription className="text-gray-400">{BLOG_DASHBOARD.UI.CARD_DESCRIPTION}</CardDescription>
+      </CardHeader>
+      <CardContent className="p-6 sm:p-8">
+        {showSuccess && (
+          <div className="bg-green-900/50 border-l-4 border-green-600 p-4 rounded-lg backdrop-blur-sm mb-8 animate-pulse">
+            <div className="flex items-center gap-2">
+              <Heart className="h-5 w-5 text-green-400" />
+              <p className="text-green-300">{BLOG_DASHBOARD.UI.SUCCESS_MESSAGE}</p>
+            </div>
+          </div>
+        )}
+        <div className="mb-6">
+          <AddButton onClick={() => openModal()} disabled={isLoading || !isSignedIn}>
+            <Send className="w-5 h-5 mr-2" />
+            {BLOG_DASHBOARD.BUTTONS.ADD_BUTTON}
+          </AddButton>
+        </div>
+        {posts.length > 0 ? (
+          <div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
+            {posts.map((post, index) => (
+              <div key={post.id} className="group">
+                <div
+                  onClick={() => router.push(`/blog/${post.id}`)}
+                  className="cursor-pointer p-4 bg-gray-900/40 rounded-lg border border-gray-700/50 hover:bg-gray-700/30 transition-all relative" // Added relative
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex flex-col max-w-[70%]">
+                      <h4 className="font-medium text-blue-200 mb-1 truncate">{post.title}</h4>
+                      <div className="text-sm text-gray-400">
+                        <span>
+                          {new Date(post.publishedAt).toLocaleDateString("en-US", {
+                            year: "numeric",
+                            month: "short",
+                            day: "numeric",
+                          })}
+                        </span>
+                        <span> | {post.author}</span>
+                      </div>
+                    </div>
+                    {isAdmin && (
+                      <div  className="absolute top-2 right-2 flex space-x-2">
+                        <EditIconButton
+                          variant="edit-icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleEdit(post);
+                          }}
+                          aria-label={BLOG_DASHBOARD.BUTTONS.EDIT_BUTTON_ARIA.replace("${post.title}", post.title)}
+                        >
+                        </EditIconButton>
+                        <TrashIconButton
+                          variant="trash-icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setPostToDelete({ id: post.id, documentId: post.documentId, title: post.title });
+                            setIsConfirmDeleteOpen(true);
+                          }}
+                          aria-label={BLOG_DASHBOARD.BUTTONS.DELETE_BUTTON_ARIA.replace("${post.title}", post.title)}
+                        >
+                        </TrashIconButton>
+                      </div>
+                    )}
+                  </div>
+                  <p className="text-sm text-gray-400 line-clamp-2">{post.description}</p>
+                </div>
+                {index < posts.length - 1 && <Separator className="my-3 bg-gray-700/50" />}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-10 text-gray-400">
+            <div className="w-16 h-16 bg-gray-900/50 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Send className="w-6 h-6 text-gray-500" />
+            </div>
+            <p className="font-medium">{BLOG_DASHBOARD.UI.NO_POSTS_MESSAGE}</p>
+            <p className="text-sm">{BLOG_DASHBOARD.UI.NO_POSTS_SUBTEXT}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
 export default BlogDashboard;