@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/internal/useBuildDataSource.ts

@@ -0,0 +1,363 @@
+import { useCallback } from "react";
+import {
+    DataSource,
+    DataSourceDelegate,
+    DeleteEntityProps,
+    Entity,
+    EntityCollection,
+    EntityReference,
+    EntityValues,
+    FetchCollectionProps,
+    FetchEntityProps,
+    FilterValues,
+    GeoPoint,
+    ListenCollectionProps,
+    ListenEntityProps,
+    NavigationController,
+    PropertyConfig,
+    ResolvedProperties,
+    SaveEntityProps
+} from "../types";
+import { resolveCollection, updateDateAutoValues } from "../util";
+
+/**
+ * Use this hook to build a {@link DataSource} based on Firestore
+ * @param firebaseApp
+ * @group Firebase
+ */
+export function useBuildDataSource({
+                                       delegate,
+                                       propertyConfigs,
+                                       navigationController
+                                   }: {
+    delegate: DataSourceDelegate,
+    propertyConfigs?: Record<string, PropertyConfig>;
+    navigationController: NavigationController;
+}): DataSource {
+
+    return {
+
+        /**
+         * Fetch entities in a Firestore path
+         * @param path
+         * @param collection
+         * @param filter
+         * @param limit
+         * @param startAfter
+         * @param searchString
+         * @param orderBy
+         * @param order
+         * @return Function to cancel subscription
+         * @see useCollectionFetch if you need this functionality implemented as a hook
+         * @group Firestore
+         */
+        fetchCollection: useCallback(<M extends Record<string, any>>({
+                                                                         path,
+                                                                         collection: collectionProp,
+                                                                         filter,
+                                                                         limit,
+                                                                         startAfter,
+                                                                         searchString,
+                                                                         orderBy,
+                                                                         order
+                                                                     }: FetchCollectionProps<M>
+        ): Promise<Entity<M>[]> => {
+            return delegate.fetchCollection<M>({
+                path,
+                filter,
+                limit,
+                startAfter,
+                searchString,
+                orderBy,
+                order
+            });
+        }, [delegate]),
+
+        /**
+         * Listen to a entities in a given path
+         * @param path
+         * @param collection
+         * @param onError
+         * @param filter
+         * @param limit
+         * @param startAfter
+         * @param searchString
+         * @param orderBy
+         * @param order
+         * @param onUpdate
+         * @return Function to cancel subscription
+         * @see useCollectionFetch if you need this functionality implemented as a hook
+         * @group Firestore
+         */
+        listenCollection: delegate.listenCollection
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ? useCallback(<M extends Record<string, any>>(
+                {
+                    path,
+                    collection: collectionProp,
+                    filter,
+                    limit,
+                    startAfter,
+                    searchString,
+                    orderBy,
+                    order,
+                    onUpdate,
+                    onError
+                }: ListenCollectionProps<M>
+            ): () => void => {
+
+                const collection = collectionProp ?? navigationController.getCollection(path);
+                const isCollectionGroup = Boolean(collection?.collectionGroup) ?? false;
+                if (!delegate.listenCollection)
+                    throw Error("useBuildDataSource delegate not initialised");
+
+                return delegate.listenCollection<M>({
+                    path,
+                    filter,
+                    limit,
+                    startAfter,
+                    searchString,
+                    orderBy,
+                    order,
+                    onUpdate,
+                    onError,
+                    isCollectionGroup,
+                    collection
+                });
+            }, [delegate, navigationController.getCollection])
+            : undefined,
+
+        /**
+         * Retrieve an entity given a path and a collection
+         * @param path
+         * @param entityId
+         * @param collection
+         * @group Firestore
+         */
+        fetchEntity: useCallback(<M extends Record<string, any>>({
+                                                                     path,
+                                                                     entityId
+                                                                 }: FetchEntityProps<M>
+        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
+            path,
+            entityId
+        }), [delegate]),
+
+        /**
+         *
+         * @param path
+         * @param entityId
+         * @param collection
+         * @param onUpdate
+         * @param onError
+         * @return Function to cancel subscription
+         * @group Firestore
+         */
+        listenEntity: delegate.listenEntity
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ? useCallback(<M extends Record<string, any>>(
+                {
+                    path,
+                    entityId,
+                    collection,
+                    onUpdate,
+                    onError
+                }: ListenEntityProps<M>): () => void => {
+                if (!delegate.listenEntity)
+                    throw Error("useBuildDataSource delegate not initialised");
+
+                return delegate.listenEntity<M>({
+                    path,
+                    entityId,
+                    onUpdate,
+                    onError
+                })
+            }, [delegate.listenEntity]) : undefined,
+
+        /**
+         * Save entity to the specified path. Note that Firestore does not allow
+         * undefined values.
+         * @param path
+         * @param entityId
+         * @param values
+         * @param schemaId
+         * @param collection
+         * @param status
+         * @group Firestore
+         */
+        saveEntity: useCallback(<M extends Record<string, any>>(
+            {
+                path,
+                entityId,
+                values,
+                collection: collectionProp,
+                status
+            }: SaveEntityProps<M>): Promise<Entity<M>> => {
+
+            const collection = collectionProp ?? navigationController.getCollection(path);
+
+            const resolvedCollection = collection
+                ? resolveCollection<M>({
+                    collection,
+                    path,
+                    entityId,
+                    fields: propertyConfigs
+                })
+                : undefined;
+
+            const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
+
+            const firestoreValues = cmsToDelegateModel(
+                values,
+                delegate.buildReference,
+                delegate.buildGeoPoint,
+                delegate.buildDate,
+                delegate.buildDeleteFieldValue
+            );
+            const updatedFirestoreValues: EntityValues<M> = properties
+                ? updateDateAutoValues(
+                    {
+                        inputValues: firestoreValues,
+                        properties,
+                        status,
+                        timestampNowValue: delegate.currentTime(),
+                        setDateToMidnight: delegate.setDateToMidnight
+                    })
+                : firestoreValues;
+
+            return delegate.saveEntity({
+                path,
+                entityId,
+                values: updatedFirestoreValues,
+                status
+            }).then((res) => {
+                return {
+                    id: res.id,
+                    path: res.path,
+                    values: delegate.delegateToCMSModel(updatedFirestoreValues)
+                } as Entity<M>;
+            });
+        }, [delegate.saveEntity, navigationController.getCollection]),
+
+        /**
+         * Delete an entity
+         * @param entity
+         * @param collection
+         * @group Firestore
+         */
+        deleteEntity: useCallback(<M extends Record<string, any>>(
+            {
+                entity
+            }: DeleteEntityProps<M>
+        ): Promise<void> => {
+            return delegate.deleteEntity({ entity });
+        }, [delegate.deleteEntity]),
+
+        /**
+         * Check if the given property is unique in the given collection
+         * @param path Collection path
+         * @param name of the property
+         * @param value
+         * @param property
+         * @param entityId
+         * @return `true` if there are no other fields besides the given entity
+         * @group Firestore
+         */
+        checkUniqueField: useCallback((
+            path: string,
+            name: string,
+            value: any,
+            entityId?: string
+        ): Promise<boolean> => {
+            return delegate.checkUniqueField(path, name, value, entityId);
+        }, [delegate.checkUniqueField]),
+
+        generateEntityId: useCallback((path: string): string => {
+            return delegate.generateEntityId(path,);
+        }, [delegate.generateEntityId]),
+
+        countEntities: delegate.countEntities ? async ({
+                                                           path,
+                                                           collection,
+                                                           filter,
+                                                           order,
+                                                           orderBy
+                                                       }: {
+            path: string,
+            collection: EntityCollection<any>,
+            filter?: FilterValues<Extract<keyof any, string>>,
+            orderBy?: string,
+            order?: "desc" | "asc",
+        }): Promise<number> => {
+            return delegate.countEntities!({
+                path,
+                filter,
+                orderBy,
+                order,
+                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+            });
+        } : undefined,
+
+        isFilterCombinationValid: useCallback(({
+                                                   path,
+                                                   filterValues,
+                                                   sortBy
+                                               }: {
+            path: string,
+            filterValues: FilterValues<any>,
+            sortBy?: [string, "asc" | "desc"]
+        }): boolean => {
+            if (!delegate.isFilterCombinationValid)
+                return true;
+            return delegate.isFilterCombinationValid(
+                {
+                    path,
+                    filterValues,
+                    sortBy
+                }
+            )
+        }, [delegate.isFilterCombinationValid])
+
+    };
+
+}
+
+/**
+ * Recursive function that converts Firestore data types into CMS or plain
+ * JS types.
+ * FireCMS uses Javascript dates internally instead of Firestore timestamps.
+ * This makes it easier to interact with the rest of the libraries and
+ * bindings.
+ * Also, Firestore references are replaced with {@link EntityReference}
+ * @param data
+ * @param buildReference
+ * @param buildGeoPoint
+ * @param buildDate
+ * @param buildDelete
+ * @group Firestore
+ */
+export function cmsToDelegateModel(data: any,
+                                   buildReference: (reference: EntityReference) => any,
+                                   buildGeoPoint: (geoPoint: GeoPoint) => any,
+                                   buildDate: (date: Date) => any,
+                                   buildDelete: () => any
+): any {
+    if (data === undefined) {
+        return buildDelete();
+    } else if (data === null) {
+        return null;
+    } else if (Array.isArray(data)) {
+        return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
+    } else if (data.isEntityReference && data.isEntityReference()) {
+        return buildReference(data);
+    } else if (data instanceof GeoPoint) {
+        return buildGeoPoint(data);
+    } else if (data instanceof Date) {
+        return buildDate(data);
+    } else if (data && typeof data === "object") {
+        return Object.entries(data)
+            .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
+            .reduce((a, b) => ({ ...a, ...b }), {});
+    }
+    return data;
+}

package/src/internal/useBuildSideDialogsController.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { SideDialogPanelProps, SideDialogsController } from "../types";
+import equal from "react-fast-compare"
+
+export function useBuildSideDialogsController(): SideDialogsController {
+
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const [sidePanels, setSidePanels] = useState<SideDialogPanelProps[]>([]);
+    const sidePanelsRef = useRef<SideDialogPanelProps[]>(sidePanels);
+
+    const routesStore = useRef<Record<string, SideDialogPanelProps>>({});
+    const routesCount = useRef<number>(0);
+
+    const updateSidePanels = (newPanels: SideDialogPanelProps[]) => {
+        sidePanelsRef.current = newPanels;
+        setSidePanels(newPanels);
+    };
+
+    useEffect(() => {
+        const state = location.state as any;
+        const panelKeys: string[] = state?.panels ?? [];
+        const newPanels = panelKeys
+            .map(key => routesStore.current[key])
+            .filter(p => Boolean(p)) as SideDialogPanelProps[];
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key)))
+            updateSidePanels(newPanels);
+    }, [location]);
+
+    const close = useCallback(() => {
+
+        if (sidePanels.length === 0)
+            return;
+
+        const lastSidePanel = sidePanels[sidePanels.length - 1];
+        const updatedPanels = [...sidePanels.slice(0, -1)];
+        updateSidePanels(updatedPanels);
+
+        if (routesCount.current > 0) {
+            if (lastSidePanel.urlPath)
+                navigate(-1);
+            routesCount.current--;
+        } else if (lastSidePanel.parentUrlPath) {
+            const baseLocation = (location.state as any)?.base_location ?? location;
+            navigate(
+                lastSidePanel.parentUrlPath,
+                {
+                    replace: true,
+                    state: {
+                        base_location: baseLocation,
+                        panels: updatedPanels.map(p => p.key)
+                    }
+                }
+            );
+        }
+    }, [sidePanels, navigate, location]);
+
+    const open = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
+
+        const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
+
+        newPanels.forEach((panel) => {
+            routesStore.current[panel.key] = panel;
+        });
+        routesCount.current = routesCount.current + newPanels.length;
+
+        const baseLocation = (location.state as any)?.base_location ?? location;
+
+        const updatedPanels = [...sidePanels, ...newPanels];
+        updateSidePanels(updatedPanels);
+
+        newPanels.forEach((panel) => {
+            if (panel.urlPath) {
+                navigate(
+                    panel.urlPath,
+                    {
+                        state: {
+                            base_location: baseLocation,
+                            panels: updatedPanels.map(p => p.key)
+                        }
+                    }
+                );
+            }
+        });
+
+    }, [location, navigate, sidePanels]);
+
+    const replace = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
+
+        const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
+        newPanels.forEach((panel) => {
+            routesStore.current[panel.key] = panel;
+        });
+
+        const baseLocation = (location.state as any)?.base_location ?? location;
+
+        const updatedPanels = [...sidePanels.slice(0, -newPanels.length), ...newPanels];
+        updateSidePanels(updatedPanels);
+
+        newPanels.forEach((panel) => {
+            if (panel.urlPath) {
+                navigate(
+                    panel.urlPath,
+                    {
+                        replace: true,
+                        state: {
+                            base_location: baseLocation,
+                            panels: updatedPanels.map(p => p.key)
+                        }
+                    }
+                );
+            }
+        });
+
+    }, [location, navigate, sidePanels]);
+
+    return {
+        sidePanels,
+        close,
+        open,
+        replace
+    };
+}

package/src/internal/useBuildSideEntityController.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+    EntityCollection,
+    EntitySidePanelProps,
+    NavigationController,
+    SideDialogPanelProps,
+    SideDialogsController,
+    SideEntityController
+} from "../types";
+import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
+import { useLocation } from "react-router-dom";
+import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "../util";
+import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
+import { useLargeLayout } from "../hooks";
+import { EntitySidePanel } from "../core/EntitySidePanel";
+
+const NEW_URL_HASH = "new";
+
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
+    if (small) return CONTAINER_FULL_WIDTH;
+    const mainViewSelected = !props.selectedSubPath;
+    const resolvedWidth: string | undefined = typeof props.width === "number" ? `${props.width}px` : props.width;
+    return !mainViewSelected ? `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})` : resolvedWidth ?? FORM_CONTAINER_WIDTH
+}
+
+export const useBuildSideEntityController = (navigation: NavigationController,
+                                             sideDialogsController: SideDialogsController): SideEntityController => {
+
+    const location = useLocation();
+    const initialised = useRef<boolean>(false);
+
+    const smallLayout = !useLargeLayout();
+
+    // only on initialisation, create panels from URL
+    useEffect(() => {
+        if (!navigation.loading && !initialised.current) {
+            if (navigation.isUrlCollectionPath(location.pathname)) {
+                const newFlag = location.hash === `#${NEW_URL_HASH}`;
+                const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
+                for (let i = 0; i < panelsFromUrl.length; i++) {
+                    const panel = panelsFromUrl[i];
+                    setTimeout(() => {
+                        if (i === 0)
+                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                        else
+                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                    }, 1);
+                }
+            }
+            initialised.current = true;
+        }
+    }, [location, navigation, sideDialogsController, smallLayout]);
+
+    const close = useCallback(() => {
+        sideDialogsController.close();
+    }, [sideDialogsController]);
+
+    const open = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        const defaultSelectedView = resolveDefaultSelectedView(
+            props.collection ? props.collection.defaultSelectedView : undefined,
+            {
+                status: props.copy ? "copy" : (props.entityId ? "existing" : "new"),
+                entityId: props.entityId
+            }
+        );
+
+        sideDialogsController.open(propsToSidePanel({
+            selectedSubPath: defaultSelectedView,
+            ...props,
+        }, navigation, smallLayout));
+
+    }, [sideDialogsController, navigation, smallLayout]);
+
+    const replace = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        sideDialogsController.replace(propsToSidePanel(props, navigation, smallLayout));
+
+    }, [navigation, sideDialogsController, smallLayout]);
+
+    return {
+        close,
+        open,
+        replace
+    };
+};
+
+export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
+
+    const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPathInternal({
+        path,
+        collections
+    });
+
+    const sidePanels: EntitySidePanelProps<any>[] = [];
+    let lastCollectionPath = "";
+    for (let i = 0; i < navigationViewsForPath.length; i++) {
+        const navigationEntry = navigationViewsForPath[i];
+
+        if (navigationEntry.type === "collection") {
+            lastCollectionPath = navigationEntry.path;
+        }
+
+        if (i > 0) { // the first collection is handled by the main navigation
+            const previousEntry = navigationViewsForPath[i - 1];
+            if (navigationEntry.type === "entity") {
+                sidePanels.push({
+                        path: navigationEntry.path,
+                        entityId: navigationEntry.entityId,
+                        copy: false
+                    }
+                );
+            } else if (navigationEntry.type === "custom_view") {
+                if (previousEntry.type === "entity") {
+                    const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
+                    if (lastSidePanel)
+                        lastSidePanel.selectedSubPath = navigationEntry.view.key;
+                }
+            } else if (navigationEntry.type === "collection") {
+                if (previousEntry.type === "entity") {
+                    const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
+                    if (lastSidePanel)
+                        lastSidePanel.selectedSubPath = navigationEntry.collection.id ?? navigationEntry.collection.path;
+                }
+            }
+        }
+
+    }
+
+    if (newFlag) {
+        sidePanels.push({
+            path: lastCollectionPath,
+            copy: false
+        });
+    }
+
+    return sidePanels;
+}
+
+const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
+
+        const collectionPath = removeInitialAndTrailingSlashes(props.path);
+
+        const newPath = props.entityId
+            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+
+        const resolvedPanelProps: EntitySidePanelProps<any> = {
+            ...props,
+            path: resolvedPath
+        };
+
+        return ({
+            key: `${props.path}/${props.entityId}`,
+            component: <EntitySidePanel {...resolvedPanelProps}/>,
+            urlPath: newPath,
+            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
+            width: getEntityViewWidth(props, smallLayout),
+            onClose: props.onClose
+        });
+    }
+;

package/src/internal/useLocaleConfig.tsx

@@ -0,0 +1,18 @@
+import * as locales from "date-fns/locale";
+// @ts-ignore
+import { registerLocale, setDefaultLocale } from "react-datepicker";
+import { useEffect } from "react";
+
+export function useLocaleConfig(locale?: string) {
+    useEffect(() => {
+        if (!locale) {
+            return;
+        }
+        // @ts-ignore
+        const dateFnsLocale = locales[locale];
+        if (dateFnsLocale) {
+            registerLocale(locale, dateFnsLocale);
+            setDefaultLocale(locale);
+        }
+    }, [locale])
+}