@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.80

package/src/components/EntityCollectionTable/types.tsx

@@ -0,0 +1,58 @@
+import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+
+export type EntityCollectionTableController<M extends Record<string, any>> = {
+
+    /**
+     * This cell is displayed as selected
+     */
+    selectedCell?: SelectedCellProps<any>;
+    /**
+     * Select a table cell
+     * @param cell
+     */
+    select: (cell?: SelectedCellProps<M>) => void;
+    /**
+     * The cell that is displayed as a popup view.
+     * @param cell
+     */
+    setPopupCell?: (cell?: SelectedCellProps<M>) => void;
+    /**
+     * Callback used when the value of a cell has changed.
+     * @param params
+     */
+    onValueChange?: (params: OnCellValueChangeParams<any, M>) => void;
+    /**
+     * Size of the elements in the collection
+     */
+    size: CollectionSize;
+}
+
+/**
+ * Props passed in a callback when the content of a cell in a table has been edited
+ * @group Collection components
+ */
+export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
+    value: T,
+    propertyKey: string,
+    entity: Entity<M>,
+    onValueUpdated: () => void
+    setError: (e: Error) => void
+    fullPath: string
+    context: FireCMSContext
+}
+
+/**
+ * @group Collection components
+ */
+export type UniqueFieldValidator = (props: {
+    name: string,
+    value: any,
+    property: ResolvedProperty,
+    entityId?: string
+}) => Promise<boolean>;
+
+/**
+ * Callback when a cell has changed in a table
+ * @group Collection components
+ */
+export type OnCellValueChange<T, M extends Record<string, any>> = (params: OnCellValueChangeParams<T, M>) => Promise<void> | void;

package/src/components/EntityCollectionTable/useDataSourceEntityCollectionTableController.tsx

@@ -0,0 +1,225 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
+import { useDataOrder } from "../../hooks/data/useDataOrder";
+import {
+    Entity,
+    EntityCollection,
+    FilterValues,
+    FireCMSContext,
+    SelectedCellProps,
+    EntityTableController,
+    User
+} from "../../types";
+import { useDebouncedData } from "./useDebouncedData";
+
+const DEFAULT_PAGE_SIZE = 50;
+
+export type DataSourceEntityCollectionTableControllerProps<M extends Record<string, any> = any> = {
+    /**
+     * Full path where the data of this table is located
+     */
+    fullPath: string;
+    /**
+     * The collection that is represented by this config.
+     */
+    collection: EntityCollection<M>;
+    /**
+     * List of entities that will be displayed on top, no matter the ordering.
+     * This is used for reference fields selection
+     */
+    entitiesDisplayedFirst?: Entity<M>[];
+
+    lastDeleteTimestamp?: number;
+    forceFilter?: FilterValues<string>;
+}
+
+/**
+ * Use this hook to build a controller for the {@link EntityCollectionTable}.
+ * This controller is bound to data in a path in your specified datasource.
+ *
+ * Note that you can build your own hook returning a {@link EntityTableController}
+ * if you would like to display different data.
+ *
+ * @param fullPath
+ * @param collection
+ * @param entitiesDisplayedFirst
+ * @param lastDeleteTimestamp
+ * @param forceFilterFromProps
+ */
+export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, UserType extends User = User>(
+    {
+        fullPath,
+        collection,
+        entitiesDisplayedFirst,
+        lastDeleteTimestamp,
+        forceFilter: forceFilterFromProps,
+    }: DataSourceEntityCollectionTableControllerProps<M>)
+    : EntityTableController<M> {
+
+    const {
+        initialFilter,
+        initialSort,
+        forceFilter: forceFilterFromCollection
+    } = collection;
+
+    const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+    const navigation = useNavigationController();
+    const dataSource = useDataSource();
+    const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
+
+    const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
+    const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
+    const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
+
+    const [searchString, setSearchString] = React.useState<string | undefined>();
+    const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? pageSize : undefined);
+
+    const initialSortInternal = useMemo(() => {
+        if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
+            console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
+            return undefined;
+        }
+        return initialSort;
+    }, [initialSort, forceFilter]);
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
+    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
+
+    const sortByProperty = sortBy ? sortBy[0] : undefined;
+    const currentSort = sortBy ? sortBy[1] : undefined;
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [rawData, setRawData] = useState<Entity<M>[]>([]);
+
+    const [dataLoading, setDataLoading] = useState<boolean>(false);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
+
+    const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
+                                                sortBy?: [string, "asc" | "desc"]) => {
+        if (!dataSource.isFilterCombinationValid)
+            return true;
+        return dataSource.isFilterCombinationValid({
+            path: resolvedPath,
+            collection,
+            filterValues,
+            sortBy
+        })
+    }, []);
+
+    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
+
+    const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
+        if (forceFilter) {
+            console.warn("Filter is not compatible with the force filter. Ignoring filter");
+            return;
+        }
+        if (updatedFilter && Object.keys(updatedFilter).length === 0) {
+            setFilterValues(undefined);
+        } else {
+            setFilterValues(updatedFilter);
+        }
+    }, [forceFilter]);
+
+    useEffect(() => {
+
+        setDataLoading(true);
+
+        const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            if (collection.callbacks?.onFetch) {
+                try {
+                    entities = await Promise.all(
+                        entities.map((entity) =>
+                            collection.callbacks!.onFetch!({
+                                collection,
+                                path: resolvedPath,
+                                entity,
+                                context
+                            })));
+                } catch (e: any) {
+                    console.error(e);
+                }
+            }
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+            setRawData(entities.map(e => ({
+                ...e,
+                // values: sanitizeData(e.values, resolvedCollection.properties)
+            })));
+            setNoMoreToLoad(!itemCount || entities.length < itemCount);
+        };
+
+        const onError = (error: Error) => {
+            console.error("ERROR", error);
+            setDataLoading(false);
+            setRawData([]);
+            setDataLoadingError(error);
+        };
+
+        if (dataSource.listenCollection) {
+            return dataSource.listenCollection<M>({
+                path: resolvedPath,
+                collection,
+                onUpdate: onEntitiesUpdate,
+                onError,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            });
+        } else {
+            dataSource.fetchCollection<M>({
+                path: resolvedPath,
+                collection,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            })
+                .then(onEntitiesUpdate)
+                .catch(onError);
+            return () => {
+            };
+        }
+    }, [resolvedPath, itemCount, currentSort, sortByProperty, filterValues, searchString]);
+
+    const orderedData = useDataOrder({
+        data: rawData,
+        entitiesDisplayedFirst
+    });
+
+    // hack to fix Firestore listeners firing with incomplete data
+    const data = useDebouncedData(orderedData, {
+        filterValues,
+        sortBy,
+        searchString,
+        lastDeleteTimestamp
+    });
+
+    return {
+        data,
+        dataLoading,
+        noMoreToLoad,
+        dataLoadingError,
+        filterValues,
+        setFilterValues: updateFilterValues,
+        sortBy,
+        setSortBy,
+        searchString,
+        setSearchString,
+        clearFilter,
+        itemCount,
+        setItemCount,
+        paginationEnabled,
+        pageSize,
+        checkFilterCombination,
+        popupCell,
+        setPopupCell
+    }
+}

package/src/components/EntityCollectionTable/useDebouncedData.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import equal from "react-fast-compare";
+
+/**
+ * Hack to prevent data updates for incomplete callbacks from Firestore
+ * triggers.
+ * If any deps change, the update is immediate
+ * @param data
+ * @param deps
+ * @param timeoutMs
+ */
+export function useDebouncedData<T>(data: T[], deps: any, timeoutMs = 5000) {
+
+    const [deferredData, setDeferredData] = React.useState(data);
+    const dataLength = React.useRef(deferredData.length ?? 0);
+    const pendingUpdate = React.useRef(false);
+    const currentDeps = React.useRef(deps);
+
+    const haveDepsChanged = !equal(currentDeps.current, deps);
+    const immediateUpdate = data.length >= dataLength.current || haveDepsChanged;
+
+    React.useEffect(() => {
+
+        const performUpdate = () => {
+            if (!equal(deferredData, data)) {
+                currentDeps.current = deps;
+                dataLength.current = data.length;
+                setDeferredData(data);
+            }
+            pendingUpdate.current = false;
+        };
+
+        pendingUpdate.current = true;
+
+        let handler: any;
+        if (immediateUpdate)
+            performUpdate()
+        else
+            handler = setTimeout(performUpdate, timeoutMs);
+
+        return () => {
+            clearTimeout(handler);
+            if (pendingUpdate.current && immediateUpdate)
+                performUpdate();
+        };
+    }, [data, timeoutMs, deps, immediateUpdate]);
+
+    return immediateUpdate ? data : deferredData;
+}