@rebasepro/app 0.17.3 → 0.18.1

package/src/hooks/data/useCollection.tsx

@@ -1,183 +0,0 @@
-
-import { useEffect, useState, useMemo } from "react";
-import { Entity, FilterValues, User } from "@rebasepro/types";
-import { useData } from "./useData";
-import { isSchemaDriftError, useSchemaDriftContext } from "../../components/SchemaDriftBanner";
-import { toFindParams } from "./collectionQuery";
-import { getRelationIncludeParams } from "../../util/previews";
-import type { AdminCollection } from "@rebasepro/cms-types";
-/**
- * @group Hooks and utilities
- */
-export interface CollectionProps<M extends Record<string, any>> {
-
-    /**
-     * Absolute collection path
-     */
-    path: string;
-
-    /**
-     * collection of the entity displayed by this collection
-     */
-    collection: AdminCollection<M>
-
-    /**
-     * Number of entities to fetch
-     */
-    itemCount?: number;
-
-    /**
-     * Number of items to skip
-     */
-    offset?: number;
-
-    /**
-     * Page number (1-indexed), alternative to offset
-     */
-    page?: number;
-
-    /**
-     * Filter the fetched data by the property
-     */
-    filterValues?: FilterValues<Extract<keyof M, string>>;
-
-    /**
-     * Sort the results by
-     */
-    sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
-
-    /**
-     * Search string
-     */
-    searchString?: string;
-}
-
-/**
- * @group Hooks and utilities
- */
-export interface CollectionResult<M extends Record<string, any>> {
-    data: Entity<M>[];
-    dataLoading: boolean;
-    noMoreToLoad: boolean;
-    dataLoadingError?: Error;
-    totalCount?: number;
-}
-
-/**
- * This hook is used to fetch collections using a given collection
- * @param path
- * @param collection
- * @param filterValues
- * @param sortBy
- * @param itemCount
- * @param offset
- * @param page
- * @param searchString
- * @group Hooks and utilities
- */
-export function useCollection<M extends Record<string, any>, USER extends User>(
-    {
-        path,
-        collection,
-        filterValues,
-        sortBy,
-        itemCount,
-        offset,
-        page,
-        searchString
-    }: CollectionProps<M>): CollectionResult<M> {
-    const dataClient = useData();
-    const { reportSchemaDrift } = useSchemaDriftContext();
-
-    const sortByProperty = sortBy ? sortBy[0] : undefined;
-    const currentSort = sortBy ? sortBy[1] : undefined;
-    // Map to PostgREST format for orderBy
-    const orderByParams: [string, "asc" | "desc"] | undefined = sortBy ? [String(sortBy[0]), sortBy[1]] : undefined;
-
-    // filterValues is already FilterValues — pass directly
-    const whereParams = filterValues && Object.keys(filterValues).length > 0 ? filterValues : undefined;
-
-    const [data, setData] = useState<Entity<M>[]>([]);
-
-    const [dataLoading, setDataLoading] = useState<boolean>(false);
-    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
-    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
-    const [totalCount, setTotalCount] = useState<number | undefined>();
-
-    useEffect(() => {
-
-        setDataLoading(true);
-
-        const onEntitiesUpdate = async (res: { data: Entity<M>[], meta: { hasMore: boolean; total?: number } }) => {
-            const entities = res.data;
-            setDataLoading(false);
-            setDataLoadingError(undefined);
-            setData(entities.map(e => ({
-                ...e
-            })));
-            setNoMoreToLoad(!res.meta.hasMore);
-            setTotalCount(res.meta.total);
-        };
-
-        const onError = (error: Error) => {
-            console.error("ERROR", error);
-            setDataLoading(false);
-            setData([]);
-            setDataLoadingError(error);
-            setTotalCount(undefined);
-            // Report schema drift to the global banner context
-            if (isSchemaDriftError(error)) {
-                reportSchemaDrift(error.message);
-            }
-        };
-
-        const accessor = dataClient.collection(path);
-
-        // Eagerly include relations to avoid N+1 fetches.
-        const includeParams = getRelationIncludeParams(collection);
-
-        if (accessor.listen) {
-            // Assembled in one place — see `toFindParams`.
-            return accessor.listen(
-                toFindParams({ where: whereParams, limit: itemCount, offset, page,
-                    orderBy: orderByParams, searchString, include: includeParams }),
-                (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
-meta: res.meta }), onError);
-        } else {
-            // The one-shot fallback, taken whenever the client has no socket.
-            // `listen` above cancels on cleanup, and every dependency of this
-            // effect — the search string, the filters, the sort, the page —
-            // changes while a request is in flight. A promise cannot be
-            // unsubscribed, so the cleanup has to disown its result instead:
-            // without this, whichever response arrives last wins, and responses
-            // do not arrive in request order. Typing into search would settle
-            // on the results for whichever query the server happened to finish
-            // last.
-            let cancelled = false;
-            accessor.find(
-                toFindParams({ where: whereParams, limit: itemCount, offset, page,
-                    orderBy: orderByParams, searchString, include: includeParams }))
-                .then((res) => {
-                    if (cancelled) return;
-                    onEntitiesUpdate({ data: res.data as Entity<M>[],
-meta: res.meta });
-                })
-                .catch((e) => {
-                    if (cancelled) return;
-                    onError(e);
-                });
-            return () => {
-                cancelled = true;
-            };
-        }
-    }, [path, itemCount, offset, page, currentSort, sortByProperty, filterValues, searchString, dataClient, collection]);
-
-    return useMemo(() => ({
-        data,
-        dataLoading,
-        dataLoadingError,
-        noMoreToLoad,
-        totalCount
-    }), [data, dataLoading, dataLoadingError, noMoreToLoad, totalCount]);
-
-}

package/src/hooks/data/useData.tsx

@@ -1,18 +0,0 @@
-import { useContext } from "react";
-import { RebaseData } from "@rebasepro/types";
-import { RebaseDataContext } from "../../contexts/RebaseDataContext";
-
-/**
- * Use this hook to access the unified data API.
- *
- * ```ts
- * const data = useData();
- * const { data: products } = await data.products.find({ where: { status: ["==", "published"] } });
- * await data.products.create({ name: "Camera", price: 299 });
- * ```
- *
- * @group Hooks and utilities
- */
-export const useData = (): RebaseData => {
-    return useContext(RebaseDataContext);
-};

package/src/hooks/data/useDataOrder.ts

@@ -1,26 +0,0 @@
-import { Entity } from "@rebasepro/types";
-
-export interface DataOrderProps<M extends Record<string, any>> {
-    data: Entity<M>[];
-    entitiesDisplayedFirst?: Entity<M>[];
-}
-
-/**
- * This hook is used to have some entities at the beginning of data.
- * @param path
- * @param entitiesDisplayedFirst
- * @group Hooks and utilities
- */
-export function useDataOrder<M extends Record<string, any>>(
-    {
-        data,
-        entitiesDisplayedFirst
-    }: DataOrderProps<M>): Entity<M>[] {
-
-    if (!entitiesDisplayedFirst)
-        return data;
-
-    const displayedFirstId = new Set(entitiesDisplayedFirst.map((e) => e.id));
-    return [...entitiesDisplayedFirst, ...data.filter((e) => !displayedFirstId.has(e.id))];
-
-}

package/src/hooks/data/useFetch.tsx

@@ -1,156 +0,0 @@
-
-import { useEffect, useState, useMemo } from "react";
-import { Entity, User } from "@rebasepro/types";
-import { RebaseContext, AdminCollection } from "@rebasepro/cms-types";
-import { useData } from "./useData";
-import { useRebaseContext } from "../useRebaseContext";
-
-/**
- * @group Hooks and utilities
- */
-export interface FetchProps<M extends Record<string, any>, USER extends User = User> {
-    path: string;
-    entityId?: string | number;
-    databaseId?: string;
-    collection: AdminCollection<M, USER>;
-    useCache?: boolean;
-}
-
-/**
- * @group Hooks and utilities
- */
-export interface FetchResult<M extends Record<string, any>> {
-    entity?: Entity<M>,
-    dataLoading: boolean,
-    dataLoadingError?: Error
-}
-
-const CACHE: Record<string, Entity<any> | undefined> = {};
-
-/**
- * Pre-populate the entity fetch cache with entities loaded from a collection.
- * This allows entity detail views to render instantly using cached data,
- * while the background fetch/listener brings in fresh data.
- * @param path - The collection path (e.g. "products")
- * @param entities - Array of entities to cache
- */
-export function populateFetchCache<M extends Record<string, any>>(path: string, entities: Entity<M>[]): void {
-    for (const entity of entities) {
-        CACHE[`${path}/${entity.id}`] = entity;
-    }
-}
-
-/**
- * Clear the entity fetch cache. Call this on auth state changes (e.g. logout)
- * to prevent stale data from a previous session leaking into the next.
- */
-export function clearFetchCache(): void {
-    for (const key of Object.keys(CACHE)) {
-        delete CACHE[key];
-    }
-}
-
-/**
- * This hook is used to fetch a entity.
- * It gives real time updates if the driver supports it.
- * @param path
- * @param collection
- * @param entityId
- * @param useCache
- * @group Hooks and utilities
- */
-
-export function useFetch<M extends Record<string, any>, USER extends User = User>(
-    {
-        path,
-        entityId,
-        collection,
-        databaseId,
-        useCache = false
-    }: FetchProps<M, USER>): FetchResult<M> {
-
-    const dataClient = useData();
-
-    const context: RebaseContext<USER> = useRebaseContext();
-
-    // Seed initial state from the cache to avoid skeleton flashes.
-    // Even when useCache is false, we show cached data instantly while
-    // the background fetch/listener brings in fresh data.
-    const cacheKey = entityId ? `${path}/${entityId}` : undefined;
-    const cachedEntity = cacheKey ? CACHE[cacheKey] as Entity<M> | undefined : undefined;
-
-    const [entity, setEntity] = useState<Entity<M> | undefined>(cachedEntity);
-    const [dataLoading, setDataLoading] = useState<boolean>(!cachedEntity);
-    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
-
-    useEffect(() => {
-
-        // Only show loading state if we have no cached entity to display
-        if (!CACHE[`${path}/${entityId}`]) {
-            setDataLoading(true);
-        }
-
-        const onEntityUpdate = async (updatedEntity?: Entity<M> | null) => {
-            CACHE[`${path}/${entityId}`] = updatedEntity ?? undefined;
-            setEntity(updatedEntity ?? undefined);
-            setDataLoading(false);
-            setDataLoadingError(undefined);
-        };
-
-        const onError = (error: Error) => {
-            console.error("ERROR fetching entity", error);
-            setDataLoading(false);
-            setEntity(undefined);
-            setDataLoadingError(error);
-        };
-
-        if (entityId && useCache && CACHE[`${path}/${entityId}`]) {
-            setEntity(CACHE[`${path}/${entityId}`]);
-            setDataLoading(false);
-            setDataLoadingError(undefined);
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            return () => {
-            };
-        } else if (entityId && path && collection) {
-            const accessor = dataClient.collection(path);
-
-            if (accessor.listenById) {
-                return accessor.listenById(entityId, (entity) => onEntityUpdate(entity as Entity<M> | undefined), onError);
-            } else {
-                // The one-shot fallback, taken whenever the client has no
-                // socket. `listenById` above cancels on cleanup; a promise
-                // cannot, so the cleanup disowns its result instead. `entityId`
-                // is an effect dependency, and where this hook's caller is not
-                // remounted per record — the side panel replaces its contents
-                // in place — a slow response for the record just left would
-                // otherwise land on top of the one now showing.
-                let cancelled = false;
-                accessor.findById(entityId)
-                    .then((entity) => {
-                        if (cancelled) return;
-                        onEntityUpdate(entity as Entity<M> | undefined);
-                    })
-                    .catch((e) => {
-                        if (cancelled) return;
-                        onError(e);
-                    });
-                return () => {
-                    cancelled = true;
-                };
-            }
-        }
-        // if no entityId is provided we do nothing
-        else {
-            onEntityUpdate(undefined);
-            return () => {
-            };
-        }
-    }, [entityId, path, dataClient, collection, useCache, databaseId]);
-
-    return useMemo(() => ({
-        entity,
-        dataLoading,
-        dataLoadingError
-    }), [entity, dataLoading, dataLoadingError]);
-
-}

package/src/hooks/data/useRelationSelector.tsx

@@ -1,280 +0,0 @@
-
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { useData } from "./useData";
-import { Entity, EntityRelation, FilterValues } from "@rebasepro/types";
-import { getRelationIncludeParams } from "../../util/previews";
-import type { AdminCollection } from "@rebasepro/cms-types";
-export interface RelationItem {
-    id: string | number;
-    label: string;
-    description?: string;
-    data: Entity<any>;
-    relation: EntityRelation;
-}
-
-export interface UseRelationSelectorProps<M extends Record<string, any> = any> {
-    /**
-     * Full path where the relation data is located
-     */
-    path: string;
-    /**
-     * The collection that represents the relation entities
-     */
-    collection: AdminCollection<M>;
-    /**
-     * Force filter to be applied to the relation search
-     */
-    fixedFilter?: FilterValues<string>;
-    /**
-     * Page size for pagination
-     */
-    pageSize?: number;
-    /**
-     * Function to extract the label from a entity
-     */
-    getLabelFromEntity?: (entity: Entity<M>) => string;
-    /**
-     * Function to extract the description from a entity
-     */
-    getDescriptionFromEntity?: (entity: Entity<M>) => string | undefined;
-    /**
-     * Property name to use as the secondary display field
-     */
-    descriptionProperty?: keyof M;
-    /**
-     * Whether the list should be fetched at all. Defaults to `true`.
-     *
-     * A picker that is mounted is not a picker that is open, and the two used
-     * to be the same thing here: the fetch ran on mount, so a collection table
-     * with a relation column paid for one query — or one realtime subscription
-     * — per rendered row before anyone clicked a cell. Pass `false` until the
-     * list is actually needed and nothing is requested; flipping it to `true`
-     * fetches once, and it never goes back.
-     */
-    enabled?: boolean;
-}
-
-export interface RelationSelectorController {
-    items: RelationItem[];
-    isLoading: boolean;
-    error: Error | undefined;
-    search: (searchString: string) => void;
-    loadMore: () => void;
-    hasMore: boolean;
-    entityToRelationItem: (entity: Entity<any>, relation: EntityRelation) => RelationItem;
-}
-
-const DEFAULT_PAGE_SIZE = 10;
-
-/**
- * Hook to manage relation selection with data fetching from Rebase data source
- */
-export function useRelationSelector<M extends Record<string, any> = any>(
-    {
-        path,
-        collection,
-        fixedFilter,
-        pageSize = DEFAULT_PAGE_SIZE,
-        getLabelFromEntity,
-        getDescriptionFromEntity,
-        descriptionProperty,
-        enabled = true
-    }: UseRelationSelectorProps<M>
-): RelationSelectorController {
-
-    const dataClient = useData();
-
-    const [items, setItems] = useState<RelationItem[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const isLoadingRef = useRef(false);
-    const [error, setError] = useState<Error | undefined>();
-    const [hasMore, setHasMore] = useState(true);
-    const [currentSearch, setCurrentSearch] = useState<string>("");
-    const [limit, setLimit] = useState<number>(pageSize);
-
-    const unsubscribeRef = useRef<(() => void) | null>(null);
-    const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    // Whether a fetch has ever completed. Between `enabled` flipping and the
-    // effect running there is one paint with no items and no request in
-    // flight; without this the list shows "no results" for that frame.
-    const hasLoadedRef = useRef(false);
-
-    const setLoading = useCallback((loading: boolean) => {
-        isLoadingRef.current = loading;
-        setIsLoading(loading);
-    }, []);
-
-    // Function to convert entity to RelationItem
-    const entityToRelationItem = useCallback((entity: Entity<M>, relation?: EntityRelation): RelationItem => {
-        let label: string;
-        let description: string | undefined;
-
-        if (getLabelFromEntity) {
-            label = getLabelFromEntity(entity);
-        } else {
-            // Fallback: try common label properties
-            const commonLabelProps = ["name", "title", "label", "displayName"];
-            let foundProp: string | undefined;
-
-            if (entity.values) {
-                foundProp = commonLabelProps.find(prop => entity.values[prop] != null && entity.values[prop] !== "");
-            }
-
-            if (foundProp && entity.values[foundProp]) {
-                label = String(entity.values[foundProp]);
-            } else {
-                // Ultimate fallback: use entity ID
-                label = String(entity.id);
-            }
-        }
-
-        if (getDescriptionFromEntity) {
-            description = getDescriptionFromEntity(entity);
-        } else if (descriptionProperty && entity.values && entity.values[descriptionProperty]) {
-            description = String(entity.values[descriptionProperty]);
-        }
-
-        return {
-            id: entity.id,
-            label,
-            description,
-            data: entity,
-            relation: relation ? relation : new EntityRelation(entity.id, path)
-        };
-    }, [getLabelFromEntity, getDescriptionFromEntity, descriptionProperty]);
-
-    // Clean up any existing subscription
-    const cleanupSubscription = useCallback(() => {
-        if (unsubscribeRef.current) {
-            unsubscribeRef.current();
-            unsubscribeRef.current = null;
-        }
-    }, []);
-
-    // Eagerly include relations to avoid N+1 fetches. Referentially stable, so
-    // it can be a dependency below without re-triggering the fetch.
-    const includeParams = getRelationIncludeParams(collection);
-
-    const fetchData = useCallback(() => {
-        cleanupSubscription();
-        setError(undefined);
-        setLoading(true);
-
-        // fixedFilter is already FilterValues — pass directly
-        const whereParams = fixedFilter && Object.keys(fixedFilter).length > 0 ? fixedFilter : undefined;
-
-        const onEntitiesUpdate = (res: { data: Entity<M>[], meta: { hasMore: boolean } }) => {
-            const newItems = res.data.map((e) => entityToRelationItem(e));
-            hasLoadedRef.current = true;
-            setItems(newItems);
-            setHasMore(res.meta.hasMore);
-            setLoading(false);
-        };
-
-        const onErrorUpdate = (fetchError: Error) => {
-            console.error("useRelationSelector: Error fetching data:", fetchError);
-            hasLoadedRef.current = true;
-            setError(fetchError);
-            setLoading(false);
-        };
-
-        const accessor = dataClient.collection(path);
-
-        let unsubscribe: (() => void) | undefined;
-
-        if (accessor.listen) {
-            unsubscribe = accessor.listen({
-                where: whereParams,
-                limit: limit,
-                orderBy: undefined,
-                searchString: currentSearch,
-                include: includeParams
-            }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
-meta: res.meta }), onErrorUpdate);
-        } else {
-            // The one-shot fallback, taken whenever the client has no socket.
-            // `cleanupSubscription` is what keeps this hook's results matching
-            // the query that asked for them, and it can only do that if the
-            // fallback hands back something that actually cancels. A promise
-            // cannot be unsubscribed, so this disowns its result instead —
-            // otherwise the debounce is the only thing between a slow response
-            // for "ab" and its landing on top of the results for "abc".
-            let cancelled = false;
-            accessor.find({
-                where: whereParams,
-                limit: limit,
-                offset: 0,
-                orderBy: undefined,
-                searchString: currentSearch,
-                include: includeParams
-            })
-                .then((res) => {
-                    if (cancelled) return;
-                    onEntitiesUpdate({ data: res.data as Entity<M>[],
-meta: res.meta });
-                })
-                .catch((e) => {
-                    if (cancelled) return;
-                    onErrorUpdate(e);
-                });
-            unsubscribe = () => {
-                cancelled = true;
-            };
-        }
-
-        unsubscribeRef.current = unsubscribe || null;
-    }, [dataClient, path, fixedFilter, limit, currentSearch, entityToRelationItem, cleanupSubscription, setLoading, includeParams]);
-
-    // Search function with debouncing
-    const search = useCallback((searchString: string) => {
-        // Clear existing timeout
-        if (searchTimeoutRef.current) {
-            clearTimeout(searchTimeoutRef.current);
-        }
-
-        // Debounce search
-        searchTimeoutRef.current = setTimeout(() => {
-            setLimit(pageSize);
-            setCurrentSearch(searchString);
-        }, searchString.trim() ? 300 : 0);
-    }, [pageSize]);
-
-    // Load more function
-    const loadMore = useCallback(() => {
-        if (!isLoadingRef.current && hasMore && items.length > 0) {
-            setLoading(true);
-            setLimit(prev => prev + pageSize);
-        }
-    }, [hasMore, items.length, pageSize, setLoading]);
-
-    // Load initial data and update upon changes
-    useEffect(() => {
-        if (!enabled) return;
-        fetchData();
-
-        return () => {
-            cleanupSubscription();
-        };
-    }, [fetchData, enabled, cleanupSubscription]);
-
-    useEffect(() => {
-        return () => {
-            if (searchTimeoutRef.current) {
-                clearTimeout(searchTimeoutRef.current);
-            }
-        };
-    }, []);
-
-    return useMemo(() => ({
-        items,
-        // Enabled but not answered yet still counts as loading, so the frame
-        // between opening the picker and the request starting shows a spinner
-        // rather than "no results".
-        isLoading: isLoading || (enabled && !hasLoadedRef.current),
-        error,
-        search,
-        loadMore,
-        hasMore,
-        entityToRelationItem
-    }), [items, isLoading, error, search, loadMore, hasMore, entityToRelationItem, enabled]);
-}