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
1. Penambahan Pagination pada Fitur Admin Job
- Menerapkan sistem pagination menggunakan hook usePagination dari hooks/use-pagination.tsx
- Mengintegrasikan komponen-komponen pagination dari helpers/paginationHelpers.tsx
- Menambahkan dukungan infinite scroll dan pull-to-refresh
- Menambahkan loading state, skeleton loader, dan empty state
2. Pembaruan Fungsi API
- Memperbarui fungsi apiAdminJob di service/api-admin/api-admin-job.ts untuk mendukung parameter
pagination
- Menambahkan parameter page dengan nilai default 1
3. Modularisasi Kode
- Memindahkan komponen AdminJobStatus dari app/(application)/admin/job/[status]/status.tsx ke
screens/Admin/Job/ScreenJobStatus.tsx
- Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih fleksibel
- Membuat komponen baru BoxStatusJob.tsx untuk memisahkan logika tampilan item pekerjaan
- Menggunakan komponen BoxStatusJob di dalam ScreenJobStatus untuk menampilkan daftar pekerjaan
4. Perbaikan Struktur dan Organisasi Kode
- Mengorganisir ulang struktur folder untuk komponen admin job
- Memisahkan tanggung jawab antara komponen layar dan komponen item
- Mengoptimalkan performa dengan menggunakan useCallback dan useMemo
File-file yang Diubah
1. screens/Admin/Job/ScreenJobStatus.tsx - Implementasi utama dengan pagination
2. screens/Admin/Job/BoxStatusJob.tsx - Komponen baru untuk menampilkan item pekerjaan
3. service/api-admin/api-admin-job.ts - Penambahan parameter pagination
4. app/(application)/admin/job/[status]/status.tsx - Diperbarui untuk menggunakan komponen baru
### NO Issue
User Layout
- app/(application)/(user)/home.tsx
Components
- components/Drawer/NavbarMenu_V2.tsx
Docs
- docs/admin-folder-structure.md
### Issue: saat masuk lebih dalam ke sub menu indikator aktif di navbar hilang
Donasi. Berikut adalah ringkasan perubahan yang telah dilakukan:
1. Menerapkan sistem pagination pada berbagai komponen layar donasi:
- ScreenBeranda.tsx
- ScreenMyDonation.tsx
- ScreenRecapOfNews.tsx
- ScreenListOfNews.tsx
- ScreenListOfDonatur.tsx
- ScreenFundDisbursement.tsx
2. Memperbarui fungsi-fungsi API untuk mendukung parameter page:
- apiDonationGetAll
- apiDonationGetNewsById
- apiDonationListOfDonaturById
- apiDonationDisbursementOfFundsListById
3. Mengganti komponen wrapper lama (ViewWrapper) dengan NewWrapper yang mendukung sistem pagination
4. Membuat komponen layar terpisah untuk meningkatkan modularitas kode
5. Memperbaiki berbagai error yang terjadi, termasuk masalah dengan import komponen dan struktur JSX
### No Issue
- Implement pagination on investment screens (ScreenMyHolding, ScreenInvestor, ScreenRecapOfNews, ScreenListOfNews)
- Implement pagination on donation screens (ScreenStatus)
- Update API functions to support pagination with page parameter (apiInvestmentGetAll, apiInvestmentGetInvestorById, apiInvestmentGetNews, apiDonationGetByStatus)
- Replace ViewWrapper with NewWrapper for better UI experience
- Update app directory files to use new modular components from screens directory
- Add pull-to-refresh and infinite scroll functionality
- Improve performance by loading data incrementally
- Apply NewWrapper to donation create and create-story screens
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
1. Pembuatan dan Pembaruan Komponen Layar Investasi dengan Sistem Pagination
ScreenMyHolding.tsx
- Diperbarui dari sistem loading data statis ke sistem pagination dinamis
- Menggunakan hook usePagination untuk manajemen data
- Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih modern
- Menambahkan fitur pull-to-refresh dan infinite scroll
- Menggunakan helper pagination dari createPaginationComponents
ScreenInvestor.tsx
- Dibuat baru dengan sistem pagination
- Menggunakan hook usePagination untuk manajemen data
- Menggunakan NewWrapper sebagai komponen dasar
- Menambahkan fitur pull-to-refresh dan infinite scroll
ScreenRecapOfNews.tsx
- Dibuat baru dengan sistem pagination
- Menggunakan hook usePagination untuk manajemen data
- Menggunakan NewWrapper sebagai komponen dasar
- Menambahkan fitur pull-to-refresh dan infinite scroll
ScreenListOfNews.tsx
- Dibuat baru dengan sistem pagination
- Menggunakan hook usePagination untuk manajemen data
- Menggunakan NewWrapper sebagai komponen dasar
- Menambahkan fitur pull-to-refresh dan infinite scroll
2. Perubahan pada Fungsi-Fungsi API untuk Mendukung Pagination
apiInvestmentGetAll
- Sudah mendukung parameter page dengan default "1"
apiInvestmentGetInvestorById
- Ditambahkan parameter page dengan default "1"
- Memungkinkan pengambilan data investor secara bertahap
apiInvestmentGetNews
- Ditambahkan parameter page dengan default "1"
- Memungkinkan pengambilan data berita secara bertahap
3. Pembaruan File-File di Direktori app/ untuk Menggunakan Komponen-Komponen Baru
app/(application)/(user)/investment/[id]/investor.tsx
- Diperbarui untuk menggunakan komponen Investment_ScreenInvestor
- Menghilangkan logika lokal dan menggantinya dengan komponen modular
app/(application)/(user)/investment/[id]/(news)/recap-of-news.tsx
- Diperbarui untuk menggunakan komponen Investment_ScreenRecapOfNews
- Menghilangkan logika lokal dan menggantinya dengan komponen modular
app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx
- Diperbarui untuk menggunakan komponen Investment_ScreenListOfNews
- Menghilangkan logika lokal dan menggantinya dengan komponen modular
4. Implementasi Sistem Pagination
usePagination Hook
- Digunakan secara konsisten di semua komponen layar investasi
- Menyediakan fitur load more dan refresh
- Mengelola state loading, refreshing, dan data
NewWrapper Component
- Digunakan sebagai pengganti ViewWrapper
- Menyediakan dukungan bawaan untuk FlatList
- Menyediakan dukungan untuk refreshControl dan onEndReached
Pagination Helpers
- Menggunakan createPaginationComponents untuk menghasilkan komponen-komponen pagination
- Menyediakan skeleton loading saat data sedang dimuat
- Menyediakan pesan kosong saat tidak ada data
5. Manfaat dari Perubahan Ini
1. Performa Lebih Baik: Dengan pagination, hanya sejumlah kecil data yang dimuat pada satu waktu, meningkatkan
performa aplikasi
2. Pengalaman Pengguna Lebih Baik: Fitur pull-to-refresh dan infinite scroll membuat navigasi lebih intuitif
3. Kode Lebih Modular: Komponen-komponen baru dapat digunakan kembali dan dipelihara lebih mudah
4. Struktur Kode Lebih Rapi: Pemisahan antara logika tampilan dan logika data membuat kode lebih terorganisir
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
