Forum

Fix:
- Tampilan beranda forum & bisa melakukan search dan sudah terintegrasi API
- Fitur hapus edit dan ubah status sudah terintegrasi API
- List komentar sudah bisa muncul dan bisa mengahpus

### No Issue

app.config.js

@@ -69,5 +69,6 @@ export default {
     },
     // Tambahkan environment variables ke sini
     API_BASE_URL: process.env.API_BASE_URL,
+    BASE_URL: process.env.BASE_URL,
   },
 };

app/(application)/(user)/forum/[id]/edit.tsx

@@ -1,37 +1,98 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  LoaderCustom,
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
-import { useState } from "react";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumEdit() {
+  const { id } = useLocalSearchParams();
   const [text, setText] = useState("");
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const buttonFooter = (
+  useFocusEffect(
-    <BoxButtonOnFooter>
+    useCallback(() => {
-      <ButtonCustom
+      onLoadData(id as string);
-        onPress={() => {
+    }, [id])
-          console.log("Posting", text);
-          router.back();
-        }}
-      >
-        Update
-      </ButtonCustom>
-    </BoxButtonOnFooter>
   );
 
+  const onLoadData = async (id: string) => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiForumGetOne({ id });
+
+      setText(response.data.diskusi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlerUpdateData = async () => {
+    if (!text) {
+      Toast.show({
+        type: "error",
+        text1: "Harap masukkan diskusi",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiForumUpdate({
+        id: id as string,
+        data: text,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil diupdate",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonFooter = () => {
+    return (
+      <>
+        {!loadingGetData && (
+          <BoxButtonOnFooter>
+            <ButtonCustom isLoading={isLoading} onPress={handlerUpdateData}>
+              Update
+            </ButtonCustom>
+          </BoxButtonOnFooter>
+        )}
+      </>
+    );
+  };
+
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <ViewWrapper footerComponent={buttonFooter()}>
-      <TextAreaCustom
+      {!loadingGetData ? (
-        placeholder="Ketik diskusi anda..."
+        <TextAreaCustom
-        maxLength={1000}
+          placeholder="Ketik diskusi anda..."
-        showCount
+          maxLength={1000}
-        value={text}
+          showCount
-        onChangeText={setText}
+          value={text}
-      />
+          onChangeText={(value) => {
+            setText(value);
+          }}
+        />
+      ) : (
+        <LoaderCustom />
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/forum/[id]/index.tsx

@@ -1,176 +1,263 @@
 import {
-  AlertCustom,
   ButtonCustom,
   DrawerCustom,
+  LoaderCustom,
   Spacing,
   TextAreaCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
-import { router, useLocalSearchParams } from "expo-router";
+import {
-import { useState } from "react";
+  apiForumCreateComment,
+  apiForumGetComment,
+  apiForumGetOne,
+  apiForumUpdateStatus,
+} from "@/service/api-client/api-forum";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+
+interface CommentProps {
+  id: string;
+  isActive: boolean;
+  komentar: string;
+  createdAt: Date;
+  authorId: string;
+  Author: {
+    id: string;
+    username: string;
+    Profile: {
+      id: string;
+      imageId: string;
+    };
+  };
+}
 
 export default function ForumDetail() {
   const { id } = useLocalSearchParams();
-  console.log(id);
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [listComment, setListComment] = useState<CommentProps[] | null>(null);
+  const [isLoadingComment, setLoadingComment] = useState(false);
+
+  // Status
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
   const [text, setText] = useState("");
+  const [authorId, setAuthorId] = useState("");
+  const [dataId, setDataId] = useState("");
 
   // Comentar
   const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [alertDeleteCommentar, setAlertDeleteCommentar] = useState(false);
+  const [commentId, setCommentId] = useState("");
+  const [commentAuthorId, setCommentAuthorId] = useState("");
 
-  const dataDummy = {
+  useFocusEffect(
-    name: "Bagas",
+    useCallback(() => {
-    status: "Open",
+      onLoadData(id as string);
-    date: "14/07/2025",
+    }, [id])
-    deskripsi:
+  );
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae inventore iure pariatur, libero omnis excepturi. Ullam ad officiis deleniti quos esse odit nesciunt, ipsam adipisci cumque aliquam corporis culpa fugit?",
+
-    jumlahBalas: 2,
+  const onLoadData = async (id: string) => {
+    try {
+      const response = await apiForumGetOne({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  useEffect(() => {
+    onLoadListComment(id as string);
+  }, [id]);
+
+  const onLoadListComment = async (id: string) => {
+    try {
+      const response = await apiForumGetComment({
+        id: id as string,
+      });
+      setListComment(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Update Status
+  const handlerUpdateStatus = async (value: any) => {
+    try {
+      const response = await apiForumUpdateStatus({
+        id: id as string,
+        data: value,
+      });
+      if (response.success) {
+        setStatus(response.data);
+        setData({
+          ...data,
+          ForumMaster_StatusPosting: {
+            status: response.data,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Create Commentar
+  const handlerCreateCommentar = async () => {
+    const newData = {
+      comment: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setLoadingComment(true);
+      const response = await apiForumCreateComment({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        setText("");
+        const newComment = {
+          id: response.data.id,
+          isActive: response.data.isActive,
+          komentar: response.data.komentar,
+          createdAt: response.data.createdAt,
+          authorId: response.data.authorId,
+          Author: response.data.Author,
+        };
+        setListComment((prev) => [newComment, ...(prev || [])]);
+        setData({
+          ...data,
+          count: data.count + 1,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingComment(false);
+    }
   };
 
   return (
     <>
       <ViewWrapper>
-        {/* <StackCustom>
+        {!data && !listComment ? (
-        </StackCustom> */}
+          <LoaderCustom />
-        <Forum_BoxDetailSection
+        ) : (
-          data={dataDummy}
+          <>
-          setOpenDrawer={setOpenDrawer}
+            {/* Box Posting */}
-          setStatus={setStatus}
+            <Forum_BoxDetailSection
-        />
+              data={data}
+              onSetData={() => {
+                setOpenDrawer(true);
+                setStatus(data.ForumMaster_StatusPosting?.status);
+                setAuthorId(data.Author?.id);
+                setDataId(data.id);
+              }}
+            />
 
-        <TextAreaCustom
+            {/* Area Commentar */}
-          placeholder="Ketik diskusi anda..."
+            {data?.ForumMaster_StatusPosting?.status === "Open" && (
-          maxLength={1000}
+              <>
-          showCount
+                <TextAreaCustom
-          value={text}
+                  placeholder="Ketik diskusi anda..."
-          onChangeText={setText}
+                  maxLength={1000}
-          style={{
+                  showCount
-            marginBottom: 0,
+                  value={text}
-          }}
+                  onChangeText={setText}
-        />
+                  style={{
-        <ButtonCustom
+                    marginBottom: 0,
-          style={{
+                  }}
-            alignSelf: "flex-end",
+                />
-          }}
+                <ButtonCustom
-          onPress={() => {
+                  isLoading={isLoadingComment}
-            console.log("Posting", text);
+                  style={{
-            router.back();
+                    alignSelf: "flex-end",
-          }}
+                  }}
-        >
+                  onPress={() => {
-          Balas
+                    handlerCreateCommentar();
-        </ButtonCustom>
+                  }}
+                >
+                  Balas
+                </ButtonCustom>
+              </>
+            )}
+            <Spacing height={40} />
 
-        <Spacing height={40} />
+            {/* List Commentar */}
-
+            {_.isEmpty(listComment) ? (
-        {listDummyCommentarForum.map((e, i) => (
+              <TextCustom align="center" color="gray" size={"small"}>
-          <Forum_CommentarBoxSection
+                Tidak ada komentar
-            key={i}
+              </TextCustom>
-            data={e}
+            ) : (
-            setOpenDrawer={setOpenDrawerCommentar}
+              <TextCustom color="gray">Komentar :</TextCustom>
-          />
+            )}
-        ))}
+            <Spacing height={5} />
+            {listComment?.map((item: any, index: number) => (
+              <Forum_CommentarBoxSection
+                key={index}
+                data={item}
+                onSetData={(value) => {
+                  setCommentId(value.setCommentId);
+                  setOpenDrawerCommentar(value.setOpenDrawer);
+                  setCommentAuthorId(value.setCommentAuthorId);
+                }}
+              />
+            ))}
+          </>
+        )}
       </ViewWrapper>
 
+      {/* Posting Drawer */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
         <Forum_MenuDrawerBerandaSection
-          id={id as string}
+          id={dataId}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
+          authorId={authorId}
-          setShowAlertStatus={setAlertStatus}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
         />
       </DrawerCustom>
 
-      {/* Alert Status */}
+      {/* Commentar Drawer */}
-      <AlertCustom
-        isVisible={alertStatus}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
-
-      {/* Commentar */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawerCommentar}
         closeDrawer={() => setOpenDrawerCommentar(false)}
       >
         <Forum_MenuDrawerCommentar
           id={id as string}
+          commentId={commentId}
+          commentAuthorId={commentAuthorId}
           setIsDrawerOpen={() => {
             setOpenDrawerCommentar(false);
           }}
-          setShowDeleteAlert={setAlertDeleteCommentar}
+          listComment={listComment}
+          setListComment={setListComment}
+          countComment={data?.count}
+          setCountComment={(val: any) => {
+            setData((prev: any) => ({
+              ...prev,
+              count: val,
+            }));
+          }}
         />
       </DrawerCustom>
-
-      {/* Alert Delete Commentar */}
-      <AlertCustom
-        isVisible={alertDeleteCommentar}
-        title="Hapus Komentar"
-        message="Apakah Anda yakin ingin menghapus komentar ini?"
-        onLeftPress={() => {
-          setOpenDrawerCommentar(false);
-          setAlertDeleteCommentar(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawerCommentar(false);
-          setAlertDeleteCommentar(false);
-          console.log("Hapus commentar");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/forum/index.tsx

@@ -19,7 +19,6 @@ import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function Forum() {
-  const id = "test-id-forum";
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
   const { user } = useAuth();
@@ -27,6 +26,8 @@ export default function Forum() {
   const [listData, setListData] = useState<any[]>();
   const [loadingGetList, setLoadingGetList] = useState(false);
   const [search, setSearch] = useState("");
+  const [dataId, setDataId] = useState("");
+  const [authorId, setAuthorId] = useState("");
 
   useFocusEffect(
     useCallback(() => {
@@ -44,7 +45,6 @@ export default function Forum() {
     try {
       setLoadingGetList(true);
       const response = await apiForumGetAll({ search: search });
-      console.log("[DATA PROFILE]", JSON.stringify(response.data, null, 2));
 
       setListData(response.data);
     } catch (error) {
@@ -96,10 +96,15 @@ export default function Forum() {
             <Forum_BoxDetailSection
               key={i}
               data={e}
-              setOpenDrawer={setOpenDrawer}
+              onSetData={() => {
-              setStatus={setStatus}
+                setDataId(e.id);
+                setOpenDrawer(true);
+                setStatus(e.ForumMaster_StatusPosting?.status);
+                setAuthorId(e.Author?.id);
+              }}
               isTruncate={true}
-              href={`/forum/${id}`}
+              href={`/forum/${e.id}`}
+              isRightComponent={false}
             />
           ))
         )}
@@ -111,55 +116,14 @@ export default function Forum() {
         closeDrawer={() => setOpenDrawer(false)}
       >
         <Forum_MenuDrawerBerandaSection
-          id={id}
+          id={dataId}
+          authorId={authorId}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={() => {}}
-          setShowAlertStatus={() => {}}
         />
       </DrawerCustom>
-
-      {/* Alert Status */}
-      {/* <AlertCustom
-        isVisible={alertStatus}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      /> */}
-
-      {/* Alert Delete */}
-      {/* <AlertCustom
-        isVisible={deleteAlert}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      /> */}
     </>
   );
 }

app/(application)/(user)/job/[id]/index.tsx

@@ -4,6 +4,7 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import { apiJobGetOne } from "@/service/api-client/api-job";
+import { BASE_URL } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
 import * as Clipboard from "expo-clipboard";
 import { useLocalSearchParams } from "expo-router";
@@ -32,7 +33,8 @@ export default function JobDetail() {
     }
   };
 
-  const linkUrl = `http://192.168.1.83:3000/job-vacancy/`;
+  const baseUrl = BASE_URL;
+  const linkUrl = `${baseUrl}/job-vacancy/`;
 
   const OpenLinkButton = ({ id }: { id: string }) => {
     const jobUrl = `${linkUrl}${id}`;

screens/Forum/CommentarBoxSection.tsx

@@ -1,30 +1,44 @@
 import {
-  AvatarCustom,
+  AvatarComp,
-  BaseBox,
+  BoxWithHeaderSection,
   ClickableCustom,
   Grid,
   Spacing,
-  TextCustom,
+  TextCustom
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import { formatChatTime } from "@/utils/formatChatTime";
 import { Entypo } from "@expo/vector-icons";
 import { View } from "react-native";
 
 export default function Forum_CommentarBoxSection({
   data,
-  setOpenDrawer,
+  onSetData,
 }: {
   data: any;
-  setOpenDrawer: (value: boolean) => void;
+  onSetData: ({
+    setCommentId,
+    setOpenDrawer,
+    setCommentAuthorId,
+  }: {
+    setCommentId: string;
+    setOpenDrawer: boolean;
+    setCommentAuthorId: string;
+  }) => void;
 }) {
   return (
     <>
-      <BaseBox>
+      <BoxWithHeaderSection>
         <View>
           <Grid>
             <Grid.Col span={2}>
-              <AvatarCustom href={`/profile/${data.id}`} />
+              <AvatarComp
+                href={`/profile/${data?.Author?.Profile?.id}`}
+                fileId={data?.Author?.Profile?.imageId}
+                size="base"
+              />
             </Grid.Col>
             <Grid.Col
               span={8}
@@ -32,7 +46,7 @@ export default function Forum_CommentarBoxSection({
                 justifyContent: "center",
               }}
             >
-              <TextCustom>{data.name}</TextCustom>
+              <TextCustom>{data?.Author?.username}</TextCustom>
             </Grid.Col>
 
             <Grid.Col
@@ -43,7 +57,11 @@ export default function Forum_CommentarBoxSection({
             >
               <ClickableCustom
                 onPress={() => {
-                  setOpenDrawer(true);
+                  onSetData({
+                    setCommentId: data?.id,
+                    setOpenDrawer: true,
+                    setCommentAuthorId: data?.Author?.id,
+                  });
                 }}
                 style={{
                   alignItems: "flex-end",
@@ -58,14 +76,18 @@ export default function Forum_CommentarBoxSection({
             </Grid.Col>
           </Grid>
 
-          <TextCustom>{data.deskripsi}</TextCustom>
+          <View style={GStyles.forumBox}>
+            <TextCustom>{data.komentar}</TextCustom>
+          </View>
 
-          <Spacing />
+          <Spacing height={10} />
           <View style={{ alignItems: "flex-end" }}>
-            <TextCustom>{data.date}</TextCustom>
+            <TextCustom size="small" color="gray">
+              {formatChatTime(data?.createdAt)}
+            </TextCustom>
           </View>
         </View>
-      </BaseBox>
+      </BoxWithHeaderSection>
     </>
   );
 }

screens/Forum/DiscussionBoxSection.tsx

@@ -4,10 +4,12 @@ import {
   ClickableCustom,
   Grid,
   Spacing,
-  TextCustom
+  TextCustom,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import { formatChatTime } from "@/utils/formatChatTime";
 import { Entypo, Ionicons } from "@expo/vector-icons";
 import { Href, router } from "expo-router";
 import { View } from "react-native";
@@ -15,25 +17,28 @@ import { View } from "react-native";
 export default function Forum_BoxDetailSection({
   data,
   isTruncate,
-  setOpenDrawer,
-  setStatus,
   href,
+  isRightComponent = true,
+  onSetData,
 }: {
   data: any;
   isTruncate?: boolean;
-  setOpenDrawer: (value: boolean) => void;
-  setStatus: (value: string) => void;
   href?: Href;
+  isRightComponent?: boolean;
+  onSetData: ({
+    setDataId,
+    setStatus,
+    setOpenDrawer,
+    setAuthorId,
+  }: {
+    setDataId: string;
+    setStatus: string;
+    setOpenDrawer: boolean;
+    setAuthorId: string;
+  }) => void;
 }) {
   const deskripsiView = (
-    <View
+    <View style={GStyles.forumBox}>
-      style={{
-        backgroundColor: MainColor.soft_darkblue,
-        padding: 8,
-        borderRadius: 8,
-        paddingBlock: 20,
-      }}
-    >
       {isTruncate ? (
         <TextCustom truncate={2}>{data?.diskusi}</TextCustom>
       ) : (
@@ -54,8 +59,8 @@ export default function Forum_BoxDetailSection({
                 size={"base"}
               />
             </Grid.Col>
-            <Grid.Col span={8}>
+            <Grid.Col span={6}>
-              <TextCustom>{data?.Author?.username}</TextCustom>
+              <TextCustom truncate>{data?.Author?.username}</TextCustom>
               {data?.ForumMaster_StatusPosting?.status === "Open" ? (
                 <TextCustom bold size="small" color="green">
                   {data?.ForumMaster_StatusPosting?.status}
@@ -68,30 +73,36 @@ export default function Forum_BoxDetailSection({
             </Grid.Col>
 
             <Grid.Col
-              span={2}
+              span={4}
               style={{
-                justifyContent: "center",
+                justifyContent: "flex-start",
+                alignItems: "flex-end",
               }}
             >
-              <ClickableCustom
+              {isRightComponent && (
-                onPress={() => {
+                <ClickableCustom
-                  setOpenDrawer(true);
+                  onPress={() => {
-                  setStatus(data?.ForumMaster_StatusPosting?.status);
+                    onSetData({
-                }}
+                      setDataId: data?.id,
-                style={{
+                      setStatus: data?.ForumMaster_StatusPosting?.status,
-                  alignItems: "flex-end",
+                      setAuthorId: data?.Author?.id,
-                }}
+                      setOpenDrawer: true,
-              >
+                    });
-                <Entypo
+                  }}
-                  name="dots-three-horizontal"
+                  style={{
-                  color={MainColor.white}
+                    alignItems: "flex-end",
-                  size={ICON_SIZE_SMALL}
+                  }}
-                />
+                >
-              </ClickableCustom>
+                  <Entypo
+                    name="dots-three-horizontal"
+                    color={MainColor.white}
+                    size={ICON_SIZE_SMALL}
+                  />
+                </ClickableCustom>
+              )}
             </Grid.Col>
           </Grid>
 
-
           {href ? (
             <ClickableCustom onPress={() => router.push(href as any)}>
               {deskripsiView}
@@ -116,11 +127,13 @@ export default function Forum_BoxDetailSection({
                   size={ICON_SIZE_SMALL}
                   color={MainColor.white}
                 />
-                <TextCustom>{data?.Forum_Komentar?.length}</TextCustom>
+                <TextCustom>{data?.count}</TextCustom>
               </View>
             </Grid.Col>
             <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <TextCustom size="small"> {data.date}</TextCustom>
+              <TextCustom truncate size="small" color="gray">
+                {formatChatTime(data?.createdAt)}
+              </TextCustom>
             </Grid.Col>
           </Grid>
         </View>

screens/Forum/ListPage.tsx

@@ -2,24 +2,20 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Feather, Ionicons } from "@expo/vector-icons";
 
-export { drawerItemsForumBeranda, drawerItemsForumComentar };
+export {
+  drawerItemsForumBerandaForAuthor,
+  drawerItemsForumComentarForAuthor,
+  drawerItemsForumBerandaForNonAuthor,
+  drawerItemsForumComentarForNonAuthor,
+};
 
-const drawerItemsForumBeranda = ({
+const drawerItemsForumBerandaForAuthor = ({
   id,
   status,
 }: {
   id: string;
   status: string;
 }) => [
-  {
-    icon: (
-      <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
-    ),
-    label: "Laporkan diskusi",
-    // color: MainColor.white,
-    path: `/forum/${id}/report-posting`,
-  },
-    
   {
     icon: (
       <Feather name="edit" size={ICON_SIZE_SMALL} color={MainColor.white} />
@@ -49,15 +45,18 @@ const drawerItemsForumBeranda = ({
   },
 ];
 
-const drawerItemsForumComentar = ({ id }: { id: string }) => [
+const drawerItemsForumBerandaForNonAuthor = ({ id }: { id: string }) => [
   {
     icon: (
       <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
     ),
-    label: "Laporkan",
+    label: "Laporkan diskusi",
     // color: MainColor.white,
-    path: `/forum/${id}/report-commentar`,
+    path: `/forum/${id}/report-posting`,
   },
+];
+
+const drawerItemsForumComentarForAuthor = ({ id }: { id: string }) => [
   {
     icon: (
       <Ionicons name="trash" size={ICON_SIZE_SMALL} color={MainColor.white} />
@@ -67,3 +66,14 @@ const drawerItemsForumComentar = ({ id }: { id: string }) => [
     path: "",
   },
 ];
+
+const drawerItemsForumComentarForNonAuthor = ({ id }: { id: string }) => [
+  {
+    icon: (
+      <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Laporkan",
+    // color: MainColor.white,
+    path: `/forum/${id}/report-commentar`,
+  },
+];

screens/Forum/MenuDrawerSection.tsx/MenuBeranda.tsx

@@ -1,30 +1,56 @@
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
 import { router } from "expo-router";
-import { drawerItemsForumBeranda } from "../ListPage";
 import { AlertDefaultSystem } from "@/components";
+import {
+  drawerItemsForumBerandaForAuthor,
+  drawerItemsForumBerandaForNonAuthor,
+} from "../ListPage";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumDelete } from "@/service/api-client/api-forum";
+import Toast from "react-native-toast-message";
 
 export default function Forum_MenuDrawerBerandaSection({
   id,
   status,
   setIsDrawerOpen,
-  setShowDeleteAlert,
+  authorId,
-  setShowAlertStatus,
+  handlerUpdateStatus,
 }: {
   id: string;
   status: string;
   setIsDrawerOpen: (value: boolean) => void;
-  setShowDeleteAlert?: (value: boolean) => void;
+  authorId: string;
-  setShowAlertStatus?: (value: boolean) => void;
+  handlerUpdateStatus?: (value: string) => void;
 }) {
+  const { user } = useAuth();
   const handlePress = (item: IMenuDrawerItem) => {
     if (item.label === "Hapus") {
       AlertDefaultSystem({
-        title: "Hapus",
+        title: "Hapus diskusi",
-        message: "Apakah Anda yakin ingin menghapus forum ini?",
+        message: "Apakah Anda yakin ingin menghapus diskusi ini?",
         textLeft: "Batal",
         textRight: "Hapus",
-        onPressRight: () => {},
+        onPressRight: async () => {
+          try {
+            const response = await apiForumDelete({ id });
+           
+            if (response.success) {
+              Toast.show({
+                type: "success",
+                text1: "Berhasil dihapus",
+              });
+              router.back();
+            } else {
+              Toast.show({
+                type: "error",
+                text1: response.message,
+              });
+            }
+          } catch (error) {
+            console.log("[ERROR]", error);
+          }
+        },
       });
     } else if (item.label === "Buka forum" || item.label === "Tutup forum") {
       AlertDefaultSystem({
@@ -32,7 +58,9 @@ export default function Forum_MenuDrawerBerandaSection({
         message: "Apakah Anda yakin ingin mengubah status forum ini?",
         textLeft: "Batal",
         textRight: "Ubah",
-        onPressRight: () => {},
+        onPressRight: () => {
+          handlerUpdateStatus?.(item.label === "Buka forum" ? "Open" : "Closed");
+        },
       });
     } else {
       router.push(item.path as any);
@@ -45,7 +73,11 @@ export default function Forum_MenuDrawerBerandaSection({
     <>
       {/* Menu Items */}
       <MenuDrawerDynamicGrid
-        data={drawerItemsForumBeranda({ id, status })}
+        data={
+          authorId === user?.id
+            ? drawerItemsForumBerandaForAuthor({ id, status })
+            : drawerItemsForumBerandaForNonAuthor({ id })
+        }
         columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
         onPressItem={handlePress as any}
       />

screens/Forum/MenuDrawerSection.tsx/MenuCommentar.tsx

@@ -1,19 +1,67 @@
-import { MenuDrawerDynamicGrid } from "@/components";
+import { AlertDefaultSystem, MenuDrawerDynamicGrid } from "@/components";
-import { drawerItemsForumComentar } from "../ListPage";
+import { useAuth } from "@/hooks/use-auth";
 import { router } from "expo-router";
+import {
+  drawerItemsForumComentarForAuthor,
+  drawerItemsForumComentarForNonAuthor,
+} from "../ListPage";
+import { apiForumDeleteComment } from "@/service/api-client/api-forum";
+import Toast from "react-native-toast-message";
 
 export default function Forum_MenuDrawerCommentar({
   id,
-  setShowDeleteAlert,
   setIsDrawerOpen,
+  commentId,
+  commentAuthorId,
+  listComment,
+  setListComment,
+  countComment,
+  setCountComment,
 }: {
   id: string;
-  setShowDeleteAlert: (value: boolean) => void;
   setIsDrawerOpen: (value: boolean) => void;
+  commentId: string;
+  commentAuthorId: string;
+  listComment: any;
+  setListComment: (value: any) => void;
+  countComment: number;
+  setCountComment: (value: number) => void;
 }) {
+  const { user } = useAuth();
   const handlePress = (item: any) => {
     if (item.label === "Hapus") {
-      setShowDeleteAlert(true);
+      AlertDefaultSystem({
+        title: "Hapus",
+        message: "Apakah Anda yakin ingin menghapus komentar ini?",
+        textLeft: "Batal",
+        textRight: "Hapus",
+        onPressLeft: () => {},
+        onPressRight: async () => {
+          try {
+            const response = await apiForumDeleteComment({ id: commentId });
+
+            if (response.success) {
+              setListComment(
+                listComment.filter((item: any) => item.id !== commentId)
+              );
+
+              setCountComment(countComment - 1);
+
+              Toast.show({
+                type: "success",
+                text1: "Berhasil dihapus",
+              });
+            } else {
+              Toast.show({
+                type: "error",
+                text1: response.message,
+              });
+            }
+          } catch (error) {
+            console.log("[ERROR]", error);
+          }
+        },
+      });
     } else {
       router.push(item.path as any);
     }
@@ -24,7 +72,11 @@ export default function Forum_MenuDrawerCommentar({
   return (
     <>
       <MenuDrawerDynamicGrid
-        data={drawerItemsForumComentar({ id })}
+        data={
+          commentAuthorId === user?.id
+            ? drawerItemsForumComentarForAuthor({ id })
+            : drawerItemsForumComentarForNonAuthor({ id })
+        }
         columns={4}
         onPressItem={handlePress}
       />

service/api-client/api-forum.ts

@@ -11,7 +11,7 @@ export async function apiForumCreate({ data }: { data: any }) {
   }
 }
 
-export async function apiForumGetAll({search}: {search: string}) {
+export async function apiForumGetAll({ search }: { search: string }) {
   try {
     const response = await apiConfig.get(`/mobile/forum?search=${search}`);
     return response.data;
@@ -19,3 +19,78 @@ export async function apiForumGetAll({search}: {search: string}) {
     throw error;
   }
 }
+
+export async function apiForumGetOne({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/forum/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumUpdate({ id, data }: { id: string; data: any }) {
+  try {
+    const response = await apiConfig.put(`/mobile/forum/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumUpdateStatus({ id, data }: { id: string; data: any }) {
+  try {
+    const response = await apiConfig.post(`/mobile/forum/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumDelete({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/forum/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumCreateComment({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/forum/${id}/comment`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumGetComment({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/forum/${id}/comment`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumDeleteComment({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/forum/${id}/comment`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

service/api-config.ts

@@ -1,6 +1,7 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import axios, { AxiosInstance } from "axios";
 import Constants from "expo-constants";
+export const BASE_URL = Constants.expoConfig?.extra?.BASE_URL;
 export const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL;
 
 export const apiConfig: AxiosInstance = axios.create({

styles/global-styles.ts

@@ -323,4 +323,10 @@ export const GStyles = StyleSheet.create({
   alignSelfFlexEnd: {
     alignSelf: "flex-end",
   },
+  forumBox: {
+    backgroundColor: MainColor.soft_darkblue,
+    borderRadius: 8,
+    paddingBlock: 20,
+    paddingInline: 10,
+  },
 });

utils/formatChatTime.ts

@@ -22,7 +22,7 @@ export const formatChatTime = (date: string | Date): string => {
 
   // Jika kemarin
   if (messageDate.isSame(now.subtract(1, 'day'), 'day')) {
-    return 'Kemarin';
+    return messageDate.format('dddd HH:mm');
   }
 
   // Jika dalam 7 hari terakhir (tapi bukan kemarin/ hari ini)