Ringkasan Perubahan

1. Penambahan Pagination pada Fitur Admin Job
     - Menerapkan sistem pagination menggunakan hook usePagination dari hooks/use-pagination.tsx
     - Mengintegrasikan komponen-komponen pagination dari helpers/paginationHelpers.tsx
     - Menambahkan dukungan infinite scroll dan pull-to-refresh
     - Menambahkan loading state, skeleton loader, dan empty state

    2. Pembaruan Fungsi API
     - Memperbarui fungsi apiAdminJob di service/api-admin/api-admin-job.ts untuk mendukung parameter
       pagination
     - Menambahkan parameter page dengan nilai default 1

    3. Modularisasi Kode
     - Memindahkan komponen AdminJobStatus dari app/(application)/admin/job/[status]/status.tsx ke
       screens/Admin/Job/ScreenJobStatus.tsx
     - Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih fleksibel
     - Membuat komponen baru BoxStatusJob.tsx untuk memisahkan logika tampilan item pekerjaan
     - Menggunakan komponen BoxStatusJob di dalam ScreenJobStatus untuk menampilkan daftar pekerjaan

    4. Perbaikan Struktur dan Organisasi Kode
     - Mengorganisir ulang struktur folder untuk komponen admin job
     - Memisahkan tanggung jawab antara komponen layar dan komponen item
     - Mengoptimalkan performa dengan menggunakan useCallback dan useMemo

    File-file yang Diubah

     1. screens/Admin/Job/ScreenJobStatus.tsx - Implementasi utama dengan pagination
     2. screens/Admin/Job/BoxStatusJob.tsx - Komponen baru untuk menampilkan item pekerjaan
     3. service/api-admin/api-admin-job.ts - Penambahan parameter pagination
     4. app/(application)/admin/job/[status]/status.tsx - Diperbarui untuk menggunakan komponen baru

### NO Issue
This commit is contained in:
2026-02-14 11:57:27 +08:00
parent 42fa80c228
commit 1cbe4ab330
7 changed files with 151 additions and 128 deletions

View File

@@ -5,6 +5,7 @@ import {
BaseBox,
DummyLandscapeImage,
Grid,
NewWrapper,
Spacing,
StackCustom,
TextCustom,
@@ -120,7 +121,7 @@ export default function AdminJobDetailStatus() {
return (
<>
<ViewWrapper
<NewWrapper
headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
>
<BaseBox>
@@ -184,7 +185,7 @@ export default function AdminJobDetailStatus() {
/>
)}
<Spacing />
</ViewWrapper>
</NewWrapper>
</>
);
}

View File

@@ -2,6 +2,7 @@
import {
AlertDefaultSystem,
BoxButtonOnFooter,
NewWrapper,
TextAreaCustom,
ViewWrapper,
} from "@/components";
@@ -100,7 +101,7 @@ export default function AdminJobRejectInput() {
return (
<>
<ViewWrapper
<NewWrapper
footerComponent={buttonSubmit}
headerComponent={<AdminBackButtonAntTitle title="Penolakan Job" />}
>
@@ -112,7 +113,7 @@ export default function AdminJobRejectInput() {
showCount
maxLength={1000}
/>
</ViewWrapper>
</NewWrapper>
</>
);
}

View File

@@ -1,117 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
LoaderCustom,
SearchInput,
StackCustom,
TextCustom,
ViewWrapper
} from "@/components";
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
import { apiAdminJob } from "@/service/api-admin/api-admin-job";
import { Octicons } from "@expo/vector-icons";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import { Divider } from "react-native-paper";
import { Admin_ScreenJobStatus } from "@/screens/Admin/Job/ScreenJobStatus";
export default function AdminJobStatus() {
const { status } = useLocalSearchParams();
const [list, setList] = useState<any | null>(null);
const [loadList, setLoadList] = useState(false);
const [search, setSearch] = useState("");
useFocusEffect(
useCallback(() => {
handlerLoadList();
}, [status, search])
);
const handlerLoadList = async () => {
try {
setLoadList(true);
const response = await apiAdminJob({
category: status as "publish" | "review" | "reject",
search,
});
if (response.success) {
setList(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadList(false);
}
};
const rightComponent = (
<SearchInput
placeholder="Cari"
onChangeText={setSearch}
value={search}
/>
);
return (
<>
<ViewWrapper headerComponent={<AdminTitlePage title="Job Vacancy" />}>
<AdminComp_BoxTitle
title={`${_.startCase(status as string)}`}
rightComponent={rightComponent}
/>
<StackCustom>
<AdminTitleTable
title1="Aksi"
title2="Username"
title3="Judul Pekerjaan"
/>
{/* <Spacing /> */}
<Divider />
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom align="center" color="gray">
Tidak ada data
</TextCustom>
) : (
list?.map((item: any, index: number) => (
<AdminTableValue
key={index}
value1={
<ActionIcon
icon={
<Octicons
name="eye"
size={ICON_SIZE_BUTTON}
color="black"
/>
}
onPress={() => {
router.push(`/admin/job/${item.id}/${status}`);
}}
/>
}
value2={
<TextCustom align="center" truncate={1}>
{item?.Author?.username || "-"}
</TextCustom>
}
value3={
<TextCustom truncate={2} align="center">
{item?.title || "-"}
</TextCustom>
}
/>
))
)}
</StackCustom>
</ViewWrapper>
</>
);
return <Admin_ScreenJobStatus />;
}