@firecms/core 3.0.0-beta.11 → 3.0.0-beta.13

package/src/hooks/useBuildNavigationController.tsx

@@ -9,6 +9,7 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    NavigationBlocker,
     NavigationController,
     PermissionsBuilder,
     TopNavigationEntry,
@@ -26,6 +27,7 @@ import {
     resolvePermissions
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
+import { useBlocker, useNavigate } from "react-router-dom";
 
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
@@ -49,6 +51,11 @@ export type BuildNavigationContextProps<EC extends EntityCollection, USER extend
      * @param collections
      */
     injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+
+    /**
+     * If true, the navigation logic will not be updated until this flag is false
+     */
+    disabled?: boolean;
 };
 
 export function useBuildNavigationController<EC extends EntityCollection, USER extends User>(props: BuildNavigationContextProps<EC, USER>): NavigationController {
@@ -63,9 +70,12 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         viewsOrder,
         userConfigPersistence,
         dataSourceDelegate,
-        injectCollections
+        injectCollections,
+        disabled
     } = props;
 
+    const navigate = useNavigate();
+
     const collectionsRef = useRef<EntityCollection[] | undefined>();
     const viewsRef = useRef<CMSView[] | undefined>();
     const adminViewsRef = useRef<CMSView[] | undefined>();
@@ -185,7 +195,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const refreshNavigation = useCallback(async () => {
 
-        if (authController.initialLoading)
+        if (disabled || authController.initialLoading)
             return;
 
         console.debug("Refreshing navigation");
@@ -202,7 +212,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
-                console.log("Collections have changed", resolvedCollections);
+                console.debug("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
             }
             if (collectionsRef.current === undefined) {
@@ -237,6 +247,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         collectionPermissions,
         authController.user,
         authController.initialLoading,
+        disabled,
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
@@ -280,6 +291,16 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     }, [userConfigPersistence]);
 
+    const getCollectionById = useCallback((id: string): EC | undefined => {
+        const collections = collectionsRef.current;
+        if (collections === undefined)
+            throw Error("getCollectionById: Collections have not been initialised yet");
+        const collection: EntityCollection | undefined = collections.find(c => c.id === id);
+        if (!collection)
+            return undefined;
+        return collection as EC;
+    }, []);
+
     const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
 
         const collections = collectionsRef.current;
@@ -332,16 +353,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
-    const buildUrlEditCollectionPath = useCallback(({
-                                                        path
-                                                    }: {
-            path: string
-        }): string => {
-            return `s/edit/${encodePath(path)}`;
-        },
-        []);
-
-    const resolveAliasesFrom = useCallback((path: string): string => {
+    const resolveIdsFrom = useCallback((path: string): string => {
         const collections = collectionsRef.current ?? [];
         return resolveCollectionPathIds(path, collections);
     }, []);
@@ -396,29 +408,22 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         baseCollectionPath,
         initialised,
         getCollection,
+        getCollectionById,
         getCollectionFromPaths,
         getCollectionFromIds,
         isUrlCollectionPath,
         urlPathToDataPath,
         buildUrlCollectionPath,
-        buildUrlEditCollectionPath,
-        buildCMSUrlPath,
-        resolveAliasesFrom,
+        resolveIdsFrom,
         topLevelNavigation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
-        convertIdsToPaths
+        convertIdsToPaths,
+        navigate,
     };
 }
 
-export function getSidePanelKey(path: string, entityId?: string) {
-    if (entityId)
-        return `${removeInitialAndTrailingSlashes(path)}/${removeInitialAndTrailingSlashes(entityId)}`;
-    else
-        return removeInitialAndTrailingSlashes(path);
-}
-
 function encodePath(input: string) {
     return encodeURIComponent(removeInitialAndTrailingSlashes(input))
         .replaceAll("%2F", "/")
@@ -427,6 +432,7 @@ function encodePath(input: string) {
 
 function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
     return resolvedCollections
+        .filter((c) => Boolean(c.path))
         .filter((c) => {
             if (!c.permissions) return true;
             const resolvedPermissions = resolvePermissions(c, authController, c.path, null);
@@ -513,3 +519,54 @@ function areCollectionsEqual(a: EntityCollection, b: EntityCollection) {
     }
     return equal(removeFunctions(restA), removeFunctions(restB));
 }
+
+function useCustomBlocker(): NavigationBlocker {
+    const [blockListeners, setBlockListeners] = useState<Record<string, {
+        block: boolean,
+        basePath?: string
+    }>>({});
+
+    const shouldBlock = Object.values(blockListeners).some(b => b.block);
+
+    let blocker: any;
+    try {
+        blocker = useBlocker(({
+                                  nextLocation
+                              }) => {
+            const allBasePaths = Object.values(blockListeners).map(b => b.basePath).filter(Boolean) as string[];
+            if (allBasePaths && allBasePaths.some(path => nextLocation.pathname.startsWith(path)))
+                return false;
+            return shouldBlock;
+        });
+    } catch (e) {
+        // console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const updateBlockListener = (path: string, block: boolean, basePath?: string) => {
+        setBlockListeners(prev => ({
+            ...prev,
+            [path]: {
+                block,
+                basePath
+            }
+        }));
+        return () => setBlockListeners(prev => {
+            const {
+                [path]: removed,
+                ...rest
+            } = prev;
+            return rest;
+        })
+    };
+
+    const isBlocked = (path: string) => {
+        return (blockListeners[path]?.block ?? false) && blocker?.state === "blocked";
+    }
+
+    return {
+        updateBlockListener,
+        isBlocked,
+        proceed: blocker?.proceed,
+        reset: blocker?.reset
+    }
+}

package/src/hooks/useFireCMSContext.tsx

@@ -67,33 +67,3 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
 
     return fireCMSContextRef.current;
 }
-
-// export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
-//
-//     const authController = useAuthController<USER, AuthControllerType>();
-//     const sideDialogsController = useSideDialogsController();
-//     const sideEntityController = useSideEntityController();
-//     const navigation = useNavigationController();
-//     const dataSource = useDataSource();
-//     const storageSource = useStorageSource();
-//     const snackbarController = useSnackbarController();
-//     const userConfigPersistence = useUserConfigurationPersistence();
-//     const dialogsController = useDialogsController();
-//     const customizationController = useCustomizationController();
-//     const analyticsController = useAnalyticsController();
-//
-//     return {
-//         authController,
-//         sideDialogsController,
-//         sideEntityController,
-//         navigation,
-//         dataSource,
-//         storageSource,
-//         snackbarController,
-//         userConfigPersistence,
-//         dialogsController,
-//         customizationController,
-//         analyticsController
-//     };
-//
-// };

package/src/hooks/useLargeLayout.tsx

@@ -63,38 +63,3 @@ function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
         return false;
     return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
 }
-
-// import { useEffect, useState } from "react";
-//
-// const breakpoints = {
-//     xs: 0,
-//     sm: 640,
-//     md: 768,
-//     lg: 1024,
-//     xl: 1280,
-//     "2xl": 1536,
-//     "3xl": 1920
-// }
-// export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
-//     const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
-//
-//     useEffect(() => {
-//         const handleResize = () => {
-//             const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
-//             setIsLargeLayout(matched);
-//         };
-//
-//         // Set initial state
-//         handleResize();
-//
-//         // Set up event listener for resize events
-//         window.addEventListener("resize", handleResize);
-//
-//         // Clean up event listener when component unmounts
-//         return () => {
-//             window.removeEventListener("resize", handleResize);
-//         };
-//     }, []);
-//
-//     return isLargeLayout;
-// };

package/src/hooks/useModeController.tsx

@@ -7,8 +7,7 @@ import { useContext } from "react";
  */
 export interface ModeController {
     mode: "light" | "dark";
-    setMode: (mode: "light" | "dark") => void;
-    toggleMode: () => void;
+    setMode: (mode: "light" | "dark" | "system") => void;
 }
 
 /**

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCollection, EntityCustomView, FireCMSContext, User } from "../types";
 import { useEffect, useState } from "react";
-import { getNavigationEntriesFromPathInternal } from "../util/navigation_from_path";
+import { getNavigationEntriesFromPath } from "../util/navigation_from_path";
 import { useFireCMSContext } from "./useFireCMSContext";
 
 /**
@@ -67,10 +67,10 @@ export function resolveNavigationFrom<M extends Record<string, any>, USER extend
     const navigation = context.navigation;
 
     if (!navigation) {
-        throw Error("Calling getNavigationFrom, but main navigation has not yet been initialised");
+        throw Error("Calling resolveNavigationFrom, but main navigation has not yet been initialised");
     }
 
-    const navigationEntries = getNavigationEntriesFromPathInternal({
+    const navigationEntries = getNavigationEntriesFromPath({
         path,
         collections: navigation.collections ?? []
     });
@@ -143,9 +143,7 @@ export function useResolvedNavigationFrom<M extends Record<string, any>, USER ex
             setDataLoading(true);
             setDataLoadingError(undefined);
             resolveNavigationFrom<M, USER>({ path, context })
-                .then((res) => {
-                    setData(res);
-                })
+                .then(setData)
                 .catch((e) => setDataLoadingError(e))
                 .finally(() => setDataLoading(false));
         }

package/src/internal/useBuildDataSource.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import {
+    AuthController,
     DataSource,
     DataSourceDelegate,
     DeleteEntityProps,
@@ -27,11 +28,13 @@ import { resolveCollection, updateDateAutoValues } from "../util";
 export function useBuildDataSource({
                                        delegate,
                                        propertyConfigs,
-                                       navigationController
+                                       navigationController,
+                                       authController
                                    }: {
     delegate: DataSourceDelegate,
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
+    authController: AuthController;
 }): DataSource {
 
     return {
@@ -209,26 +212,27 @@ export function useBuildDataSource({
                     collection,
                     path,
                     entityId,
-                    propertyConfigs: propertyConfigs
+                    propertyConfigs: propertyConfigs,
+                    authController
                 })
                 : undefined;
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = usedDelegate.cmsToDelegateModel(
+            const delegateValues = usedDelegate.cmsToDelegateModel(
                 values,
             );
 
             const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
-                        inputValues: firestoreValues,
+                        inputValues: delegateValues,
                         properties,
                         status,
                         timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
                         setDateToMidnight: usedDelegate.setDateToMidnight
                     })
-                : firestoreValues;
+                : delegateValues;
 
             return usedDelegate.saveEntity({
                 path,

package/src/internal/useBuildSideDialogsController.tsx

@@ -25,8 +25,9 @@ export function useBuildSideDialogsController(): SideDialogsController {
         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)))
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key))) {
             updateSidePanels(newPanels);
+        }
     }, [location]);
 
     const close = useCallback(() => {
@@ -39,7 +40,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
         updateSidePanels(updatedPanels);
 
         if (routesCount.current > 0) {
-            if (lastSidePanel.urlPath)
+            if (lastSidePanel.urlPath) // if it has a url path, we need to navigate back, don't remove this code
                 navigate(-1);
             routesCount.current--;
         } else if (lastSidePanel.parentUrlPath) {