Ringkasan Perubahan
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>
This commit is contained in:
@@ -1,5 +1,34 @@
|
||||
<!-- ===================== Start Penerapan Pagination ===================== -->
|
||||
|
||||
File source: app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx
|
||||
Folder tujuan: screens/Invesment
|
||||
Nama file utama: ScreenListOfNews.tsx
|
||||
|
||||
Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Investment_ScreenListOfNews" kemudian clean code, import dan panggil function tersebut pada file "File source"
|
||||
Selanjutnya terapkan pagination pada file "Nama file utama"
|
||||
|
||||
Function fecth: apiInvestmentGetNews
|
||||
File function fetch: service/api-client/api-investment.ts
|
||||
File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
|
||||
|
||||
Terapkan pagination pada file "Nama file utama"
|
||||
Analisa juga file "Nama file utama" , jika belum menggunakan NewWrapper pada file "File komponen wrapper" , maka terapkan juga dan ganti wrapper lama yaitu komponen ViewWrapper
|
||||
|
||||
Komponen pagination yang digunaka berada pada file hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
|
||||
|
||||
Perbaiki fetch "Function fecth" , pada file "File function fetch"
|
||||
Jika tidak ada props page maka tambahkan props page dan default page: "1"
|
||||
|
||||
|
||||
Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
|
||||
|
||||
<!-- Additional Prompt -->
|
||||
File refrensi: screens/Event/ScreenStatus.tsx
|
||||
Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama
|
||||
|
||||
<!-- ===================== End Penerapan Pagination ===================== -->
|
||||
|
||||
<!-- ===================== Start Penerapan NewWrapper ===================== -->
|
||||
File utama: screens/Invesment/ScreenTransaction.tsx
|
||||
Function fecth: apiInvestmentGetInvoice
|
||||
File function fetch: service/api-client/api-investment.ts
|
||||
@@ -15,11 +44,7 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1"
|
||||
|
||||
Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
|
||||
|
||||
<!-- Additional Prompt -->
|
||||
File refrensi: screens/Event/ScreenStatus.tsx
|
||||
Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama
|
||||
|
||||
<!-- ===================== End Penerapan Pagination ===================== -->
|
||||
<!-- ===================== End Penerapan NewWrapper ===================== -->
|
||||
|
||||
<!-- Start Penerapan NewWrapper -->
|
||||
Terapkan NewWrapper pada file: screens/Forum/DetailForum.tsx
|
||||
|
||||
Reference in New Issue
Block a user