Forum

Add:
- api-client/api-forum

Fix:
- Integrasi API: create dan beranda file

### No Issue

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);
+          handlerSubmit();
-          router.back();
         }}
       >
         Posting

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

@@ -1,25 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
+  AvatarComp,
-  AvatarCustom,
   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 { apiForumGetAll } from "@/service/api-client/api-forum";
-import { useState } from "react";
+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 { user } = useAuth();
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  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,7 +85,14 @@ export default function Forum() {
           />
         }
       >
-        {listDummyDiscussionForum.map((e, i) => (
+        {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}
@@ -50,11 +101,12 @@ export default function Forum() {
               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}
+          setShowDeleteAlert={() => {}}
-          setShowAlertStatus={setAlertStatus}
+          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}
-      />
+      /> */}
     </>
   );
 }

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>
+              <TextCustom>{data?.Author?.username}</TextCustom>
-              {data.status === "Open" ? (
+              {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" }}>

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;
+  setShowDeleteAlert?: (value: boolean) => void;
-  setShowAlertStatus: (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}
       />
     </>
   );

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;
+  }
+}