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>
2026-02-09 14:38:55 +08:00
parent 83fa277e03
commit 38a6b424e8
17 changed files with 868 additions and 345 deletions
--- a/screens/Invesment/News/BoxNews.tsx
+++ b/screens/Invesment/News/BoxNews.tsx
@@ -0,0 +1,13 @@
+import { BaseBox, Spacing, TextCustom } from "@/components";
+
+export default function Investment_BoxNews({ item }: { item: { id: string; title: string } }) {
+  return (
+    <>
+      <BaseBox paddingBlock={5} href={`/investment/[id]/(news)/${item.id}`}>
+        <Spacing height={10} />
+        <TextCustom bold truncate={2}>{item.title}</TextCustom>
+        <Spacing height={10} />
+      </BaseBox>
+    </>
+  );
+}
--- a/screens/Invesment/News/ScreenListOfNews.tsx
+++ b/screens/Invesment/News/ScreenListOfNews.tsx
@@ -0,0 +1,109 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import { router, Stack, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { RefreshControl } from "react-native";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import Investment_BoxNews from "./BoxNews";
+
+interface InvestmentListOfNewsProps {
+  investmentId: string;
+}
+
+export default function Investment_ScreenListOfNews({
+  investmentId,
+}: InvestmentListOfNewsProps) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiInvestmentGetNews({
+        id: investmentId,
+        category: "all-news",
+        page: String(page),
+      });
+    },
+    pageSize: 10, // Sesuaikan dengan jumlah item per halaman dari API
+    dependencies: [investmentId],
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, [investmentId]),
+  );
+
+  const renderItem = ({ item, index }: { item: any; index: number }) => (
+    <Investment_BoxNews key={index} item={item} />
+  );
+
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      isInitialLoad: pagination.isInitialLoad,
+      emptyMessage: "Tidak ada berita",
+      skeletonCount: 5,
+      skeletonHeight: 80,
+      loadingFooterText: "Memuat lebih banyak berita...",
+    });
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Berita",
+          headerLeft: () => <BackButton />,
+          //   headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+
+      <NewWrapper
+        hideFooter
+        listData={pagination.listData}
+        renderItem={renderItem}
+        onEndReached={pagination.loadMore}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+          />
+        }
+      />
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${investmentId}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
--- a/screens/Invesment/News/ScreenRecapOfNews.tsx
+++ b/screens/Invesment/News/ScreenRecapOfNews.tsx
@@ -0,0 +1,110 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  TextCustom,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import { router, Stack, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { RefreshControl } from "react-native";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import Investment_BoxNews from "./BoxNews";
+
+interface InvestmentRecapOfNewsProps {
+  investmentId: string;
+}
+
+export default function Investment_ScreenRecapOfNews({
+  investmentId,
+}: InvestmentRecapOfNewsProps) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiInvestmentGetNews({
+        id: investmentId,
+        category: "all-news",
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman dari API
+    dependencies: [investmentId],
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, [investmentId]),
+  );
+
+  const renderItem = ({ item, index }: { item: any; index: number }) => (
+    <Investment_BoxNews key={index} item={item} />
+  );
+
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      isInitialLoad: pagination.isInitialLoad,
+      emptyMessage: "Tidak ada berita",
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 80,
+    });
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Berita",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <NewWrapper
+        hideFooter
+        listData={pagination.listData}
+        renderItem={renderItem}
+        onEndReached={pagination.loadMore}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+          />
+        }
+      />
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${investmentId}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}