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/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}
      />