Merge branch 'main' of https://github.com/TyrinH/code-racer into result-page-toast-for-guest

Author: TyrinH

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",
@@ -40,12 +41,14 @@
     "lucide-react": "^0.259.0",
     "next": "13.4.9",
     "next-auth": "^4.22.1",
+    "next-safe-action": "^3.0.1",
     "next-themes": "^0.2.1",
     "nextjs-toploader": "^1.4.2",
     "postcss": "8.4.25",
     "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",
@@ -54,7 +57,6 @@
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.6",
     "unstyled-table": "^0.0.3-alpha-3",
-    "zact": "^0.0.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {

package.json

@@ -30,6 +30,9 @@ model User {
   results       Result[]
   achievements  UserAchievement[]
 
+  averageAccuracy Decimal @default(0) @db.Decimal(5, 2)
+  averageCpm      Decimal @default(0) @db.Decimal(6, 2)
+
   role UserRole @default(USER)
 
   snippets     Snippet[]

prisma/schema.prisma

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

src/app/(profile-related)/profile/_components/change-name-form.tsx

@@ -33,7 +33,7 @@ export default function DeleteConfirmation({
     setIsLoading(true);
     e.preventDefault();
     try {
-      await deleteUserAction();
+      await deleteUserAction({});
       await signOut({
         callbackUrl: "/",
       });

src/app/(profile-related)/profile/_components/confirmation.tsx

@@ -1,7 +1,6 @@
 import { Heading } from "@/components/ui/heading";
 import { prisma } from "@/lib/prisma";
 
-
 interface PageProps {
   params: {
     userId: string;
@@ -20,7 +19,10 @@ const page = async ({ params }: PageProps) => {
         title="Hello, Welcome to my profile"
         description="Here you can find information about the user"
       />
-      <h1>If anyone works on the design of this page let me know discord @trace2798</h1>
+      <h1>
+        If anyone works on the design of this page let me know discord
+        @trace2798
+      </h1>
       {/* <h1>Account Created:{formatTime}</h1> */}
       <h1>My Id is: {user?.id}</h1>
       <h2>Name: {user?.name}</h2>