Forum

Fix:
- Integrasi API ke semua tampilan

### No Issue

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

@@ -1,36 +1,82 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertCustom,
+  AvatarComp,
   AvatarCustom,
   ButtonCustom,
   CenterCustom,
   DrawerCustom,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 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 { useLocalSearchParams } from "expo-router";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
-import { useState } from "react";
+import { apiUser } from "@/service/api-client/api-user";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Forumku() {
   const { id } = useLocalSearchParams();
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
   const [alertStatus, setAlertStatus] = useState(false);
   const [deleteAlert, setDeleteAlert] = useState(false);
 
+  const [listData, setListData] = useState<any | null>(null);
+  const [dataUser, setDataUser] = useState<any | null>(null);
+  const [loadingGetList, setLoadingGetList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(user?.id as string);
+    }, [user?.id])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    try {
+      const response = await apiUser(id);
+
+      setDataUser(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({
+        search: "",
+        authorId: id as string,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };
 
   return (
     <>
       <ViewWrapper>
         <StackCustom>
           <CenterCustom>
-            <AvatarCustom
+            <AvatarComp
-              href={`/(application)/(image)/preview-image/${id}`}
+              fileId={dataUser?.Profile?.imageId}
+              href={`/(application)/(image)/preview-image/${dataUser?.Profile?.imageId}`}
               size="xl"
             />
           </CenterCustom>
@@ -38,32 +84,43 @@ export default function Forumku() {
           <Grid>
             <Grid.Col span={6}>
               <TextCustom bold truncate>
-                @bagas_banuna
+                @{dataUser?.username || "-"}
               </TextCustom>
-              <TextCustom>1 postingan</TextCustom>
+              <TextCustom>{listData?.length || "0"} postingan</TextCustom>
             </Grid.Col>
             <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <ButtonCustom href={`/profile/${id}`}>
+              <ButtonCustom href={`/profile/${dataUser?.Profile?.id}`}>
                 Kunjungi Profile
               </ButtonCustom>
             </Grid.Col>
           </Grid>
-          {listDummyDiscussionForum.map((e, i) => (
+          {loadingGetList ? (
-            <Forum_BoxDetailSection
+            <LoaderCustom />
-              key={i}
+          ) : _.isEmpty(listData) ? (
-              data={e}
+            <TextCustom> Tidak ada diskusi</TextCustom>
-              setOpenDrawer={setOpenDrawer}
+          ) : (
-              setStatus={setStatus}
+            <>
-              isTruncate={true}
+              {listData?.map((item: any, index: number) => (
-              href={`/forum/${id}`}
+                <Forum_BoxDetailSection
-            />
+                  isRightComponent={false}
-          ))}
+                  key={index}
+                  data={item}
+                  isTruncate={true}
+                  href={`/forum/${item.id}`}
+                  onSetData={(value) => {
+                    setOpenDrawer(value.setOpenDrawer);
+                    setStatus(value.setStatus);
+                  }}
+                />
+              ))}
+            </>
+          )}
         </StackCustom>
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
@@ -73,42 +130,9 @@ export default function Forumku() {
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
+          authorId={id as string}
-          setShowAlertStatus={setAlertStatus}
         />
       </DrawerCustom>
-
-      {/* Alert Komponen Eksternal */}
-      <AlertCustom
-        isVisible={alertStatus}
-        onLeftPress={() => setAlertStatus(false)}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        onLeftPress={() => setDeleteAlert(false)}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

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

@@ -241,7 +241,7 @@ export default function ForumDetail() {
         closeDrawer={() => setOpenDrawerCommentar(false)}
       >
         <Forum_MenuDrawerCommentar
-          id={id as string}
+          id={commentId as string}
           commentId={commentId}
           commentAuthorId={commentAuthorId}
           setIsDrawerOpen={() => {

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -5,27 +5,69 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreateReportCommentar } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumOtherReportCommentar() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [value, setValue] = useState<string>("");
+
+  const handlerSubmitReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      description: value,
+    };
+
+    try {
+      const response = await apiForumCreateReportCommentar({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   const handleSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!value}
         backgroundColor={MainColor.red}
         textColor={MainColor.white}
         onPress={() => {
-          console.log("Report lainnya");
+          handlerSubmitReport();
-          router.back();
         }}
       >
         Report
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
   return (
     <>
       <ViewWrapper footerComponent={handleSubmit}>
-        <TextAreaCustom placeholder="Laporkan Komentar" />
+        <TextAreaCustom
+          placeholder="Laporkan Komentar"
+          value={value}
+          onChangeText={setValue}
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -5,17 +5,54 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreateReportPosting } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumOtherReportPosting() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [value, setValue] = useState<string>("");
+
+  const handlerSubmitReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      description: value,
+    };
+
+    try {
+      const response = await apiForumCreateReportPosting({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   const handleSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!value}
         backgroundColor={MainColor.red}
         textColor={MainColor.white}
         onPress={() => {
-          console.log("Report lainnya");
+          handlerSubmitReport();
-          router.back();
         }}
       >
         Report
@@ -25,7 +62,11 @@ export default function ForumOtherReportPosting() {
   return (
     <>
       <ViewWrapper footerComponent={handleSubmit}>
-        <TextAreaCustom placeholder="Laporkan Diskusi" />
+        <TextAreaCustom
+          placeholder="Laporkan Diskusi"
+          value={value}
+          onChangeText={setValue}
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -1,41 +1,105 @@
 import {
-    ButtonCustom,
+  ButtonCustom,
-    Spacing,
+  LoaderCustom,
-    StackCustom,
+  Spacing,
-    ViewWrapper
+  StackCustom,
+  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { router } from "expo-router";
+import { apiForumCreateReportCommentar, apiMasterForumReportList } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState, useEffect } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumReportCommentar() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [selectReport, setSelectReport] = useState<string>("");
+  const [listMaster, setListMaster] = useState<any[] | null>(null);
+  const [isLoadingList, setIsLoadingList] = useState(false);
+
+  useEffect(() => {
+    onLoadListMaster();
+  }, []);
+
+  const onLoadListMaster = async () => {
+    try {
+      setIsLoadingList(true);
+      const response = await apiMasterForumReportList();
+
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingList(false);
+    }
+  };
+
+  const handlerReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      categoryId: selectReport,
+    };
+
+    try {
+      const response = await apiForumCreateReportCommentar({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
-        <StackCustom>
+        {isLoadingList ? (
-          <Forum_ReportListSection />
+          <LoaderCustom />
-          <ButtonCustom
+        ) : (
-            backgroundColor={MainColor.red}
+          <StackCustom>
-            textColor={MainColor.white}
+            <Forum_ReportListSection
-            onPress={() => {
+              listMaster={listMaster}
-              console.log("Report");
+              selectReport={selectReport}
-              router.back();
+              setSelectReport={setSelectReport}
-            }}
+            />
-          >
+            <ButtonCustom
-            Report
+              disabled={!selectReport}
-          </ButtonCustom>
+              backgroundColor={MainColor.red}
-          <ButtonCustom
+              textColor={MainColor.white}
-            backgroundColor={AccentColor.blue}
+              onPress={() => {
-            textColor={MainColor.white}
+                handlerReport();
-            onPress={() => {
+              }}
-              console.log("Lainnya");
+            >
-              router.replace("/forum/[id]/other-report-commentar");
+              Report
-            }}
+            </ButtonCustom>
-          >
+            <ButtonCustom
-            Lainnya
+              backgroundColor={AccentColor.blue}
-          </ButtonCustom>
+              textColor={MainColor.white}
-          <Spacing/>
+              onPress={() => {
-        </StackCustom>
+                router.replace(`/forum/${id}/other-report-commentar`);
+              }}
+            >
+              Lainnya
+            </ButtonCustom>
+            <Spacing />
+          </StackCustom>
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/report-posting.tsx

@@ -1,20 +1,103 @@
-import { ViewWrapper, StackCustom, ButtonCustom, Spacing } from "@/components";
+import {
-import { MainColor, AccentColor } from "@/constants/color-palet";
+  AlertDefaultSystem,
+  ButtonCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { router } from "expo-router";
+import {
+  apiForumCreateReportPosting,
+  apiMasterForumReportList,
+} from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumReportPosting() {
-    return (
+  const { id } = useLocalSearchParams();
-      <>
+  const { user } = useAuth();
-        <ViewWrapper>
+  const [selectReport, setSelectReport] = useState<string>("");
+  const [listMaster, setListMaster] = useState<any[] | null>(null);
+  const [isLoadingList, setIsLoadingList] = useState(false);
+
+  useEffect(() => {
+    onLoadListMaster();
+  }, []);
+
+  const onLoadListMaster = async () => {
+    try {
+      setIsLoadingList(true);
+      const response = await apiMasterForumReportList();
+
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingList(false);
+    }
+  };
+
+  const handlerReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      categoryId: selectReport,
+    };
+
+    try {
+      const response = await apiForumCreateReportPosting({
+        id: id as string,
+        data: newData,
+      });
+
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {isLoadingList ? (
+          <LoaderCustom />
+        ) : (
           <StackCustom>
-            <Forum_ReportListSection />
+            <Forum_ReportListSection
+              listMaster={listMaster}
+              selectReport={selectReport}
+              setSelectReport={setSelectReport}
+            />
+
             <ButtonCustom
+              disabled={!selectReport}
               backgroundColor={MainColor.red}
               textColor={MainColor.white}
               onPress={() => {
-                console.log("Report");
+                AlertDefaultSystem({
-                router.back();
+                  title: "Laporan Posting",
+                  message: "Apakah anda yakin ingin melaporkan postingan ini?",
+                  textLeft: "Batal",
+                  textRight: "Laporkan",
+                  onPressRight: () => {
+                    handlerReport();
+                  },
+                });
               }}
             >
               Report
@@ -23,15 +106,15 @@ export default function ForumReportPosting() {
               backgroundColor={AccentColor.blue}
               textColor={MainColor.white}
               onPress={() => {
-                console.log("Lainnya");
+                router.replace(`/forum/${id}/other-report-posting`);
-                router.replace("/forum/[id]/other-report-posting");
               }}
             >
               Lainnya
             </ButtonCustom>
             <Spacing />
           </StackCustom>
-        </ViewWrapper>
+        )}
-      </>
+      </ViewWrapper>
-    );
+    </>
+  );
 }

screens/Forum/ReportListSection.tsx

@@ -4,21 +4,30 @@ import { listDummyReportForum } from "@/lib/dummy-data/forum/report-list";
 import { useState } from "react";
 import { View } from "react-native";
 
-export default function Forum_ReportListSection() {
+export default function Forum_ReportListSection({
-  const [value, setValue] = useState<any | number>("");
+  listMaster,
+  selectReport,
+  setSelectReport,
+}: {
+  listMaster: any[] | null;
+  selectReport: string;
+  setSelectReport: (value: string) => void;
+}) {
   return (
     <>
       <BaseBox>
         <StackCustom>
-          <RadioGroup value={value} onChange={setValue}>
+          <RadioGroup value={selectReport} onChange={(val) => {
-            {listDummyReportForum.map((e, i) => (
+            setSelectReport(val);
+          }}>
+            {listMaster?.map((e, i) => (
               <View key={i}>
                 <RadioCustom
                   label={e.title}
                   //  value={i}
-                  value={e.title}
+                  value={e.id}
                 />
-                <TextCustom>{e.desc}</TextCustom>
+                <TextCustom>{e.deskripsi}</TextCustom>
               </View>
             ))}
           </RadioGroup>

service/api-client/api-forum.ts

@@ -11,9 +11,19 @@ export async function apiForumCreate({ data }: { data: any }) {
   }
 }
 
-export async function apiForumGetAll({ search }: { search: string }) {
+export async function apiForumGetAll({
+  search,
+  authorId,
+}: {
+  search: string;
+  authorId?: string;
+}) {
+  const authorQuery = authorId ? `?authorId=${authorId}` : "";
+  const searchQuery = search ? `?search=${search}` : "";
+  const query = search ? searchQuery : authorQuery;
+
   try {
-    const response = await apiConfig.get(`/mobile/forum?search=${search}`);
+    const response = await apiConfig.get(`/mobile/forum${query}`);
     return response.data;
   } catch (error) {
     throw error;
@@ -40,7 +50,13 @@ export async function apiForumUpdate({ id, data }: { id: string; data: any }) {
   }
 }
 
-export async function apiForumUpdateStatus({ id, data }: { id: string; data: any }) {
+export async function apiForumUpdateStatus({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
   try {
     const response = await apiConfig.post(`/mobile/forum/${id}`, {
       data: data,

service/api-client/api-master.ts

@@ -32,9 +32,55 @@ export async function apiMasterEventType() {
 
 export async function apiMasterCollaborationType() {
   try {
-    const response = await apiConfig.get(`/mobile/master/collaboration-industry`);
+    const response = await apiConfig.get(
+      `/mobile/master/collaboration-industry`
+    );
     return response.data;
   } catch (error) {
     throw error;
   }
 }
+
+export async function apiMasterForumReportList() {
+  try {
+    const response = await apiConfig.get(`/mobile/master/forum-report`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumCreateReportPosting({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/forum/${id}/report-posting`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumCreateReportCommentar({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/forum/${id}/report-commentar`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+