added update functions

components/(customization)/mapiconcustomization/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { FC, useEffect, useState } from "react";
-import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -15,7 +14,6 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -31,10 +29,10 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "../../ui/use-toast";
 import { cozynet_chuni_static_mapicon } from "@/prisma/schemas/artemis/generated/artemis";
-import { getCurrentMapIcon } from "./actions";
+import { getCurrentMapIcon, updatePlayerMapIcon } from "./actions";
+
 const getNamePlateTextures = (id: number | undefined) => {
   if (id === undefined) return "";
-  // Pad the id to be 8 digits long, using leading zeros
   const paddedId = id.toString().padStart(8, "0");
   return `mapIcon/CHU_UI_MapIcon_${paddedId}.png`;
 };
@@ -51,7 +49,7 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
   playerMapIconCustomization,
 }) => {
   const FormSchema = z.object({
-    PlayerMapIcon: z.number({
+    mapIconId: z.number({
       required_error: "Please select an Avatar Head Item.",
     }),
   });
@@ -78,6 +76,14 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
   }, []);
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
+    const uncangedMapIconId = mapIconId;
+    const newMapIconId = data.mapIconId ?? uncangedMapIconId;
+
+    updatePlayerMapIcon(newMapIconId).then(() => {
+      setMapIconId(newMapIconId);
+    });
+    resetFormValues();
+
     toast({
       title: "You submitted the following values:",
       description: (
@@ -86,18 +92,24 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
         </pre>
       ),
     });
+
+    function resetFormValues() {
+      form.reset({
+        mapIconId: undefined,
+      });
+    }
   }
 
   const getTexture = (id: number | undefined, defaultSrc: string) => {
     return id ? getNamePlateTextures(id) : defaultSrc;
   };
 
-  const AvatarTextures = {
-    AvatarHeadAccessory: {
+  const MapIconTextures = {
+    mapIconId: {
       src: mapIconId
         ? getTexture(
-            form.watch("PlayerMapIcon"),
-            `mapIcon/CHU_UI_MapIcon_${mapIconId.toString().padStart(8, "0")}.png`
+            form.watch("mapIconId"),
+            `mapIcon/CHU_UI_MapIcon_${mapIconId.toString().padStart(8, "0")}.png`,
           )
         : `systemVoiceThumbnails/CHU_UI_SystemVoice_Default.png`,
     },
@@ -105,10 +117,9 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
 
   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(MapIconTextures).map(([key, { src }]) => (
             <div>
               <img className="w-[100px]" src={src} alt={""} />
             </div>
@@ -119,7 +130,7 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <FormField
             control={form.control}
-            name="PlayerMapIcon"
+            name="mapIconId"
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <FormLabel>Select Map Icon</FormLabel>
@@ -131,12 +142,12 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
                         role="combobox"
                         className={cn(
                           "w-[300px] justify-between",
-                          !field.value && "text-muted-foreground"
+                          !field.value && "text-muted-foreground",
                         )}
                       >
                         {field.value
                           ? playerMapIconCustomization.mapIcon.find(
-                              (part) => part.id === field.value
+                              (part) => part.id === field.value,
                             )?.str
                           : "Select Map Icon"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -153,7 +164,7 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
                               value={part.str ?? ""}
                               key={part.id}
                               onSelect={() => {
-                                form.setValue("PlayerMapIcon", part.id!);
+                                form.setValue("mapIconId", part.id!);
                               }}
                             >
                               <Check
@@ -161,7 +172,7 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
                                   "mr-2 h-4 w-4",
                                   part.id === field.value
                                     ? "opacity-100"
-                                    : "opacity-0"
+                                    : "opacity-0",
                                 )}
                               />
                               {part.str}