feat: titles page

modules/frontend/src/components/ListView/useListView.tsx

@@ -0,0 +1,37 @@
+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,
+  };
+}