fix background update

src/app_modules/katalog/profile/fun/get/get_one_profile.ts

@@ -9,6 +9,5 @@ export async function Profile_getOneById(profileId: string) {
     },
   });
 
-  
   return data;
 }

src/app_modules/katalog/profile/upload/foto_background/index.tsx

@@ -9,16 +9,39 @@ import { AspectRatio, Center, Image, Stack } from "@mantine/core";
 import { useState } from "react";
 import { Profile_ComponentButtonUpdateBackgroundProfile } from "../../_component";
 import { MODEL_PROFILE } from "../../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetOneProfileById } from "../../lib/api_fetch_profile";
+import { useParams } from "next/navigation";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Profile_UpdateFotoBackground({
-  dataProfile,
-}: {
-  dataProfile: MODEL_PROFILE;
-}) {
-  const [profile, setProfile] = useState(dataProfile);
+export default function Profile_UpdateFotoBackground() {
+  const param = useParams<{ id: string }>();
+  const profileId = param.id;
+  const [profile, setProfile] = useState<MODEL_PROFILE | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneProfileById({ id: profileId });
+      if (response && response.success) {
+        setProfile(response.data);
+      } else {
+        setProfile(null);
+      }
+    } catch (error) {
+      console.log("Error get profile", error);
+      setProfile(null);
+    }
+  };
+
+  if (!profile)
+    return <CustomSkeleton height={300} width={"100%"} radius={"md"} />;
+
   return (
     <>
       <Stack px={"xs"}>

src/app_modules/katalog/profile/upload/foto_profile/index.tsx

@@ -9,16 +9,39 @@ import { AspectRatio, Center, Image, Stack } from "@mantine/core";
 import { useState } from "react";
 import { Profile_ComponentButtonUpdatePhotoProfile } from "../../_component";
 import { MODEL_PROFILE } from "../../model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { apiGetOneProfileById } from "../../lib/api_fetch_profile";
 
-export default function UploadFotoProfile({
-  dataProfile,
-}: {
-  dataProfile: MODEL_PROFILE;
-}) {
-  const [profile, setProfile] = useState(dataProfile);
+export default function UploadFotoProfile() {
+  const param = useParams<{ id: string }>();
+  const profileId = param.id;
+  const [profile, setProfile] = useState<MODEL_PROFILE | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneProfileById({ id: profileId });
+      if (response && response.success) {
+        setProfile(response.data);
+      } else {
+        setProfile(null);
+      }
+    } catch (error) {
+      console.log("Error get profile", error);
+      setProfile(null);
+    }
+  };
+
+  if (!profile)
+    return <CustomSkeleton height={300} width={"100%"} radius={"md"} />;
+
   return (
     <>
       <Stack px={"xs"}>