feat: implement EditProfile functionality with form validation and update user profile API integration

thoughts-frontend/components/thought-card.tsx

@@ -1,7 +1,30 @@
+"use client";
+
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { UserAvatar } from "./user-avatar";
-import { Thought } from "@/lib/api";
+import { deleteThought, Me, Thought } from "@/lib/api";
 import { formatDistanceToNow } from "date-fns";
+import { useAuth } from "@/hooks/use-auth";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { MoreHorizontal, Trash2 } from "lucide-react";
 
 interface ThoughtCardProps {
   thought: Thought;
@@ -9,25 +32,85 @@ interface ThoughtCardProps {
     username: string;
     avatarUrl?: string | null;
   };
+  currentUser: Me | null;
 }
 
-export function ThoughtCard({ thought, author }: ThoughtCardProps) {
+export function ThoughtCard({
+  thought,
+  author,
+  currentUser,
+}: ThoughtCardProps) {
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const { token } = useAuth();
+  const router = useRouter();
   const timeAgo = formatDistanceToNow(new Date(thought.createdAt), {
     addSuffix: true,
   });
 
+  const isAuthor = currentUser?.username === thought.authorUsername;
+
+  const handleDelete = async () => {
+    if (!token) return;
+    try {
+      await deleteThought(thought.id, token);
+      toast.success("Thought deleted successfully.");
+      router.refresh(); // Refresh the feed
+    } catch (error) {
+      toast.error("Failed to delete thought.");
+    } finally {
+      setIsAlertOpen(false);
+    }
+  };
+
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center gap-4 space-y-0">
-        <UserAvatar src={author.avatarUrl} alt={author.username} />
-        <div className="flex flex-col">
-          <span className="font-bold">{author.username}</span>
-          <span className="text-sm text-muted-foreground">{timeAgo}</span>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <p className="whitespace-pre-wrap break-words">{thought.content}</p>
-      </CardContent>
-    </Card>
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0">
+          <div className="flex items-center gap-4">
+            <UserAvatar src={author.avatarUrl} alt={author.username} />
+            <div className="flex flex-col">
+              <span className="font-bold">{author.username}</span>
+              <span className="text-sm text-muted-foreground">{timeAgo}</span>
+            </div>
+          </div>
+          {isAuthor && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="p-2 rounded-full hover:bg-accent">
+                  <MoreHorizontal className="h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  className="text-destructive"
+                  onSelect={() => setIsAlertOpen(true)}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </CardHeader>
+        <CardContent>
+          <p className="whitespace-pre-wrap break-words">{thought.content}</p>
+        </CardContent>
+      </Card>
+      <AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              thought.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }