Merge pull request #194 from chrishiguto/feature/rename-initial-route…

…-and-fix-prop-drilling feat: rename defaultRoute to initialRoute and fix prop drilling
conceptadev · Aug 30, 2024 · 527c649 · 527c649
2 parents b578e7a + c0bcb87
commit 527c649
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 60 deletions.
diff --git a/packages/react-material-ui/src/styles/CustomWidgets/CustomCheckboxWidget.tsx b/packages/react-material-ui/src/styles/CustomWidgets/CustomCheckboxWidget.tsx
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Checkbox } from '../../components/Checkbox';
 import { WidgetProps } from '@rjsf/utils';
 
-const CustomCheckboxWidget = (props: WidgetProps) => (
+type CustomCheckboxWidgetProps = WidgetProps & {
+  label: string | ReactNode;
+};
+
+const CustomCheckboxWidget = (props: CustomCheckboxWidgetProps) => (
   <Checkbox
     checked={props.value}
     label={props.label}

diff --git a/packages/react-navigation/src/components/DefaultRoute.tsx b/packages/react-navigation/src/components/DefaultRoute.tsx
@@ -13,7 +13,9 @@ import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
 type DefaultRouteProps = {
   resource: string;
   name: string;
+  useNavigateFilter?: boolean;
   isUnprotected?: boolean;
+  showAppBar?: boolean;
   module?: ModuleProps;
   page?: ReactNode;
   items: DrawerItemProps[];
@@ -28,74 +30,58 @@ type DefaultRouteProps = {
 const DefaultRoute = ({
   resource,
   name,
+  useNavigateFilter = true,
   isUnprotected = false,
+  showAppBar = true,
   module,
   page,
   items,
   drawerProps,
   navbarProps,
   renderAppBar,
-}: DefaultRouteProps) => {
+}: DefaultRouteProps): JSX.Element => {
   const navigate = useNavigate();
-
   const resourceName = resource.substring(1);
 
-  const menuItems = items?.map((item) => ({
+  const menuItems = items.map((item) => ({
     ...item,
-    onClick: () => {
-      if (!item?.id) return;
-      navigate(item.id);
-    },
+    onClick: () => item?.id && navigate(item.id),
   }));
 
-  let renderedChildren = null;
-
-  if (page) {
-    renderedChildren = page;
-  }
-
-  if (module) {
-    renderedChildren = (
-      <CrudModule
-        {...module}
-        resource={resourceName}
-        title={name}
-        navigate={navigate}
-      />
-    );
-  }
-
-  if (renderAppBar) {
-    if (!isUnprotected) {
-      return <>{renderAppBar(menuItems, renderedChildren)}</>;
-    }
-
-    return (
-      <ProtectedRoute>
-        {renderAppBar(menuItems, renderedChildren)}
-      </ProtectedRoute>
-    );
-  }
-
-  if (!isUnprotected) {
-    return (
-      <AppBarContainer menuItems={menuItems}>
-        {renderedChildren}
-      </AppBarContainer>
-    );
-  }
+  const content = module ? (
+    <CrudModule
+      {...module}
+      resource={resourceName}
+      title={name}
+      navigate={useNavigateFilter ? navigate : undefined}
+    />
+  ) : (
+    page
+  );
 
-  return (
-    <ProtectedRoute>
+  const wrappedContent = showAppBar ? (
+    renderAppBar ? (
+      renderAppBar(menuItems, content)
+    ) : (
       <AppBarContainer
         menuItems={menuItems}
         drawerProps={drawerProps}
         navbarProps={navbarProps}
       >
-        {renderedChildren}
+        {content}
       </AppBarContainer>
-    </ProtectedRoute>
+    )
+  ) : (
+    content
   );
+
+  const finalContent = isUnprotected ? (
+    wrappedContent
+  ) : (
+    <ProtectedRoute>{wrappedContent}</ProtectedRoute>
+  );
+
+  return <>{finalContent}</>;
 };
 
 export default DefaultRoute;
diff --git a/packages/react-navigation/src/components/Resource.tsx b/packages/react-navigation/src/components/Resource.tsx
@@ -6,7 +6,9 @@ type ResourceProps = {
   id: string;
   name: string;
   icon: ReactNode;
+  showDrawerItem?: boolean;
   isUnprotected?: boolean;
+  showAppBar?: boolean;
   module?: Partial<ModuleProps>;
   page?: ReactNode;
 };

diff --git a/packages/react-navigation/src/components/Router.tsx b/packages/react-navigation/src/components/Router.tsx
@@ -31,7 +31,8 @@ const router = (
   AdminProvider: ComponentType<PropsWithChildren<{ home: string }>>,
   routes: ReactElement[],
   items: DrawerItemProps[],
-  defaultRoute?: string,
+  useNavigateFilter?: boolean,
+  initialRoute?: string,
   authModuleProps?: AuthModule,
   drawerProps?: DrawerProps,
   navbarProps?: NavbarProps,
@@ -56,11 +57,12 @@ const router = (
       <Route
         path="/*"
         element={
-          <AdminProvider home={defaultRoute ?? firstRoute?.props.id}>
+          <AdminProvider home={firstRoute?.props.id}>
             <RoutesRoot
               routes={routes}
               items={items}
-              defaultRoute={defaultRoute}
+              useNavigateFilter={useNavigateFilter}
+              initialRoute={initialRoute}
               authModuleProps={authModuleProps}
               drawerProps={drawerProps}
               navbarProps={navbarProps}
@@ -80,7 +82,8 @@ const router = (
 type RouterProps = {
   children: ReactElement[];
   AdminProvider: ComponentType<PropsWithChildren<{ home: string }>>;
-  defaultRoute?: string;
+  useNavigateFilter?: boolean;
+  initialRoute?: string;
   useMemoryRouter?: boolean;
   authModuleProps?: AuthModule;
   drawerProps?: DrawerProps;
@@ -98,7 +101,8 @@ type RouterProps = {
 const Router = ({
   children,
   AdminProvider,
-  defaultRoute,
+  useNavigateFilter,
+  initialRoute,
   useMemoryRouter = false,
   authModuleProps,
   drawerProps,
@@ -110,20 +114,30 @@ const Router = ({
   renderResetPassword,
 }: RouterProps) => {
   const items = Children.map(children, (child) => {
+    // This validation is needed so `showDrawerItem`
+    // can be `true` by default
+    if (
+      child.props.showDrawerItem !== undefined &&
+      !child.props.showDrawerItem
+    ) {
+      return null;
+    }
+
     return {
       id: child.props.id,
       text: child.props.name,
       icon: child.props.icon,
     };
-  });
+  }).filter((item) => !!item);
 
   return (
     <RouterProvider
       router={router(
         AdminProvider,
         children,
         items,
-        defaultRoute,
+        useNavigateFilter,
+        initialRoute,
         authModuleProps,
         drawerProps,
         navbarProps,

diff --git a/packages/react-navigation/src/components/RoutesRoot.tsx b/packages/react-navigation/src/components/RoutesRoot.tsx
@@ -15,7 +15,8 @@ import { AuthModule } from './Router';
 type RoutesRootProps = {
   items: DrawerItemProps[];
   routes: ReactElement[];
-  defaultRoute?: string;
+  useNavigateFilter?: boolean;
+  initialRoute?: string;
   authModuleProps?: AuthModule;
   drawerProps?: DrawerProps;
   navbarProps?: NavbarProps;
@@ -32,7 +33,8 @@ type RoutesRootProps = {
 const RoutesRoot = ({
   routes,
   items,
-  defaultRoute,
+  useNavigateFilter,
+  initialRoute,
   authModuleProps,
   drawerProps,
   navbarProps,
@@ -42,11 +44,14 @@ const RoutesRoot = ({
   renderForgotPassword,
   renderResetPassword,
 }: RoutesRootProps) => {
-  const home = defaultRoute ?? routes[0].props.id;
+  const home = routes[0].props.id;
 
   return (
     <Routes>
-      <Route path="/" element={<Navigate to={home} replace />} />
+      <Route
+        path="/"
+        element={<Navigate to={initialRoute ?? home} replace />}
+      />
       <Route
         path="/sign-in"
         element={
@@ -102,8 +107,10 @@ const RoutesRoot = ({
               <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}