render all idea in frontend

frontend/src/components/IdeaCard.tsx

@@ -0,0 +1,38 @@
+// src/components/TweetCard.tsx
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Idea } from "@/http/api";
+
+interface TweetCardProps {
+  idea: Idea;
+  onDelete: (id: string) => void;
+}
+
+export function IdeaCard({ idea, onDelete }: TweetCardProps) {
+  const handleDelete = () => {
+    if (idea._id) {
+      onDelete(idea._id);
+    } else {
+      console.error("Idea id is missing.");
+    }
+  };
+  return (
+    <Card className="">
+      <CardHeader>
+        <CardTitle>{idea.title}</CardTitle>
+      </CardHeader>
+      <CardContent>{idea.content}</CardContent>
+      <CardFooter className=" justify-end">
+        <Button variant="destructive" onClick={handleDelete}>
+          Delete
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

frontend/src/http/api.ts

@@ -14,6 +14,12 @@ export interface Thread {
   content: string;
 }
 
+export interface Idea {
+  _id: string;
+  title: string;
+  content: string;
+}
+
 const api = axios.create({
   baseURL: conf.backendBaseUrl,
   headers: {
@@ -87,6 +93,18 @@ export const getAllTweets = async () => {
   }
 };
 
+export const getAllIdeas = async () => {
+  try {
+    const response = await api.get("/api/v0/posts/ideas");
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response) {
+      throw error.response.data;
+    }
+    throw error;
+  }
+};
+
 export const getAllThreads = async () => {
   try {
     const response = await api.get("/api/v0/posts/threads");
@@ -110,6 +128,17 @@ export const deleteTweet = async (id: string) => {
   }
 };
 
+export const deleteIdea = async (id: string) => {
+  try {
+    await api.delete(`/api/v0/posts/ideas/${id}`);
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response) {
+      throw error.response.data;
+    }
+    throw error;
+  }
+};
+
 export const deleteThread = async (id: string) => {
   try {
     await api.delete(`/api/v0/posts/threads/${id}`);

frontend/src/pages/Ideas.tsx

@@ -1,26 +1,117 @@
+import { IdeaCard } from "@/components/IdeaCard";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import config from "@/config/config";
+import { deleteIdea, getAllIdeas, Idea } from "@/http/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Loader, PlusCircle } from "lucide-react";
+import { Link } from "react-router-dom";
 
 const Ideas = () => {
+  const queryClient = useQueryClient();
+
+  const { data, error, isLoading } = useQuery<{ ideas: Idea[] }, Error>({
+    queryKey: ["ideas"],
+    queryFn: getAllIdeas,
+  });
+  const deleteMutation = useMutation<void, Error, string>({
+    mutationFn: deleteIdea,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["ideas"],
+      });
+    },
+  });
+
+  const handleDelete = async (id: string) => {
+    if (config.isDevelopment) {
+      console.log("Deleting idea with id:", id);
+    }
+
+    try {
+      await deleteMutation.mutateAsync(id);
+    } catch (error) {
+      console.error("Failed to delete idea:", error);
+    }
+  };
+
+  if (config.isDevelopment) {
+    console.log(data);
+  }
+
+  if (isLoading) {
     return (
-      <>
-        <div className="flex items-center"></div>
-        <div
-          className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-          x-chunk="dashboard-02-chunk-1"
-        >
-          {/* <div className="flex flex-col items-center gap-1 text-center">
-            <h3 className="text-2xl font-bold tracking-tight">
-              Generate Your First Post
-            </h3>
-            <p className="text-sm text-muted-foreground">
-              You can generate your first X post using ai.
-            </p>
-             <Button className="mt-4 flex gap-3">
-              <MagicWandIcon /> Generate
-            </Button>
-          </div> */}
-        </div>
-      </>
-    )
+      <div className="flex items-center justify-center h-screen">
+        <Loader className="animate-spin" />
+      </div>
+    );
   }
-
-  export default Ideas
+
+  return (
+    <>
+      <div className="flex"></div>
+      <div
+        className="flex flex-1 flex-col rounded-lg py-8 border border-dashed shadow-sm"
+        x-chunk="dashboard-02-chunk-1"
+      >
+        <main className="grid items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+          <Tabs defaultValue="all">
+            <div className="grid">
+              <div className="flex items-center justify-between">
+                <TabsList>
+                  <TabsTrigger value="all">All</TabsTrigger>
+                  <TabsTrigger value="active">Active</TabsTrigger>
+                  <TabsTrigger value="draft">Draft</TabsTrigger>
+                </TabsList>
+                <div className="">
+                  <DropdownMenu>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuCheckboxItem checked>
+                        Active
+                      </DropdownMenuCheckboxItem>
+                      <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <Link to="/dashboard/idea">
+                    <Button size="sm" className="h-8 gap-1">
+                      <PlusCircle className="h-3.5 w-3.5" />
+                      <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                        Create Idea
+                      </span>
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <TabsContent value="all"></TabsContent>
+          </Tabs>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {data?.ideas && data.ideas.length > 0
+              ? [...data.ideas].reverse().map((idea, index) => {
+                  const key = idea._id || index;
+                  if (config.isDevelopment) {
+                    console.log(`Idea Key: ${key}`);
+                  }
+                  return (
+                    <IdeaCard key={key} onDelete={handleDelete} idea={idea} />
+                  );
+                })
+              : error && <div>{error.message}</div>}
+          </div>
+        </main>
+      </div>
+    </>
+  );
+};
+
+export default Ideas;