fix: forum

deskripsi:
- metode pengambilan user id dari use server menjadi menggunakan metode API

src/app/dev/(user)/forum/create/page.tsx

@@ -1,16 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { Forum_Create } from "@/app_modules/forum";
-import Forum_NewCreate from "@/app_modules/forum/create/new_create";
 import { Forum_V3_Create } from "@/app_modules/forum/create/V3_create";
 
-
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
   return (
     <>
-      {/* <Forum_Create /> */}
+      <Forum_V3_Create />
-      {/* <Forum_NewCreate/> */}
-      <Forum_V3_Create userLoginId={userLoginId as string}/>
     </>
   );
 }

src/app/dev/(user)/forum/detail/main-detail/[id]/page.tsx

@@ -1,11 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import Forum_V3_MainDetail from "@/app_modules/forum/detail/v3_main_detail";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
   return (
     <>
-      <Forum_V3_MainDetail userLoginId={userLoginId as string} />
+      <Forum_V3_MainDetail />
     </>
   );
 }

src/app/dev/(user)/forum/edit/posting/[id]/layout.tsx

@@ -1,4 +1,3 @@
-
 import { LayoutForum_EditPosting } from "@/app_modules/forum";
 import React from "react";
 

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

@@ -1,13 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { Forum_EditPosting } from "@/app_modules/forum";
 import Forum_V3_EditPosting from "@/app_modules/forum/edit/posting/V3_edit_posting";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
   return (
     <>
-      {/* <Forum_EditPosting  /> */}
+      <Forum_V3_EditPosting />
-      <Forum_V3_EditPosting userLoginId={userLoginId as string}/>
     </>
   );
 }

src/app/dev/(user)/forum/forumku/[id]/page.tsx

@@ -1,12 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_Forumku } from "@/app_modules/forum";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
-      <Forum_Forumku userLoginId={userLoginId as any} />
+      <Forum_Forumku />
     </>
   );
 }

src/app/dev/(user)/forum/main/layout.tsx

@@ -1,4 +1,3 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { LayoutForum_Main } from "@/app_modules/forum";
 import React from "react";
 
@@ -7,11 +6,9 @@ export default async function Layout({
 }: {
   children: React.ReactNode;
 }) {
-  const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
-      <LayoutForum_Main userLoginId={userLoginId}>{children}</LayoutForum_Main>
+      <LayoutForum_Main>{children}</LayoutForum_Main>
     </>
   );
 }

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

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

src/app/dev/(user)/forum/report/komentar-lainnya/[id]/page.tsx

@@ -1,14 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportKomentarLainnya } from "@/app_modules/forum";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
-      <Forum_ReportKomentarLainnya
+      <Forum_ReportKomentarLainnya />
-        userLoginId={userLoginId as string}
-      />
     </>
   );
 }

src/app/dev/(user)/forum/report/komentar/[id]/page.tsx

@@ -1,12 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportKomentar } from "@/app_modules/forum";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
-      <Forum_ReportKomentar userLoginId={userLoginId as any} />
+      <Forum_ReportKomentar />
     </>
   );
 }

src/app/dev/(user)/forum/report/posting-lainnya/[id]/page.tsx

@@ -1,12 +1,10 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportPostingLainnya } from "@/app_modules/forum";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      <Forum_ReportPostingLainnya userLoginId={userLoginId as string} />
+      <Forum_ReportPostingLainnya />
     </>
   );
 }

src/app/dev/(user)/forum/report/posting/[id]/layout.tsx

@@ -1,4 +1,3 @@
-
 import { LayoutForum_ReportPosting } from "@/app_modules/forum";
 import React from "react";
 

src/app/dev/(user)/forum/report/posting/[id]/page.tsx

@@ -1,15 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportPosting } from "@/app_modules/forum";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
-  
-
   return (
     <>
-      <Forum_ReportPosting
+      <Forum_ReportPosting />
-        userLoginId={userLoginId as string}
-      />
     </>
   );
 }

src/app_modules/forum/create/V3_create.tsx

@@ -13,14 +13,16 @@ import { Group, Stack } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import React, { useState } from "react";
 import Forum_ButtonCreatePosting from "../component/button/button_create_posting";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 
-export function Forum_V3_Create({ userLoginId }: { userLoginId: string }) {
+export function Forum_V3_Create() {
   const [editorContent, setEditorContent] = useState("");
   const [opened, { open, close }] = useDisclosure(false);
   const quillRef = React.useRef<any>(null);
   const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
   const [isReady, setIsReady] = useState<boolean>(false);
   const [sticker, setSticker] = useState<ISticker[] | null>(null);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
 
   useShallowEffect(() => {
     onLoadData();
@@ -28,8 +30,11 @@ export function Forum_V3_Create({ userLoginId }: { userLoginId: string }) {
 
   async function onLoadData() {
     try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
         const responseDataProfile = await apiGetUserById({
-        id: userLoginId,
+          id: response.userId,
         });
 
         if (responseDataProfile.success) {
@@ -51,6 +56,9 @@ export function Forum_V3_Create({ userLoginId }: { userLoginId: string }) {
           console.error("Failed to get profile", responseDataProfile.message);
           setSticker(null);
         }
+      } else {
+        setUserLoginId(null);
+      }
     } catch (error) {
       console.error("Error get profile", error);
       setSticker(null);
@@ -95,9 +103,11 @@ export function Forum_V3_Create({ userLoginId }: { userLoginId: string }) {
     };
   }, []);
 
+  
+
   return (
     <>
-      {isReady ? (
+      {isReady && userLoginId ? (
         <Stack>
           {quillLoaded && (
             <Component_V3_TextEditorWithSticker

src/app_modules/forum/detail/v3_main_detail.tsx

@@ -26,12 +26,9 @@ import {
   Forum_SkeletonListKomentar,
 } from "../component/skeleton_view";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 
-export default function Forum_V3_MainDetail({
+export default function Forum_V3_MainDetail() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const param = useParams<{ id: string }>();
   const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING | null>(
     null
@@ -43,6 +40,7 @@ export default function Forum_V3_MainDetail({
   const [activePage, setActivePage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [sticker, setSticker] = useState<ISticker[] | null>(null);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
 
   useShallowEffect(() => {
     onLoadDataSticker();
@@ -50,8 +48,11 @@ export default function Forum_V3_MainDetail({
 
   async function onLoadDataSticker() {
     try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
         const responseDataProfile = await apiGetUserById({
-        id: userLoginId,
+          id: response.userId,
         });
 
         if (responseDataProfile.success) {
@@ -62,17 +63,19 @@ export default function Forum_V3_MainDetail({
             if (response.success) {
               setSticker(response.res.data);
             } else {
-            console.error("Failed to get sticker", response.message);
               setSticker([]);
             }
           } catch (error) {
-          console.error("Error get sticker", error);
             setSticker([]);
            }
          } else {
            console.error("Failed to get profile", responseDataProfile.message);
            setSticker(null);
          }
+      } else {
+        setUserLoginId(null);
+      }
+     
     } catch (error) {
       console.error("Error get profile", error);
       setSticker(null);
@@ -195,7 +198,7 @@ export default function Forum_V3_MainDetail({
   return (
     <>
       <Stack>
-        {!dataPosting || isLoading ? (
+        {!dataPosting || isLoading || !userLoginId ? (
           <CustomSkeleton height={200} width={"100%"} />
         ) : (
           <ComponentForum_DetailForumView
@@ -208,7 +211,7 @@ export default function Forum_V3_MainDetail({
           />
         )}
 
-        {!dataPosting ? (
+        {!dataPosting || isLoading || !userLoginId ? (
           <Forum_SkeletonKomentar />
         ) : (
           (dataPosting?.ForumMaster_StatusPosting?.id as any) === 1 && (
@@ -224,7 +227,7 @@ export default function Forum_V3_MainDetail({
           )
         )}
 
-        {!listKomentar ? (
+        {!listKomentar || isLoading || !userLoginId ? (
           <Forum_SkeletonListKomentar />
         ) : _.isEmpty(listKomentar) ? (
           <ComponentGlobal_IsEmptyData text="Tidak ada komentar" />

src/app_modules/forum/edit/posting/V3_edit_posting.tsx

@@ -17,12 +17,9 @@ import { MODEL_FORUM_POSTING } from "../../model/interface";
 import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
 import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
 import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 
-export default function Forum_V3_EditPosting({
+export default function Forum_V3_EditPosting() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const param = useParams<{ id: string }>();
   const [data, setData] = useState<MODEL_FORUM_POSTING | null>(null);
 
@@ -33,6 +30,7 @@ export default function Forum_V3_EditPosting({
 
   const [sticker, setSticker] = useState<ISticker[] | null>(null);
   const [emotion, setEmotion] = useState<any>([]);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
 
   useShallowEffect(() => {
     onLoadData();
@@ -40,8 +38,11 @@ export default function Forum_V3_EditPosting({
 
   async function onLoadData() {
     try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
         const responseDataProfile = await apiGetUserById({
-        id: userLoginId,
+          id: response.userId,
         });
 
         if (responseDataProfile.success) {
@@ -63,6 +64,9 @@ export default function Forum_V3_EditPosting({
           console.error("Failed to get profile", responseDataProfile.message);
           setSticker(null);
         }
+      } else {
+        setUserLoginId(null);
+      }
     } catch (error) {
       console.error("Error get profile", error);
       setSticker(null);
@@ -117,7 +121,7 @@ export default function Forum_V3_EditPosting({
     };
   }, []);
 
-  if (!data) return <CustomSkeleton height={200} />;
+  if (!data || !userLoginId) return <CustomSkeleton height={200} />;
 
   return (
     <>

src/app_modules/forum/forumku/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { RouterForum } from "@/lib/router_hipmi/router_forum";
@@ -21,18 +22,34 @@ import {
 import { MODEL_FORUM_POSTING } from "../model/interface";
 import ComponentForum_ViewForumProfile from "./forum_profile";
 
-export default function Forum_Forumku({
+export default function Forum_Forumku() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const router = useRouter();
   const params = useParams<{ id: string }>();
   const userId = params.id;
   const [dataUser, setDataUser] = useState<MODEL_USER | null>(null);
-  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING[] | null>(null);
+  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING[] | null>(
+    null
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [activePage, setActivePage] = useState(1);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      } else {
+        setUserLoginId(null);
+      }
+    } catch (error) {
+      setUserLoginId(null);
+    }
+  }
 
   useShallowEffect(() => {
     const handleLoadDataUser = async () => {
@@ -103,7 +120,7 @@ export default function Forum_Forumku({
   return (
     <>
       <Stack spacing={"xl"}>
-        {!dataUser ? (
+        {!dataUser || !userLoginId ? (
           <Forum_SkeletonForumku />
         ) : (
           <ComponentForum_ViewForumProfile
@@ -112,7 +129,7 @@ export default function Forum_Forumku({
           />
         )}
 
-        {!dataPosting || isLoading ? (
+        {!dataPosting || isLoading || !userLoginId ? (
           <Forum_SkeletonCard />
         ) : _.isEmpty(dataPosting) ? (
           <Forum_ComponentIsDataEmpty />

src/app_modules/forum/main/beranda.tsx

@@ -23,12 +23,9 @@ import ComponentForum_BerandaCardView from "../component/main_component/card_vie
 import { Forum_ComponentIsDataEmpty } from "../component/other_component";
 import { Forum_SkeletonCard } from "../component/skeleton_view";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 
-export default function Forum_Beranda({
+export default function Forum_Beranda() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const [data, setData] = useState<MODEL_FORUM_POSTING[]>([]);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setIsSearch] = useState("");
@@ -36,6 +33,24 @@ export default function Forum_Beranda({
   const [countNewPost, setCountNewPost] = useState(0);
   const [hasMore, setHasMore] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      } else {
+        setUserLoginId(null);
+      }
+    } catch (error) {
+      setUserLoginId(null);
+    }
+  }
 
   useShallowEffect(() => {
     handleLoadData(isSearch);
@@ -175,7 +190,7 @@ export default function Forum_Beranda({
 
         {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
 
-        {!data.length && isLoading ? (
+        {!data.length && isLoading && !userLoginId ? (
           <Forum_SkeletonCard />
         ) : _.isEmpty(data) ? (
           <Forum_ComponentIsDataEmpty />
@@ -196,7 +211,7 @@ export default function Forum_Beranda({
               {(item) => (
                 <ComponentForum_BerandaCardView
                   data={item}
-                  userLoginId={userLoginId}
+                  userLoginId={userLoginId as string}
                   onLoadData={(val) => {
                     setData(val);
                   }}

src/app_modules/forum/main/layout.tsx

@@ -3,6 +3,7 @@
 import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
 import UI_NewLayoutTamplate, {
   UI_NewChildren,
@@ -12,21 +13,20 @@ import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { clientLogger } from "@/util/clientLogger";
-import { ActionIcon, Avatar, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 
 export default function LayoutForum_Main({
-  userLoginId,
   children,
 }: {
-  userLoginId: string;
   children: React.ReactNode;
 }) {
   const router = useRouter();
   const [data, setData] = useState<MODEL_USER | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
 
   useShallowEffect(() => {
     handleLoadData();
@@ -34,12 +34,18 @@ export default function LayoutForum_Main({
 
   const handleLoadData = async () => {
     try {
-      const response = await apiGetUserById({
+      const responseUserId = await apiNewGetUserIdByToken();
-        id: userLoginId,
+      if (responseUserId.success) {
+        setUserLoginId(responseUserId.userId);
+        const responseUser = await apiGetUserById({
+          id: responseUserId.userId,
         });
 
-      if (response) {
+        if (responseUser.success) {
-        setData(response.data);
+          setData(responseUser.data);
+        }
+      } else {
+        setUserLoginId(null);
       }
     } catch (error) {
       clientLogger.error("Error get user", error);
@@ -53,7 +59,7 @@ export default function LayoutForum_Main({
           <Component_Header
             title="Forum"
             iconRight={
-              !data ? (
+              !data || !userLoginId ? (
                 <CustomSkeleton height={30} width={30} circle />
               ) : (
                 <ActionIcon
@@ -61,7 +67,7 @@ export default function LayoutForum_Main({
                   variant="transparent"
                   onClick={() => {
                     setIsLoading(true);
-                    router.push(RouterForum.forumku + data?.id);
+                    router.push(RouterForum.forumku + userLoginId);
                   }}
                 >
                   {isLoading ? (

src/app_modules/forum/report/komentar/index.tsx

@@ -14,6 +14,7 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import { clientLogger } from "@/util/clientLogger";
@@ -22,17 +23,31 @@ import { apiGetMasterReportForum } from "../../component/api_fetch_forum";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
 import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
 
-export default function Forum_ReportKomentar({
+export default function Forum_ReportKomentar() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const param = useParams<{ id: string }>();
   const komentarId = param.id;
   const [listReport, setListReport] = useState<
     MODEL_FORUM_MASTER_REPORT[] | null
   >(null);
   const [reportValue, setReportValue] = useState("1");
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      } else {
+        setUserLoginId(null);
+      }
+    } catch (error) {
+      setUserLoginId(null);
+    }
+  }
 
   useShallowEffect(() => {
     handleLoadMasterReport();
@@ -49,7 +64,8 @@ export default function Forum_ReportKomentar({
     }
   };
 
-  if (!listReport) return <CustomSkeleton height={50} width={"100%"} />;
+  if (!listReport || !userLoginId)
+    return <CustomSkeleton height={400} width={"100%"} />;
 
   return (
     <>

src/app_modules/forum/report/komentar/lainnya.tsx

@@ -1,26 +1,45 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
-import { Button, Group, Stack, Textarea } from "@mantine/core";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { forum_funCreateReportKomentarLainnya } from "../../fun/create/fun_create_report_komentar_lainnya";
-import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { clientLogger } from "@/util/clientLogger";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Group, Stack, Textarea } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { forum_funCreateReportKomentarLainnya } from "../../fun/create/fun_create_report_komentar_lainnya";
 
-export default function Forum_ReportKomentarLainnya({
+export default function Forum_ReportKomentarLainnya() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const param = useParams<{ id: string }>();
   const komentarId = param.id;
   const [deskripsi, setDeskripsi] = useState("");
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      } else {
+        setUserLoginId(null);
+      }
+    } catch (error) {
+      setUserLoginId(null);
+    }
+  }
+
+  if (!userLoginId) {
+    return <CustomSkeleton height={400} width={"100%"} />;
+  }
 
   return (
     <>

src/app_modules/forum/report/posting/index.tsx

@@ -1,35 +1,52 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 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 notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import { clientLogger } from "@/util/clientLogger";
 import mqtt_client from "@/util/mqtt_client";
 import { Button, Radio, Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { toNumber } from "lodash";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
+import { apiGetMasterReportForum } from "../../component/api_fetch_forum";
 import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
 import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { apiGetMasterReportForum } from "../../component/api_fetch_forum";
-import { clientLogger } from "@/util/clientLogger";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Forum_ReportPosting({
+export default function Forum_ReportPosting() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const param = useParams<{ id: string }>();
   const postingId = param.id;
-  const [listReport, setListReport] = useState<MODEL_FORUM_MASTER_REPORT[] | null>(null);
+  const [listReport, setListReport] = useState<
+    MODEL_FORUM_MASTER_REPORT[] | null
+  >(null);
   const [reportValue, setReportValue] = useState("1");
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      } else {
+        setUserLoginId(null);
+      }
+    } catch (error) {
+      setUserLoginId(null);
+    }
+  }
 
   useShallowEffect(() => {
     handleLoadMasterReport();
@@ -46,7 +63,8 @@ export default function Forum_ReportPosting({
     }
   };
 
-  if (!listReport) return <CustomSkeleton height={50} width={"100%"} />;
+  if (!listReport || !userLoginId)
+    return <CustomSkeleton height={400} width={"100%"} />;
 
   return (
     <>

src/app_modules/forum/report/posting/lainnya.tsx

@@ -1,25 +1,45 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
-import { Button, Group, Stack, Textarea } from "@mantine/core";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { clientLogger } from "@/util/clientLogger";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Group, Stack, Textarea } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
 
-export default function Forum_ReportPostingLainnya({
+export default function Forum_ReportPostingLainnya() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const param = useParams<{ id: string }>();
   const postingId = param.id;
   const [deskripsi, setDeskripsi] = useState("");
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      } else {
+        setUserLoginId(null);
+      }
+    } catch (error) {
+      setUserLoginId(null);
+    }
+  }
+
+  if (!userLoginId) {
+    return <CustomSkeleton height={400} width={"100%"} />;
+  }
 
   return (
     <>