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
2025-09-26 14:46:29 +08:00
parent 54af104f8a
commit 18beb09b42
14 changed files with 596 additions and 270 deletions
--- a/app.config.js
+++ b/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,
  },
 };
--- a/app/(application)/(user)/forum/[id]/edit.tsx
+++ b/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 { useState } from "react";
+import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
+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 = (
-    <BoxButtonOnFooter>
-      <ButtonCustom
-        onPress={() => {
-          console.log("Posting", text);
-          router.back();
-        }}
-      >
-        Update
-      </ButtonCustom>
-    </BoxButtonOnFooter>
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
  );

+  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}>
-      <TextAreaCustom
-        placeholder="Ketik diskusi anda..."
-        maxLength={1000}
-        showCount
-        value={text}
-        onChangeText={setText}
-      />
+    <ViewWrapper footerComponent={buttonFooter()}>
+      {!loadingGetData ? (
+        <TextAreaCustom
+          placeholder="Ketik diskusi anda..."
+          maxLength={1000}
+          showCount
+          value={text}
+          onChangeText={(value) => {
+            setText(value);
+          }}
+        />
+      ) : (
+        <LoaderCustom />
+      )}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/forum/[id]/index.tsx
+++ b/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 { useState } from "react";
+import {
+  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 = {
-    name: "Bagas",
-    status: "Open",
-    date: "14/07/2025",
-    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,
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  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>
-        </StackCustom> */}
-        <Forum_BoxDetailSection
-          data={dataDummy}
-          setOpenDrawer={setOpenDrawer}
-          setStatus={setStatus}
-        />
+        {!data && !listComment ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            {/* Box Posting */}
+            <Forum_BoxDetailSection
+              data={data}
+              onSetData={() => {
+                setOpenDrawer(true);
+                setStatus(data.ForumMaster_StatusPosting?.status);
+                setAuthorId(data.Author?.id);
+                setDataId(data.id);
+              }}
+            />

-        <TextAreaCustom
-          placeholder="Ketik diskusi anda..."
-          maxLength={1000}
-          showCount
-          value={text}
-          onChangeText={setText}
-          style={{
-            marginBottom: 0,
-          }}
-        />
-        <ButtonCustom
-          style={{
-            alignSelf: "flex-end",
-          }}
-          onPress={() => {
-            console.log("Posting", text);
-            router.back();
-          }}
-        >
-          Balas
-        </ButtonCustom>
+            {/* Area Commentar */}
+            {data?.ForumMaster_StatusPosting?.status === "Open" && (
+              <>
+                <TextAreaCustom
+                  placeholder="Ketik diskusi anda..."
+                  maxLength={1000}
+                  showCount
+                  value={text}
+                  onChangeText={setText}
+                  style={{
+                    marginBottom: 0,
+                  }}
+                />
+                <ButtonCustom
+                  isLoading={isLoadingComment}
+                  style={{
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    handlerCreateCommentar();
+                  }}
+                >
+                  Balas
+                </ButtonCustom>
+              </>
+            )}
+            <Spacing height={40} />

-        <Spacing height={40} />
-
-        {listDummyCommentarForum.map((e, i) => (
-          <Forum_CommentarBoxSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawerCommentar}
-          />
-        ))}
+            {/* List Commentar */}
+            {_.isEmpty(listComment) ? (
+              <TextCustom align="center" color="gray" size={"small"}>
+                Tidak ada komentar
+              </TextCustom>
+            ) : (
+              <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}
-          setShowAlertStatus={setAlertStatus}
+          authorId={authorId}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
        />
      </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}
-      />
-
-      {/* Commentar */}
+      {/* Commentar Drawer */}
      <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}
-      />
    </>
  );
 }
--- a/app/(application)/(user)/forum/index.tsx
+++ b/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}
-              setStatus={setStatus}
+              onSetData={() => {
+                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}
-      /> */}
    </>
  );
 }
--- a/app/(application)/(user)/job/[id]/index.tsx
+++ b/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}`;
--- a/screens/Forum/CommentarBoxSection.tsx
+++ b/screens/Forum/CommentarBoxSection.tsx
@@ -1,30 +1,44 @@
 import {
-  AvatarCustom,
-  BaseBox,
+  AvatarComp,
+  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>
    </>
  );
 }
--- a/screens/Forum/DiscussionBoxSection.tsx
+++ b/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
-      style={{
-        backgroundColor: MainColor.soft_darkblue,
-        padding: 8,
-        borderRadius: 8,
-        paddingBlock: 20,
-      }}
-    >
+    <View style={GStyles.forumBox}>
      {isTruncate ? (
        <TextCustom truncate={2}>{data?.diskusi}</TextCustom>
      ) : (
@@ -54,8 +59,8 @@ export default function Forum_BoxDetailSection({
                size={"base"}
              />
            </Grid.Col>
-            <Grid.Col span={8}>
-              <TextCustom>{data?.Author?.username}</TextCustom>
+            <Grid.Col span={6}>
+              <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
-                onPress={() => {
-                  setOpenDrawer(true);
-                  setStatus(data?.ForumMaster_StatusPosting?.status);
-                }}
-                style={{
-                  alignItems: "flex-end",
-                }}
-              >
-                <Entypo
-                  name="dots-three-horizontal"
-                  color={MainColor.white}
-                  size={ICON_SIZE_SMALL}
-                />
-              </ClickableCustom>
+              {isRightComponent && (
+                <ClickableCustom
+                  onPress={() => {
+                    onSetData({
+                      setDataId: data?.id,
+                      setStatus: data?.ForumMaster_StatusPosting?.status,
+                      setAuthorId: data?.Author?.id,
+                      setOpenDrawer: true,
+                    });
+                  }}
+                  style={{
+                    alignItems: "flex-end",
+                  }}
+                >
+                  <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>
--- a/screens/Forum/ListPage.tsx
+++ b/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`,
+  },
+];
--- a/screens/Forum/MenuDrawerSection.tsx/MenuBeranda.tsx
+++ b/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,
-  setShowAlertStatus,
+  authorId,
+  handlerUpdateStatus,
 }: {
  id: string;
  status: string;
  setIsDrawerOpen: (value: boolean) => void;
-  setShowDeleteAlert?: (value: boolean) => void;
-  setShowAlertStatus?: (value: boolean) => void;
+  authorId: string;
+  handlerUpdateStatus?: (value: string) => void;
 }) {
+  const { user } = useAuth();
  const handlePress = (item: IMenuDrawerItem) => {
    if (item.label === "Hapus") {
      AlertDefaultSystem({
-        title: "Hapus",
-        message: "Apakah Anda yakin ingin menghapus forum ini?",
+        title: "Hapus diskusi",
+        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}
      />
--- a/screens/Forum/MenuDrawerSection.tsx/MenuCommentar.tsx
+++ b/screens/Forum/MenuDrawerSection.tsx/MenuCommentar.tsx
@@ -1,19 +1,67 @@
-import { MenuDrawerDynamicGrid } from "@/components";
-import { drawerItemsForumComentar } from "../ListPage";
+import { AlertDefaultSystem, MenuDrawerDynamicGrid } from "@/components";
+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}
      />
--- a/service/api-client/api-forum.ts
+++ b/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;
+  }
+}
--- a/service/api-config.ts
+++ b/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({
--- a/styles/global-styles.ts
+++ b/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,
+  },
 });
--- a/utils/formatChatTime.ts
+++ b/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)