Improvements

mui · Feb 3, 2025 · 6146dd1 · 6146dd1
1 parent 3784767
commit 6146dd1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 36 deletions.
diff --git a/packages/toolpad-core/src/CRUD/CRUD.tsx b/packages/toolpad-core/src/CRUD/CRUD.tsx
@@ -16,21 +16,9 @@ export interface CRUDProps<D extends DataModel> {
    */
   dataSource: DataSource<D>;
   /**
-   * Path to resource list page.
+   * Root path to CRUD pages.
    */
-  list: string;
-  /**
-   * Path to resource show page.
-   */
-  show: string;
-  /**
-   * Path to resource create page.
-   */
-  create: string;
-  /**
-   * Path to resource edit page.
-   */
-  edit: string;
+  rootPath: string;
   /**
    * Initial number of rows to show per page.
    * @default 100
@@ -43,7 +31,12 @@ export interface CRUDProps<D extends DataModel> {
 }
 
 function CRUD<D extends DataModel>(props: CRUDProps<D>) {
-  const { dataSource, list, show, create, edit, initialPageSize, initialValues } = props;
+  const { dataSource, rootPath, initialPageSize, initialValues } = props;
+
+  const listPath = rootPath;
+  const showPath = `${rootPath}/:id`;
+  const createPath = `${rootPath}/new`;
+  const editPath = `${rootPath}/:id/edit`;
 
   const routerContext = React.useContext(RouterContext);
 
@@ -80,7 +73,7 @@ function CRUD<D extends DataModel>(props: CRUDProps<D>) {
   const renderedRoute = React.useMemo(() => {
     const pathname = routerContext?.pathname ?? '';
 
-    if (match(list)(pathname)) {
+    if (match(listPath)(pathname)) {
       return (
         <List<D>
           initialPageSize={initialPageSize}
@@ -90,36 +83,36 @@ function CRUD<D extends DataModel>(props: CRUDProps<D>) {
         />
       );
     }
-    const showMatch = match<{ id: DataModelId }>(show)(pathname);
+    const showMatch = match<{ id: DataModelId }>(showPath)(pathname);
     if (showMatch) {
       const resourceId = showMatch.params.id;
       invariant(resourceId, 'No resource ID present in URL.');
       return <Show<D> id={resourceId} onEditClick={handleEditClick} onDelete={handleDelete} />;
     }
-    if (match(create)(pathname)) {
+    if (match(createPath)(pathname)) {
       return <Create<D> initialValues={initialValues} onSubmitSuccess={handleCreate} />;
     }
-    const editMatch = match<{ id: DataModelId }>(edit)(pathname);
+    const editMatch = match<{ id: DataModelId }>(editPath)(pathname);
     if (editMatch) {
       const resourceId = editMatch.params.id;
       invariant(resourceId, 'No resource ID present in URL.');
       return <Edit<D> id={resourceId} onSubmitSuccess={handleEdit} />;
     }
     return null;
   }, [
-    routerContext?.pathname,
-    list,
-    show,
-    create,
-    edit,
-    initialPageSize,
-    handleRowClick,
+    createPath,
+    editPath,
+    handleCreate,
     handleCreateClick,
-    handleEditClick,
     handleDelete,
-    initialValues,
-    handleCreate,
     handleEdit,
+    handleEditClick,
+    handleRowClick,
+    initialPageSize,
+    initialValues,
+    listPath,
+    routerContext?.pathname,
+    showPath,
   ]);
 
   return <CRUDProvider<D> dataSource={dataSource}>{renderedRoute}</CRUDProvider>;

diff --git a/playground/vite/src/main.tsx b/playground/vite/src/main.tsx
@@ -4,7 +4,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router';
 import App from './App';
 import Layout from './layouts/dashboard';
 import DashboardPage from './pages';
-import OrdersPage from './pages/orders';
+import OrdersCRUDPage from './pages/orders';
 
 const router = createBrowserRouter([
   {
@@ -20,7 +20,11 @@ const router = createBrowserRouter([
           },
           {
             path: 'orders/*',
-            Component: OrdersPage,
+            Component: OrdersCRUDPage,
+          },
+          {
+            path: 'orders/:orderId/*',
+            Component: OrdersCRUDPage,
           },
         ],
       },

diff --git a/playground/vite/src/pages/orders.tsx b/playground/vite/src/pages/orders.tsx
@@ -2,14 +2,11 @@ import * as React from 'react';
 import { CRUD } from '@toolpad/core/CRUD';
 import { ordersDataSource, Order } from '../data/orders';
 
-export default function OrdersPage() {
+export default function OrdersCRUDPage() {
   return (
     <CRUD<Order>
       dataSource={ordersDataSource}
-      list="/orders"
-      show="/orders/:id"
-      create="/orders/new"
-      edit="/orders/:id/edit"
+      rootPath="/orders"
       initialPageSize={25}
       initialValues={{ itemCount: 0 }}
     />