fix: Map

deskripsi:
- fix map pada edit dan custom pin: tidak menggunakan use server lagi tapi API

src/app_modules/map/_component/button/comp_button_update_data_map.tsx

@@ -92,7 +92,7 @@ export function ComponentMap_ButtonUpdateDataMap({
         loading={isLoading}
         mb={"xl"}
         style={{ transition: "0.5s" }}
-        disabled={data.namePin === "" || file === null}
+        disabled={data.namePin === "" || data.imageId === null}
         radius={"xl"}
         bg={MainColor.yellow}
         color="yellow"

src/app_modules/map/lib/api_map.ts

@@ -28,3 +28,36 @@ export const apiGetOneMapById = async (path: string) => {
   });
   return await response.json().catch(() => null);
 };
+
+export const apiGetOneMapByPortofolioId = async ({ id }: { id: string }) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/map/${id}/portofolio`, {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error("Failed to get one map by portofolio id", response.statusText, errorData);
+      throw new Error(errorData?.message || "Failed to get one map by portofolio id");
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get one map by portofolio id", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/map/ui/ui_edit_map.tsx

@@ -161,43 +161,6 @@ export function UiMap_EditMap({
               onSetImage={setImg}
             />
           </Center>
-
-          {/* <Center>
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-                  if (files.size > MAX_SIZE) {
-                    ComponentGlobal_NotifikasiPeringatan(
-                      PemberitahuanMaksimalFile,
-                      3000
-                    );
-                  } else {
-                    setImg(buffer);
-                    setFile(files);
-                  }
-                } catch (error) {
-                  console.log(error);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  radius={"xl"}
-                  leftIcon={<IconCamera />}
-                  bg={MainColor.yellow}
-                  color="yellow"
-                  c={"black"}
-                >
-                  Upload
-                </Button>
-              )}
-            </FileButton>
-          </Center> */}
         </Stack>
 
         <ComponentMap_ButtonUpdateDataMap data={data as any} file={file} />

src/app_modules/map/view/custom_pin.tsx

@@ -1,26 +1,53 @@
+"use client";
+
 import { Component_Header } from "@/app_modules/_global/component/new/component_header";
 import UI_NewLayoutTamplate, {
   UI_NewChildren,
   UI_NewHeader,
 } from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { UiMap_CustomPin } from "../ui";
+import { apiGetOneMapByPortofolioId } from "../lib/api_map";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { useShallowEffect } from "@mantine/hooks";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
 
-const mapboxToken = process.env.MAPBOX_TOKEN!;
-export async function Map_CustomPin({ dataMap }: { dataMap: any }) {
+export function Map_CustomPin({ mapboxToken }: { mapboxToken: string }) {
+  const { id } = useParams();
+  const [data, setData] = useState<any | null>();
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetOneMapByPortofolioId({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      setData(null);
+      console.error("Error get one map by portofolio id", error);
+    }
+  }
   return (
     <>
-      {/* <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Custom Pin" />}
-      >
-        <UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
-      </UIGlobal_LayoutTamplate> */}
-
       <UI_NewLayoutTamplate>
         <UI_NewHeader>
           <Component_Header title="Custom Pin" />
         </UI_NewHeader>
         <UI_NewChildren>
-          <UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
+          {data === undefined ? (
+            <CustomSkeleton height={400} />
+          ) : !data ? (
+            <ComponentGlobal_BoxInformation informasi="Data tidak ditemukan" />
+          ) : (
+            <UiMap_CustomPin mapboxToken={mapboxToken} dataMap={data} />
+          )}
         </UI_NewChildren>
       </UI_NewLayoutTamplate>
     </>

src/app_modules/map/view/edit.tsx

@@ -1,36 +1,54 @@
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import { UiMap_CreatePin } from "../ui/ui_create_pin";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { UiMap_EditPin } from "../ui";
-import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
+"use client";
 
-const mapboxToken = process.env.MAPBOX_TOKEN!;
-export async function Map_EditPin({
-  portofolioId,
-  dataMap,
-}: {
-  portofolioId: string;
-  dataMap: any
-}) {
-  if (!mapboxToken)
-    return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
+import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { apiGetOneMapByPortofolioId } from "../lib/api_map";
+import { UiMap_EditPin } from "../ui";
+
+export function Map_EditPin({ mapboxToken }: { mapboxToken: string }) {
+  const { id } = useParams();
+  const [data, setData] = useState<any | null>();
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetOneMapByPortofolioId({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      setData(null);
+      console.error("Error get one map by portofolio id", error);
+    }
+  }
 
   return (
     <>
-      {/* <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Edit Pin" />}
-      >
-        <UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
-      </UIGlobal_LayoutTamplate> */}
-
       <UI_NewLayoutTamplate>
         <UI_NewHeader>
           <Component_Header title="Edit Pin" />
         </UI_NewHeader>
         <UI_NewChildren>
-          <UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
+          {data === undefined ? (
+            <CustomSkeleton height={400} />
+          ) : !data ? (
+            <ComponentGlobal_BoxInformation informasi="Data tidak ditemukan" />
+          ) : (
+            <UiMap_EditPin mapboxToken={mapboxToken} dataMap={data} />
+          )}
         </UI_NewChildren>
       </UI_NewLayoutTamplate>
     </>