wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Donation:

Browse Source 
Fix:
- Edit story & bank account
- List beranda dan detailnya

- Tampilan penggalang dana

### No Issue
This commit is contained in:
Bagasbanuna02
2025-10-07 15:50:20 +08:00
parent 53cdca21fc
commit 7c82e8b588
8 changed files with 390 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/(application)/(user)/donation/(tabs)/index.tsx
View File

@@ -1,11 +1,39 @@
import {
FloatingButton,
ViewWrapper
LoaderCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
import { router } from "expo-router";
import { apiDonationGetAll } from "@/service/api-client/api-donation";
import { router, useFocusEffect } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
export default function DonationBeranda() {
const [list, setList] = useState<any[] | null>(null);
const [loadList, setLoadList] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [])
);
const onLoadData = async () => {
try {
setLoadList(true);
const response = await apiDonationGetAll();
console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
setList(response.data);
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadList(false);
}
};
return (
<ViewWrapper
hideFooter
@@ -13,9 +41,15 @@ export default function DonationBeranda() {
<FloatingButton onPress={() => router.push("/donation/create")} />
}
>
{Array.from({ length: 10 }).map((_, index) => (
<Donation_BoxPublish key={index} id={index.toString()}/>
))}
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom>Belum ada data</TextCustom>
) : (
list?.map((item: any, index: number) => (
<Donation_BoxPublish data={item} key={index} id={item.id} />
))
)}
</ViewWrapper>
);
}

86
app/(application)/(user)/donation/[id]/edit-rekening.tsx
View File

@@ -1,7 +1,80 @@
import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
import { router } from "expo-router";
/* eslint-disable react-hooks/exhaustive-deps */
import {
ViewWrapper,
StackCustom,
InformationBox,
TextInputCustom,
Spacing,
ButtonCustom,
} from "@/components";
import {
apiDonationGetOne,
apiDonationUpdateData,
} from "@/service/api-client/api-donation";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import Toast from "react-native-toast-message";
export default function DonationEditRekening() {
const { id } = useLocalSearchParams();
const [data, setData] = useState({
namaBank: "",
rekening: "",
});
const [isLoading, setLoading] = useState(false);
useEffect(() => {
onLoadData();
}, [id]);
const onLoadData = async () => {
try {
const response = await apiDonationGetOne({
id: id as string,
category: "permanent",
});
const resData = response.data;
console.log("[RESPONSE]", JSON.stringify(resData, null, 2));
setData({
namaBank: resData.namaBank,
rekening: resData.rekening,
});
} catch (error) {
console.log("[ERROR]", error);
}
};
const handlerSubmitUpdate = async () => {
try {
setLoading(true);
const response = await apiDonationUpdateData({
id: id as string,
data: data,
category: "edit-bank-account",
});
if (!response.success) {
Toast.show({
type: "error",
text1: "Gagal mengupdate data bank",
});
}
Toast.show({
type: "success",
text1: "Data bank berhasil diupdate",
});
router.back();
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoading(false);
}
};
return (
<ViewWrapper>
<StackCustom gap={"xs"}>
@@ -10,17 +83,22 @@ export default function DonationEditRekening() {
label="Nama Bank"
placeholder="Masukkan nama bank"
required
value={data.namaBank}
onChangeText={(value) => setData({ ...data, namaBank: value })}
/>
<TextInputCustom
label="Nomor Rekening"
placeholder="Masukkan nomor rekening"
required
value={data.rekening}
onChangeText={(value) => setData({ ...data, rekening: value })}
/>
<Spacing />
<ButtonCustom
isLoading={isLoading}
onPress={() => {
router.back();
handlerSubmitUpdate();
}}
>
Update
@@ -29,4 +107,4 @@ export default function DonationEditRekening() {
<Spacing />
</ViewWrapper>
);
}
}

119
app/(application)/(user)/donation/[id]/edit-story.tsx
View File

@@ -1,16 +1,97 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ButtonCenteredOnly,
ButtonCustom,
InformationBox,
LandscapeFrameUploaded,
Spacing,
StackCustom,
TextAreaCustom,
ViewWrapper
ButtonCenteredOnly,
ButtonCustom,
InformationBox,
LandscapeFrameUploaded,
Spacing,
StackCustom,
TextAreaCustom,
ViewWrapper,
} from "@/components";
import { router } from "expo-router";
import API_IMAGE from "@/constants/api-storage";
import DIRECTORY_ID from "@/constants/directory-id";
import {
apiDonationGetOne,
apiDonationUpdateData,
} from "@/service/api-client/api-donation";
import { uploadFileService } from "@/service/upload-service";
import pickFile from "@/utils/pickFile";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import Toast from "react-native-toast-message";
export default function DonationEditStory() {
const { id } = useLocalSearchParams();
const [data, setData] = useState<any>();
const [imageStory, setImageStory] = useState<string | null>(null);
const [isLoading, setLoading] = useState(false);
useEffect(() => {
onLoadData();
}, [id]);
const onLoadData = async () => {
try {
const response = await apiDonationGetOne({
id: id as string,
category: "permanent",
});
setData(response.data.CeritaDonasi);
} catch (error) {
console.log("[ERROR]", error);
}
};
const handlerSubmitUpdate = async () => {
let newData;
try {
setLoading(true);
newData = {
...data,
};
if (imageStory) {
const responseUploadImageDonasi = await uploadFileService({
imageUri: imageStory,
dirId: DIRECTORY_ID.donasi_cerita_image,
});
newData = {
...data,
newImageId: responseUploadImageDonasi.data.id,
};
}
const response = await apiDonationUpdateData({
id: id as string,
data: newData,
category: "edit-story",
});
console.log("[RESPONSE]", JSON.stringify(response, null, 2));
if (!response.success) {
Toast.show({
type: "error",
text1: "Gagal membuat donasi",
});
}
Toast.show({
type: "success",
text1: "Donasi berhasil disimpan",
});
router.back();
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoading(false);
}
};
return (
<ViewWrapper>
<StackCustom gap={"xs"}>
@@ -21,12 +102,23 @@ export default function DonationEditStory() {
required
showCount
maxLength={1000}
value={data?.pembukaan}
onChangeText={(value) => setData({ ...data, pembukaan: value })}
/>
<LandscapeFrameUploaded />
<LandscapeFrameUploaded
image={
imageStory ? imageStory : API_IMAGE.GET({ fileId: data?.imageId })
}
/>
<ButtonCenteredOnly
onPress={() => {
router.push("/(application)/(image)/take-picture/123");
pickFile({
allowedType: "image",
setImageUri: ({ uri }) => {
setImageStory(uri);
},
});
}}
icon="upload"
>
@@ -39,12 +131,15 @@ export default function DonationEditStory() {
required
showCount
maxLength={1000}
value={data?.cerita}
onChangeText={(value) => setData({ ...data, cerita: value })}
/>
<Spacing height={40} />
<ButtonCustom
isLoading={isLoading}
onPress={() => {
router.back();
handlerSubmitUpdate();
}}
>
Update

54
app/(application)/(user)/donation/[id]/index.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
BackButton,
BoxButtonOnFooter,
@@ -9,24 +10,54 @@ import {
ViewWrapper,
} from "@/components";
import { IconNews } from "@/components/_Icon";
import { useAuth } from "@/hooks/use-auth";
import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { apiDonationGetOne } from "@/service/api-client/api-donation";
import {
router,
Stack,
useFocusEffect,
useLocalSearchParams,
} from "expo-router";
import { useCallback, useState } from "react";
export default function DonasiDetailBeranda() {
const { user } = useAuth();
const { id } = useLocalSearchParams();
console.log("ID ", id);
const [openDrawer, setOpenDrawer] = useState(false);
const [data, setData] = useState<any>();
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
const response = await apiDonationGetOne({
id: id as string,
category: "permanent",
});
console.log("[RES GET ONE]", JSON.stringify(response.data, null, 2));
setData(response.data);
} catch (error) {
console.log("[ERROR]", error);
}
};
const buttonSection = (
<>
<BoxButtonOnFooter>
<ButtonCustom
onPress={() =>
router.navigate(`/donation/${id}/(transaction-flow)`)
}
onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
>
Donasi
</ButtonCustom>
@@ -40,16 +71,23 @@ export default function DonasiDetailBeranda() {
options={{
title: `Detail Donasi`,
headerLeft: () => <BackButton />,
headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
headerRight: () =>
user?.id === data?.Author?.id ? (
<DotButton onPress={() => setOpenDrawer(true)} />
) : null,
}}
/>
<ViewWrapper footerComponent={buttonSection}>
<StackCustom>
<Donation_ComponentBoxDetailData
data={data}
bottomSection={<Donation_ProgressSection id={id as string} />}
/>
<Donation_ComponentInfoFundrising id={id as string} />
<Donation_ComponentStoryFunrising id={id as string} />
<Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
<Donation_ComponentStoryFunrising
id={id as string}
dataStory={data?.CeritaDonasi}
/>
</StackCustom>
</ViewWrapper>

68
app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
View File

@@ -1,32 +1,74 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
AvatarComp,
AvatarCustom,
BaseBox,
ButtonCustom,
CenterCustom,
Grid,
LoaderCustom,
Spacing,
TextCustom,
ViewWrapper
ViewWrapper,
} from "@/components";
import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
import React from "react";
import { apiDonationFundrising } from "@/service/api-client/api-donation";
import { useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import React, { useCallback, useState } from "react";
import { View } from "react-native";
export default function DonationInformationFunrising() {
const { id } = useLocalSearchParams();
const [data, setData] = useState<any>();
const [list, setList] = useState<any[] | null>(null);
const [loadList, setLoadList] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
setLoadList(true);
const response = await apiDonationFundrising({ id: id as string });
console.log(
"[RES GET FUNDRISING]",
JSON.stringify(response.data, null, 2)
);
setData(response?.data?.user);
setList(response?.data?.donasi);
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadList(false);
}
};
return (
<>
<ViewWrapper>
<BaseBox>
<Grid>
<Grid.Col span={6} style={{ justifyContent: "center" }}>
<CenterCustom>
<AvatarCustom size="lg" />
<View
style={{
flexDirection: "column",
alignItems: "center",
gap: 10,
}}
>
<AvatarComp size="lg" fileId={data?.Profile?.imageId} />
<TextCustom bold size="large" truncate>
@Username
@{data?.username}
</TextCustom>
</CenterCustom>
</View>
</Grid.Col>
<Grid.Col span={6} style={{ justifyContent: "center" }}>
<ButtonCustom href={`/profile/1234`}>
<ButtonCustom href={`/profile/${data?.Profile?.id}`}>
Kunjungi Profile
</ButtonCustom>
</Grid.Col>
@@ -35,9 +77,15 @@ export default function DonationInformationFunrising() {
<Spacing />
{Array.from({ length: 10 }).map((_, index) => (
<Donation_BoxPublish key={index} id={index.toString()} />
))}
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom>Belum ada data</TextCustom>
) : (
list?.map((item: any, index: number) => (
<Donation_BoxPublish key={index} id={item?.id} data={item} />
))
)}
</ViewWrapper>
</>
);

31
screens/Donation/BoxPublish.tsx
View File

@@ -8,27 +8,42 @@ import {
} from "@/components";
import { View } from "react-native";
export default function Donation_BoxPublish({ id }: { id: string }) {
export default function Donation_BoxPublish({
id,
data,
}: {
id: string;
data: any;
}) {
return (
<>
<BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
<Grid>
<Grid.Col span={5}>
<DummyLandscapeImage unClickPath height={100} />
<DummyLandscapeImage
unClickPath
height={100}
imageId={data?.imageId}
/>
</Grid.Col>
<Grid.Col span={1}>
<View />
</Grid.Col>
<Grid.Col span={6}>
<StackCustom>
<View>
<TextCustom truncate>
Judul Donasi: Lorem ipsum dolor sit amet consectetur
adipisicing elit.
<View style={{ gap: 10 }}>
<TextCustom truncate={2} bold>
{data?.title || "-"}
</TextCustom>
<TextCustom size="small">
Sisa hari: {data?.durasiDonasi || 0}
</TextCustom>
<TextCustom size="small">Sisa hari: 0</TextCustom>
</View>
<ProgressCustom value={(Number(id) % 5) * 20} size="lg" />
<ProgressCustom
label={data?.progres + "%" || "0%"}
value={data?.progres || 0}
size="lg"
/>
{/* <TextCustom>
Terkumpul : Rp 300.000
</TextCustom> */}

17
screens/Donation/ComponentInfoFundrising.tsx
View File

@@ -11,13 +11,16 @@ import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
export default function Donation_ComponentInfoFundrising({
id,
dataAuthor,
}: {
id: string;
dataAuthor: any;
}) {
return (
<>
<BaseBox href={`/donation/${id}/infromation-fundrising`} style={{paddingBottom: 0}}>
<BaseBox
href={`/donation/${dataAuthor?.id}/infromation-fundrising`}
style={{ paddingBottom: 0 }}
>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={10}>
@@ -37,10 +40,12 @@ export default function Donation_ComponentInfoFundrising({
</Grid.Col>
</Grid>
<AvatarUsernameAndOtherComponent />
<InformationBox
text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru."
<AvatarUsernameAndOtherComponent
avatar={dataAuthor?.Profile?.imageId}
name={dataAuthor?.username}
avatarHref={`/profile/${dataAuthor?.Profile?.id}`}
/>
<InformationBox text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru." />
</StackCustom>
</BaseBox>
</>

27
service/api-client/api-donation.ts
View File

@@ -91,11 +91,32 @@ export async function apiDonationUpdateData({
category: "edit-donation" | "edit-story" | "edit-bank-account";
}) {
try {
const response = await apiConfig.put(`/mobile/donation/${id}?category=${category}`, {
data: data,
});
const response = await apiConfig.put(
`/mobile/donation/${id}?category=${category}`,
{
data: data,
}
);
return response.data;
} catch (error) {
throw error;
}
}
export async function apiDonationGetAll() {
try {
const response = await apiConfig.get(`/mobile/donation`);
return response.data;
} catch (error) {
throw error;
}
}
export async function apiDonationFundrising({id}: {id: string}) {
try {
const response = await apiConfig.get(`/mobile/donation/${id}/fundrising`);
return response.data;
} catch (error) {
throw error;
}
}