fixed hydration error when changing theme and added dynamic default avatar

components/avatarcustomization/actions.ts

@@ -7,27 +7,50 @@ import type * as Prisma from "@prisma/client";
 // type ChuniScorePlaylog = Prisma.PrismaClient;
 // type ChuniStaticMusic = Prisma.PrismaClient;
 
+export async function getCurrentAvatarParts() {
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const avatarParts = await artemis.chuni_profile_data.findMany({
+    where: {
+      user: user.UserId,
+    },
+    select: {
+      avatarSkin: true,
+      avatarBack: true,
+      avatarFace: true,
+      avatarFront: true,
+      avatarHead: true,
+      avatarItem: true,
+      avatarWear: true,
+    },
+  });
+  return avatarParts;
+}
 
 export async function getAllAvatarParts(category: number) {
-    const { user } = await getAuth();
-  
-    if (!user || !user.accessCode) {
-      throw new Error("User is not authenticated or accessCode is missing");
-    }
-  
-    const avatarParts = await artemis.chuni_static_avatar.findMany({
-      where: {
-        category: category
-          },
-          select: {
-            id: true,
-            name: true,
-            avatarAccessoryId: true, 
-            category: true, 
-            version: true, 
-            iconPath: true, 
-            texturePath: true,
-          }
-    });
-    return avatarParts;
-  }
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const avatarParts = await artemis.chuni_static_avatar.findMany({
+    where: {
+      category: category,
+    },
+    select: {
+      id: true,
+      name: true,
+      avatarAccessoryId: true,
+      category: true,
+      version: true,
+      iconPath: true,
+      texturePath: true,
+    },
+  });
+  return avatarParts;
+}

components/avatarcustomization/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React, { FC } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
 import { Check, ChevronsUpDown } from "lucide-react";
-
+import { getCurrentAvatarParts } from "./actions";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import {
@@ -28,7 +28,6 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { z } from "zod";
-type chunithm_avatar = chuni_static_avatar;
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "../ui/use-toast";
@@ -38,11 +37,12 @@ const getAvatarTextureSrc = (id: number | undefined) => {
   return `avatarAccessory/CHU_UI_Avatar_Tex_0${id}.png`;
 };
 
+type chunithm_avatar = chuni_static_avatar;
+
 type AvatarSelectionProps = {
   avatarHeadSelectionData: {
     avatarParts: chunithm_avatar[];
   };
-
   avatarFaceSelectionData: {
     avatarParts: chunithm_avatar[];
   };
@@ -86,6 +86,46 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
     resolver: zodResolver(FormSchema),
   });
 
+  const [avatarFaceId, setAvatarFaceId] = useState<number | undefined>(
+    undefined
+  );
+
+  const [avatarSkinId, setAvatarSkinId] = useState<number | undefined>(
+    undefined
+  );
+  const [avatarHeadId, setAvatarHeadId] = useState<number | undefined>(
+    undefined
+  );
+  const [avatarWearId, setAvatarWearId] = useState<number | undefined>(
+    undefined
+  );
+  const [avatarBackId, setAvatarBackId] = useState<number | undefined>(
+    undefined
+  );
+  const [avatarItemId, setAvatarItemId] = useState<number | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    const fetchAvatarParts = async () => {
+      try {
+        const data = await getCurrentAvatarParts();
+        if (data.length > 0) {
+          setAvatarFaceId(data[0].avatarFace!);
+          setAvatarSkinId(data[0].avatarSkin!);
+          setAvatarHeadId(data[0].avatarHead!);
+          setAvatarWearId(data[0].avatarWear!);
+          setAvatarBackId(data[0].avatarBack!);
+          setAvatarItemId(data[0].avatarItem!);
+        }
+      } catch (error) {
+        console.error("Error fetching avatar parts:", error);
+      }
+    };
+
+    fetchAvatarParts();
+  }, []);
+
   function onSubmit(data: z.infer<typeof FormSchema>) {
     toast({
       title: "You submitted the following values:",
@@ -105,67 +145,70 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
     AvatarHeadAccessory: {
       src: getTexture(
         form.watch("AvatarHeadAccessory"),
-        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultHead.png"
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarHeadId}.png`
       ),
       className: "avatar_head",
     },
     AvatarFaceAccessory: {
       src: getTexture(
         form.watch("AvatarFaceAccessory"),
-        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultFace.png"
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarFaceId}.png`
       ),
       className: "avatar_face",
     },
     AvatarItemAccessoryR: {
       src: getTexture(
         form.watch("AvatarItemAccessory"),
-        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultItem.png"
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarItemId}.png`
       ),
       className: "avatar_item_r ",
     },
-
     AvatarItemAccessoryL: {
       src: getTexture(
         form.watch("AvatarItemAccessory"),
-        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultItem.png"
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarItemId}.png`
       ),
       className: "avatar_item_l ",
     },
-
     AvatarBackAccessory: {
       src: getTexture(
         form.watch("AvatarBackAccessory"),
-        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultBack.png"
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarBackId}.png`
       ),
       className: "avatar_back",
     },
     AvatarWearAccessory: {
       src: getTexture(
         form.watch("AvatarWearAccessory"),
-        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultWear.png"
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarWearId}.png`
       ),
       className: "avatar_wear",
     },
     avatarSkinAccessory: {
-      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
+      src: getTexture(
+        avatarSkinId,
+        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`
+      ),
       className: "avatar_skin",
     },
     AvatarRightHand: {
       src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png",
       className: "avatar_hand_r",
     },
+
+    AvatarSkinFootR: {
+      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`,
+      className: "avatar_skinfoot_r",
+    },
     AvatarLeftHand: {
       src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png",
       className: "avatar_hand_l",
     },
     AvatarSkinFootL: {
-      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
+      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`,
+
       className: "avatar_skinfoot_l",
     },
-    AvatarSkinFootR: {
-      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
-      className: "avatar_skinfoot_r",
-    },
     AvatarFaceStatic: {
       src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
       className: "avatar_face_static",