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:
2026-02-09 14:38:55 +08:00
parent 83fa277e03
commit 38a6b424e8
17 changed files with 868 additions and 345 deletions

View File

@@ -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