Merge pull request #275 from greidinger-reis/react-hook-form

React hook form

Author: scape76

package-lock.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.0",
+    "@hookform/resolvers": "^3.1.1",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -47,6 +48,7 @@
     "react": "18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.1",
     "react-share": "^4.4.1",
     "react-use": "^17.4.0",
     "recharts": "^2.7.2",

package.json

@@ -1,63 +1,100 @@
 "use client";
 
-import { FormEvent, useRef } from "react";
-import { Controls, EditableInput } from "@/components/ui/editable-input";
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { catchError } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 import { updateUserAction } from "../../../_actions/user";
-import { useToast } from "@/components/ui/use-toast";
-import { catchError } from "@/lib/utils";
+
+const updateUserSchema = z.object({
+    name: z
+        .string({
+            required_error: "Please enter a username",
+        })
+        .nonempty("Please enter a username"),
+});
+
+type UpdateUser = z.infer<typeof updateUserSchema>;
 
 export default function ChangeNameForm({
-  displayName,
+    displayName,
 }: {
-  displayName: string | null | undefined;
+    displayName: string | null | undefined;
 }) {
-  const router = useRouter();
-  const session = useSession();
-  const controlsRef = useRef<Controls>({
-    setEdit: () => undefined,
-  });
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { toast } = useToast();
-
-  async function handleSubmit(e: FormEvent) {
-    e.preventDefault();
-    const newName = inputRef.current?.value as string;
-
-    if (newName === displayName) {
-      controlsRef.current.setEdit(false);
-      return;
-    }
+    const router = useRouter();
+    const session = useSession();
+    const form = useForm<UpdateUser>({
+        resolver: zodResolver(updateUserSchema),
+        mode: "onSubmit",
+        defaultValues: {
+            name: displayName ?? "",
+        },
+    });
+
+    const [isEditing, setIsEditing] = React.useState(false)
+
+    const { toast } = useToast();
 
-    controlsRef.current.setEdit(false);
-    try {
-      await updateUserAction({ name: newName });
+    async function onSubmit(data: UpdateUser) {
+        try {
+            await updateUserAction({ name: data.name });
 
-      toast({
-        title: "Username successfully updated.",
-        description: "Your username has been successfully updated.",
-        variant: "default",
-      });
+            toast({
+                title: "Username successfully updated.",
+                description: "Your username has been successfully updated.",
+                variant: "default",
+            });
 
-      await session.update({ name: newName });
-      router.refresh();
-    } catch (err) {
-      catchError(err);
+            await session.update({ name: data.name });
+
+            router.refresh();
+        } catch (error) {
+            catchError(error);
+        }
     }
-  }
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="w-[75%] text-center mb-4 hover:border-dashed border hover:border-white"
-    >
-      <EditableInput
-        controls={controlsRef}
-        value={displayName as string}
-        ref={inputRef}
-        className="text-2xl font-bold"
-      />
-    </form>
-  );
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="w-[75%] text-center mb-4"
+            >
+                <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormControl>
+                                <>
+                                    <Input
+                                        className="text-2xl font-bold hover:border-dashed border hover:border-white"
+                                        onFocus={() => setIsEditing(true)}
+                                        {...field}
+                                    />
+                                    {isEditing && (
+                                        <div className="flex items-center gap-2">
+                                            <Button type="reset" className="w-full" onClick={() => setIsEditing(false)}>Cancel</Button>
+                                            <Button type="submit" className="w-full">Submit</Button>
+                                        </div>
+                                    )}
+                                </>
+                            </FormControl>
+                        </FormItem>
+                    )}
+                />
+            </form>
+        </Form>
+    );
 }