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>

app/(application)/(user)/investment/[id]/investor.tsx

@@ -1,67 +1,10 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AvatarUsernameAndOtherComponent,
-  BoxWithHeaderSection,
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { apiInvestmentGetInvestorById } from "@/service/api-client/api-investment";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Investment_ScreenInvestor from "@/screens/Invesment/ScreenInvestor";
+import { useLocalSearchParams } from "expo-router";
 
 export default function InvestmentInvestor() {
   const { id } = useLocalSearchParams();
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadingList, setLoadingList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [id])
-  );
-
-  const onLoadList = async () => {
-    try {
-      setLoadingList(true);
-      const response = await apiInvestmentGetInvestorById({
-        id: id as string,
-      })
-      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingList(false);
-    }
-  }
-
-
+  
   return (
-    <>
-      <ViewWrapper>
-        {loadingList ? (
-          <LoaderCustom />
-        ) : _.isEmpty(list) ? (
-          <NoDataText />
-        ) : (
-          list?.map((item: any, index: number) => (
-            <BoxWithHeaderSection key={index}>
-              <AvatarUsernameAndOtherComponent
-                avatar={item?.Author?.Profile?.imageId}
-                name={item?.Author?.username}
-                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
-              />
-              <TextCustom bold>
-                Rp. {formatCurrencyDisplay(item?.nominal)}
-              </TextCustom>
-            </BoxWithHeaderSection>
-          ))
-        )}
-      </ViewWrapper>
-    </>
+    <Investment_ScreenInvestor investmentId={id as string} />
   );
 }