update join party ux

components/JoinParty.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useContext } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import { ErrorContext } from "./App";
 
@@ -11,7 +11,7 @@ type Inputs = {
 
 export default function JoinParty() {
   const { mutate } = useSWRConfig();
-  const { register, handleSubmit } = useForm<Inputs>();
+  const { handleSubmit, control } = useForm<Inputs>();
   const { setError } = useContext(ErrorContext);
 
   const onSubmit: SubmitHandler<Inputs> = async ({ code }) => {
@@ -33,11 +33,18 @@ export default function JoinParty() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <input
-        {...register("code")}
-        className="input input-bordered"
-        placeholder="Party Code"
-        required
+      <Controller
+        name="code"
+        control={control}
+        render={({ field }) => (
+          <input
+            {...field}
+            onChange={(e) => field.onChange(e.target.value.toUpperCase())}
+            className="input input-bordered"
+            placeholder="Party Code"
+            required
+          />
+        )}
       />
       <button className="btn btn-primary">Join Party</button>
     </form>