@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +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="flex gap-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;