From fb6508db9b07e52a77600842aaf810364d02ed19 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 19 Mar 2025 10:31:38 +0800
Subject: [PATCH] fix admin: - API map

---
 .../admin/map/fun/fun_get_all_maps.ts         |   1 +
 src/app_modules/admin/map/ui/ui_map_view.tsx  | 144 ++++++++++--------
 src/app_modules/admin/map/view/view.tsx       |   3 -
 3 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/src/app_modules/admin/map/fun/fun_get_all_maps.ts b/src/app_modules/admin/map/fun/fun_get_all_maps.ts
index 67c79d0f..3c951824 100644
--- a/src/app_modules/admin/map/fun/fun_get_all_maps.ts
+++ b/src/app_modules/admin/map/fun/fun_get_all_maps.ts
@@ -9,6 +9,7 @@ export async function adminMap_funGetAllMaps() {
     },
     where: {
       isActive: true,
+      
     },
     include: {
       Portofolio: true,
diff --git a/src/app_modules/admin/map/ui/ui_map_view.tsx b/src/app_modules/admin/map/ui/ui_map_view.tsx
index 85a48d63..eaff941c 100644
--- a/src/app_modules/admin/map/ui/ui_map_view.tsx
+++ b/src/app_modules/admin/map/ui/ui_map_view.tsx
@@ -1,13 +1,16 @@
 "use client";
 
-import { APIs } from "@/lib";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { apiGetAllMap } from "@/app_modules/map/lib/api_map";
 import {
   defaultLatLong,
   defaultMapZoom,
 } from "@/app_modules/map/lib/default_lat_long";
-import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { IDataMap } from "@/app_modules/map/lib/type_map";
+import { APIs } from "@/lib";
 import { Avatar, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { useState } from "react";
 import Map, {
@@ -21,14 +24,31 @@ import { ComponentAdminMap_Drawer } from "../component";
 
 export function UiAdminMap_MapBoxView({
   mapboxToken,
-  dataMap,
 }: {
   mapboxToken: string;
-  dataMap: MODEL_MAP[];
 }) {
   const [mapId, setMapId] = useState("");
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [data, setData] = useState(dataMap);
+  const [data, setData] = useState<IDataMap[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      setLoading(true);
+      const response = await apiGetAllMap();
+      if (response) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
 
   if (!mapboxToken)
     return <ComponentAdminGlobal_IsEmptyData text="Mapbox token not found" />;
@@ -42,65 +62,69 @@ export function UiAdminMap_MapBoxView({
           backgroundColor: "gray",
         }}
       >
-        <Map
-          mapboxAccessToken={mapboxToken}
-          mapStyle={"mapbox://styles/mapbox/streets-v11"}
-          initialViewState={{
-            latitude: defaultLatLong[0],
-            longitude: defaultLatLong[1],
-            zoom: defaultMapZoom,
-          }}
-          style={{
-            cursor: "pointer",
-            width: "auto",
-            height: "82vh",
-            borderRadius: "5px",
-          }}
-          attributionControl={false}
-        >
-          {data.map((e, i) => (
-            <Stack key={i}>
-              <Marker
-                style={{
-                  width: 40,
-                  cursor: "pointer",
-                }}
-                latitude={e.latitude}
-                longitude={e.longitude}
-                anchor="bottom"
-                offset={[0, 0]}
-                scale={1}
-              >
-                <Stack
-                  spacing={0}
-                  align="center"
-                  onClick={() => {
-                    setMapId(e.id);
-                    setOpenDrawer(true);
+        {loading ? (
+          <CustomSkeleton height={500} />
+        ) : (
+          <Map
+            mapboxAccessToken={mapboxToken}
+            mapStyle={"mapbox://styles/mapbox/streets-v11"}
+            initialViewState={{
+              latitude: defaultLatLong[0],
+              longitude: defaultLatLong[1],
+              zoom: defaultMapZoom,
+            }}
+            style={{
+              cursor: "pointer",
+              width: "auto",
+              height: "82vh",
+              borderRadius: "5px",
+            }}
+            attributionControl={false}
+          >
+            {data.map((e, i) => (
+              <Stack key={i}>
+                <Marker
+                  style={{
+                    width: 40,
+                    cursor: "pointer",
                   }}
+                  latitude={e.latitude as any}
+                  longitude={e.longitude as any}
+                  anchor="bottom"
+                  offset={[0, 0]}
+                  scale={1}
                 >
-                  <Avatar
-                    alt="Logo"
-                    style={{
-                      border: `2px solid ${AccentColor.softblue}`,
-                      borderRadius: "100%",
-                      backgroundColor: "white",
+                  <Stack
+                    spacing={0}
+                    align="center"
+                    onClick={() => {
+                      setMapId(e.id);
+                      setOpenDrawer(true);
                     }}
-                    src={
-                      e.pinId === null
-                        ? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
-                        : APIs.GET({ fileId: e.pinId, size: "300" })
-                    }
-                  />
-                </Stack>
-              </Marker>
-            </Stack>
-          ))}
+                  >
+                    <Avatar
+                      alt="Logo"
+                      style={{
+                        border: `2px solid ${AccentColor.softblue}`,
+                        borderRadius: "100%",
+                        backgroundColor: "white",
+                      }}
+                      src={
+                        e.pinId === null
+                          ? APIs.GET({ fileId: e.logoId, size: "300" })
+                          : APIs.GET({ fileId: e.pinId, size: "300" })
+                      }
+                    />
+                  </Stack>
+                </Marker>
+              </Stack>
+            ))}
 
-          <NavigationControl />
-          <ScaleControl position="top-left" />
-          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
-        </Map>
+            <NavigationControl />
+            <ScaleControl position="top-left" />
+            <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+          </Map>
+        )}
       </Stack>
 
       <ComponentAdminMap_Drawer
diff --git a/src/app_modules/admin/map/view/view.tsx b/src/app_modules/admin/map/view/view.tsx
index fa869a7b..ae83e3df 100644
--- a/src/app_modules/admin/map/view/view.tsx
+++ b/src/app_modules/admin/map/view/view.tsx
@@ -1,17 +1,14 @@
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { adminMap_funGetAllMaps } from "../fun/fun_get_all_maps";
 import { UiAdminMap_MapBoxView } from "../ui";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export async function AdminMap_View() {
-  const dataMap = await adminMap_funGetAllMaps();
 
   return (
     <>
       <ComponentAdminGlobal_HeaderTamplate name="Maps" />
       <UiAdminMap_MapBoxView
         mapboxToken={mapboxToken}
-        dataMap={dataMap as any}
       />
     </>
   );