feat: add pagination music
This commit is contained in:
@@ -51,6 +51,73 @@ export function useList<T = unknown>(
|
||||
return { data, loading, error, reload };
|
||||
}
|
||||
|
||||
export interface PageMeta {
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
per_page: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
// Paginated GET-list hook for Laravel paginator responses
|
||||
// ({ data, current_page, last_page, per_page, total }).
|
||||
export function usePaginated<T = unknown>(
|
||||
path: string | null,
|
||||
options?: { perPage?: number; query?: Query },
|
||||
): {
|
||||
data: T[];
|
||||
meta: PageMeta | null;
|
||||
page: number;
|
||||
setPage: (p: number) => void;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
reload: () => void;
|
||||
} {
|
||||
const perPage = options?.perPage ?? 20;
|
||||
const query = options?.query;
|
||||
const [page, setPage] = useState(1);
|
||||
const [data, setData] = useState<T[]>([]);
|
||||
const [meta, setMeta] = useState<PageMeta | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const queryKey = JSON.stringify(query ?? {});
|
||||
|
||||
const reload = useCallback(() => {
|
||||
if (!path) {
|
||||
setData([]);
|
||||
setMeta(null);
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
apiFetch(path, { query: { ...query, page, per_page: perPage } })
|
||||
.then((res) => {
|
||||
const r = (res ?? {}) as Record<string, unknown>;
|
||||
const rows = Array.isArray(r.data) ? (r.data as T[]) : [];
|
||||
setData(rows);
|
||||
setMeta({
|
||||
current_page: Number(r.current_page ?? page),
|
||||
last_page: Number(r.last_page ?? 1),
|
||||
per_page: Number(r.per_page ?? perPage),
|
||||
total: Number(r.total ?? rows.length),
|
||||
});
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
setError(e instanceof ApiError ? e.message : "خطا در دریافت اطلاعات");
|
||||
setData([]);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [path, page, perPage, queryKey]);
|
||||
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
return { data, meta, page, setPage, loading, error, reload };
|
||||
}
|
||||
|
||||
// Single-record GET hook.
|
||||
export function useItem<T = unknown>(path: string | null): {
|
||||
data: T | null;
|
||||
|
||||
Reference in New Issue
Block a user