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

package/src/hooks/data/save.ts

@@ -0,0 +1,170 @@
+import {
+    DataSource,
+    Entity,
+    EntityCallbacks,
+    EntityCollection,
+    EntityValues,
+    FireCMSContext,
+    SaveEntityProps,
+    User
+} from "../../types";
+import { useDataSource } from "./useDataSource";
+import { resolveCollection } from "../../util";
+
+/**
+ * @group Hooks and utilities
+ */
+export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
+    SaveEntityProps<M> &
+    {
+        callbacks?: EntityCallbacks<M>;
+        onSaveSuccess?: (updatedEntity: Entity<M>) => void,
+        onSaveFailure?: (e: Error) => void,
+        onPreSaveHookError?: (e: Error) => void,
+        onSaveSuccessHookError?: (e: Error) => void
+    }
+
+/**
+ * This function is in charge of saving an entity to the datasource.
+ * It will run all the save callbacks specified in the collection.
+ * It is also possible to attach callbacks on save success or error, and callback
+ * errors.
+ *
+ * If you just want to save the data without running the `onSaveSuccess`,
+ * `onSaveFailure` and `onPreSave` callbacks, you can use the `saveEntity` method
+ * in the datasource ({@link useDataSource}).
+ *
+ * @param collection
+ * @param path
+ * @param entityId
+ * @param callbacks
+ * @param values
+ * @param previousValues
+ * @param status
+ * @param dataSource
+ * @param context
+ * @param onSaveSuccess
+ * @param onSaveFailure
+ * @param onPreSaveHookError
+ * @param onSaveSuccessHookError
+ * @see useDataSource
+ * @group Hooks and utilities
+ */
+export async function saveEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+                                                                                                        collection,
+                                                                                                        path,
+                                                                                                        entityId,
+                                                                                                        values,
+                                                                                                        previousValues,
+                                                                                                        status,
+                                                                                                        dataSource,
+                                                                                                        context,
+                                                                                                        onSaveSuccess,
+                                                                                                        onSaveFailure,
+                                                                                                        onPreSaveHookError,
+                                                                                                        onSaveSuccessHookError
+                                                                                                    }: SaveEntityWithCallbacksProps<M> & {
+                                                                                                        collection: EntityCollection<M>,
+                                                                                                        dataSource: DataSource,
+                                                                                                        context: FireCMSContext<UserType>,
+                                                                                                    }
+): Promise<void> {
+
+    if (status !== "new" && !entityId) {
+        throw new Error("Entity id must be specified when updating an existing entity");
+    }
+    let updatedValues: Partial<EntityValues<M>>;
+
+    const customizationController = context.customizationController;
+
+    const resolvedPath = context.navigation.resolveAliasesFrom(path);
+
+    const callbacks = collection.callbacks;
+    if (callbacks?.onPreSave) {
+        try {
+            const resolvedCollection = resolveCollection<M>({
+                collection,
+                path,
+                values: previousValues as EntityValues<M>,
+                entityId,
+                fields: customizationController.propertyConfigs
+            });
+            updatedValues = await callbacks.onPreSave({
+                collection: resolvedCollection,
+                path,
+                resolvedPath,
+                entityId,
+                values,
+                previousValues,
+                status,
+                context
+            });
+        } catch (e: any) {
+            console.error(e);
+            if (onPreSaveHookError)
+                onPreSaveHookError(e);
+            return;
+        }
+    } else {
+        updatedValues = values;
+    }
+
+    return dataSource.saveEntity({
+        collection,
+        path: resolvedPath,
+        entityId,
+        values: updatedValues,
+        previousValues,
+        status
+    }).then((entity) => {
+        try {
+            if (callbacks?.onSaveSuccess) {
+                const resolvedCollection = resolveCollection<M>({
+                    collection,
+                    path,
+                    values: updatedValues as EntityValues<M>,
+                    entityId,
+                    fields: customizationController.propertyConfigs
+                });
+                callbacks.onSaveSuccess({
+                    collection: resolvedCollection,
+                    path,
+                    resolvedPath,
+                    entityId: entity.id,
+                    values: updatedValues,
+                    previousValues,
+                    status,
+                    context
+                });
+            }
+        } catch (e: any) {
+            if (onSaveSuccessHookError)
+                onSaveSuccessHookError(e);
+        }
+        if (onSaveSuccess)
+            onSaveSuccess(entity);
+    })
+        .catch((e) => {
+            if (callbacks?.onSaveFailure) {
+
+                const resolvedCollection = resolveCollection<M>({
+                    collection,
+                    path,
+                    values: updatedValues as EntityValues<M>,
+                    entityId,
+                    fields: customizationController.propertyConfigs
+                });
+                callbacks.onSaveFailure({
+                    collection: resolvedCollection,
+                    path,
+                    resolvedPath,
+                    entityId,
+                    values: updatedValues,
+                    previousValues,
+                    status,
+                    context
+                });
+            }
+            if (onSaveFailure) onSaveFailure(e);
+        });
+}

package/src/hooks/data/useCollectionFetch.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useState } from "react";
+import { Entity, EntityCollection, FilterValues, FireCMSContext, User } from "../../types";
+import { useDataSource } from "./useDataSource";
+import { useNavigationController } from "../useNavigationController";
+import { useFireCMSContext } from "../useFireCMSContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface CollectionFetchProps<M extends Record<string, any>> {
+
+    /**
+     * Absolute collection path
+     */
+    path: string;
+
+    /**
+     * collection of the entity displayed by this collection
+     */
+    collection: EntityCollection<M>
+
+    /**
+     * Number of entities to fetch
+     */
+    itemCount?: 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 CollectionFetchResult<M extends Record<string, any>> {
+    data: Entity<M>[];
+    dataLoading: boolean;
+    noMoreToLoad: boolean;
+    dataLoadingError?: Error;
+}
+
+/**
+ * This hook is used to fetch collections using a given collection
+ * @param path
+ * @param collection
+ * @param filterValues
+ * @param sortBy
+ * @param itemCount
+ * @param searchString
+ * @group Hooks and utilities
+ */
+export function useCollectionFetch<M extends Record<string, any>, UserType extends User>(
+    {
+        path: inputPath,
+        collection,
+        filterValues,
+        sortBy,
+        itemCount,
+        searchString
+    }: CollectionFetchProps<M>): CollectionFetchResult<M> {
+
+    const dataSource = useDataSource(collection);
+    const navigationController = useNavigationController();
+
+    const path = navigationController.resolveAliasesFrom(inputPath);
+
+    const sortByProperty = sortBy ? sortBy[0] : undefined;
+    const currentSort = sortBy ? sortBy[1] : undefined;
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [data, setData] = useState<Entity<M>[]>([]);
+
+    const [dataLoading, setDataLoading] = useState<boolean>(false);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
+
+    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,
+                                entity,
+                                context
+                            })));
+                } catch (e: any) {
+                    console.error(e);
+                }
+            }
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+            setData(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);
+            setData([]);
+            setDataLoadingError(error);
+        };
+
+        if (dataSource.listenCollection) {
+            return dataSource.listenCollection<M>({
+                path,
+                collection,
+                onUpdate: onEntitiesUpdate,
+                onError,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            });
+        } else {
+            dataSource.fetchCollection<M>({
+                path,
+                collection,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            })
+                .then(onEntitiesUpdate)
+                .catch(onError);
+            return () => {
+            };
+        }
+    }, [path, itemCount, currentSort, sortByProperty, filterValues, searchString]);
+
+    return {
+        data,
+        dataLoading,
+        dataLoadingError,
+        noMoreToLoad
+    };
+
+}

package/src/hooks/data/useDataOrder.ts

@@ -0,0 +1,26 @@
+import { Entity } from "../../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/useDataSource.tsx

@@ -0,0 +1,14 @@
+import { useContext, useMemo } from "react";
+import { DataSource, EntityCollection } from "../../types";
+import { DataSourceContext } from "../../contexts/DataSourceContext";
+
+/**
+ * Use this hook to get the datasource being used
+ * @group Hooks and utilities
+ */
+export const useDataSource = (collection?: EntityCollection): DataSource => {
+    const defaultDataSource = useContext(DataSourceContext);
+    if (collection?.overrides?.dataSource)
+        return collection?.overrides.dataSource;
+    return defaultDataSource;
+};

package/src/hooks/data/useEntityFetch.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { Entity, EntityCollection, FireCMSContext, User } from "../../types";
+import { useDataSource } from "./useDataSource";
+import { useNavigationController } from "../useNavigationController";
+import { useFireCMSContext } from "../useFireCMSContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface EntityFetchProps<M extends Record<string, any>> {
+    path: string;
+    entityId?: string;
+    collection: EntityCollection<M>;
+    useCache?: boolean;
+}
+
+/**
+ * @group Hooks and utilities
+ */
+export interface EntityFetchResult<M extends Record<string, any>> {
+    entity?: Entity<M>,
+    dataLoading: boolean,
+    dataLoadingError?: Error
+}
+
+const CACHE: Record<string, Entity<any> | undefined> = {};
+
+/**
+ * This hook is used to fetch an entity.
+ * It gives real time updates if the datasource supports it.
+ * @param path
+ * @param collection
+ * @param entityId
+ * @param useCache
+ * @group Hooks and utilities
+ */
+
+export function useEntityFetch<M extends Record<string, any>, UserType extends User>(
+    {
+        path: inputPath,
+        entityId,
+        collection,
+        useCache = false
+    }: EntityFetchProps<M>): EntityFetchResult<M> {
+
+    const dataSource = useDataSource(collection);
+    const navigationController = useNavigationController();
+
+    const path = navigationController.resolveAliasesFrom(inputPath);
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [entity, setEntity] = useState<Entity<M> | undefined>();
+    const [dataLoading, setDataLoading] = useState<boolean>(true);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+
+    useEffect(() => {
+
+        setDataLoading(true);
+
+        const onEntityUpdate = async (updatedEntity: Entity<M> | undefined) => {
+            if (collection.callbacks?.onFetch && updatedEntity) {
+                try {
+                    updatedEntity = await collection.callbacks.onFetch({
+                        collection,
+                        path,
+                        entity: updatedEntity,
+                        context
+                    });
+                } catch (e: any) {
+                    console.error(e);
+                }
+            }
+            CACHE[`${path}/${entityId}`] = updatedEntity;
+            setEntity(updatedEntity);
+            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) {
+            if (dataSource.listenEntity) {
+                return dataSource.listenEntity<M>({
+                    path,
+                    entityId,
+                    collection,
+                    onUpdate: onEntityUpdate,
+                    onError
+                });
+            } else {
+                dataSource.fetchEntity<M>({
+                    path,
+                    entityId,
+                    collection
+                })
+                    .then(onEntityUpdate)
+                    .catch(onError);
+                return () => {
+                };
+            }
+        }
+        // if no entityId is provided we do nothing
+        else {
+            onEntityUpdate(undefined);
+            return () => {
+            };
+        }
+    }, [entityId, path]);
+
+    return {
+        entity,
+        dataLoading,
+        dataLoadingError
+    };
+
+}

package/src/hooks/index.tsx

@@ -0,0 +1,27 @@
+export * from "./data/useDataSource";
+export * from "./data/useCollectionFetch";
+export * from "./data/useEntityFetch";
+export * from "./data/save";
+export * from "./data/delete";
+
+export * from "./useNavigationController";
+
+export * from "./useResolvedNavigationFrom";
+
+export * from "./useStorageSource";
+export * from "./useAuthController";
+export * from "./useSideDialogsController";
+export * from "./useSideEntityController";
+export * from "./useFireCMSContext";
+export * from "./useSnackbarController";
+export * from "./useModeController";
+export * from "./useClipboard";
+export * from "./useLargeLayout";
+
+export * from "./useReferenceDialog";
+export * from "./useBrowserTitleAndIcon";
+export * from "./useCustomizationController";
+export * from "./useBuildNavigationController";
+
+export * from "./useBuildLocalConfigurationPersistence";
+export * from "./useBuildModeController";

package/src/hooks/useAnalyticsController.tsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { AnalyticsController } from "../types";
+import { AnalyticsContext } from "../contexts/AnalyticsContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export const useAnalyticsController = (): AnalyticsController => useContext(AnalyticsContext);

package/src/hooks/useAuthController.tsx

@@ -0,0 +1,14 @@
+import { AuthController, User } from "../types";
+import { useContext } from "react";
+import { AuthControllerContext } from "../contexts/AuthControllerContext";
+
+/**
+ * Hook to retrieve the AuthContext.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see AuthController
+ * @group Hooks and utilities
+ */
+export const useAuthController = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): AuthControllerType => useContext(AuthControllerContext) as AuthControllerType;

package/src/hooks/useBrowserTitleAndIcon.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+const fireCMSLogo = "data:image/png;base64,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\n";
+
+/**
+ * Internal hook to handle the browser title and icon
+ * @param name
+ * @param logo
+ */
+export function useBrowserTitleAndIcon(name: string, logo?: string) {
+    useEffect(() => {
+        if (document) {
+            document.title = `${name} - FireCMS`;
+            let link = document.querySelector("link[rel~='icon']");
+            if (!link) {
+                link = document.createElement("link");
+                // @ts-ignore
+                link.rel = "icon";
+                document.getElementsByTagName("head")[0].appendChild(link);
+            }
+            // @ts-ignore
+            link.href = logo ?? fireCMSLogo;
+        }
+    }, [name, logo]);
+}

package/src/hooks/useBuildLocalConfigurationPersistence.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from "react";
+import { PartialEntityCollection, UserConfigurationPersistence } from "../types";
+import { mergeDeep, stripCollectionPath } from "../util";
+
+export function useBuildLocalConfigurationPersistence(): UserConfigurationPersistence {
+
+    const [configCache, setConfigCache] = useState<Record<string, PartialEntityCollection>>({});
+
+    const getCollectionFromStorage = useCallback((storageKey: string) => {
+        const item = localStorage.getItem(storageKey);
+        return item ? JSON.parse(item) : {};
+    }, []);
+
+    const getCollectionConfig = useCallback(<M extends Record<string, any>>(path: string): PartialEntityCollection<M> => {
+        const storageKey = `collection_config::${stripCollectionPath(path)}`;
+        if (configCache[storageKey]) {
+            return configCache[storageKey] as PartialEntityCollection<M>;
+        }
+        return getCollectionFromStorage(storageKey);
+    }, [configCache, getCollectionFromStorage]);
+
+    const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialEntityCollection<M>) => {
+        const storageKey = `collection_config::${stripCollectionPath(path)}`;
+        localStorage.setItem(storageKey, JSON.stringify(data));
+        setConfigCache((currentCache) => {
+            const cachedConfig = currentCache[storageKey];
+            const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
+            return (mergeDeep(currentCache, newConfig));
+        });
+    }, [getCollectionFromStorage]);
+
+    const [recentlyVisitedPaths, _setRecentlyVisitedPaths] = useState<string[]>([]);
+    const [favouritePaths, _setFavouritePaths] = useState<string[]>([]);
+    const [collapsedGroups, _setCollapsedGroups] = useState<string[]>([]);
+
+    useEffect(() => {
+        _setRecentlyVisitedPaths(localStorage.getItem("recently_visited_paths") ? JSON.parse(localStorage.getItem("recently_visited_paths")!) : []);
+        _setFavouritePaths(localStorage.getItem("favourite_paths") ? JSON.parse(localStorage.getItem("favourite_paths")!) : []);
+        _setCollapsedGroups(localStorage.getItem("collapsed_groups") ? JSON.parse(localStorage.getItem("collapsed_groups")!) : []);
+    }, []);
+
+    const setRecentlyVisitedPaths = useCallback((paths: string[]) => {
+        localStorage.setItem("recently_visited_paths", JSON.stringify(paths));
+        _setRecentlyVisitedPaths(paths);
+    }, []);
+
+    const setFavouritePaths = useCallback((paths: string[]) => {
+        localStorage.setItem("favourite_paths", JSON.stringify(paths));
+        _setFavouritePaths(paths);
+    }, []);
+
+    const setCollapsedGroups = useCallback((paths: string[]) => {
+        localStorage.setItem("collapsed_groups", JSON.stringify(paths));
+        _setCollapsedGroups(paths);
+    }, []);
+
+    return {
+        onCollectionModified,
+        getCollectionConfig,
+        recentlyVisitedPaths,
+        setRecentlyVisitedPaths,
+        favouritePaths,
+        setFavouritePaths,
+        collapsedGroups,
+        setCollapsedGroups
+    }
+}