Merge pull request #310 from bipproduction/bagas/13-feb-25

fix api forum

eslint.config.mjs

@@ -2,7 +2,7 @@ import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
 
 const __filename = fileURLToPath(import.meta.url);
-const dirname = dirname(filename);
+const dirname = dirname(__filename);
 
 const compat = new FlatCompat({
   baseDirectory: __dirname,

run.build.dev

@@ -1 +1 @@
-nice -n 19 bun --env-file=.env.build run build
+nice -n 19 bun --env-file=.env.build run --bun build

src/app/api/forum/route.ts

@@ -0,0 +1,124 @@
+import { prisma } from "@/lib";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+// GET  ALL DATA PORTOFOLIO BY PROFILE ID
+export async function GET(request: Request) {
+  try {
+    let fixData;
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get("page");
+    const search = searchParams.get("search");
+    const takeData = 4
+    const skipData = Number(page) * takeData - takeData;
+
+    if (!page) {
+      fixData = await prisma.forum_Posting.findMany({
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          isActive: true,
+          diskusi: {
+            mode: "insensitive",
+            contains: search == undefined || search == "null" ? "" : search,
+          },
+        },
+        select: {
+          id: true,
+          diskusi: true,
+          createdAt: true,
+          isActive: true,
+          authorId: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                  imageId: true,
+                },
+              },
+            },
+          },
+          Forum_Komentar: {
+            where: {
+              isActive: true,
+            },
+          },
+          ForumMaster_StatusPosting: {
+            select: {
+              id: true,
+              status: true,
+            },
+          },
+          forumMaster_StatusPostingId: true,
+        },
+      });
+    } else {
+      fixData = await prisma.forum_Posting.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          isActive: true,
+          diskusi: {
+            mode: "insensitive",
+            contains: search == undefined || search == "null" ? "" : search,
+          },
+        },
+        select: {
+          id: true,
+          diskusi: true,
+          createdAt: true,
+          isActive: true,
+          authorId: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                  imageId: true,
+                },
+              },
+            },
+          },
+          Forum_Komentar: {
+            where: {
+              isActive: true,
+            },
+          },
+          ForumMaster_StatusPosting: {
+            select: {
+              id: true,
+              status: true,
+            },
+          },
+          forumMaster_StatusPostingId: true,
+        },
+      });
+    }
+
+    return NextResponse.json(
+      { success: true, message: "Berhasil mendapatkan data", data: fixData },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data, coba lagi nanti ",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/new/map/route.ts

@@ -3,38 +3,50 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 export const dynamic = "force-dynamic";
 
-
 // GET ALL DATA MAP
 export async function GET(request: Request) {
-   try {
+  try {
-      const data = await prisma.businessMaps.findMany({
+    const data = await prisma.businessMaps.findMany({
-         where: {
+      where: {
-            isActive: true,
+        isActive: true,
-         },
+        Portofolio: {
-         select: {
+          NOT: {
-            id: true,
+            logoId: null,
-            namePin: true,
+          },
-            latitude: true,
+        },
-            longitude: true,
+      },
-            pinId: true,
+      select: {
-            Portofolio: {
+        id: true,
-               select: {
+        namePin: true,
-                  logoId: true,
+        latitude: true,
-               }
+        longitude: true,
-            }
+        pinId: true,
-         }
+        Portofolio: {
-      });
+          select: {
+            logoId: true,
+          },
+        },
+      },
+    });
 
-      const dataFix = data.map((v: any) => ({
+    const dataFix = data.map((v: any) => ({
-         ..._.omit(v, ["Portofolio"]),
+      ..._.omit(v, ["Portofolio"]),
-         logoId: v.Portofolio.logoId
+      logoId: v.Portofolio.logoId,
-      }))
+    }));
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+    return NextResponse.json(
-
+      { success: true, message: "Berhasil mendapatkan data", data: dataFix },
-   }
+      { status: 200 }
-   catch (error) {
+    );
-      console.error(error);
+  } catch (error) {
-      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+    console.error(error);
-   }
+    return NextResponse.json(
-}
+      {
+        success: false,
+        message: "Gagal mendapatkan data, coba lagi nanti ",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -1,11 +1,11 @@
 import prisma from "@/lib/prisma";
+import backendLogger from "@/util/backendLogger";
 import fs from "fs";
 import { NextRequest, NextResponse } from "next/server";
 
-export async function GET(
+export { GET, PUT };
-  req: NextRequest,
+
-  { params }: { params: { id: string } }
+async function GET(req: NextRequest, { params }: { params: { id: string } }) {
-) {
   const get = await prisma.images.findUnique({
     where: {
       id: params.id,
@@ -30,3 +30,52 @@ export async function GET(
     },
   });
 }
+
+async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  if (request.method !== "PUT") {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { id } = params;
+    const portofolioId = id;
+
+    const { data } = await request.json();
+    const logoId = data;
+
+    const updatePorto = await prisma.portofolio.update({
+      where: {
+        id: portofolioId,
+      },
+      data: {
+        logoId: logoId,
+      },
+    });
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mengubah Logo Bisnis!",
+        data: updatePorto,
+      },
+      { status: 200 } // default status: 200
+    );
+  } catch (error) {
+    backendLogger.error("API Error Update Logo Portofolio", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Internal Server Error",
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function PUT(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  if (request.method !== "PUT") {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { id } = params;
+    const { data } = await request.json();
+
+    const updateData = await prisma.portofolio_MediaSosial.update({
+      where: {
+        id: id,
+      },
+      data: {
+        facebook: data.facebook,
+        instagram: data.instagram,
+        tiktok: data.tiktok,
+        twitter: data.twitter,
+        youtube: data.youtube,
+      },
+    });
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil update data",
+        data: updateData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error update data", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error update data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/user/[id]/route.ts

@@ -0,0 +1,34 @@
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.user.findUnique({
+      where: {
+        id: id,
+      },
+      include: {
+        Profile: true,
+      },
+    });
+
+    return NextResponse.json(
+      { success: true, message: "Berhasil mendapatkan data", data: data },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get data user", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data, coba lagi nanti ",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/forum/main/layout.tsx

@@ -1,6 +1,5 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { LayoutForum_Main } from "@/app_modules/forum";
-import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
 import React from "react";
 
 export default async function Layout({
@@ -9,13 +8,11 @@ export default async function Layout({
   children: React.ReactNode;
 }) {
   const userLoginId = await funGetUserIdByToken();
-  const dataAuthor = await user_getOneByUserId(userLoginId as string);
+  
 
   return (
     <>
-      <LayoutForum_Main dataAuthor={dataAuthor as any}>
+      <LayoutForum_Main userLoginId={userLoginId}>{children}</LayoutForum_Main>
-        {children}
-      </LayoutForum_Main>
     </>
   );
 }

src/app/dev/forum/main/page.tsx

@@ -1,17 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_Beranda } from "@/app_modules/forum";
-import { forum_new_getAllPosting } from "@/app_modules/forum/fun/get/new_get_all_posting";
 
 export default async function Page() {
   const userLoginId = await funGetUserIdByToken();
-  const listForum = await forum_new_getAllPosting({ page: 1 });
 
   return (
     <>
-      <Forum_Beranda
+      <Forum_Beranda userLoginId={userLoginId as string} />
-        listForum={listForum as any}
-        userLoginId={userLoginId as string}
-      />
     </>
   );
 }

src/app/dev/portofolio/edit/logo/[id]/page.tsx

@@ -1,12 +1,9 @@
 import { Portofolio_EditLogoBisnis } from "@/app_modules/katalog/portofolio";
-import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/get_one_portofolio";
-import _ from "lodash";
 
 export default async function Page() {
-
   return (
     <>
-      <Portofolio_EditLogoBisnis   />
+      <Portofolio_EditLogoBisnis />
     </>
   );
 }

src/app/dev/portofolio/edit/medsos/[id]/page.tsx

@@ -2,15 +2,15 @@ import { Portofolio_EditMedsosBisnis } from "@/app_modules/katalog/portofolio";
 import { Portofolio_geOnetMedsosById } from "@/app_modules/katalog/portofolio/fun/get/get_one_medsos_by_id";
 import _ from "lodash";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let portoId = params.id;
+  // let portoId = params.id;
-  const dataMedsos = await Portofolio_geOnetMedsosById(portoId).then((res) =>
+  // const dataMedsos = await Portofolio_geOnetMedsosById(portoId).then((res) =>
-    _.omit(res, ["active", "createdAt", "updatedAt", "portofolioId"])
+  //   _.omit(res, ["active", "createdAt", "updatedAt", "portofolioId"])
-  );
+  // );
 
   return (
     <>
-      <Portofolio_EditMedsosBisnis dataMedsos={dataMedsos as any} />
+      <Portofolio_EditMedsosBisnis />
     </>
   );
 }

src/app_modules/_global/lib/api_user.ts

@@ -1,3 +1,4 @@
+import { apiGetUserProfile } from './../../user/lib/api_user';
 export const apiGetUserId = async () => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
@@ -58,3 +59,43 @@ export const apiGetAllUserWithExceptId = async ({
   });
   return await response.json().catch(() => null);
 };
+
+export const apiGetUserById = 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;
+    }
+
+    // Send PUT request to update portfolio logo
+    const response = await fetch(`/api/user/${id}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get user",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get user"
+      );
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error get user:", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/forum/component/api_fetch_forum.ts

@@ -0,0 +1,41 @@
+export { apiGetAllForum };
+
+const apiGetAllForum = async ({
+  page,
+  search,
+}: {
+  page: string;
+  search?: 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 isSearch = search ? `&search=${search}` : "";
+    const response = await fetch(`/api/forum?page=${page}${isSearch}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error("Failed to get all forum:", response.statusText, errorData);
+      throw new Error(errorData?.message || "Failed to get all forum");
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error get all forum", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/forum/main/beranda.tsx

@@ -23,35 +23,42 @@ import { useState } from "react";
 import ComponentForum_BerandaCardView from "../component/main_component/card_view";
 import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import { apiGetAllForum } from "../component/api_fetch_forum";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function Forum_Beranda({
-  listForum,
   userLoginId,
 }: {
-  listForum: any;
   userLoginId: string;
 }) {
   const router = useRouter();
   const [scroll, scrollTo] = useWindowScroll();
 
-  const [data, setData] = useState<MODEL_FORUM_POSTING[]>(listForum);
+  const [data, setData] = useState<MODEL_FORUM_POSTING[] | null>(null);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setIsSearch] = useState("");
   const [isNewPost, setIsNewPost] = useState(false);
   const [countNewPost, setCountNewPost] = useState(0);
 
   useShallowEffect(() => {
-    onLoadAllData({
+    handleLoadData(isSearch);
-      onLoad(val) {
+  }, [isSearch]);
-        setData(val);
-      },
-    });
-  }, [setData]);
 
-  async function onLoadAllData({ onLoad }: { onLoad: (val: any) => void }) {
+  const handleLoadData = async (isSearch: string) => {
-    const loadData = await forum_new_getAllPosting({ page: 1 });
+    try {
-    onLoad(loadData);
+      const response = await apiGetAllForum({
-  }
+        page: `${activePage}`,
+        search: isSearch,
+      });
+
+      if (response) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum", error);
+    }
+  };
 
   useShallowEffect(() => {
     mqtt_client.subscribe("Forum_create_new");
@@ -83,7 +90,7 @@ export default function Forum_Beranda({
       if (topic === "Forum_detail_ganti_status") {
         const newData = JSON.parse(message.toString());
 
-        const updateOneData = cloneData.map((val) => ({
+        const updateOneData = cloneData?.map((val) => ({
           ...val,
           ForumMaster_StatusPosting: {
             id:
@@ -104,12 +111,8 @@ export default function Forum_Beranda({
 
   async function onSearch(text: string) {
     setIsSearch(text);
-    const loadSearch = await forum_new_getAllPosting({
-      page: activePage,
-      search: text,
-    });
-    setData(loadSearch as any);
     setActivePage(1);
+
   }
 
   return (
@@ -133,6 +136,7 @@ export default function Forum_Beranda({
 
       <Stack spacing={"xl"}>
         <TextInput
+          disabled={!data}
           radius={"xl"}
           placeholder="Topik forum apa yang anda cari hari ini ?"
           onChange={(val) => {
@@ -140,7 +144,12 @@ export default function Forum_Beranda({
           }}
         />
 
-        {_.isEmpty(data) ? (
+        {!data ? (
+          <Stack>
+            <CustomSkeleton height={230} width={"100%"} />
+            <CustomSkeleton height={230} width={"100%"} />
+          </Stack>
+        ) : _.isEmpty(data) ? (
           <Stack align="center" justify="center" h={"80vh"}>
             <IconSearchOff size={80} color="white" />
             <Stack spacing={0} align="center">
@@ -159,15 +168,22 @@ export default function Forum_Beranda({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await forum_new_getAllPosting({
+              try {
-                page: activePage + 1,
+                const nextPage = activePage + 1;
-                search: isSearch,
+                const response = await apiGetAllForum({
-              });
+                  page: `${nextPage}`,
-              setActivePage((val) => val + 1);
+                  search: isSearch,
+                });
 
-              return loadData;
+                if (response) {
+                  setActivePage((val) => val + 1);
+                  return response.data;
+                }
+              } catch (error) {
+                clientLogger.error("Error get data forum", error);
+              }
             }}
           >
             {(item) => (

src/app_modules/forum/main/layout.tsx

@@ -9,17 +9,39 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { ActionIcon, Avatar } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function LayoutForum_Main({
+  userLoginId,
   children,
-  dataAuthor,
 }: {
+  userLoginId: string;
   children: React.ReactNode;
-  dataAuthor: MODEL_USER;
 }) {
   const router = useRouter();
+  const [data, setData] = useState<MODEL_USER | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetUserById({
+        id: userLoginId,
+      });
+
+      if (response) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get user", error);
+    }
+  };
+
   return (
     <>
       <UIGlobal_LayoutTamplate
@@ -27,15 +49,14 @@ export default function LayoutForum_Main({
           <UIGlobal_LayoutHeaderTamplate
             title="Forum"
             iconRight={
-              <ActionIcon
+              !data ? (
-                radius={"xl"}
+                <ActionIcon
-                variant="transparent"
+                  radius={"xl"}
-                onClick={() => {
+                  variant="transparent"
-                  setIsLoading(true);
+                  onClick={() => {
-                  router.push(RouterForum.forumku + dataAuthor?.id);
+                    return null;
-                }}
+                  }}
-              >
+                >
-                {isLoading ? (
                   <Avatar
                     size={30}
                     radius={"100%"}
@@ -47,13 +68,36 @@ export default function LayoutForum_Main({
                   >
                     <ComponentGlobal_Loader variant="dots" />
                   </Avatar>
-                ) : (
+                </ActionIcon>
-                  <ComponentGlobal_LoaderAvatar
+              ) : (
-                    fileId={dataAuthor.Profile.imageId as any}
+                <ActionIcon
-                    sizeAvatar={30}
+                  radius={"xl"}
-                  />
+                  variant="transparent"
-                )}
+                  onClick={() => {
-              </ActionIcon>
+                    setIsLoading(true);
+                    router.push(RouterForum.forumku + data?.id);
+                  }}
+                >
+                  {isLoading ? (
+                    <Avatar
+                      size={30}
+                      radius={"100%"}
+                      style={{
+                        borderColor: "white",
+                        borderStyle: "solid",
+                        borderWidth: "1px",
+                      }}
+                    >
+                      <ComponentGlobal_Loader variant="dots" />
+                    </Avatar>
+                  ) : (
+                    <ComponentGlobal_LoaderAvatar
+                      fileId={data.Profile.imageId as any}
+                      sizeAvatar={30}
+                    />
+                  )}
+                </ActionIcon>
+              )
             }
           />
         }

src/app_modules/katalog/portofolio/component/api_fetch_portofolio.ts

@@ -1,4 +1,10 @@
-export { apiCreatePortofolio, apiGetPortofolioById, apiUpdatePortofolioById };
+export {
+  apiCreatePortofolio,
+  apiGetPortofolioById,
+  apiUpdatePortofolioById,
+  apiUpdateLogoPortofolioById,
+  apiUpdateMedsosPortofolioById,
+};
 
 const apiCreatePortofolio = async ({
   profileId,
@@ -16,7 +22,6 @@ const apiCreatePortofolio = async ({
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
-      "Access-Control-Allow-Origin": "*",
       Authorization: `Bearer ${token}`,
     },
   });
@@ -33,7 +38,6 @@ const apiGetPortofolioById = async ({ id }: { id: string }) => {
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
-      "Access-Control-Allow-Origin": "*",
       Authorization: `Bearer ${token}`,
     },
   });
@@ -57,7 +61,6 @@ const apiUpdatePortofolioById = async ({
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
-      "Access-Control-Allow-Origin": "*",
       Authorization: `Bearer ${token}`,
     },
   });
@@ -69,3 +72,95 @@ const apiUpdatePortofolioById = async ({
 
   return await respone.json();
 };
+
+const apiUpdateLogoPortofolioById = async ({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) => {
+  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;
+    }
+
+    // Send PUT request to update portfolio logo
+    const response = await fetch(`/api/portofolio/logo/${id}`, {
+      method: "PUT",
+      body: JSON.stringify({ data }),
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to update portfolio logo:",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to update portfolio logo");
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error updating portfolio logo:", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
+
+const apiUpdateMedsosPortofolioById = async ({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) => {
+  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;
+    }
+
+    // Send PUT request to update portfolio logo
+    const response = await fetch(`/api/portofolio/medsos/${id}`, {
+      method: "PUT",
+      body: JSON.stringify({ data }),
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to update portfolio medsos:",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to update portfolio medsos"
+      );
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error updating portfolio medsos:", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx

@@ -8,15 +8,15 @@ import {
 } from "@/app_modules/_global/notif_global";
 import { Box, Button } from "@mantine/core";
 
-import { DIRECTORY_ID } from "@/lib";
 import {
   funGlobal_DeleteFileById,
   funGlobal_UploadToStorage,
 } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/lib";
 import { clientLogger } from "@/util/clientLogger";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { portofolio_funEditLogoBisnisById } from "../../fun";
+import { apiUpdateLogoPortofolioById } from "../api_fetch_portofolio";
 
 export function ComponentPortofolio_ButtonEditLogoBisnis({
   file,
@@ -29,6 +29,7 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+
   async function onUpdate() {
     try {
       setLoading(true);
@@ -55,18 +56,20 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
       }
 
       const logoId = uploadFileToStorage.data.id;
-      const res = await portofolio_funEditLogoBisnisById({
+
-        portofolioId: portofolioId,
+      const response = await apiUpdateLogoPortofolioById({
-        logoId: logoId,
+        id: portofolioId,
+        data: logoId,
       });
 
-      if (res.status === 200) {
+      if (!response) {
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        router.back();
-      } else {
         setLoading(false);
-        ComponentGlobal_NotifikasiGagal(res.message);
+        ComponentGlobal_NotifikasiGagal("Gagal update logo");
+        return;
       }
+
+      ComponentGlobal_NotifikasiBerhasil("Berhasil mengubah Logo Bisnis!");
+      router.back();
     } catch (error) {
       setLoading(false);
       clientLogger.error("Error update logo", error);

src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx

@@ -60,7 +60,9 @@ export default function Portofolio_EditLogoBisnis() {
             }}
           >
             {img ? (
-              <Image maw={250} alt="Image" src={img} />
+              <Center>
+                <Image maw={250} alt="Image" src={img} />
+              </Center>
             ) : (
               <ComponentGlobal_LoadImage fileId={data.logoId} />
             )}

src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx

@@ -1,61 +1,121 @@
 "use client";
 
-import ComponentKatalog_NotedBox from "@/app_modules/katalog/component/noted_box";
-import { Box, Button, Paper, Stack, TextInput } from "@mantine/core";
-import { useState } from "react";
-import { MODEL_PORTOFOLIO_MEDSOS } from "../../model/interface";
-import { Portofolio_funEditMedsosById } from "../../fun/edit/fun_edit_medsos_bisnis_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { useRouter } from "next/navigation";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Button, Stack, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetPortofolioById,
+  apiUpdateMedsosPortofolioById,
+} from "../../component/api_fetch_portofolio";
+import { Portofolio_funEditMedsosById } from "../../fun/edit/fun_edit_medsos_bisnis_by_id";
+import { MODEL_PORTOFOLIO_MEDSOS } from "../../model/interface";
+import { clientLogger } from "@/util/clientLogger";
 
-export default function Portofolio_EditMedsosBisnis({
+interface IUpdateMedson {
-  dataMedsos,
+  facebook: string;
-}: {
+  instagram: string;
-  dataMedsos: MODEL_PORTOFOLIO_MEDSOS;
+  tiktok: string;
-}) {
+  twitter: string;
+  youtube: string;
+}
+export default function Portofolio_EditMedsosBisnis() {
+  const params = useParams<{ id: string }>();
+  const portofolioId = params.id;
   const router = useRouter();
-  const [medsos, setMedsos] = useState(dataMedsos);
+  const [data, setData] = useState<MODEL_PORTOFOLIO_MEDSOS | null>(null);
   const [loading, setLoading] = useState(false);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetPortofolioById({ id: portofolioId });
+      if (response.success) {
+        setData(response.data.Portofolio_MediaSosial);
+      }
+    } catch (error) {
+      clientLogger.error("Error Load Data Portofolio", error);
+    }
+  };
+
+  const hanldeUpdateData = async (data: any) => {
+    const newData: IUpdateMedson = {
+      facebook: data.facebook,
+      instagram: data.instagram,
+      tiktok: data.tiktok,
+      twitter: data.twitter,
+      youtube: data.youtube,
+    };
+
+    const response = await apiUpdateMedsosPortofolioById({
+      id: data.id,
+      data: newData,
+    });
+
+    return response;
+  };
+
+  async function submitUpdate() {
+    if (!data) {
+      ComponentGlobal_NotifikasiGagal("Data tidak valid");
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      const responseUpdate = await hanldeUpdateData(data);
+      if (responseUpdate.success) {
+        ComponentGlobal_NotifikasiBerhasil(responseUpdate.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(responseUpdate.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error Update Medsos", error);
+      ComponentGlobal_NotifikasiGagal("Error Update Medsos");
+    }
+  }
+
+  if (!data) return <CustomSkeleton height={450} width={"100%"} />;
+
   return (
     <>
       {/* <pre>{JSON.stringify(dataMedsos, null, 2)}</pre> */}
-      <Paper
+      <ComponentGlobal_CardStyles>
-        p={"sm"}
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          borderRadius: "10px ",
-          padding: "15px",
-          color: MainColor.white,
-        }}
-      >
         <Stack px={"sm"}>
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             label="Facebook"
-            value={medsos.facebook}
+            value={data.facebook}
             placeholder="Facebook"
             onChange={(val) => {
-              setMedsos({
+              setData({
-                ...medsos,
+                ...data,
                 facebook: val.target.value,
               });
             }}
@@ -63,21 +123,21 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             label="Instagram"
-            value={medsos.instagram}
+            value={data.instagram}
             placeholder="Instagram"
             onChange={(val) => {
-              setMedsos({
+              setData({
-                ...medsos,
+                ...data,
                 instagram: val.target.value,
               });
             }}
@@ -85,21 +145,21 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             label="Tiktok"
-            value={medsos.tiktok}
+            value={data.tiktok}
             placeholder="Tiktok"
             onChange={(val) => {
-              setMedsos({
+              setData({
-                ...medsos,
+                ...data,
                 tiktok: val.target.value,
               });
             }}
@@ -107,21 +167,21 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             label="Twitter"
-            value={medsos.twitter}
+            value={data.twitter}
             placeholder="Twitter"
             onChange={(val) => {
-              setMedsos({
+              setData({
-                ...medsos,
+                ...data,
                 twitter: val.target.value,
               });
             }}
@@ -129,21 +189,21 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             label="Youtube"
-            value={medsos.youtube}
+            value={data.youtube}
             placeholder="Youtube"
             onChange={(val) => {
-              setMedsos({
+              setData({
-                ...medsos,
+                ...data,
                 youtube: val.target.value,
               });
             }}
@@ -154,7 +214,7 @@ export default function Portofolio_EditMedsosBisnis({
             radius={"xl"}
             loading={loading ? true : false}
             loaderPosition="center"
-            onClick={() => onUpdate(router, medsos, setLoading)}
+            onClick={() => submitUpdate()}
             style={{
               backgroundColor: MainColor.yellow,
               border: `2px solid ${AccentColor.yellow}`,
@@ -165,23 +225,7 @@ export default function Portofolio_EditMedsosBisnis({
             Update
           </Button>
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }
-
-async function onUpdate(
-  router: AppRouterInstance,
-  medsos: MODEL_PORTOFOLIO_MEDSOS,
-  setLoading: any
-) {
-  await Portofolio_funEditMedsosById(medsos).then((res) => {
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

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

@@ -65,8 +65,6 @@ export function ComponentMap_ButtonSavePin({
       data: newData,
     });
 
-    console.log("respone >", respone);
-
     if (respone && respone.success) {
       ComponentGlobal_NotifikasiBerhasil(respone.message);
       router.back();

src/app_modules/map/_component/detail_data.tsx

@@ -35,10 +35,10 @@ export function ComponentMap_DetailData({
   const [openModal, setOpenModal] = useState(false);
 
   useShallowEffect(() => {
-    onLoadData(setData, setDataUser);
+    onLoadData();
-  }, [setData, setDataUser]);
+  }, []);
 
-  async function onLoadData(setData: any, setDataUser: any) {
+  async function onLoadData() {
     const res: any = await map_funGetOneById({ mapId: mapId });
     setData(res);
     setDataUser(res.Author);

src/app_modules/map/ui/ui_map_new.tsx

@@ -1,7 +1,7 @@
 "use client";
-import { APIs } from "@/lib";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { APIs } from "@/lib";
 import { Avatar, Loader, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import "mapbox-gl/dist/mapbox-gl.css";
@@ -64,7 +64,7 @@ export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
                      }}
                      attributionControl={false}
                   >
-                     {data.map((e, i) => (
+                     {data?.map((e, i) => (
                         <Stack key={i}>
                            <Marker
                               style={{

src/middleware.ts

@@ -34,6 +34,7 @@ const middlewareConfig: MiddlewareConfig = {
 
     // ADMIN API
     // >> buat dibawah sini <<
+    "/api/user",
     
 
     // Akses awal

zCoba.js

@@ -22,4 +22,7 @@ const data = [
   },
 ];
 
-console.log(new Set(data.map((d) => d.authorId)));
+// console.log(new Set(data.map((d) => d.authorId)));
+
+// contoh error
+console.error("errornya disini klik aja",import.meta.url);