@pattern-stack/frontend-patterns 0.2.0-alpha.18 → 0.2.0-alpha.19

package/dist/index.js

@@ -19090,20 +19090,50 @@ function createEntityHooks(config) {
     /** Key for a specific entity detail query */
     detail: (id) => [...keys.details(), id]
   };
-  function useListSync(filters) {
+  const DEFAULT_PAGE_SIZE = 50;
+  function toPage(raw, requestedPage, requestedPageSize) {
+    if (Array.isArray(raw)) {
+      const items2 = raw;
+      return {
+        items: items2,
+        page: requestedPage,
+        pageCount: 1,
+        total: items2.length,
+        pageSize: requestedPageSize || items2.length || DEFAULT_PAGE_SIZE,
+        nextCursor: null
+      };
+    }
+    const env2 = raw ?? {};
+    const items = Array.isArray(env2.items) ? env2.items : [];
+    const pageSize = typeof env2.pageSize === "number" && env2.pageSize > 0 ? env2.pageSize : requestedPageSize || DEFAULT_PAGE_SIZE;
+    const total = typeof env2.total === "number" ? env2.total : items.length;
+    const pageCount = typeof env2.pageCount === "number" ? env2.pageCount : Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+    return {
+      items,
+      page: typeof env2.page === "number" ? env2.page : requestedPage,
+      pageCount,
+      total,
+      pageSize,
+      nextCursor: env2.nextCursor ?? null
+    };
+  }
+  function useListSync(params, requestedPage, requestedPageSize) {
     const query = reactQuery.useQuery({
-      queryKey: keys.list(filters),
-      queryFn: () => api.list(filters),
+      queryKey: keys.list(params),
+      queryFn: () => api.list(params),
       staleTime
     });
+    const pageEnvelope = React.useMemo(
+      () => query.data === void 0 ? void 0 : toPage(query.data, requestedPage, requestedPageSize),
+      [query.data, requestedPage, requestedPageSize]
+    );
     React.useEffect(() => {
       var _a, _b;
-      if (query.data) {
-        const items = Array.isArray(query.data) ? query.data : query.data.items || [];
-        (_b = (_a = collection.utils) == null ? void 0 : _a.writeUpsert) == null ? void 0 : _b.call(_a, items);
+      if (pageEnvelope) {
+        (_b = (_a = collection.utils) == null ? void 0 : _a.writeUpsert) == null ? void 0 : _b.call(_a, pageEnvelope.items);
       }
-    }, [query.data]);
-    return query;
+    }, [pageEnvelope]);
+    return { query, pageEnvelope };
   }
   function useGetSync(id) {
     const query = reactQuery.useQuery({
@@ -19121,41 +19151,71 @@ function createEntityHooks(config) {
     return query;
   }
   function useList(options = {}) {
-    const { where, orderBy, enabled = true } = options;
-    const sync = useListSync(enabled ? where : void 0);
+    const { where, orderBy, enabled = true, pageSize, cursor } = options;
+    const [page, setPageState] = React.useState(() => Math.max(1, options.page ?? 1));
+    const params = React.useMemo(() => {
+      if (!enabled) return void 0;
+      const p = { page };
+      if (pageSize !== void 0) p.pageSize = pageSize;
+      if (cursor !== void 0) p.cursor = cursor;
+      if (orderBy) {
+        p.sort_by = orderBy.field;
+        p.sort_order = orderBy.direction;
+      }
+      if (where) Object.assign(p, where);
+      return p;
+    }, [enabled, page, pageSize, cursor, orderBy, where]);
+    const { query: sync, pageEnvelope } = useListSync(params, page, pageSize ?? DEFAULT_PAGE_SIZE);
+    const pageIds = React.useMemo(() => {
+      if (!pageEnvelope) return [];
+      return pageEnvelope.items.map((item) => item.id).filter((id) => typeof id === "string");
+    }, [pageEnvelope]);
     const liveResult = reactDb.useLiveQuery(collection);
     const data = React.useMemo(() => {
-      let items = liveResult.data ?? [];
-      if (where) {
-        items = items.filter((item) => {
-          return Object.entries(where).every(([key, value]) => {
-            if (value === void 0) return true;
-            const itemValue = item[key];
-            if (Array.isArray(value)) {
-              return value.includes(itemValue);
-            }
-            return itemValue === value;
-          });
-        });
+      var _a, _b;
+      const live = liveResult.data ?? [];
+      const byId = /* @__PURE__ */ new Map();
+      for (const row of live) {
+        const id = row.id;
+        if (typeof id === "string") byId.set(id, row);
       }
-      if (orderBy) {
-        items = [...items].sort((a, b) => {
-          const aVal = a[orderBy.field];
-          const bVal = b[orderBy.field];
-          if (aVal < bVal) return orderBy.direction === "asc" ? -1 : 1;
-          if (aVal > bVal) return orderBy.direction === "asc" ? 1 : -1;
-          return 0;
-        });
+      const rows = [];
+      for (const id of pageIds) {
+        const row = byId.get(id) ?? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ((_b = (_a = collection.state) == null ? void 0 : _a.get) == null ? void 0 : _b.call(_a, id));
+        if (row !== void 0) rows.push(row);
       }
-      return items;
-    }, [liveResult.data, where, orderBy]);
+      return rows;
+    }, [liveResult.data, pageIds]);
+    const pageCount = (pageEnvelope == null ? void 0 : pageEnvelope.pageCount) ?? 1;
+    const total = (pageEnvelope == null ? void 0 : pageEnvelope.total) ?? data.length;
+    const resolvedPageSize = (pageEnvelope == null ? void 0 : pageEnvelope.pageSize) ?? pageSize ?? DEFAULT_PAGE_SIZE;
+    const currentPage = (pageEnvelope == null ? void 0 : pageEnvelope.page) ?? page;
+    const setPage = React.useCallback(
+      (next2) => {
+        const clamped = Math.max(1, pageCount > 0 ? Math.min(next2, pageCount) : next2);
+        setPageState(clamped);
+      },
+      [pageCount]
+    );
+    const next = React.useCallback(() => setPage(page + 1), [setPage, page]);
+    const prev = React.useCallback(() => setPage(page - 1), [setPage, page]);
     return {
       data,
       isLoading: sync.isLoading || liveResult.isLoading,
       isError: sync.isError,
       error: sync.error,
       refetch: sync.refetch,
-      collection
+      collection,
+      page: currentPage,
+      pageCount,
+      total,
+      pageSize: resolvedPageSize,
+      setPage,
+      next,
+      prev,
+      hasNext: currentPage < pageCount,
+      hasPrev: currentPage > 1
     };
   }
   function useGet(id, options = {}) {