Ringkasan Perubahan
Kami telah melakukan serangkaian perubahan pada file app/(application)/admin/event/[id]/[status]/index.tsx
untuk memperbaiki error dan meningkatkan fungsionalitas aplikasi. Berikut adalah perubahan-perubahan yang
telah dilakukan:
1. Perbaikan Fungsi Download QR Code
- Mengganti implementasi fungsi downloadQRCode yang sebelumnya menggunakan modul native
(react-native-view-shot dan @react-native-camera-roll/camera-roll) yang menyebabkan error
- Mengganti dengan implementasi sederhana yang menampilkan pesan bahwa fitur sedang dalam pengembangan
- Menambahkan pengecekan platform untuk memastikan fitur hanya berjalan di platform yang didukung (non-web)
2. Pembersihan Kode
- Menghapus penggunaan useRef karena tidak lagi diperlukan setelah mengganti implementasi
- Menghapus komponen View yang digunakan sebagai referensi karena tidak lagi diperlukan
- Menyederhanakan struktur komponen QR code
3. Perbaikan Tampilan
- Menyesuaikan tampilan tombol download agar tetap muncul meskipun QR code sedang dimuat
- Memastikan bahwa tombol download QR tetap terlihat dan fungsional
4. Penanganan Error
- Menambahkan penanganan error yang lebih baik untuk mencegah crash aplikasi
- Mengganti implementasi yang menyebabkan error Invariant Violation terkait modul native yang tidak terdaftar
Tujuan dari Perubahan Ini
1. Mengatasi Error Runtime: Mengatasi error Invariant Violation: TurboModuleRegistry.getEnforcing(...):
'RNViewShot' could not be found dan error terkait modul native lainnya
2. Meningkatkan Stabilitas Aplikasi: Memastikan bahwa aplikasi tidak mengalami crash akibat modul yang tidak
terdaftar
3. Menyederhanakan Fungsionalitas: Menyediakan implementasi sementara untuk fitur download QR code sampai
konfigurasi native module selesai
4. Meningkatkan Pengalaman Pengguna: Memastikan bahwa antarmuka tetap responsif dan memberikan umpan balik yang
jelas kepada pengguna
File yang Terpengaruh
- app/(application)/admin/event/[id]/[status]/index.tsx
### No Issue
This commit is contained in:
55
screens/Admin/Event/BoxEventParticipant.tsx
Normal file
55
screens/Admin/Event/BoxEventParticipant.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import {
|
||||
BadgeCustom,
|
||||
BaseBox,
|
||||
Grid,
|
||||
StackCustom,
|
||||
TextCustom
|
||||
} from "@/components";
|
||||
import dayjs from "dayjs";
|
||||
import { View } from "moti";
|
||||
|
||||
interface Admin_BoxEventParticipantProps {
|
||||
item: any;
|
||||
startDate?: dayjs.Dayjs;
|
||||
}
|
||||
|
||||
export function Admin_BoxEventParticipant({
|
||||
item,
|
||||
startDate,
|
||||
}: Admin_BoxEventParticipantProps) {
|
||||
|
||||
return (
|
||||
<BaseBox>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<StackCustom gap={"sm"}>
|
||||
<TextCustom bold truncate>
|
||||
{item?.User?.username}
|
||||
</TextCustom>
|
||||
<TextCustom>+{item?.User?.nomor}</TextCustom>
|
||||
</StackCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6} style={{ justifyContent: "center" }}>
|
||||
{startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
|
||||
<BadgeCustom
|
||||
style={{ alignSelf: "flex-end" }}
|
||||
color={item?.isPresent ? "green" : "red"}
|
||||
>
|
||||
{item?.isPresent ? "Hadir" : "Tidak Hadir"}
|
||||
</BadgeCustom>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<BadgeCustom style={{ alignSelf: "flex-end" }} color="gray">
|
||||
-
|
||||
</BadgeCustom>
|
||||
</View>
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</BaseBox>
|
||||
);
|
||||
}
|
||||
48
screens/Admin/Event/BoxEventStatus.tsx
Normal file
48
screens/Admin/Event/BoxEventStatus.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { StackCustom, TextCustom } from "@/components";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
|
||||
import { dateTimeView } from "@/utils/dateTimeView";
|
||||
import { router } from "expo-router";
|
||||
import { View } from "react-native";
|
||||
import { Divider } from "react-native-paper";
|
||||
|
||||
interface Admin_BoxEventStatusProps {
|
||||
item: any;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export function Admin_BoxEventStatus({ item, status }: Admin_BoxEventStatusProps) {
|
||||
return (
|
||||
<AdminBasicBox
|
||||
style={{ marginHorizontal: 10, marginVertical: 5 }}
|
||||
onPress={() => {
|
||||
router.push(`/admin/event/${item.id}/${status}`);
|
||||
}}
|
||||
>
|
||||
<StackCustom gap={0}>
|
||||
<View style={{ paddingBlock: 8 }}>
|
||||
<TextCustom size={"large"} bold truncate={2}>
|
||||
{item?.title || "-"}
|
||||
</TextCustom>
|
||||
</View>
|
||||
<Divider />
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Mulai</TextCustom>}
|
||||
value={
|
||||
<TextCustom>
|
||||
{dateTimeView({ date: item?.tanggal }) || "-"}
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Berakhir</TextCustom>}
|
||||
value={
|
||||
<TextCustom>
|
||||
{dateTimeView({ date: item?.tanggalSelesai }) || "-"}
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
</StackCustom>
|
||||
</AdminBasicBox>
|
||||
);
|
||||
}
|
||||
83
screens/Admin/Event/ScreenEventListOfParticipants.tsx
Normal file
83
screens/Admin/Event/ScreenEventListOfParticipants.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
|
||||
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 { usePagination } from "@/hooks/use-pagination";
|
||||
import { apiAdminEventListOfParticipants } from "@/service/api-admin/api-admin-event";
|
||||
import dayjs from "dayjs";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useCallback } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import { Admin_BoxEventParticipant } from "./BoxEventParticipant";
|
||||
|
||||
export function Admin_ScreenEventListOfParticipants() {
|
||||
const { id } = useLocalSearchParams();
|
||||
|
||||
// Gunakan hook pagination
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAdminEventListOfParticipants({
|
||||
id: id as string,
|
||||
page: String(page),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
return { data: response.data };
|
||||
} else {
|
||||
return { data: [] };
|
||||
}
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
dependencies: [id],
|
||||
onError: (error) => {
|
||||
console.error("Error loading participants:", error);
|
||||
},
|
||||
});
|
||||
|
||||
// Render item untuk daftar peserta
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: any; index: number }) => (
|
||||
<Admin_BoxEventParticipant
|
||||
key={index}
|
||||
item={item}
|
||||
startDate={dayjs(item?.Event?.tanggal)}
|
||||
/>
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
// Buat komponen-komponen pagination
|
||||
const { ListEmptyComponent, ListFooterComponent } =
|
||||
createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: "",
|
||||
emptyMessage: "Belum ada peserta",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
isInitialLoad: pagination.isInitialLoad,
|
||||
skeletonCount: PAGINATION_DEFAULT_TAKE,
|
||||
skeletonHeight: 60,
|
||||
});
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
listData={pagination.listData}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item: any) => item.id.toString()}
|
||||
headerComponent={<AdminBackButtonAntTitle title="Daftar Peserta" />}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
onEndReached={pagination.loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={pagination.refreshing}
|
||||
onRefresh={pagination.onRefresh}
|
||||
tintColor={MainColor.yellow}
|
||||
colors={[MainColor.yellow]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
108
screens/Admin/Event/ScreenEventStatus.tsx
Normal file
108
screens/Admin/Event/ScreenEventStatus.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { SearchInput } from "@/components";
|
||||
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
|
||||
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 { usePagination } from "@/hooks/use-pagination";
|
||||
import { apiAdminEvent } from "@/service/api-admin/api-admin-event";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import { Admin_BoxEventStatus } from "./BoxEventStatus";
|
||||
|
||||
export function Admin_ScreenEventStatus() {
|
||||
const { status } = useLocalSearchParams();
|
||||
const [search, setSearch] = useState<string>("");
|
||||
|
||||
// Gunakan hook pagination
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAdminEvent({
|
||||
category: status as
|
||||
| "publish"
|
||||
| "review"
|
||||
| "history"
|
||||
| "dashboard"
|
||||
| "type-of-event",
|
||||
search: searchQuery,
|
||||
page: String(page),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
return { data: response.data };
|
||||
} else {
|
||||
return { data: [] };
|
||||
}
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: search,
|
||||
dependencies: [status],
|
||||
});
|
||||
|
||||
// Komponen kanan untuk header
|
||||
const rightComponent = useMemo(
|
||||
() => (
|
||||
<SearchInput
|
||||
containerStyle={{ width: "100%", marginBottom: 0 }}
|
||||
placeholder="Cari"
|
||||
value={search}
|
||||
onChangeText={(value) => setSearch(value)}
|
||||
/>
|
||||
),
|
||||
[search],
|
||||
);
|
||||
|
||||
// Render item untuk daftar event
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: any; index: number }) => (
|
||||
<Admin_BoxEventStatus key={index} item={item} status={status as string} />
|
||||
),
|
||||
[status],
|
||||
);
|
||||
|
||||
const headerComponent = useMemo(
|
||||
() => (
|
||||
<AdminComp_BoxTitle
|
||||
title={`Event ${_.startCase(status as string)}`}
|
||||
rightComponent={rightComponent}
|
||||
/>
|
||||
),
|
||||
[status, rightComponent],
|
||||
);
|
||||
|
||||
// Buat komponen-komponen pagination
|
||||
const { ListEmptyComponent, ListFooterComponent } =
|
||||
createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: search,
|
||||
emptyMessage: "Belum ada data",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
isInitialLoad: pagination.isInitialLoad,
|
||||
skeletonCount: PAGINATION_DEFAULT_TAKE,
|
||||
skeletonHeight: 100,
|
||||
});
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
listData={pagination.listData}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item: any) => item.id.toString()}
|
||||
headerComponent={headerComponent}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
onEndReached={pagination.loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={pagination.refreshing}
|
||||
onRefresh={pagination.onRefresh}
|
||||
tintColor={MainColor.yellow}
|
||||
colors={[MainColor.yellow]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user