Forum

Add: - api-client/api-forum Fix: - Integrasi API: create dan beranda file ### No Issue
2025-09-24 17:30:06 +08:00
parent 8c5602b809
commit 54af104f8a
5 changed files with 166 additions and 45 deletions
--- a/app/(application)/(user)/forum/create.tsx
+++ b/app/(application)/(user)/forum/create.tsx
@@ -4,18 +4,47 @@ import {
  TextAreaCustom,
  ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreate } from "@/service/api-client/api-forum";
 import { router } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";

 export default function ForumCreate() {
+  const { user } = useAuth();
  const [text, setText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    const newData = {
+      diskusi: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setIsLoading(true);
+      const response = await apiForumCreate({ data: newData });
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Posting berhasil",
+        });
+        setText("");
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };

  const buttonFooter = (
    <BoxButtonOnFooter>
      <ButtonCustom
+        isLoading={isLoading}
        onPress={() => {
-          console.log("Posting", text);
-          router.back();
+          handlerSubmit();
        }}
      >
        Posting
--- a/app/(application)/(user)/forum/index.tsx
+++ b/app/(application)/(user)/forum/index.tsx
@@ -1,25 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
-  AvatarCustom,
+  AvatarComp,
  BackButton,
  DrawerCustom,
+  LoaderCustom,
  SearchInput,
+  TextCustom,
  ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { router, Stack } from "expo-router";
-import { useState } from "react";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, Stack, useFocusEffect } from "expo-router";
+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 [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const { user } = useAuth();
+  const [dataUser, setDataUser] = useState<any>();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetList, setLoadingGetList] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(user?.id as string);
+    }, [user?.id, search])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    const response = await apiUser(id);
+    setDataUser(response.data);
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({ search: search });
+      console.log("[DATA PROFILE]", JSON.stringify(response.data, null, 2));
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };

  return (
    <>
@@ -27,12 +60,23 @@ export default function Forum() {
        options={{
          title: "Forum",
          headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
+          headerRight: () => (
+            <AvatarComp
+              fileId={dataUser?.Profile?.imageId}
+              size="base"
+              href={`/forum/${user?.id}/forumku`}
+            />
+          ),
        }}
      />

      <ViewWrapper
-        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
+        headerComponent={
+          <SearchInput
+            placeholder="Cari topik diskusi"
+            onChangeText={(e) => setSearch(e)}
+          />
+        }
        floatingButton={
          <FloatingButton
            onPress={() =>
@@ -41,20 +85,28 @@ export default function Forum() {
          />
        }
      >
-        {listDummyDiscussionForum.map((e, i) => (
-          <Forum_BoxDetailSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawer}
-            setStatus={setStatus}
-            isTruncate={true}
-            href={`/forum/${id}`}
-          />
-        ))}
+        {loadingGetList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada diskusi
+          </TextCustom>
+        ) : (
+          listData?.map((e: any, i: number) => (
+            <Forum_BoxDetailSection
+              key={i}
+              data={e}
+              setOpenDrawer={setOpenDrawer}
+              setStatus={setStatus}
+              isTruncate={true}
+              href={`/forum/${id}`}
+            />
+          ))
+        )}
      </ViewWrapper>

      <DrawerCustom
-        height={350}
+        height={"auto"}
        isVisible={openDrawer}
        closeDrawer={() => setOpenDrawer(false)}
      >
@@ -64,13 +116,13 @@ export default function Forum() {
          setIsDrawerOpen={() => {
            setOpenDrawer(false);
          }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
+          setShowDeleteAlert={() => {}}
+          setShowAlertStatus={() => {}}
        />
      </DrawerCustom>

      {/* Alert Status */}
-      <AlertCustom
+      {/* <AlertCustom
        isVisible={alertStatus}
        title="Ubah Status Forum"
        message="Apakah Anda yakin ingin mengubah status forum ini?"
@@ -87,10 +139,10 @@ export default function Forum() {
        textLeft="Batal"
        textRight="Ubah"
        colorRight={MainColor.green}
-      />
+      /> */}

      {/* Alert Delete */}
-      <AlertCustom
+      {/* <AlertCustom
        isVisible={deleteAlert}
        title="Hapus Forum"
        message="Apakah Anda yakin ingin menghapus forum ini?"
@@ -107,7 +159,7 @@ export default function Forum() {
        textLeft="Batal"
        textRight="Hapus"
        colorRight={MainColor.red}
-      />
+      /> */}
    </>
  );
 }
--- a/screens/Forum/DiscussionBoxSection.tsx
+++ b/screens/Forum/DiscussionBoxSection.tsx
@@ -1,10 +1,10 @@
 import {
-  AvatarCustom,
+  AvatarComp,
  BaseBox,
  ClickableCustom,
  Grid,
  Spacing,
-  TextCustom,
+  TextCustom
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -31,12 +31,13 @@ export default function Forum_BoxDetailSection({
        backgroundColor: MainColor.soft_darkblue,
        padding: 8,
        borderRadius: 8,
+        paddingBlock: 20,
      }}
    >
      {isTruncate ? (
-        <TextCustom truncate={2}>{data.deskripsi}</TextCustom>
+        <TextCustom truncate={2}>{data?.diskusi}</TextCustom>
      ) : (
-        <TextCustom>{data.deskripsi}</TextCustom>
+        <TextCustom>{data?.diskusi}</TextCustom>
      )}
    </View>
  );
@@ -47,17 +48,21 @@ export default function Forum_BoxDetailSection({
        <View>
          <Grid>
            <Grid.Col span={2}>
-              <AvatarCustom href={`/profile/${data.id}`} />
+              <AvatarComp
+                fileId={data?.Author?.Profile?.imageId}
+                href={`/profile/${data?.Author?.Profile?.id}`}
+                size={"base"}
+              />
            </Grid.Col>
            <Grid.Col span={8}>
-              <TextCustom>{data.name}</TextCustom>
-              {data.status === "Open" ? (
+              <TextCustom>{data?.Author?.username}</TextCustom>
+              {data?.ForumMaster_StatusPosting?.status === "Open" ? (
                <TextCustom bold size="small" color="green">
-                  {data.status}
+                  {data?.ForumMaster_StatusPosting?.status}
                </TextCustom>
              ) : (
                <TextCustom bold size="small" color="red">
-                  {data.status}
+                  {data?.ForumMaster_StatusPosting?.status}
                </TextCustom>
              )}
            </Grid.Col>
@@ -71,7 +76,7 @@ export default function Forum_BoxDetailSection({
              <ClickableCustom
                onPress={() => {
                  setOpenDrawer(true);
-                  setStatus(data.status);
+                  setStatus(data?.ForumMaster_StatusPosting?.status);
                }}
                style={{
                  alignItems: "flex-end",
@@ -86,6 +91,7 @@ export default function Forum_BoxDetailSection({
            </Grid.Col>
          </Grid>

+
          {href ? (
            <ClickableCustom onPress={() => router.push(href as any)}>
              {deskripsiView}
@@ -110,7 +116,7 @@ export default function Forum_BoxDetailSection({
                  size={ICON_SIZE_SMALL}
                  color={MainColor.white}
                />
-                <TextCustom>{data.jumlahBalas}</TextCustom>
+                <TextCustom>{data?.Forum_Komentar?.length}</TextCustom>
              </View>
            </Grid.Col>
            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
--- a/screens/Forum/MenuDrawerSection.tsx/MenuBeranda.tsx
+++ b/screens/Forum/MenuDrawerSection.tsx/MenuBeranda.tsx
@@ -2,6 +2,7 @@ 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";

 export default function Forum_MenuDrawerBerandaSection({
  id,
@@ -13,14 +14,26 @@ export default function Forum_MenuDrawerBerandaSection({
  id: string;
  status: string;
  setIsDrawerOpen: (value: boolean) => void;
-  setShowDeleteAlert: (value: boolean) => void;
-  setShowAlertStatus: (value: boolean) => void;
+  setShowDeleteAlert?: (value: boolean) => void;
+  setShowAlertStatus?: (value: boolean) => void;
 }) {
  const handlePress = (item: IMenuDrawerItem) => {
    if (item.label === "Hapus") {
-      setShowDeleteAlert(true);
+      AlertDefaultSystem({
+        title: "Hapus",
+        message: "Apakah Anda yakin ingin menghapus forum ini?",
+        textLeft: "Batal",
+        textRight: "Hapus",
+        onPressRight: () => {},
+      });
    } else if (item.label === "Buka forum" || item.label === "Tutup forum") {
-      setShowAlertStatus(true);
+      AlertDefaultSystem({
+        title: "Ubah Status",
+        message: "Apakah Anda yakin ingin mengubah status forum ini?",
+        textLeft: "Batal",
+        textRight: "Ubah",
+        onPressRight: () => {},
+      });
    } else {
      router.push(item.path as any);
    }
@@ -34,7 +47,7 @@ export default function Forum_MenuDrawerBerandaSection({
      <MenuDrawerDynamicGrid
        data={drawerItemsForumBeranda({ id, status })}
        columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
-        onPressItem={handlePress}
+        onPressItem={handlePress as any}
      />
    </>
  );
--- a/service/api-client/api-forum.ts
+++ b/service/api-client/api-forum.ts
@@ -0,0 +1,21 @@
+import { apiConfig } from "../api-config";
+
+export async function apiForumCreate({ data }: { data: any }) {
+  try {
+    const response = await apiConfig.post(`/mobile/forum`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumGetAll({search}: {search: string}) {
+  try {
+    const response = await apiConfig.get(`/mobile/forum?search=${search}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}