Fix for multiple collections with same path not resolving correctly

Author: fgatti675

examples/example_pro/src/FirestoreApp/App.tsx

@@ -49,7 +49,7 @@ import { firebaseConfig, secondaryFirebaseConfig } from "../firebase_config";
 import { ExampleCMSView } from "./views/ExampleCMSView";
 import { testCollection } from "./collections/test_collection";
 import { usersCollection } from "./collections/users_collection";
-import { localeCollectionGroup, productsCollection } from "./collections/products_collection";
+import { localeCollectionGroup, pppCollection, productsCollection } from "./collections/products_collection";
 import { blogCollection } from "./collections/blog_collection";
 import { showcaseCollection } from "./collections/showcase_collection";
 
@@ -233,6 +233,7 @@ export function App() {
             showcaseCollection,
             cryptoCollection,
             localeCollectionGroup,
+            pppCollection,
             // carsCollection(secondaryFirestoreDelegate)
         ];
         if (process.env.NODE_ENV !== "production") {

examples/example_pro/src/FirestoreApp/collections/products_collection.tsx

@@ -374,3 +374,39 @@ export const productsSimpleCollection = buildCollection<any>({
     }
 
 });
+
+
+export const pppCollection = buildCollection<Product>({
+    path: "products",
+    id: "ppp",
+    callbacks: productCallbacks,
+    name: "PPP",
+    group: "Demo collections",
+    icon: "shopping_cart",
+    openEntityMode: "full_screen",
+    description: "List of the products currently sold in our shop",
+    textSearchEnabled: true,
+    permissions: ({ authController }) => ({
+        edit: true,
+        create: true,
+        delete: true
+    }),
+    Actions: [SampleCollectionActions],
+    subcollections: [localeCollection],
+    // defaultSelectedView: "sample_custom_view",
+    additionalFields: [productAdditionalField],
+    // @ts-ignore
+    properties: {
+        name: {
+            dataType: "string",
+            name: "Name",
+            description: "Name of this product",
+            clearable: true,
+            validation: {
+                required: true
+            }
+        }
+    }
+
+});
+

packages/firecms_core/src/hooks/useBuildNavigationController.tsx

@@ -291,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;
@@ -398,6 +408,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         baseCollectionPath,
         initialised,
         getCollection,
+        getCollectionById,
         getCollectionFromPaths,
         getCollectionFromIds,
         isUrlCollectionPath,

packages/firecms_core/src/routes/FireCMSRoute.tsx

@@ -13,6 +13,7 @@ import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { toArray } from "../util/arrays";
 import { EntityCollectionView, NotFoundPage } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+import { EntityCollection } from "../types";
 
 export function FireCMSRoute() {
 
@@ -68,7 +69,10 @@ export function FireCMSRoute() {
     }
 
     if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
-        const collection = navigation.getCollection(navigationEntries[0].path);
+        let collection: EntityCollection<any> | undefined;
+        collection = navigation.getCollectionById(navigationEntries[0].id);
+        if (!collection)
+            collection = navigation.getCollection(navigationEntries[0].path);
         if (!collection)
             return null;
         return <EntityCollectionView
@@ -84,7 +88,11 @@ export function FireCMSRoute() {
     if (isSidePanel) {
         const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
         if (lastCollectionEntry) {
-            const collection = navigation.getCollection(lastCollectionEntry.path);
+            let collection: EntityCollection<any> | undefined;
+            const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
+            collection = navigation.getCollectionById(firstEntry.id);
+            if (!collection)
+                collection = navigation.getCollection(firstEntry.path);
             if (!collection)
                 return null;
             return <EntityCollectionView

packages/firecms_core/src/types/navigation.ts

@@ -59,6 +59,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     getCollection: (pathOrId: string, includeUserOverride?: boolean) => EC | undefined;
 
+    /**
+     * Get the top level collection configuration for a given id
+     */
+    getCollectionById: (id: string) => EC | undefined;
+
     /**
      * Get the collection configuration from its parent ids.
      */

packages/firecms_core/src/util/navigation_from_path.ts

@@ -51,7 +51,11 @@ export function getNavigationEntriesFromPath(props: {
     for (let i = 0; i < subpathCombinations.length; i++) {
         const subpathCombination = subpathCombinations[i];
 
-        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
+        let collection: EntityCollection<any> | undefined;
+        collection = collections && collections.find((entry) => entry.id === subpathCombination);
+        if (!collection) {
+            collection = collections && collections.find((entry) => entry.path === subpathCombination);
+        }
 
         if (collection) {
             const pathOrAlias = collection.id ?? collection.path;