Ability to create collections from another collection and list them on the Home page

[kmatsuleva]

Expected result: We have one main collection ("All Modules") in which we create other collections ("Module 1", "Module 2") with the required fields:

These collections, once created, are listed on the home page:

We can open them and fill in the fields with the necessary information:

Actual: The functionality from the first two screenshots is ready, but I'm having a hard time showing "Module 1" and "Module 2" on the home page.

What I tried so far:

• Entity callbacks with onFetch:
  
• refresh state (failed because it's in onFetch)
• EntityCollectionsBuilder (got different and multiple errors) :
  

Does anyone have any idea how and if it is possible to achieve this within the CMS? Any help would be appreciated.

[fgatti675]

Hi @kmatsuleva
I have tried implementing this on my side and realised there were a couple of small pieces missing.
You can now access the datasource in the EntityCollectionBuilder, that will allow you to read data from Firestore upon creation of the CMS. I have also added a function that allows you to refresh the navigation data on demand.
I am writing an article on how to put all this together, but in the meantime, you can use this code as a template.
Remember to update to the latest 2.0.0-alpha.47 version!

import React from "react";
import {
    buildCollection,
    EntityCollectionsBuilder,
    FirebaseCMSApp
} from "@camberi/firecms";

import "typeface-rubik";
import "@fontsource/ibm-plex-mono";

// TODO: Replace with your config
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

type Unit = {
    name: string;
    price: number;
}

const unitsCollection = buildCollection<Unit>({
    name: "Units",
    singularName: "Unit",
    group: "Main",
    path: "units",
    customId: true,
    callbacks: {
        onSaveSuccess: ({ context }) => {
            context.navigation.refreshNavigation();
        },
        onDelete: ({ context }) => {
            context.navigation.refreshNavigation();
        }
    },
    properties: {
        name: {
            name: "Name",
            validation: { required: true },
            dataType: "string"
        },
        price: {
            name: "Price",
            validation: {
                required: true,
                requiredMessage: "You must set a price between 0 and 1000",
                min: 0,
                max: 1000
            },
            description: "Price with range validation",
            dataType: "number"
        }
    }
});

export default function App() {

    const collectionBuilder: EntityCollectionsBuilder = async ({ dataSource }) => {
        const units = await dataSource.fetchCollection<Unit>({
            path: "units",
            collection: unitsCollection
        });
        const lessonCollections = units.map(unit => buildCollection({
            name: unit.values.name,
            path: `units/${unit.id}/lessons`,
            group: "Units",
            properties: {
                name: {
                    name: "Name",
                    dataType: "string"
                }
            }
        }));

        return [
            unitsCollection,
            ...lessonCollections
        ]
    };

    return <FirebaseCMSApp
        name={"My learning app"}
        collections={collectionBuilder}
        firebaseConfig={firebaseConfig}
    />;
}

[fgatti675]

Full explanation in https://firecms.co/docs/recipes/documents_as_subcollections ;)

[kmatsuleva]

This helped me a lot! Thank you very much @fgatti675 !