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

loaddata & fix wrapper ui #48

Merged
bagasbanuna merged 3 commits from loaddata/5-feb-26 into staging 2026-02-05 17:37:29 +08:00
Conversation 0 Commits 3 Files Changed 25 +451 -330
19 changed files with 451 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 72a3d42013 - Show all commits

2
app/(application)/(user)/event/[id]/edit.tsx
View File

@@ -58,7 +58,7 @@ export default function EventEdit() {
try {
setIsLoadData(true);
const response = await apiEventGetOne({ id: id as string });
console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
if (response.success) {
setData(response.data);
setSelectedDate(new Date(response.data.tanggal));

57
app/(application)/(user)/voting/(tabs)/contribution.tsx
View File

@@ -1,59 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
LoaderCustom,
TextCustom,
ViewWrapper
} from "@/components";
import { useAuth } from "@/hooks/use-auth";
import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
import { apiVotingGetAll } from "@/service/api-client/api-voting";
import { useFocusEffect } from "expo-router";
import _ from "lodash";
import { useState, useCallback } from "react";
import Voting_ScreenContribution from "@/screens/Voting/ScreenContribution";
export default function VotingContribution() {
const { user } = useAuth();
const [listData, setListData] = useState<any>([]);
const [loadingGetData, setLoadingGetData] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [])
);
const onLoadData = async () => {
try {
setLoadingGetData(true);
const response = await apiVotingGetAll({
category: "contribution",
authorId: user?.id as string,
});
if (response.success) {
setListData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadingGetData(false);
}
};
return (
<ViewWrapper hideFooter>
{loadingGetData ? (
<LoaderCustom />
) : _.isEmpty(listData) ? (
<TextCustom align="center">Tidak ada kontribusi</TextCustom>
) : listData.map((item: any, index: number) => (
<Voting_BoxPublishSection
data={item}
key={index}
href={`/voting/${item.id}/contribution`}
/>
))}
</ViewWrapper>
);
return <Voting_ScreenContribution />;
}

75
app/(application)/(user)/voting/(tabs)/history.tsx
View File

@@ -1,77 +1,10 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { LoaderCustom, TextCustom, ViewWrapper } from "@/components";
import TabsTwoButtonCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
import { useAuth } from "@/hooks/use-auth";
import { useCallback, useState } from "react";
import { apiVotingGetAll } from "@/service/api-client/api-voting";
import { useFocusEffect } from "expo-router";
import _ from "lodash";
import Voting_ScreenHistory from "@/screens/Voting/ScreenHistory";
export default function VotingHistory() {
const { user } = useAuth();
const [activeCategory, setActiveCategory] = useState<string | null>("all");
const [listData, setListData] = useState<any>([]);
const [loadingGetData, setLoadingGetData] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [activeCategory])
);
const onLoadData = async () => {
try {
setLoadingGetData(true);
const response = await apiVotingGetAll({
category: activeCategory === "all" ? "all-history" : "my-history",
authorId: user?.id as string,
});
if (response.success) {
setListData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadingGetData(false);
}
};
const handlePress = (item: any) => {
setActiveCategory(item);
// tambahkan logika lain seperti filter dsb.
};
return (
<ViewWrapper
hideFooter
headerComponent={
<TabsTwoButtonCustom
leftValue="all"
rightValue="main"
leftText="Semua Riwayat"
rightText="Riwayat Saya"
activeCategory={activeCategory}
handlePress={handlePress}
/>
}
>
{loadingGetData ? (
<LoaderCustom />
) : _.isEmpty(listData) ? (
<TextCustom align="center">Tidak ada riwayat</TextCustom>
) : (
listData.map((item: any, index: number) => (
<Voting_BoxPublishSection
key={index}
id={item.id}
data={item}
href={`/voting/${item.id}/history`}
/>
))
)}
</ViewWrapper>
<>
<Voting_ScreenHistory />
</>
);
}

69
app/(application)/(user)/voting/(tabs)/index.tsx
View File

@@ -1,71 +1,10 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
FloatingButton,
LoaderCustom,
SearchInput,
TextCustom,
ViewWrapper,
} from "@/components";
import { useAuth } from "@/hooks/use-auth";
import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
import { apiVotingGetAll } from "@/service/api-client/api-voting";
import { router, useFocusEffect } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import Voting_ScreenBeranda from "@/screens/Voting/ScreenBeranda";
export default function VotingBeranda() {
const { user } = useAuth();
const [listData, setListData] = useState<any>([]);
const [loadingGetData, setLoadingGetData] = useState(false);
const [search, setSearch] = useState("");
useFocusEffect(
useCallback(() => {
onLoadData();
}, [search])
);
const onLoadData = async () => {
try {
setLoadingGetData(true);
const response = await apiVotingGetAll({
search,
category: "beranda",
userLoginId: user?.id,
});
if (response.success) {
setListData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadingGetData(false);
}
};
return (
<ViewWrapper
hideFooter
floatingButton={
<FloatingButton onPress={() => router.push("/voting/create")} />
}
headerComponent={
<SearchInput placeholder="Cari voting" onChangeText={setSearch} />
}
>
{loadingGetData ? (
<LoaderCustom />
) : _.isEmpty(listData) ? (
<TextCustom align="center">Tidak ada data</TextCustom>
) : (
listData.map((item: any, index: number) => (
<Voting_BoxPublishSection
data={item}
key={index}
href={`/voting/${item.id}`}
/>
))
)}
</ViewWrapper>
<>
<Voting_ScreenBeranda />
</>
);
}

2
app/(application)/(user)/voting/[id]/[status]/detail.tsx
View File

@@ -51,8 +51,6 @@ export default function VotingDetailStatus() {
setLoadingGetData(true);
const response = await apiVotingGetOne({ id: id as string });
console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
if (response.success) {
setData(response.data);
}

21
app/(application)/(user)/voting/[id]/edit.tsx
View File

@@ -5,13 +5,14 @@ import {
ButtonCustom,
CenterCustom,
LoaderCustom,
NewWrapper,
Spacing,
StackCustom,
TextAreaCustom,
TextCustom,
TextInputCustom,
ViewWrapper,
TextInputCustom
} from "@/components";
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
@@ -34,7 +35,7 @@ interface IEditData {
Voting_DaftarNamaVote?: [
{
value?: string;
}
},
];
}
@@ -47,7 +48,7 @@ export default function VotingEdit() {
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
}, [id]),
);
const onLoadData = async () => {
@@ -188,9 +189,9 @@ export default function VotingEdit() {
};
return (
<ViewWrapper footerComponent={buttonSubmit()}>
<NewWrapper footerComponent={buttonSubmit()}>
{loadingGetData ? (
<LoaderCustom />
<ListSkeletonComponent />
) : (
<StackCustom gap={"xs"}>
<TextInputCustom
@@ -210,7 +211,7 @@ export default function VotingEdit() {
onChangeText={(text) => setData({ ...data, deskripsi: text })}
/>
<Spacing />
<DateTimePickerCustom
minimumDate={new Date(Date.now())}
@@ -255,7 +256,7 @@ export default function VotingEdit() {
}
</TextCustom>
)}
<Spacing />
</StackCustom>
{data?.Voting_DaftarNamaVote?.map((item: any, index: number) => (
@@ -270,7 +271,7 @@ export default function VotingEdit() {
...(data as any),
Voting_DaftarNamaVote: data?.Voting_DaftarNamaVote?.map(
(item: any, i: any) =>
i === index ? { ...item, value } : item
i === index ? { ...item, value } : item,
),
})
}
@@ -327,6 +328,6 @@ export default function VotingEdit() {
<Spacing />
</StackCustom>
)}
</ViewWrapper>
</NewWrapper>
);
}

69
app/(application)/(user)/voting/[id]/list-of-contributor.tsx
View File

@@ -1,69 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
AvatarUsernameAndOtherComponent,
BadgeCustom,
BaseBox,
LoaderCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { apiVotingContribution } from "@/service/api-client/api-voting";
import { useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import Voting_ScreenListOfContributor from "@/screens/Voting/ScreenListOfContributor";
export default function Voting_ListOfContributor() {
const { id } = useLocalSearchParams();
const [listData, setListData] = useState<any>([]);
const [isLoadData, setIsLoadData] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadList();
}, [id])
);
const onLoadList = async () => {
try {
setIsLoadData(true);
const response = await apiVotingContribution({
id: id as string,
authorId: "",
category: "list",
});
if (response.success) {
setListData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setIsLoadData(false);
}
};
return (
<ViewWrapper>
{isLoadData ? (
<LoaderCustom />
) : _.isEmpty(listData) ? (
<TextCustom align="center">Tidak ada kontributor</TextCustom>
) : (
listData.map((item: any, index: number) => (
<BaseBox paddingTop={5} paddingBottom={5} key={index.toString()}>
<AvatarUsernameAndOtherComponent
avatar={item?.Author?.Profile?.imageId || ""}
name={item?.Author?.username || "Username"}
avatarHref={`/profile/${item?.Author?.Profile?.id}`}
rightComponent={
<BadgeCustom style={{ alignSelf: "flex-end" }}>
{item?.Voting_DaftarNamaVote?.value}
</BadgeCustom>
}
/>
</BaseBox>
))
)}
</ViewWrapper>
);
export default function VotingListOfContributor() {
return <Voting_ScreenListOfContributor />;
}

4
app/(application)/(user)/voting/create.tsx
View File

@@ -80,9 +80,7 @@ export default function VotingCreate() {
type: "success",
text1: "Data berhasil disimpan",
});
router.replace(
"/(application)/(user)/voting/(tabs)/status?status=review",
);
router.replace("/voting/(tabs)/status?status=review");
} else {
Toast.show({
type: "error",

7
docs/prompt-for-qwen-code.md
View File

@@ -1,7 +1,7 @@
<!-- ===================== Start Penerapan Pagination ===================== -->
File utama: screens/Voting/ScreenStatus.tsx
Function fecth: apiVotingGetByStatus
File utama: screens/Voting/ScreenListOfContributor.tsx
Function fecth: apiVotingContribution
File function fetch: service/api-client/api-voting.ts
File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
@@ -15,7 +15,8 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1"
Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
File refrensi: screens/Event/ScreenStatus.tsx
<!-- Additional Prompt -->
File refrensi: app/(application)/(user)/event/[id]/list-of-participants.tsx
Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama
<!-- ===================== End Penerapan Pagination ===================== -->

10
screens/Event/ScreenStatus.tsx
View File

@@ -13,8 +13,8 @@ import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import { apiEventGetByStatus } from "@/service/api-client/api-event";
import { useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { useFocusEffect, useLocalSearchParams } from "expo-router";
import { useCallback, useState } from "react";
import { RefreshControl, View } from "react-native";
export default function Event_ScreenStatus() {
@@ -84,6 +84,12 @@ export default function Event_ScreenStatus() {
pagination.reset();
};
useFocusEffect(
useCallback(() => {
pagination.onRefresh();
}, [activeCategory])
);
const tabsComponent = (
<ScrollableCustom
data={dummyMasterStatus.map((e, i) => ({

13
screens/Job/ButtonStatusSection.tsx
View File

@@ -20,6 +20,9 @@ export default function Job_ButtonStatusSection({
onSetLoading: (value: boolean) => void;
isArchive?: boolean;
}) {
const path : any =(status: string) => {
return `/job/(tabs)/status?status=${status}`
}
const handleBatalkanReview = () => {
AlertDefaultSystem({
title: "Batalkan Review",
@@ -39,7 +42,7 @@ export default function Job_ButtonStatusSection({
type: "success",
text1: response.message,
});
router.back();
router.replace(path("draft"));
} else {
Toast.show({
type: "info",
@@ -76,14 +79,14 @@ export default function Job_ButtonStatusSection({
type: "success",
text1: response.message,
});
router.back();
router.replace(path("review"));
} else {
Toast.show({
type: "info",
text1: "Info",
text2: response.message,
});
router.back();
router.back()
}
} catch (error) {
console.log("[ERROR]", error);
@@ -113,14 +116,14 @@ export default function Job_ButtonStatusSection({
type: "success",
text1: response.message,
});
router.back();
router.replace(path("draft"));
} else {
Toast.show({
type: "info",
text1: "Info",
text2: response.message,
});
router.back();
router. back();
}
} catch (error) {
console.log("[ERROR]", error);

14
screens/Job/MainViewStatus2.tsx
View File

@@ -62,19 +62,17 @@ export default function Job_MainViewStatus2() {
</BaseBox>
);
// useFocusEffect(
// useCallback(() => {
// // Reset and load first page when category changes
// pagination.reset();
// // pagination.onRefresh();
// }, [activeCategory]),
// );
const handlePress = (item: any) => {
setActiveCategory(item.value);
// Reset pagination saat kategori berubah
pagination.reset();
};
useFocusEffect(
useCallback(() => {
pagination.onRefresh();
}, [activeCategory])
);
const scrollComponent = (
<ScrollableCustom

66
screens/Voting/ButtonStatusSection.tsx
View File

@@ -3,7 +3,7 @@ import {
apiVotingDelete,
apiVotingUpdateStatus,
} from "@/service/api-client/api-voting";
import { router } from "expo-router";
import { RelativePathString, router } from "expo-router";
import Toast from "react-native-toast-message";
export default function Voting_ButtonStatusSection({
@@ -17,6 +17,10 @@ export default function Voting_ButtonStatusSection({
isLoading: boolean;
onSetLoading: (value: boolean) => void;
}) {
const path: any = (status: string) => {
return `/voting/(tabs)/status?status=${status}`;
};
const handleBatalkanReview = () => {
AlertDefaultSystem({
title: "Batalkan Review",
@@ -34,9 +38,9 @@ export default function Voting_ButtonStatusSection({
if (response?.success) {
Toast.show({
type: "success",
text1: response.message,
text1: "Berhasil batalkan review",
});
router.replace(`/voting/${id}/draft/detail`);
router.replace(path("draft"));
} else {
Toast.show({
type: "info",
@@ -71,9 +75,9 @@ export default function Voting_ButtonStatusSection({
if (response?.success) {
Toast.show({
type: "success",
text1: response.message,
text1: "Berhasil ajukan review",
});
router.replace(`/voting/${id}/review/detail`);
router.replace(path("review"));
} else {
Toast.show({
type: "info",
@@ -108,9 +112,9 @@ export default function Voting_ButtonStatusSection({
if (response?.success) {
Toast.show({
type: "success",
text1: response.message,
text1: "Berhasil edit kembali",
});
router.replace(`/voting/${id}/draft/detail`);
router.replace(path("draft"));
} else {
Toast.show({
type: "info",
@@ -135,31 +139,31 @@ export default function Voting_ButtonStatusSection({
textLeft: "Batal",
textRight: "Hapus",
onPressRight: async () => {
try {
onSetLoading(true);
const response = await apiVotingDelete({
id: id as string,
});
try {
onSetLoading(true);
const response = await apiVotingDelete({
id: id as string,
});
if (response?.success) {
Toast.show({
type: "success",
text1: response.message,
});
router.back();
} else {
Toast.show({
type: "info",
text1: "Info",
text2: response.message,
});
router.back();
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
onSetLoading(false);
}
if (response?.success) {
Toast.show({
type: "success",
text1: "Berhasil hapus data",
});
router.back();
} else {
Toast.show({
type: "info",
text1: "Info",
text2: response.message,
});
router.back();
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
onSetLoading(false);
}
},
});
};

82
screens/Voting/ScreenBeranda.tsx Normal file
View File

@@ -0,0 +1,82 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { FloatingButton, SearchInput } from "@/components";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
import { apiVotingGetAll } from "@/service/api-client/api-voting";
import { router } from "expo-router";
import { useMemo, useState } from "react";
import { RefreshControl } from "react-native";
export default function Voting_ScreenBeranda() {
const { user } = useAuth();
const [search, setSearch] = useState("");
const pagination = usePagination({
fetchFunction: async (page, searchQuery) => {
return await apiVotingGetAll({
search: searchQuery || "",
category: "beranda",
userLoginId: user?.id,
page: String(page),
});
},
pageSize: 5,
searchQuery: search,
dependencies: [user?.id],
onError: (error) => console.error("[ERROR] Fetch voting:", error),
});
// Gunakan helper untuk membuat komponen-komponen pagination
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
searchQuery: search,
emptyMessage: "Tidak ada data",
emptySearchMessage: "Tidak ada hasil pencarian",
skeletonCount: 5,
skeletonHeight: 200,
isInitialLoad: pagination.isInitialLoad,
});
// Render item untuk FlatList
const renderItem = useMemo(
() =>
({ item }: { item: any }) =>
(
<Voting_BoxPublishSection
data={item}
key={item.id}
href={`/voting/${item.id}`}
/>
),
[],
);
return (
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
onEndReached={pagination.loadMore}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
hideFooter
floatingButton={
<FloatingButton onPress={() => router.push("/voting/create")} />
}
headerComponent={
<SearchInput placeholder="Cari voting" onChangeText={setSearch} />
}
/>
);
}

70
screens/Voting/ScreenContribution.tsx Normal file
View File

@@ -0,0 +1,70 @@
/* eslint-disable react-hooks/exhaustive-deps */
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
import { apiVotingGetAll } from "@/service/api-client/api-voting";
import { useMemo } from "react";
import { RefreshControl } from "react-native";
export default function Voting_ScreenContribution() {
const { user } = useAuth();
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiVotingGetAll({
category: "contribution",
authorId: user?.id as string,
page: String(page),
});
},
pageSize: 4,
dependencies: [user?.id],
onError: (error) => console.error("[ERROR] Fetch contribution:", error),
});
// Gunakan helper untuk membuat komponen-komponen pagination
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
emptyMessage: "Tidak ada kontribusi",
emptySearchMessage: "Tidak ada hasil pencarian",
skeletonCount: 5,
skeletonHeight: 200,
isInitialLoad: pagination.isInitialLoad,
});
// Render item untuk FlatList
const renderItem = useMemo(
() =>
({ item }: { item: any }) =>
(
<Voting_BoxPublishSection
data={item}
key={item.id}
href={`/voting/${item.id}/contribution`}
/>
),
[],
);
return (
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
onEndReached={pagination.loadMore}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
hideFooter
/>
);
}

114
screens/Voting/ScreenHistory.tsx Normal file
View File

@@ -0,0 +1,114 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { ButtonCustom, Spacing, TextCustom } from "@/components";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
import { apiVotingGetAll } from "@/service/api-client/api-voting";
import { useState } from "react";
import { RefreshControl, View } from "react-native";
export default function Voting_ScreenHistory() {
const [activeCategory, setActiveCategory] = useState<string | null>("all");
const { user } = useAuth();
// Setup pagination
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiVotingGetAll({
category: activeCategory === "all" ? "all-history" : "my-history",
authorId: user?.id as string,
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE,
dependencies: [user?.id, activeCategory],
onError: (error) => console.error("[ERROR] Fetch voting history:", error),
});
// Generate komponen
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
emptyMessage: "Belum ada riwayat",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 100,
});
// Render item voting
const renderVotingItem = ({ item }: { item: any }) => (
<Voting_BoxPublishSection
key={item && item?.id}
data={item}
href={`/voting/${item.id}/history`}
/>
);
const handlePress = (item: any) => {
setActiveCategory(item);
// Reset pagination saat kategori berubah
pagination.reset();
};
const headerComponent = (
<View
style={{
flexDirection: "row",
alignItems: "center",
padding: 5,
backgroundColor: MainColor.soft_darkblue,
borderRadius: 50,
width: "100%",
}}
>
<ButtonCustom
backgroundColor={
activeCategory === "all" ? MainColor.yellow : AccentColor.blue
}
textColor={activeCategory === "all" ? MainColor.black : MainColor.white}
style={{ width: "49%" }}
onPress={() => handlePress("all")}
>
Semua Riwayat
</ButtonCustom>
<Spacing width={"2%"} />
<ButtonCustom
backgroundColor={
activeCategory === "main" ? MainColor.yellow : AccentColor.blue
}
textColor={
activeCategory === "main" ? MainColor.black : MainColor.white
}
style={{ width: "49%" }}
onPress={() => handlePress("main")}
>
Riwayat Saya
</ButtonCustom>
</View>
);
return (
<NewWrapper
headerComponent={headerComponent}
listData={pagination.listData}
renderItem={renderVotingItem}
refreshControl={
<RefreshControl
tintColor={MainColor.yellow}
colors={[MainColor.yellow]}
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
hideFooter
/>
);
}

80
screens/Voting/ScreenListOfContributor.tsx Normal file
View File

@@ -0,0 +1,80 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
AvatarUsernameAndOtherComponent,
BadgeCustom,
BaseBox,
Spacing,
TextCustom,
} from "@/components";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { usePagination } from "@/hooks/use-pagination";
import { apiVotingContribution } from "@/service/api-client/api-voting";
import { useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { RefreshControl, View } from "react-native";
export default function Voting_ScreenListOfContributor() {
const { id } = useLocalSearchParams();
// Setup pagination
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiVotingContribution({
id: id as string,
authorId: "",
category: "list",
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE,
dependencies: [id],
onError: (error) =>
console.error("[ERROR] Fetch voting contributors:", error),
});
// Generate komponen
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
emptyMessage: "Tidak ada kontributor",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 100,
});
// Render item contributor
const renderContributorItem = ({ item }: { item: any }) => (
<BaseBox paddingTop={5} paddingBottom={5} key={item?.id}>
<AvatarUsernameAndOtherComponent
avatar={item?.Author?.Profile?.imageId || ""}
name={item?.Author?.username || "Username"}
avatarHref={`/profile/${item?.Author?.Profile?.id}`}
rightComponent={
<BadgeCustom style={{ alignSelf: "flex-end" }}>
{item?.Voting_DaftarNamaVote?.value}
</BadgeCustom>
}
/>
</BaseBox>
);
return (
<NewWrapper
hideFooter
listData={pagination.listData}
renderItem={renderContributorItem}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
/>
);
}

15
screens/Voting/ScreenStatus.tsx
View File

@@ -8,17 +8,18 @@ import {
} from "@/components";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { MainColor } from "@/constants/color-palet";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import { apiVotingGetByStatus } from "@/service/api-client/api-voting";
import { dateTimeView } from "@/utils/dateTimeView";
import { useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { useFocusEffect, useLocalSearchParams } from "expo-router";
import { useCallback, useState } from "react";
import { RefreshControl, View } from "react-native";
const PAGE_SIZE = 10;
const PAGE_SIZE = 6
export default function Voting_ScreenStatus() {
const { user } = useAuth();
@@ -40,7 +41,7 @@ export default function Voting_ScreenStatus() {
page: String(page),
});
},
pageSize: PAGE_SIZE,
pageSize: PAGINATION_DEFAULT_TAKE,
dependencies: [id, activeCategory],
onError: (error) => console.error("[ERROR] Fetch voting by status:", error),
});
@@ -91,6 +92,12 @@ export default function Voting_ScreenStatus() {
pagination.reset();
};
useFocusEffect(
useCallback(() => {
pagination.onRefresh();
}, [activeCategory])
);
const scrollComponent = (
<ScrollableCustom
data={dummyMasterStatus.map((e, i) => ({

11
service/api-client/api-voting.ts
View File

@@ -81,14 +81,15 @@ export async function apiVotingUpdateData({
}
}
export async function apiVotingGetAll({ search, category, authorId, userLoginId }: { search?: string, category: "beranda" | "contribution" | "all-history" | "my-history", authorId?: string, userLoginId?: string }) {
export async function apiVotingGetAll({ search, category, authorId, userLoginId, page = "1" }: { search?: string, category: "beranda" | "contribution" | "all-history" | "my-history", authorId?: string, userLoginId?: string, page?: string }) {
try {
console.log("userLoginId", userLoginId);
const categoryQuery = category ? `?category=${category}` : "";
const searchQuery = search ? `&search=${search}` : "";
const authorIdQuery = authorId ? `&authorId=${authorId}` : "";
const userLoginIdQuery = userLoginId ? `&userLoginId=${userLoginId}` : "";
const response = await apiConfig.get(`/mobile/voting${categoryQuery}${searchQuery}${authorIdQuery}${userLoginIdQuery}`);
const pageQuery = `&page=${page}`;
const response = await apiConfig.get(`/mobile/voting${categoryQuery}${searchQuery}${authorIdQuery}${userLoginIdQuery}${pageQuery}`);
return response.data;
} catch (error) {
throw error;
@@ -110,15 +111,17 @@ export async function apiVotingContribution({
id,
authorId,
category,
page = "1",
}: {
id: string;
authorId: string;
category: "list" | "checked";
page?: string;
}) {
const query =
category === "list"
? "?category=list"
: `?category=checked&authorId=${authorId}`;
? `?category=list&page=${page}`
: `?category=checked&authorId=${authorId}&page=${page}`;
try {
const response = await apiConfig.get(
`/mobile/voting/${id}/contribution${query}`