added update functions

components/(customization)/nameplatecustomization/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { FC, useEffect, useState } from "react";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { getCurrentNameplate } from "./actions";
+import { getCurrentNameplate, updatePlayerNamePlate } from "./actions";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import {
@@ -51,7 +51,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
   playerNamePlateSelectionData,
 }) => {
   const FormSchema = z.object({
-    PlayerNamePlateId: z.number({
+    nameplateId: z.number({
       required_error: "Please select an Avatar Head Item.",
     }),
   });
@@ -61,7 +61,6 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
   });
 
   const [nameplateId, setNameplateId] = useState<number | undefined>(undefined);
-
   useEffect(() => {
     const fetchNamePlates = async () => {
       try {
@@ -78,6 +77,14 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
   }, []);
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
+    const unchangedNamePlateId = nameplateId;
+    const newNamePlateId = data.nameplateId ?? unchangedNamePlateId;
+
+    updatePlayerNamePlate(newNamePlateId).then(() => {
+      setNameplateId(newNamePlateId);
+    });
+    resetFormValues();
+
     toast({
       title: "You submitted the following values:",
       description: (
@@ -86,18 +93,25 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
         </pre>
       ),
     });
+
+    function resetFormValues() {
+      form.reset({
+        nameplateId: undefined,
+      });
+    }
   }
 
   const getTexture = (id: number | undefined, defaultSrc: string) => {
     return id ? getNamePlateTextures(id) : defaultSrc;
   };
 
-  const AvatarTextures = {
-    AvatarHeadAccessory: {
+  const namePlateTextures = {
+    namePlateTexture: {
       src: nameplateId
         ? getTexture(
-            form.watch("PlayerNamePlateId"),
-            `namePlates/CHU_UI_NamePlate_${nameplateId.toString().padStart(8, "0")}.png`
+            form.watch("nameplateId"),
+
+            `namePlates/CHU_UI_NamePlate_${nameplateId.toString().padStart(8, "0")}.png`,
           )
         : `systemVoiceThumbnails/CHU_UI_SystemVoice_Default.png`,
     },
@@ -106,9 +120,9 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
   return (
     <main className="flex flex-col items-center space-y-6">
       {/* Avatar Customization Section */}
-      <div className="w-full flex justify-center">
+      <div className="flex w-full justify-center">
         <div className="">
-          {Object.entries(AvatarTextures).map(([key, { src }]) => (
+          {Object.entries(namePlateTextures).map(([key, { src }]) => (
             <div>
               <img className="w-[300px]" src={src} alt={""} />
             </div>
@@ -119,7 +133,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <FormField
             control={form.control}
-            name="PlayerNamePlateId"
+            name="nameplateId"
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <FormLabel>Select Nameplate</FormLabel>
@@ -131,12 +145,12 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
                         role="combobox"
                         className={cn(
                           "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
+                          !field.value && "text-muted-foreground",
                         )}
                       >
                         {field.value
                           ? playerNamePlateSelectionData.namePlates.find(
-                              (part) => part.id === field.value
+                              (part) => part.id === field.value,
                             )?.str
                           : "Select Name Plate"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -154,7 +168,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
                                 value={part.str ?? ""}
                                 key={part.id}
                                 onSelect={() => {
-                                  form.setValue("PlayerNamePlateId", part.id!);
+                                  form.setValue("nameplateId", part.id!);
                                 }}
                               >
                                 <Check
@@ -162,12 +176,12 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
                                     "mr-2 h-4 w-4",
                                     part.id === field.value
                                       ? "opacity-100"
-                                      : "opacity-0"
+                                      : "opacity-0",
                                   )}
                                 />
                                 {part.str}
                               </CommandItem>
-                            )
+                            ),
                           )}
                         </CommandGroup>
                       </CommandList>