MultiTenants, controle de acesso e Code Splitting

create-react-app react-app-multitenant --typescript

/*
    O menu é constituído de um item principal que pode ou não ter sub itens.
    A property component é onde iremos fazer o import() para fazer funcionar
    o code splitting. Nele dizemos o componente e a rota (property path) que
    iremos renderizar para o usuário
*/
export type MenuItem = {
	component?: (profile: string, tenant?: string) => Promise<any>;
	key: string;
	path: string;
	icon: string;
	title: string;
	tenants: string[];
	subItems: MenuSubItem[];
	tenantEnv?: string;
	allowedProfiles: string[];
};

// Um sub item não pode ter sub itens, então iremos omitir este tipo
export type MenuSubItem = Omit<MenuItem, "subItems">;

// Apenas um tipo para forçar o array de rotas ter os itens necessários para o react-router
export type RouterConstruct = {
	path: string;
	component: React.LazyExoticComponent<React.ComponentType<any>>;
};

// Aplicar o tenant como um caminho
const path = (tenant: string) => `/${tenant}/`;

// Verificar se o Item ou SubItem possuem uma property component e retornar o componente + rota
const getComponentInfo = (item: MenuSubItem, aliasProfile: string) => {
	if (!!item.component) {
		const localImport = item.component(aliasProfile, path(TENANT));
		return { path: item.path, component: lazy(() => localImport) };
	}
	return null;
};

const getProfileRoutes = (filterRoutes: MenuItem[], aliasProfile: string) => {
	// Essa é a minha lista com as rotas aplicadas no react-router
	const localRoutes = [] as RouterConstruct[];
	filterRoutes.forEach((route) => {
		const component = getComponentInfo(route, aliasProfile);
		if (route.path !== "" && component !== null) {
			localRoutes.push(component);
		}
		route.subItems.forEach((subRoute) => {
			const subComponent = getComponentInfo(subRoute, aliasProfile);
			if (subComponent !== null) {
				localRoutes.push(subComponent);
			}
		});
	});
	return localRoutes;
};

const useRoutesByProfile = () => {
	const filterRoutes = useRouteFilter();
	const [routes, setRoutes] = useState([] as RouterConstruct[]);
	/* 
        Toda vez que o filtro de rotas, dado o perfil e tenant mudar,
        execute a criação de rotas novamente
    */
	useEffect(() => {
		const user = getAuthUser();
		if (!isEmpty(user)) {
			setRoutes(getProfileRoutes(MenuItems, user.perfil));
		}
	}, [filterRoutes]);
	return routes;
};

export default useRoutesByProfile;

const createRoute = (x: RouterConstruct) => (
	<Route exact key={x.path} path={x.path} component={x.component} />
);

const AppRouter = () => {
	// Autenticação requerida em toda a aplicação
	useAuth();

	// Hook para roteamento dinâmico
	const routes = useRoutesByProfile();

	return (
		<Router history={History}>
			{/*
                Error Boundary para caso hajam erros de importação dinâmicas e outros
                relacionado ao ciclo de vida do react (mais funcional em prod)
            */}
			<ErrorBoundary>
				{/*
                    Este componente você pode ver no github, mas é basicamente um wrapper
                    para o React.Suspense com um loader customizado
                */}
				<SuspenseLoader>
					<HashRouter>
						<Switch>
							{/*
                            Mapeamento das rotas dinâmicas de acordo com os dados do nosso hook
                        */}
							{routes.map(createRoute)}
							<Route component={NotFound} />
						</Switch>
					</HashRouter>
				</SuspenseLoader>
			</ErrorBoundary>
		</Router>
	);
};

./src/modules
├── dashboard
│   ├── abcd
│   │   └── admin.page.tsx
│   ├── xkcb
│   │   └── admin.page.tsx
│   └── xpto
│       └── admin.page.tsx
└── users
    └── index.page.tsx

const isDev = process.env.NODE_ENV === "development";

/*
    URL de acesso dos assets do frontend, diferente do qual você acessa.
    site: https://app.xpto.io/
*/
export const URL_ACCESS = `https://xpto-industries.io/${TENANT}/dashboard/${VERSION}/`;

export declare let __webpack_public_path__: string;

if (!isDev) {
	/*
		Define onde o webpack irá fazer o load dos `chunks` com dynamic import
	*/
	__webpack_public_path__ = URL_ACCESS;
}

type Middleware = StoreEnhancer<
	{
		dispatch: unknown;
	},
	{}
>;

export type AsyncStore = Store<unknown, AnyAction> & {
	dispatch: unknown;
	asyncReducers: {
		[key: string]: Reducer<unknown, any>;
	};
	injectReducer: (key: string, reducer: Reducer<any>) => AsyncStore;
};

const redux = (asyncReducers: any = {}) =>
	combineReducers({
		// reducer de autenticação
		[ReducersAlias.AuthReducer]: authReducer,
		...asyncReducers,
	});

/*
    Inicializar a store com os middlewares necessários sendo passados
    como parâmetro.
    Note que o `redux()` é uma função que pode receber ou não os reducers
    assíncronos.
    Após inserir-los na store, um .replaceReducer é invocado com os novos 
    reducers e o novo estado já está pronto para ser utilizado
*/
const initializeStore = (middleware: Middleware) => {
	const store = createStore(redux(), middleware) as AsyncStore;

	store.asyncReducers = {};

	store.injectReducer = (key: string, reducer: Reducer<unknown, any>) => {
		store.asyncReducers[key] = reducer;
		store.replaceReducer(redux(store.asyncReducers));
		return store;
	};

	return store;
};

// src/index.tsx - Onde iremos criar nosso wraper do estado do Redux

const sagasMiddleware = reduxSaga();
const middlewares = applyMiddleware(sagasMiddleware, logger);
const reduxStore = store(middlewares);
sagasMiddleware.run(sagasActions);

ReactDOM.render(
	<StrictMode>
		<Provider store={reduxStore}>
			<AppRouter />
		</Provider>
	</StrictMode>,
	document.getElementById("root")
);

import { useEffect } from "react";
import { Reducer } from "redux";
import { useStore } from "react-redux";

// Essa é a store cujo o código foi mostrado anteriormente
import { AsyncStore } from "@/store";

/*
    Uma modificação legal a ser feita é mudar o método injectReducer
    para receber um array `key: reducer` e poder acrescentar mais de
    um reducer na nossa store
*/
const useInjectReducer = (key: string, reducer: Reducer<any>) => {
	const store = useStore() as AsyncStore;

	useEffect(() => {
		store.injectReducer(key, reducer);
	}, []);
};