feat: implement authentication layout and pages, including login and registration forms, with validation and API integration

thoughts-frontend/components/post-thought-form.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CreateThoughtSchema, createThought } from "@/lib/api";
+import { useAuth } from "@/hooks/use-auth";
+import { toast } from "sonner";
+import { Globe, Lock, Users } from "lucide-react";
+
+export function PostThoughtForm() {
+  const router = useRouter();
+  const { token } = useAuth();
+
+  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
+    resolver: zodResolver(CreateThoughtSchema),
+    defaultValues: { content: "", visibility: "Public" },
+  });
+
+  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
+    if (!token) {
+      toast.error("You must be logged in to post.");
+      return;
+    }
+
+    try {
+      await createThought(values, token);
+      toast.success("Your thought has been posted!");
+      form.reset();
+      router.refresh(); // This is the key to updating the feed
+    } catch (err) {
+      toast.error("Failed to post thought. Please try again.");
+    }
+  }
+
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      placeholder="What's on your mind?"
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex justify-between items-center">
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="w-[150px]">
+                        <SelectValue placeholder="Visibility" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="Public">
+                        <div className="flex items-center gap-2">
+                          <Globe className="h-4 w-4" /> Public
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="FriendsOnly">
+                        <div className="flex items-center gap-2">
+                          <Users className="h-4 w-4" /> Friends Only
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="Private">
+                        <div className="flex items-center gap-2">
+                          <Lock className="h-4 w-4" /> Private
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {form.formState.isSubmitting ? "Posting..." : "Post Thought"}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+}