src/app/api/map/[id]/portofolio/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib";
+import backendLogger from "@/util/backendLogger";
+
+export { GET };
+
+async function GET(request: Request, { params }: { params: { id: string } }) {
+  if (request.method !== "GET") {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { id } = params;
+
+    const data = await prisma.businessMaps.findUnique({
+      where: {
+        portofolioId: id,
+      },
+      include: {
+        Portofolio: {
+          select: {
+            id: true,
+            logoId: true,
+          },
+        },
+      },
+    });
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data pin map",
+        data: data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get pin map", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data pin map",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/(user)/map/create/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { Map_CreateNewPin } from "@/app_modules/map/view";
 
-export default async function Page() {
+export default function Page() {
   return (
     <>
       <Map_CreateNewPin />

src/app/dev/(user)/map/custom-pin/[id]/page.tsx

@@ -1,16 +1,10 @@
-import { map_funGetOneBusinessMapByPortofolioId } from "@/app_modules/map/fun/get/fun_get_one_by_portofolio_id";
 import { Map_CustomPin } from "@/app_modules/map/view";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const portofolioId = params.id;
-  const dataMap = await map_funGetOneBusinessMapByPortofolioId({
-    portofolioId: portofolioId,
-  });
-
-
+const mapboxToken = process.env.MAPBOX_TOKEN!;
+export default function Page() {
   return (
     <>
-      <Map_CustomPin dataMap={dataMap} />
+      <Map_CustomPin mapboxToken={mapboxToken} />
     </>
   );
 }

src/app/dev/(user)/map/edit/[id]/page.tsx

@@ -1,13 +1,10 @@
-import { map_funGetOneBusinessMapByPortofolioId } from "@/app_modules/map/fun/get/fun_get_one_by_portofolio_id";
 import { Map_EditPin } from "@/app_modules/map/view";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const portofolioId = params.id;
-  const dataMap = await map_funGetOneBusinessMapByPortofolioId({portofolioId: portofolioId})
-
+const mapboxToken = process.env.MAPBOX_TOKEN!;
+export default function Page() {
   return (
     <>
-      <Map_EditPin portofolioId={portofolioId} dataMap={dataMap} />
+      <Map_EditPin mapboxToken={mapboxToken} />
     </>
   );
 }

src/app/dev/(user)/map/main/page.tsx

@@ -1,12 +1,9 @@
 import { Map_ViewNew } from "@/app_modules/map/view/main_view_new";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
-export default async function Page() {
-  // const dataMap = await map_funGetAllMap();
-
+export default function Page() {
   return (
     <>
-      {/* <Map_View mapboxToken={mapboxToken} dataMap={dataMap} /> */}
       <Map_ViewNew mapboxToken={mapboxToken} />
     </>
   );

src/app/dev/(user)/map/splash/page.tsx

@@ -1,7 +1,7 @@
 import { Map_Splash } from "@/app_modules/map/view";
 
 
-export default async function Page() {
+export default function Page() {
   return (
     <>
       <Map_Splash />

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>
     </>