@peerbit/react 0.0.15 → 0.0.16

package/lib/esm/index.d.ts

@@ -3,6 +3,7 @@ export * from "./utils.js";
 export { FastMutex } from "./lockstorage.js";
 export { useProgram } from "./useProgram.js";
 export { useLocal } from "./useLocal.js";
+export { useLocalPaginated } from "./useLocalPaginated.js";
 export { useOnline } from "./useOnline.js";
 export { useCount } from "./useCount.js";
 export { debounceLeadingTrailing } from "./utils.js";

package/lib/esm/index.js

@@ -3,6 +3,7 @@ export * from "./utils.js";
 export { FastMutex } from "./lockstorage.js";
 export { useProgram } from "./useProgram.js";
 export { useLocal } from "./useLocal.js";
+export { useLocalPaginated } from "./useLocalPaginated.js";
 export { useOnline } from "./useOnline.js";
 export { useCount } from "./useCount.js";
 export { debounceLeadingTrailing } from "./utils.js";

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,EACX,OAAO,EACP,eAAe,GAClB,MAAM,cAAc,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,EACX,OAAO,EACP,eAAe,GAClB,MAAM,cAAc,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC"}

package/lib/esm/useLocal.d.ts

@@ -13,6 +13,8 @@ export declare const useLocal: <T extends Record<string, any>, I extends Record<
     transform?: (result: RT) => Promise<RT>;
     onChanges?: (all: RT[]) => void;
     debounce?: number;
-    debug?: boolean;
+    debug?: boolean | {
+        id: string;
+    };
 } & QueryOptons) => RT[];
 export {};

package/lib/esm/useLocal.js

@@ -5,7 +5,8 @@ export const useLocal = (db, options) => {
     const [all, setAll] = useState([]);
     const emptyResultsRef = useRef(false);
     useEffect(() => {
-        if (!db || db.closed) {
+        if (!db || db.closed || options?.query === null) {
+            // null query means no query at all
             return;
         }
         const _l = async (args) => {
@@ -19,6 +20,12 @@ export const useLocal = (db, options) => {
                 if (options?.transform) {
                     results = await Promise.all(results.map((x) => options.transform(x)));
                 }
+                if (options?.debug) {
+                    let dbgId = typeof options.debug === "boolean"
+                        ? undefined
+                        : options.debug.id;
+                    console.log(dbgId ? "fetched " + dbgId : "fetched", results, "query", options?.query);
+                }
                 emptyResultsRef.current = results.length === 0;
                 setAll(() => {
                     options?.onChanges?.(results);
@@ -33,9 +40,6 @@ export const useLocal = (db, options) => {
             }
         };
         const debounced = debounceLeadingTrailing(_l, options?.debounce ?? 1000);
-        let ts = setTimeout(() => {
-            _l();
-        }, 3000);
         const handleChange = () => {
             if (emptyResultsRef.current) {
                 debounced.cancel();
@@ -50,7 +54,6 @@ export const useLocal = (db, options) => {
         return () => {
             db.events.removeEventListener("change", handleChange);
             debounced.cancel();
-            clearTimeout(ts);
         };
     }, [
         db?.closed ? undefined : db?.rootAddress,

package/lib/esm/useLocal.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLocal.js","sourceRoot":"","sources":["../../src/useLocal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLocal.js","sourceRoot":"","sources":["../../src/useLocal.tsx"],"names":[],"mappings":"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"}

package/lib/esm/useLocalPaginated.d.ts

@@ -0,0 +1,27 @@
+import { Documents, WithContext } from "@peerbit/document";
+import * as indexerTypes from "@peerbit/indexer-interface";
+type QueryLike = {
+    query?: indexerTypes.Query[] | indexerTypes.QueryLike;
+    sort?: indexerTypes.Sort[] | indexerTypes.Sort | indexerTypes.SortLike;
+};
+type QueryOptions = {
+    query: QueryLike;
+    id: string;
+};
+export declare const useLocalPaginated: <T extends Record<string, any>, I extends Record<string, any>, R extends boolean | undefined = true, RT = R extends false ? WithContext<I> : WithContext<T>>(db?: Documents<T, I>, options?: {
+    resolve?: R;
+    transform?: (result: WithContext<RT>) => Promise<WithContext<RT>>;
+    onChanges?: (all: RT[]) => void;
+    debounce?: number;
+    debug?: boolean | {
+        id: string;
+    };
+    reverse?: boolean;
+    batchSize?: number;
+} & QueryOptions) => {
+    items: WithContext<RT>[];
+    loadMore: () => Promise<void>;
+    isLoading: boolean;
+    empty: boolean;
+};
+export {};

package/lib/esm/useLocalPaginated.js

@@ -0,0 +1,135 @@
+import { useState, useEffect, useRef } from "react";
+import { ClosedError, } from "@peerbit/document";
+export const useLocalPaginated = (db, options) => {
+    const [all, setAll] = useState([]);
+    const allRef = useRef([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const iteratorRef = useRef(null);
+    const emptyResultsRef = useRef(false);
+    const updateAll = (combined) => {
+        if (options?.onChanges) {
+            options?.onChanges?.(combined);
+        }
+        if (options?.debug) {
+            let dbgId = typeof options.debug === "boolean"
+                ? undefined
+                : options.debug.id;
+            console.log("Loading more items, new combined length", dbgId, combined.length);
+        }
+        const dedub = new Set();
+        for (const item of combined) {
+            if ("idString" in item) {
+                if (dedub.has(item.idString)) {
+                    throw new Error("Duplicate item found in iterator");
+                }
+                dedub.add(item.idString);
+            }
+        }
+        allRef.current = combined;
+        setAll(combined);
+    };
+    // Initialize the iterator only once or when query changes
+    useEffect(() => {
+        if (!db || db.closed || options?.query === null) {
+            return;
+        }
+        const initIterator = () => {
+            try {
+                // Initialize the iterator and load initial batch.
+                emptyResultsRef.current = false;
+                iteratorRef.current?.close();
+                iteratorRef.current = db.index.iterate(options?.query ?? {}, {
+                    local: true,
+                    remote: false,
+                    resolve: options?.resolve,
+                }); // TODO types
+                if (options?.debug) {
+                    let dbgId = typeof options.debug === "boolean"
+                        ? undefined
+                        : options.debug.id;
+                    console.log("Create new iterator", dbgId);
+                }
+                loadMore(); // initial load
+            }
+            catch (error) {
+                console.error("Error initializing iterator", error);
+            }
+        };
+        // Reset state when the db or query changes.
+        console.log("RESET FROM", all.length);
+        setAll([]);
+        allRef.current = [];
+        initIterator();
+        const handleChange = async (e) => {
+            // while we are iterating, we might get new documents.. so this method inserts them where they should be
+            let merged = await db.index.updateResults(allRef.current, e.detail, options?.query || {}, options?.resolve ?? true);
+            console.log("merge result", "change: " +
+                (merged === allRef.current &&
+                    merged.length &&
+                    allRef.current.length === 0), merged, all, e.detail, allRef.current);
+            if (merged === allRef.current &&
+                merged.length &&
+                allRef.current.length === 0) {
+                // no change
+            }
+            else {
+                updateAll(options?.reverse ? merged.reverse() : merged);
+            }
+        };
+        db.events.addEventListener("change", handleChange);
+        return () => {
+            db.events.removeEventListener("change", handleChange);
+            iteratorRef.current?.close();
+        };
+    }, [
+        db?.closed ? undefined : db?.rootAddress,
+        options?.id,
+        options?.query,
+        options?.resolve,
+    ]);
+    // Define the loadMore function
+    const loadMore = async () => {
+        if (!iteratorRef.current || isLoading || emptyResultsRef.current)
+            return;
+        setIsLoading(true);
+        try {
+            // Fetch next batchSize number of items:
+            let refBefore = iteratorRef.current;
+            let newItems = await iteratorRef.current.next(options?.batchSize ?? 10);
+            if (options?.transform) {
+                newItems = await Promise.all(newItems.map((item) => options.transform(item)));
+            }
+            if (iteratorRef.current !== refBefore) {
+                // If the iterator has changed, we should not update the state
+                // This can happen if the iterator was closed and a new one was created
+                return;
+            }
+            emptyResultsRef.current = newItems.length === 0;
+            if (newItems.length > 0) {
+                let prev = allRef.current;
+                let prevHash = new Set(prev.map((x) => x.__context.head));
+                let newItemsNoHash = newItems.filter((x) => !prevHash.has(x.__context.head));
+                if (newItemsNoHash.length === 0) {
+                    return;
+                }
+                const combined = options?.reverse
+                    ? [...newItemsNoHash.reverse(), ...prev]
+                    : [...prev, ...newItemsNoHash];
+                updateAll(combined);
+            }
+        }
+        catch (error) {
+            if (error instanceof ClosedError) {
+                // Handle closed database gracefully
+            }
+            else {
+                throw error;
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return { items: all, loadMore, isLoading, empty: emptyResultsRef.current };
+};
+//# sourceMappingURL=useLocalPaginated.js.map

package/lib/esm/useLocalPaginated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalPaginated.js","sourceRoot":"","sources":["../../src/useLocalPaginated.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@peerbit/react",
-    "version": "0.0.15",
+    "version": "0.0.16",
     "homepage": "https://dao-xyz.github.io/peerbit-examples",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -70,5 +70,5 @@
             "last 1 safari version"
         ]
     },
-    "gitHead": "bbc31ba767abdd37bc0b44c000910555b42dfd78"
+    "gitHead": "1b0737b523b88552b08edd24a7a967a61b4af163"
 }

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./utils.js";
 export { FastMutex } from "./lockstorage.js";
 export { useProgram } from "./useProgram.js";
 export { useLocal } from "./useLocal.js";
+export { useLocalPaginated } from "./useLocalPaginated.js";
 export { useOnline } from "./useOnline.js";
 export { useCount } from "./useCount.js";
 export { debounceLeadingTrailing } from "./utils.js";

package/src/useLocal.tsx

@@ -24,14 +24,15 @@ export const useLocal = <
         transform?: (result: RT) => Promise<RT>;
         onChanges?: (all: RT[]) => void;
         debounce?: number;
-        debug?: boolean; // add debug option here
+        debug?: boolean | { id: string };
     } & QueryOptons
 ) => {
     const [all, setAll] = useState<RT[]>([]);
     const emptyResultsRef = useRef(false);
 
     useEffect(() => {
-        if (!db || db.closed) {
+        if (!db || db.closed || options?.query === null) {
+            // null query means no query at all
             return;
         }
 
@@ -50,6 +51,18 @@ export const useLocal = <
                         results.map((x) => options.transform!(x))
                     );
                 }
+                if (options?.debug) {
+                    let dbgId =
+                        typeof options.debug === "boolean"
+                            ? undefined
+                            : options.debug.id;
+                    console.log(
+                        dbgId ? "fetched " + dbgId : "fetched",
+                        results,
+                        "query",
+                        options?.query
+                    );
+                }
                 emptyResultsRef.current = results.length === 0;
                 setAll(() => {
                     options?.onChanges?.(results);
@@ -68,10 +81,6 @@ export const useLocal = <
             options?.debounce ?? 1000
         );
 
-        let ts = setTimeout(() => {
-            _l();
-        }, 3000);
-
         const handleChange = () => {
             if (emptyResultsRef.current) {
                 debounced.cancel();
@@ -87,7 +96,6 @@ export const useLocal = <
         return () => {
             db.events.removeEventListener("change", handleChange);
             debounced.cancel();
-            clearTimeout(ts);
         };
     }, [
         db?.closed ? undefined : db?.rootAddress,

package/src/useLocalPaginated.tsx

@@ -0,0 +1,208 @@
+import { useState, useEffect, useRef } from "react";
+import {
+    ClosedError,
+    Documents,
+    DocumentsChange,
+    ResultsIterator,
+    SearchRequest,
+    SearchRequestIndexed,
+    WithContext,
+} from "@peerbit/document";
+import * as indexerTypes from "@peerbit/indexer-interface";
+
+type QueryLike = {
+    query?: indexerTypes.Query[] | indexerTypes.QueryLike;
+    sort?: indexerTypes.Sort[] | indexerTypes.Sort | indexerTypes.SortLike;
+};
+type QueryOptions = { query: QueryLike; id: string };
+
+export const useLocalPaginated = <
+    T extends Record<string, any>,
+    I extends Record<string, any>,
+    R extends boolean | undefined = true,
+    RT = R extends false ? WithContext<I> : WithContext<T>
+>(
+    db?: Documents<T, I>,
+    options?: {
+        resolve?: R;
+        transform?: (result: WithContext<RT>) => Promise<WithContext<RT>>;
+        onChanges?: (all: RT[]) => void;
+        debounce?: number;
+        debug?: boolean | { id: string };
+        reverse?: boolean;
+        batchSize?: number; // You can set a default batch size here
+    } & QueryOptions
+) => {
+    const [all, setAll] = useState<WithContext<RT>[]>([]);
+    const allRef = useRef<WithContext<RT>[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const iteratorRef = useRef<ResultsIterator<WithContext<RT>> | null>(null);
+    const emptyResultsRef = useRef(false);
+
+    const updateAll = (combined: WithContext<RT>[]) => {
+        if (options?.onChanges) {
+            options?.onChanges?.(combined);
+        }
+
+        if (options?.debug) {
+            let dbgId =
+                typeof options.debug === "boolean"
+                    ? undefined
+                    : options.debug.id;
+            console.log(
+                "Loading more items, new combined length",
+                dbgId,
+                combined.length
+            );
+        }
+
+        const dedub = new Set<string>();
+        for (const item of combined) {
+            if ("idString" in item) {
+                if (dedub.has(item.idString as string)) {
+                    throw new Error("Duplicate item found in iterator");
+                }
+                dedub.add(item.idString as string);
+            }
+        }
+        allRef.current = combined;
+
+        setAll(combined);
+    };
+
+    // Initialize the iterator only once or when query changes
+    useEffect(() => {
+        if (!db || db.closed || options?.query === null) {
+            return;
+        }
+        const initIterator = () => {
+            try {
+                // Initialize the iterator and load initial batch.
+
+                emptyResultsRef.current = false;
+                iteratorRef.current?.close();
+                iteratorRef.current = db.index.iterate(options?.query ?? {}, {
+                    local: true,
+                    remote: false,
+                    resolve: options?.resolve as any,
+                }) as any as ResultsIterator<WithContext<RT>>; // TODO types
+
+                if (options?.debug) {
+                    let dbgId =
+                        typeof options.debug === "boolean"
+                            ? undefined
+                            : options.debug.id;
+                    console.log("Create new iterator", dbgId);
+                }
+
+                loadMore(); // initial load
+            } catch (error) {
+                console.error("Error initializing iterator", error);
+            }
+        };
+
+        // Reset state when the db or query changes.
+
+        console.log("RESET FROM", all.length);
+        setAll([]);
+        allRef.current = [];
+
+        initIterator();
+
+        const handleChange = async (e: CustomEvent<DocumentsChange<T>>) => {
+            // while we are iterating, we might get new documents.. so this method inserts them where they should be
+            let merged = await db.index.updateResults(
+                allRef.current,
+                e.detail,
+                options?.query || {},
+                options?.resolve ?? true
+            );
+            console.log(
+                "merge result",
+                "change: " +
+                    (merged === allRef.current &&
+                        merged.length &&
+                        allRef.current.length === 0),
+                merged,
+                all,
+                e.detail,
+                allRef.current
+            );
+            if (
+                merged === allRef.current &&
+                merged.length &&
+                allRef.current.length === 0
+            ) {
+                // no change
+            } else {
+                updateAll(options?.reverse ? merged.reverse() : merged);
+            }
+        };
+
+        db.events.addEventListener("change", handleChange);
+        return () => {
+            db.events.removeEventListener("change", handleChange);
+            iteratorRef.current?.close();
+        };
+    }, [
+        db?.closed ? undefined : db?.rootAddress,
+        options?.id,
+        options?.query,
+        options?.resolve,
+    ]);
+
+    // Define the loadMore function
+    const loadMore = async () => {
+        if (!iteratorRef.current || isLoading || emptyResultsRef.current)
+            return;
+
+        setIsLoading(true);
+        try {
+            // Fetch next batchSize number of items:
+            let refBefore = iteratorRef.current;
+
+            let newItems: WithContext<RT>[] = await iteratorRef.current.next(
+                options?.batchSize ?? 10
+            );
+
+            if (options?.transform) {
+                newItems = await Promise.all(
+                    newItems.map((item) => options.transform!(item))
+                );
+            }
+
+            if (iteratorRef.current !== refBefore) {
+                // If the iterator has changed, we should not update the state
+                // This can happen if the iterator was closed and a new one was created
+                return;
+            }
+
+            emptyResultsRef.current = newItems.length === 0;
+
+            if (newItems.length > 0) {
+                let prev = allRef.current;
+                let prevHash = new Set(prev.map((x) => x.__context.head));
+                let newItemsNoHash = newItems.filter(
+                    (x) => !prevHash.has(x.__context.head)
+                );
+                if (newItemsNoHash.length === 0) {
+                    return;
+                }
+                const combined = options?.reverse
+                    ? [...newItemsNoHash.reverse(), ...prev]
+                    : [...prev, ...newItemsNoHash];
+                updateAll(combined);
+            }
+        } catch (error) {
+            if (error instanceof ClosedError) {
+                // Handle closed database gracefully
+            } else {
+                throw error;
+            }
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return { items: all, loadMore, isLoading, empty: emptyResultsRef.current };
+};