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>
280 lines
5.3 KiB
TypeScript
280 lines
5.3 KiB
TypeScript
import { apiConfig } from "../api-config";
|
|
|
|
export async function apiInvestmentCreate({ data }: { data: any }) {
|
|
try {
|
|
const response = await apiConfig.post(`/mobile/investment`, {
|
|
data: data,
|
|
});
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetByStatus({
|
|
authorId,
|
|
status,
|
|
page = "1",
|
|
}: {
|
|
authorId: string;
|
|
status: string;
|
|
page?: string;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.get(
|
|
`/mobile/investment/${authorId}/${status}?page=${page}`
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetOne({ id }: { id: string }) {
|
|
try {
|
|
const response = await apiConfig.get(`/mobile/investment/${id}`);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentUpdateStatus({
|
|
id,
|
|
status,
|
|
}: {
|
|
id: string;
|
|
status: "publish" | "draft" | "review" | "reject";
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.put(`/mobile/investment/${id}/${status}`);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentDelete({ id }: { id: string }) {
|
|
try {
|
|
const response = await apiConfig.delete(`/mobile/investment/${id}`);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentUpdateData({
|
|
id,
|
|
data,
|
|
category,
|
|
}: {
|
|
id: string;
|
|
data: any;
|
|
category: "data" | "prospectus";
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.put(
|
|
`/mobile/investment/${id}?category=${category}`,
|
|
{
|
|
data: data,
|
|
}
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentUpsertDocument({
|
|
id,
|
|
data,
|
|
}: {
|
|
id: string;
|
|
data: any;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.post(`/mobile/investment/${id}/document`, {
|
|
data: data,
|
|
});
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetDocument({
|
|
id,
|
|
category,
|
|
page = "1",
|
|
}: {
|
|
id: string;
|
|
category: "one-document" | "all-document";
|
|
page?: string;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.get(
|
|
`/mobile/investment/${id}/document?category=${category}&page=${page}`
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentDeleteDocument({ id }: { id: string }) {
|
|
try {
|
|
const response = await apiConfig.delete(
|
|
`/mobile/investment/${id}/document`
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetAll({
|
|
category,
|
|
authorId,
|
|
page = "1",
|
|
}: {
|
|
category: "my-holding" | "bursa";
|
|
authorId?: string;
|
|
page?: string;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.get(
|
|
`/mobile/investment?category=${category}${
|
|
authorId ? `&authorId=${authorId}` : ""
|
|
}&page=${page}`
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentCreateInvoice({
|
|
id,
|
|
data,
|
|
}: {
|
|
id: string;
|
|
data: any;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.post(`/mobile/investment/${id}/invoice`, {
|
|
data: data,
|
|
});
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetInvoice({
|
|
id,
|
|
authorId,
|
|
category,
|
|
page = "1",
|
|
}: {
|
|
id?: string;
|
|
authorId?: string;
|
|
category: "my-invest" | "transaction" | "invoice";
|
|
page?: string;
|
|
}) {
|
|
const categoryQuery = `?category=${category}`;
|
|
const authorIdQuery = authorId ? `&authorId=${authorId}` : "";
|
|
const pageQuery = `&page=${page}`;
|
|
try {
|
|
const response = await apiConfig.get(
|
|
`/mobile/investment/${id}/invoice${categoryQuery}${authorIdQuery}${pageQuery}`
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentUpdateInvoice({
|
|
id,
|
|
data,
|
|
status,
|
|
}: {
|
|
id: string;
|
|
data: {
|
|
imageId?: string;
|
|
};
|
|
status: "berhasil" | "gagal" | "proses" | "menunggu";
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.put(
|
|
`/mobile/investment/${id}/invoice?status=${status}`,
|
|
{
|
|
data: data,
|
|
}
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentCreateNews({
|
|
id,
|
|
data,
|
|
}: {
|
|
id: string;
|
|
data: any;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.post(`/mobile/investment/${id}/news`, {
|
|
data: data,
|
|
});
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetNews({
|
|
id,
|
|
category,
|
|
page = "1",
|
|
}: {
|
|
id: string;
|
|
category: "all-news" | "one-news";
|
|
page?: string;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.get(
|
|
`/mobile/investment/${id}/news?category=${category}&page=${page}`
|
|
);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentDeleteNews({ id }: { id: string }) {
|
|
try {
|
|
const response = await apiConfig.delete(`/mobile/investment/${id}/news`);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
export async function apiInvestmentGetInvestorById({
|
|
id,
|
|
page = "1",
|
|
}: {
|
|
id: string;
|
|
page?: string;
|
|
}) {
|
|
try {
|
|
const response = await apiConfig.get(`/mobile/investment/${id}/investor?page=${page}`);
|
|
return response.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|