fix portofolio

deskripsiL:
- fix server acton create to API

src/app_modules/map/_component/api_fetch_map.ts

@@ -0,0 +1,25 @@
+export { apiCreatePinMap };
+
+const apiCreatePinMap = async ({
+  portofolioId,
+  data,
+}: {
+  portofolioId: string;
+  data: any;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const respone = await fetch(`/api/map/${portofolioId}`, {
+    method: "POST",
+    body: JSON.stringify({ data }),
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await respone.json().catch(() => null);
+};

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

@@ -12,7 +12,16 @@ import { useState } from "react";
 import { map_funCreatePin } from "../../fun/create/fun_create_pin";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
 import { DIRECTORY_ID } from "@/app/lib";
+import { clientLogger } from "@/util/clientLogger";
+import { data } from "autoprefixer";
+import { apiCreatePinMap } from "../api_fetch_map";
 
+interface ICreatePinMAp {
+  latitude: string;
+  longitude: string;
+  namePin: string;
+  imageId: string;
+}
 export function ComponentMap_ButtonSavePin({
   namePin,
   lat,
@@ -29,43 +38,72 @@ export function ComponentMap_ButtonSavePin({
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
-  async function onSavePin() {
+  const handleUploadImage = async () => {
+    const uploadResult = await funGlobal_UploadToStorage({
+      file: file,
+      dirId: DIRECTORY_ID.map_image,
+    });
+
+    if (!uploadResult.success) {
+      setLoading(false);
+      ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+    }
+
+    return uploadResult.data.id;
+  };
+
+  const handleCreatePin = async (imageId: string) => {
+    const newData: ICreatePinMAp = {
+      latitude: lat,
+      longitude: long,
+      namePin: namePin,
+      imageId: imageId,
+    };
+
+    const respone = await apiCreatePinMap({
+      portofolioId: portofolioId,
+      data: newData,
+    });
+
+    console.log("respone >", respone);
+
+    if (respone && respone.success) {
+      ComponentGlobal_NotifikasiBerhasil(respone.message);
+      router.back();
+    }
+
+    return respone;
+  };
+
+  const validateInput = () => {
+    if (!namePin || !file) {
+      ComponentGlobal_NotifikasiPeringatan(
+        "Nama pin dan file gambar harus diisi"
+      );
+      return false;
+    }
+    return true;
+  };
+
+  const onSavePin = async () => {
+    if (!validateInput()) return;
+
     try {
       setLoading(true);
 
-      const uploadFile = await funGlobal_UploadToStorage({
-        file: file,
-        dirId: DIRECTORY_ID.map_image,
-      });
+      const imageId = await handleUploadImage();
+      const createPinResult = await handleCreatePin(imageId);
 
-      if (!uploadFile.success) {
+      if (!createPinResult.success) {
         setLoading(false);
-        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
-        return;
+        ComponentGlobal_NotifikasiPeringatan("Gagal membuat pin");
       }
-
-      const imageId = uploadFile.data.id;
-
-      const res = await map_funCreatePin({
-        data: {
-          latitude: lat as any,
-          longitude: long as any,
-          namePin: namePin as any,
-          imageId: imageId,
-          Portofolio: {
-            create: { id: portofolioId } as any,
-          },
-        },
-      });
-      res.status === 200
-        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
-        : ComponentGlobal_NotifikasiGagal(res.message);
     } catch (error) {
       setLoading(false);
-
-      console.error(error);
+      clientLogger.error("Error create pin", (error as Error).message);
+      ComponentGlobal_NotifikasiGagal("Terjadi kesalahan saat menyimpan pin");
     }
-  }
+  };
 
   return (
     <>
@@ -73,7 +111,7 @@ export function ComponentMap_ButtonSavePin({
         loading={loading}
         my={"xl"}
         style={{ transition: "0.5s" }}
-        disabled={namePin === "" || file === null}
+        disabled={!namePin || !file}
         radius={"xl"}
         loaderPosition="center"
         bg={MainColor.yellow}

src/app_modules/map/ui/ui_create_pin.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { DIRECTORY_ID } from "@/app/lib";
 import {
   AccentColor,
   MainColor,
@@ -10,25 +9,17 @@ import {
   ComponentGlobal_BoxUploadImage,
   ComponentGlobal_ButtonUploadFileImage,
 } from "@/app_modules/_global/component";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { MAX_SIZE } from "@/app_modules/_global/lib";
-import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import {
   AspectRatio,
-  Button,
   Center,
-  FileButton,
   Image,
   Paper,
   Stack,
-  TextInput,
+  TextInput
 } from "@mantine/core";
-import { IconCamera, IconPhoto } from "@tabler/icons-react";
+import { IconPhoto } from "@tabler/icons-react";
 import _ from "lodash";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import Map, {
   AttributionControl,
@@ -39,13 +30,9 @@ import Map, {
 import { ComponentMap_ButtonSavePin } from "../_component";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
 
-export function UiMap_CreatePin({
-  mapboxToken,
-  portofolioId,
-}: {
-  mapboxToken: string;
-  portofolioId: string;
-}) {
+export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
+  const params = useParams<{ id: string }>();
+  const portofolioId = params.id;
   const [[lat, long], setLatLong] = useState([0, 0]);
   const [isPin, setIsPin] = useState(false);
   const [namePin, setNamePin] = useState("");

src/app_modules/map/view/create.tsx

@@ -1,17 +1,10 @@
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 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";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
-export async function Map_CreateNewPin({
-  portofolioId,
-}: {
-  portofolioId: string;
-}) {
-  if (!mapboxToken)
-    return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
-
+export async function Map_CreateNewPin() {
   return (
     <>
       <UIGlobal_LayoutTamplate
@@ -19,10 +12,11 @@ export async function Map_CreateNewPin({
           <UIGlobal_LayoutHeaderTamplate title="Tambah Pin" hideButtonLeft />
         }
       >
-        <UiMap_CreatePin
-          mapboxToken={mapboxToken}
-          portofolioId={portofolioId}
-        />
+        {!mapboxToken ? (
+          <ComponentGlobal_IsEmptyData text="Mapbox token not found" />
+        ) : (
+          <UiMap_CreatePin mapboxToken={mapboxToken} />
+        )}
       </UIGlobal_LayoutTamplate>
     </>
   );