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

thoughts-frontend/components/edit-profile-form.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/use-auth";
+import { Me, UpdateProfileSchema, updateProfile } from "@/lib/api";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+interface EditProfileFormProps {
+  currentUser: Me;
+}
+
+export function EditProfileForm({ currentUser }: EditProfileFormProps) {
+  const router = useRouter();
+  const { token } = useAuth();
+
+  const form = useForm<z.infer<typeof UpdateProfileSchema>>({
+    resolver: zodResolver(UpdateProfileSchema),
+    defaultValues: {
+      displayName: currentUser.displayName ?? undefined,
+      bio: currentUser.bio ?? undefined,
+      avatarUrl: currentUser.avatarUrl ?? undefined,
+      headerUrl: currentUser.headerUrl ?? undefined,
+      customCss: currentUser.customCss ?? undefined,
+      topFriends: currentUser.topFriends ?? [],
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof UpdateProfileSchema>) {
+    if (!token) return;
+    toast.info("Updating your profile...");
+    try {
+      await updateProfile(values, token);
+      toast.success("Profile updated successfully!");
+      // Redirect to the profile page to see the changes
+      router.push(`/users/${currentUser.username}`);
+      router.refresh(); // Ensure fresh data is loaded
+    } catch (err) {
+      toast.error("Failed to update profile.");
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardContent className="space-y-6 pt-6">
+            <FormField
+              name="displayName"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Display Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Your display name" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="bio"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Bio</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Tell us about yourself" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="avatarUrl"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Avatar URL</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="https://example.com/avatar.png"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="headerUrl"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Header URL</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="https://example.com/header.jpg"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="customCss"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Custom CSS</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="body { font-family: 'Comic Sans MS'; }"
+                      rows={5}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="topFriends"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Top Friends</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="username1, username2, ..."
+                      {...field}
+                      onChange={(e) =>
+                        field.onChange(
+                          e.target.value.split(",").map((s) => s.trim())
+                        )
+                      }
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    A comma-separated list of usernames.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter className="border-t px-6 py-4">
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  );
+}

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>
+    </>
   );
 }