@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/hooks/useBuildNavigationController.tsx

@@ -9,6 +9,7 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    NavigationBlocker,
     NavigationController,
     PermissionsBuilder,
     TopNavigationEntry,
@@ -26,14 +27,15 @@ 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";
 
-export type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
+export type BuildNavigationContextProps<EC extends EntityCollection, USER extends User> = {
     basePath?: string,
     baseCollectionPath?: string,
-    authController: AuthController<UserType>;
+    authController: AuthController<USER>;
     collections?: EC[] | EntityCollectionsBuilder<EC>;
     collectionPermissions?: PermissionsBuilder;
     views?: CMSView[] | CMSViewsBuilder;
@@ -49,9 +51,14 @@ export type BuildNavigationContextProps<EC extends EntityCollection, UserType ex
      * @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, UserType extends User>(props: BuildNavigationContextProps<EC, UserType>): NavigationController {
+export function useBuildNavigationController<EC extends EntityCollection, USER extends User>(props: BuildNavigationContextProps<EC, USER>): NavigationController {
     const {
         basePath = DEFAULT_BASE_PATH,
         baseCollectionPath = DEFAULT_COLLECTION_PATH,
@@ -63,9 +70,12 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         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, UserTy
 
     const refreshNavigation = useCallback(async () => {
 
-        if (authController.initialLoading)
+        if (disabled || authController.initialLoading)
             return;
 
         console.debug("Refreshing navigation");
@@ -202,6 +212,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
+                console.debug("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
             }
             if (collectionsRef.current === undefined) {
@@ -236,6 +247,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         collectionPermissions,
         authController.user,
         authController.initialLoading,
+        disabled,
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
@@ -331,16 +343,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         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);
     }, []);
@@ -400,24 +403,16 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         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", "/")
@@ -426,9 +421,10 @@ 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)
+            const resolvedPermissions = resolvePermissions(c, authController, c.path, null);
             return resolvedPermissions?.read !== false;
         })
         .map((c) => {
@@ -461,9 +457,7 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
     }
 
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
-
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
-
     return resolvedCollections;
 }
 
@@ -514,3 +508,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

@@ -21,9 +21,9 @@ import React, { useEffect } from "react";
  * @see FireCMSContext
  * @group Hooks and utilities
  */
-export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
 
-    const authController = useAuthController<UserType, AuthControllerType>();
+    const authController = useAuthController<USER, AuthControllerType>();
     const sideDialogsController = useSideDialogsController();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
@@ -35,7 +35,7 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
 
-    const fireCMSContextRef = React.useRef<FireCMSContext<UserType, AuthControllerType>>({
+    const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
         sideDialogsController,
         sideEntityController,
@@ -68,9 +68,9 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     return fireCMSContextRef.current;
 }
 
-// export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+// export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
 //
-//     const authController = useAuthController<UserType, AuthControllerType>();
+//     const authController = useAuthController<USER, AuthControllerType>();
 //     const sideDialogsController = useSideDialogsController();
 //     const sideEntityController = useSideEntityController();
 //     const navigation = useNavigationController();

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";
 
 /**
@@ -55,22 +55,22 @@ interface ResolvedNavigationEntityCustom<M extends Record<string, any>> {
  * @param context
  * @group Hooks and utilities
  */
-export function resolveNavigationFrom<M extends Record<string, any>, UserType extends User>({
+export function resolveNavigationFrom<M extends Record<string, any>, USER extends User>({
                                                                                                 path,
                                                                                                 context
                                                                                             }: {
     path: string,
-    context: FireCMSContext<UserType>
+    context: FireCMSContext<USER>
 }): Promise<ResolvedNavigationEntry<M>[]> {
 
     const dataSource = context.dataSource;
     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 ?? []
     });
@@ -126,12 +126,12 @@ export interface NavigationFrom<M extends Record<string, any>> {
  * in any React component that lives under `FireCMS`
  * @group Hooks and utilities
  */
-export function useResolvedNavigationFrom<M extends Record<string, any>, UserType extends User>(
+export function useResolvedNavigationFrom<M extends Record<string, any>, USER extends User>(
     {
         path
     }: NavigationFromProps): NavigationFrom<M> {
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [data, setData] = useState<ResolvedNavigationEntry<M>[] | undefined>();
     const [dataLoading, setDataLoading] = useState<boolean>(false);
@@ -142,10 +142,8 @@ export function useResolvedNavigationFrom<M extends Record<string, any>, UserTyp
         if (navigation) {
             setDataLoading(true);
             setDataLoadingError(undefined);
-            resolveNavigationFrom<M, UserType>({ path, context })
-                .then((res) => {
-                    setData(res);
-                })
+            resolveNavigationFrom<M, USER>({ path, context })
+                .then(setData)
                 .catch((e) => setDataLoadingError(e))
                 .finally(() => setDataLoading(false));
         }

package/src/hooks/useValidateAuthenticator.tsx

@@ -11,7 +11,7 @@ import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User
  * @param storageSource
  * @param dataSourceDelegate
  */
-export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>
+export function useValidateAuthenticator<USER extends User = any>
 ({
      disabled,
      authController,
@@ -21,8 +21,8 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
  }:
      {
          disabled?: boolean,
-         authController: Controller,
-         authenticator?: boolean | Authenticator<UserType, Controller>,
+         authController: AuthController<USER>,
+         authenticator?: boolean | Authenticator<USER>,
          dataSourceDelegate: DataSourceDelegate;
          storageSource: StorageSource;
      }): {

package/src/internal/useBuildDataSource.ts

@@ -209,7 +209,7 @@ export function useBuildDataSource({
                     collection,
                     path,
                     entityId,
-                    fields: propertyConfigs
+                    propertyConfigs: propertyConfigs
                 })
                 : undefined;
 

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) {