Next.js pages router playground + final bug fixes before review

mui · Feb 14, 2025 · 2521d77 · 2521d77
1 parent fc4fa14
commit 2521d77
Show file tree

Hide file tree

Showing 16 changed files with 327 additions and 34 deletions.
diff --git a/docs/pages/toolpad/core/api/list.json b/docs/pages/toolpad/core/api/list.json
@@ -3,14 +3,15 @@
     "dataSource": { "type": { "name": "object" } },
     "initialPageSize": { "type": { "name": "number" }, "default": "100" },
     "onCreateClick": { "type": { "name": "func" } },
+    "onDelete": { "type": { "name": "func" } },
     "onEditClick": { "type": { "name": "func" } },
     "onRowClick": { "type": { "name": "func" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ dataGrid?: object }" },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ dataGrid?: elementType }" },
+      "type": { "name": "shape", "description": "{ dataGrid?: func }" },
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
     }

diff --git a/docs/translations/api-docs/list/list.json b/docs/translations/api-docs/list/list.json
@@ -6,6 +6,7 @@
     "onCreateClick": {
       "description": "Callback fired when the &quot;Create&quot; button is clicked."
     },
+    "onDelete": { "description": "Callback fired when the item is successfully deleted." },
     "onEditClick": { "description": "Callback fired when the &quot;Edit&quot; button is clicked." },
     "onRowClick": {
       "description": "Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns."

diff --git a/packages/toolpad-core/src/CRUD/FormPage.tsx b/packages/toolpad-core/src/CRUD/FormPage.tsx
@@ -59,10 +59,12 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
   }>({
     values: {
       ...Object.fromEntries(
-        fields.map(({ field, type }) => [
-          field,
-          type === 'boolean' ? (initialValues[field] ?? false) : initialValues[field],
-        ]),
+        fields
+          .filter(({ field }) => field !== 'id')
+          .map(({ field, type }) => [
+            field,
+            type === 'boolean' ? (initialValues[field] ?? false) : initialValues[field],
+          ]),
       ),
       ...initialValues,
     },
@@ -106,6 +108,8 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
     setFormValues(initialValues);
   }, [initialValues, setFormValues]);
 
+  const [hasSubmittedSuccessfully, setHasSubmittedSuccessfully] = React.useState(false);
+
   const [, submitAction, isSubmitting] = React.useActionState<null | Error, FormData>(async () => {
     if (validate) {
       const errors = await validate(formValues);
@@ -125,9 +129,11 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
 
       if (onSubmitSuccess) {
         onSubmitSuccess();
+      } else {
+        handleFormReset();
       }
 
-      handleFormReset();
+      setHasSubmittedSuccessfully(true);
     } catch (createError) {
       notifications.show(`${localeText.submitErrorMessage}\n${(createError as Error).message}`, {
         severity: 'error',
@@ -339,7 +345,12 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
         </Grid>
       </FormGroup>
       <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button type="submit" variant="contained" size="large" loading={isSubmitting}>
+        <Button
+          type="submit"
+          variant="contained"
+          size="large"
+          loading={isSubmitting || (hasSubmittedSuccessfully && !!onSubmitSuccess)}
+        >
           {localeText.submitButtonLabel}
         </Button>
       </Box>

diff --git a/packages/toolpad-core/src/CRUD/List.tsx b/packages/toolpad-core/src/CRUD/List.tsx
@@ -419,6 +419,10 @@ List.propTypes /* remove-proptypes */ = {
    * Callback fired when the "Create" button is clicked.
    */
   onCreateClick: PropTypes.func,
+  /**
+   * Callback fired when the item is successfully deleted.
+   */
+  onDelete: PropTypes.func,
   /**
    * Callback fired when the "Edit" button is clicked.
    */
@@ -439,7 +443,7 @@ List.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slots: PropTypes.shape({
-    dataGrid: PropTypes.elementType,
+    dataGrid: PropTypes.func,
   }),
 } as any;
 

diff --git a/packages/toolpad-core/src/Crud/FormPage.tsx b/packages/toolpad-core/src/Crud/FormPage.tsx
@@ -59,10 +59,12 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
   }>({
     values: {
       ...Object.fromEntries(
-        fields.map(({ field, type }) => [
-          field,
-          type === 'boolean' ? (initialValues[field] ?? false) : initialValues[field],
-        ]),
+        fields
+          .filter(({ field }) => field !== 'id')
+          .map(({ field, type }) => [
+            field,
+            type === 'boolean' ? (initialValues[field] ?? false) : initialValues[field],
+          ]),
       ),
       ...initialValues,
     },
@@ -106,6 +108,8 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
     setFormValues(initialValues);
   }, [initialValues, setFormValues]);
 
+  const [hasSubmittedSuccessfully, setHasSubmittedSuccessfully] = React.useState(false);
+
   const [, submitAction, isSubmitting] = React.useActionState<null | Error, FormData>(async () => {
     if (validate) {
       const errors = await validate(formValues);
@@ -125,9 +129,11 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
 
       if (onSubmitSuccess) {
         onSubmitSuccess();
+      } else {
+        handleFormReset();
       }
 
-      handleFormReset();
+      setHasSubmittedSuccessfully(true);
     } catch (createError) {
       notifications.show(`${localeText.submitErrorMessage}\n${(createError as Error).message}`, {
         severity: 'error',
@@ -339,7 +345,12 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
         </Grid>
       </FormGroup>
       <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button type="submit" variant="contained" size="large" loading={isSubmitting}>
+        <Button
+          type="submit"
+          variant="contained"
+          size="large"
+          loading={isSubmitting || (hasSubmittedSuccessfully && !!onSubmitSuccess)}
+        >
           {localeText.submitButtonLabel}
         </Button>
       </Box>

diff --git a/packages/toolpad-core/src/Crud/List.tsx b/packages/toolpad-core/src/Crud/List.tsx
@@ -419,6 +419,10 @@ List.propTypes /* remove-proptypes */ = {
    * Callback fired when the "Create" button is clicked.
    */
   onCreateClick: PropTypes.func,
+  /**
+   * Callback fired when the item is successfully deleted.
+   */
+  onDelete: PropTypes.func,
   /**
    * Callback fired when the "Edit" button is clicked.
    */
@@ -439,7 +443,7 @@ List.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slots: PropTypes.shape({
-    dataGrid: PropTypes.elementType,
+    dataGrid: PropTypes.func,
   }),
 } as any;
 

diff --git a/packages/toolpad-core/src/nextjs/NextAppProviderPages.tsx b/packages/toolpad-core/src/nextjs/NextAppProviderPages.tsx
@@ -8,7 +8,7 @@ import type { AppProviderProps, Navigate, Router } from '../AppProvider';
  * @ignore - internal component.
  */
 export function NextAppProviderPages(props: AppProviderProps) {
-  const { push, replace, pathname, query } = useRouter();
+  const { push, replace, asPath, query } = useRouter();
 
   const search = React.useMemo(() => {
     const params = new URLSearchParams();
@@ -38,11 +38,11 @@ export function NextAppProviderPages(props: AppProviderProps) {
 
   const routerImpl = React.useMemo<Router>(
     () => ({
-      pathname,
+      pathname: asPath.split('?')[0],
       searchParams,
       navigate,
     }),
-    [navigate, pathname, searchParams],
+    [asPath, navigate, searchParams],
   );
 
   return <AppProvider router={routerImpl} {...props} />;

diff --git a/playground/nextjs-pages/package.json b/playground/nextjs-pages/package.json
@@ -15,10 +15,12 @@
     "@toolpad/core": "workspace:*",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "cookies-next": "^5.1.0",
     "eslint-config-next": "15.1.6",
     "next": "^15.1.6",
     "next-auth": "5.0.0-beta.25",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "yup": "1.6.1"
   }
 }