Donation:

Add: - components/_ShareComponent/MoneyTransferAnimation.tsx Fix: - Invoice terintegrasi API - Create dan list berita ### No Issue
2025-10-08 17:40:36 +08:00
parent a980397640
commit b293310969
13 changed files with 610 additions and 123 deletions
--- a/app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  AlertDefaultSystem,
  BackButton,
@@ -12,13 +13,42 @@ import {
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
 import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";

 export default function DonationNews() {
-  const { id, news } = useLocalSearchParams();
+  const { user } = useAuth();
+  const { news } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };

  return (
    <>
@@ -26,28 +56,28 @@ export default function DonationNews() {
        options={{
          title: "Detail Kabar",
          headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data && data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
        }}
      />
      <ViewWrapper>
        <BaseBox>
          <StackCustom>
            <TextCustom style={{ alignSelf: "flex-end" }}>
-              {dayjs().format("DD MMM YYYY")}
+              {formatChatTime(data?.createdAt)}
            </TextCustom>

-            <DummyLandscapeImage />
+            {data && data.imageId && (
+              <DummyLandscapeImage imageId={data.imageId} />
+            )}

            <TextCustom bold size="large" align="center">
-              Judul Berita
+              {data?.title || "-"}
            </TextCustom>

-            <TextCustom>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
-              est id temporibus perferendis eos reiciendis reprehenderit tempora
-              ut quibusdam dolores facilis rerum exercitationem recusandae quis
-              neque, adipisci dolorum, aspernatur labore?
-            </TextCustom>
+            <TextCustom>{data?.deskripsi || "-"}</TextCustom>
          </StackCustom>
        </BaseBox>
      </ViewWrapper>
@@ -62,12 +92,12 @@ export default function DonationNews() {
            {
              icon: <IconEdit />,
              label: "Edit Berita",
-              path: `/donation/${id}/(news)/${news}/edit-news` as any,
+              path: `/donation/[id]/(news)/${news}/edit-news` as any,
            },
            {
              icon: <IconTrash />,
              label: "Hapus Berita",
-              path: `` as any,
+              path: `/donation/[id]/(news)/${news}/edit-news` as any,
              color: "red",
            },
          ]}
--- a/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
@@ -9,17 +9,82 @@ import {
  TextInputCustom,
  ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiDonationCreateNews } from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";

 export default function DonationAddNews() {
+  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+  const [data, setData] = useState({
+    title: "",
+    deskripsi: "",
+  });
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    let newData: any = { ...data };
+    try {
+      setLoading(true);
+      if (image) {
+        const responseUploadImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          ...newData,
+          imageId: responseUploadImage.data.id,
+        };
+      }
+
+      const response = await apiDonationCreateNews({
+        id: id as string,
+        data: newData,
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambah berita",
+        });
+
+        return
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil ditambahkan",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
  return (
    <ViewWrapper>
      <StackCustom gap={"xs"}>
        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image?.uri} />
        <ButtonCenteredOnly
          onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
          }}
          icon="upload"
        >
@@ -30,6 +95,13 @@ export default function DonationAddNews() {
          label="Judul Berita"
          placeholder="Masukan judul berita"
          required
+          value={data.title}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              title: value,
+            });
+          }}
        />
        <TextAreaCustom
          label="Deskripsi Berita"
@@ -37,12 +109,21 @@ export default function DonationAddNews() {
          required
          showCount
          maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              deskripsi: value,
+            });
+          }}
        />
-        
+
        <Spacing />
        <ButtonCustom
+          disabled={!data.title || !data.deskripsi}
+          isLoading={isLoading}
          onPress={() => {
-            router.back();
+            handlerSubmit();
          }}
        >
          Simpan
--- a/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
@@ -1,45 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BackButton,
-    BaseBox,
-    DrawerCustom,
-    Grid,
-    MenuDrawerDynamicGrid,
-    TextCustom,
-    ViewWrapper
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
 import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function DonationRecapOfNews() {
  const { id } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      console.log("[RESPONSE LIST]", JSON.stringify(response, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };

  return (
    <>
      <Stack.Screen
        options={{
          title: "Daftar Kabar",
-          headerLeft: () => <BackButton />, }}
+          headerLeft: () => <BackButton />,
+        }}
      />
      <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
-            <Grid>
-              <Grid.Col span={8}>
-                <TextCustom truncate bold>
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small">
-                  {dayjs().format("DD MMM YYYY")}
-                </TextCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
      </ViewWrapper>

      <DrawerCustom
--- a/app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx
@@ -1,21 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BackButton,
  BaseBox,
  DotButton,
  DrawerCustom,
  Grid,
+  LoaderCustom,
  MenuDrawerDynamicGrid,
  TextCustom,
  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
 import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function DonationRecapOfNews() {
  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      console.log("[RESPONSE LIST]", JSON.stringify(response, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };

  return (
    <>
@@ -27,20 +64,30 @@ export default function DonationRecapOfNews() {
        }}
      />
      <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
-            <Grid>
-              <Grid.Col span={8}>
-                <TextCustom truncate bold>
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small">{dayjs().format("DD MMM YYYY")}</TextCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
      </ViewWrapper>

      <DrawerCustom