main

src/components/content/ContentTable.tsx

@@ -1,18 +1,14 @@
 "use client";
 
 import { Box, Table, Badge, HStack, IconButton } from "@chakra-ui/react";
-import { LuEye, LuPencil, LuTrash2 } from "react-icons/lu";
+import { useState, useEffect } from "react";
+import { useSession } from "next-auth/react";
+import { LuEye, LuPencil, LuTrash2, LuRefreshCw } from "react-icons/lu";
 import { toaster } from "@/components/ui/feedback/toaster";
-import { useState } from "react";
 import { ContentPreviewDialog } from "./ContentPreviewDialog";
 
-const MOCK_CONTENT = [
-    { id: 1, title: "The Future of AI in Marketing", platform: "LinkedIn", status: "published", date: "2024-03-10" },
-    { id: 2, title: "5 Tips for Better Sleep", platform: "Twitter", status: "draft", date: "2024-03-12" },
-    { id: 3, title: "Product Launch Announcement", platform: "Instagram", status: "scheduled", date: "2024-03-15" },
-    { id: 4, title: "Weekly Tech Roundup", platform: "LinkedIn", status: "review", date: "2024-03-18" },
-    { id: 5, title: "Customer Success Story", platform: "Blog", status: "draft", date: "2024-03-20" },
-];
+
+
 
 const getStatusColor = (status: string) => {
     switch (status) {
@@ -25,8 +21,36 @@ const getStatusColor = (status: string) => {
 };
 
 export function ContentTable() {
+    const { data: session } = useSession();
     const [selectedItem, setSelectedItem] = useState<any>(null);
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const [contentList, setContentList] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        const fetchContent = async () => {
+            if (!session?.accessToken) return;
+            setIsLoading(true);
+            try {
+                const res = await fetch('/api/backend/content', {
+                    headers: {
+                        'Authorization': `Bearer ${session.accessToken}`
+                    }
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    setContentList(Array.isArray(data) ? data : []);
+                }
+            } catch (error) {
+                console.error("Failed to fetch content:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchContent();
+    }, [session]);
+
 
     const handleAction = (action: string, item: any) => {
         if (action === 'View') {
@@ -56,16 +80,31 @@ export function ContentTable() {
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {MOCK_CONTENT.map((item) => (
+                        {isLoading ? (
+                            <Table.Row>
+                                <Table.Cell colSpan={5} textAlign="center" py={10}>
+                                    <HStack justify="center" gap={2}>
+                                        <LuRefreshCw className="animate-spin" />
+                                        <Box>Loading content...</Box>
+                                    </HStack>
+                                </Table.Cell>
+                            </Table.Row>
+                        ) : contentList.length === 0 ? (
+                            <Table.Row>
+                                <Table.Cell colSpan={5} textAlign="center" py={10}>
+                                    No content found. Start by generating some!
+                                </Table.Cell>
+                            </Table.Row>
+                        ) : contentList.map((item) => (
                             <Table.Row key={item.id}>
                                 <Table.Cell fontWeight="medium">{item.title}</Table.Cell>
-                                <Table.Cell>{item.platform}</Table.Cell>
+                                <Table.Cell>{item.type || item.platform}</Table.Cell>
                                 <Table.Cell>
                                     <Badge colorPalette={getStatusColor(item.status)} variant="solid">
                                         {item.status}
                                     </Badge>
                                 </Table.Cell>
-                                <Table.Cell>{item.date}</Table.Cell>
+                                <Table.Cell>{new Date(item.createdAt || item.date).toLocaleDateString()}</Table.Cell>
                                 <Table.Cell textAlign="right">
                                     <HStack justify="flex-end" gap={2}>
                                         <IconButton
@@ -101,6 +140,7 @@ export function ContentTable() {
                 </Table.Root>
             </Box>
 
+
             <ContentPreviewDialog
                 item={selectedItem}
                 open={isPreviewOpen}