[refactor] Use react form hock for the AddLink

1 files changed, 47 insertions, 23 deletions

diff --git a/web/app/dashboard/bookmarks/components/AddLink.tsx b/web/app/dashboard/bookmarks/components/AddLink.tsx
index fab4db8b..fb77786c 100644
--- a/web/app/dashboard/bookmarks/components/AddLink.tsx
+++ b/web/app/dashboard/bookmarks/components/AddLink.tsx
@@ -1,43 +1,67 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import APIClient from "@/lib/api";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useForm, SubmitErrorHandler } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@/components/ui/use-toast";
+
+const formSchema = z.object({
+  url: z.string().url({ message: "The link must be a valid URL" }),
+});
 
 export default function AddLink() {
   const router = useRouter();
-  const [link, setLink] = useState("");
 
-  const bookmarkLink = async () => {
-    const [_resp, error] = await APIClient.bookmarkLink(link);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  async function onSubmit(value: z.infer<typeof formSchema>) {
+    const [_resp, error] = await APIClient.bookmarkLink(value.url);
     if (error) {
-      // TODO: Proper error handling
-      alert(error.message);
+      toast({ description: error.message, variant: "destructive" });
       return;
     }
     router.refresh();
+  }
+
+  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
+    toast({
+      description: Object.values(errors)
+        .map((v) => v.message)
+        .join("\n"),
+      variant: "destructive",
+    });
   };
 
   return (
-    <div className="py-4 container flex w-full items-center space-x-2">
-      <Input
-        type="text"
-        placeholder="Link"
-        value={link}
-        onChange={(val) => setLink(val.target.value)}
-        onKeyUp={async (event) => {
-          if (event.key == "Enter") {
-            bookmarkLink();
-            setLink("");
-          }
-        }}
-      />
-      <Button onClick={bookmarkLink}>
-        <Plus />
-      </Button>
-    </div>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit, onError)}>
+        <div className="py-4 container flex w-full items-center space-x-2">
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => {
+              return (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Input type="text" placeholder="Link" {...field} />
+                  </FormControl>
+                </FormItem>
+              );
+            }}
+          />
+          <Button type="submit">
+            <Plus />
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 }