37 lines
No EOL
994 B
TypeScript
37 lines
No EOL
994 B
TypeScript
import { useState, useEffect } from "react";
|
|
import type { FetchFunction } from "../../types/list";
|
|
|
|
export function useListView<TItem>(fetchFn: FetchFunction<TItem>) {
|
|
const [items, setItems] = useState<TItem[]>([]);
|
|
const [cursor, setCursor] = useState<string | undefined>();
|
|
const [search, setSearch] = useState("");
|
|
const [viewMode, setViewMode] = useState<"horizontal" | "square">("horizontal");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadItems(true);
|
|
}, [search]);
|
|
|
|
const loadItems = async (reset = false) => {
|
|
setIsLoading(true);
|
|
const result = await fetchFn({
|
|
search,
|
|
cursor: reset ? undefined : cursor,
|
|
});
|
|
|
|
setItems(prev => reset ? result.items : [...prev, ...result.items]);
|
|
setCursor(result.nextCursor);
|
|
setIsLoading(false);
|
|
};
|
|
|
|
return {
|
|
items,
|
|
search,
|
|
setSearch,
|
|
viewMode,
|
|
setViewMode,
|
|
loadMore: () => loadItems(),
|
|
hasMore: Boolean(cursor),
|
|
isLoading,
|
|
};
|
|
} |