Merge pull request #197 from Dias999/feature/React-navigation-New_hie…

…rarchy feat: react-navigation - new hierarchy
conceptadev · Sep 3, 2024 · 0525e2d · 0525e2d
2 parents 527c649 + b7ad3cb
commit 0525e2d
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 212 deletions.
diff --git a/packages/react-navigation/src/components/Router.tsx b/packages/react-navigation/src/components/Router.tsx
@@ -1,24 +1,22 @@
-import React, {
-  Children,
-  ComponentType,
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-} from 'react';
+import React, { Children, ReactElement, ReactNode } from 'react';
 import {
   createMemoryRouter,
   createBrowserRouter,
-  createRoutesFromElements,
   RouterProvider,
-  Route,
+  Navigate,
 } from 'react-router-dom';
 import {
   DrawerItemProps,
   AuthModuleProps,
   DrawerProps,
   NavbarProps,
 } from '@concepta/react-material-ui/';
-import RoutesRoot from './RoutesRoot';
+
+import LoginRoute from './LoginRoute';
+import DefaultRoute from './DefaultRoute';
+import SignUpRoute from './SignUpRoute';
+import ResetPasswordRoute from './ResetPasswordRoute';
+import ForgotPasswordRoute from './ForgotPasswordRoute';
 
 export type AuthModule = {
   signIn?: AuthModuleProps;
@@ -27,61 +25,8 @@ export type AuthModule = {
   resetPassword?: AuthModuleProps;
 };
 
-const router = (
-  AdminProvider: ComponentType<PropsWithChildren<{ home: string }>>,
-  routes: ReactElement[],
-  items: DrawerItemProps[],
-  useNavigateFilter?: boolean,
-  initialRoute?: string,
-  authModuleProps?: AuthModule,
-  drawerProps?: DrawerProps,
-  navbarProps?: NavbarProps,
-  useMemoryRouter?: boolean,
-  renderAppBar?: (
-    menuItems: DrawerItemProps[],
-    children: ReactNode,
-  ) => ReactNode,
-  renderSignIn?: (home: string) => ReactNode,
-  renderSignUp?: (home: string) => ReactNode,
-  renderForgotPassword?: (home: string) => ReactNode,
-  renderResetPassword?: (home: string) => ReactNode,
-) => {
-  const firstRoute = routes[0];
-
-  const createRouter = useMemoryRouter
-    ? createMemoryRouter
-    : createBrowserRouter;
-
-  return createRouter(
-    createRoutesFromElements(
-      <Route
-        path="/*"
-        element={
-          <AdminProvider home={firstRoute?.props.id}>
-            <RoutesRoot
-              routes={routes}
-              items={items}
-              useNavigateFilter={useNavigateFilter}
-              initialRoute={initialRoute}
-              authModuleProps={authModuleProps}
-              drawerProps={drawerProps}
-              navbarProps={navbarProps}
-              renderAppBar={renderAppBar}
-              renderSignIn={renderSignIn}
-              renderSignUp={renderSignUp}
-              renderForgotPassword={renderForgotPassword}
-              renderResetPassword={renderResetPassword}
-            />
-          </AdminProvider>
-        }
-      />,
-    ),
-  );
-};
-
 type RouterProps = {
   children: ReactElement[];
-  AdminProvider: ComponentType<PropsWithChildren<{ home: string }>>;
   useNavigateFilter?: boolean;
   initialRoute?: string;
   useMemoryRouter?: boolean;
@@ -100,7 +45,6 @@ type RouterProps = {
 
 const Router = ({
   children,
-  AdminProvider,
   useNavigateFilter,
   initialRoute,
   useMemoryRouter = false,
@@ -130,26 +74,76 @@ const Router = ({
     };
   }).filter((item) => !!item);
 
-  return (
-    <RouterProvider
-      router={router(
-        AdminProvider,
-        children,
-        items,
-        useNavigateFilter,
-        initialRoute,
-        authModuleProps,
-        drawerProps,
-        navbarProps,
-        useMemoryRouter,
-        renderAppBar,
-        renderSignIn,
-        renderSignUp,
-        renderForgotPassword,
-        renderResetPassword,
-      )}
-    />
-  );
+  const home = children[0].props.id;
+
+  const createRouter = useMemoryRouter
+    ? createMemoryRouter
+    : createBrowserRouter;
+
+  const router = createRouter([
+    {
+      path: '/',
+      element: <Navigate to={initialRoute ?? home} replace />,
+    },
+    {
+      path: '/sign-in',
+      element: renderSignIn ? (
+        renderSignIn(home)
+      ) : (
+        <LoginRoute home={home} moduleProps={authModuleProps?.signIn} />
+      ),
+    },
+    {
+      path: '/sign-up',
+      element: renderSignUp ? (
+        renderSignUp(home)
+      ) : (
+        <SignUpRoute home={home} moduleProps={authModuleProps?.signUp} />
+      ),
+    },
+    {
+      path: '/forgot-password',
+      element: renderForgotPassword ? (
+        renderForgotPassword(home)
+      ) : (
+        <ForgotPasswordRoute
+          home={home}
+          moduleProps={authModuleProps?.forgotPassword}
+        />
+      ),
+    },
+    {
+      path: '/reset-password',
+      element: renderResetPassword ? (
+        renderResetPassword(home)
+      ) : (
+        <ResetPasswordRoute
+          home={home}
+          moduleProps={authModuleProps?.resetPassword}
+        />
+      ),
+    },
+    ...Children.map(children, (child) => ({
+      path: child.props.id,
+      element: (
+        <DefaultRoute
+          renderAppBar={renderAppBar}
+          isUnprotected={child.props.isUnprotected}
+          useNavigateFilter={useNavigateFilter}
+          resource={child.props.id}
+          name={child.props.name}
+          showAppBar={child.props.showAppBar}
+          module={child.props.module}
+          page={child.props.page}
+          items={items}
+          drawerProps={drawerProps}
+          navbarProps={navbarProps}
+        />
+      ),
+    })),
+  ]);
+
+  return <RouterProvider router={router} />;
 };
 
 export default Router;
diff --git a/packages/react-navigation/src/components/RoutesRoot.tsx b/packages/react-navigation/src/components/RoutesRoot.tsx