Moving Refine Form logic from crud lib to implementation

gui/rpk-gui/src/pages/firm/base-page/Edit.tsx

@@ -1,9 +1,11 @@
 import { UiSchema } from "@rjsf/utils";
-import { useParams } from "react-router";
 import { useContext } from "react";
-import { Button } from "@mui/material";
-import DeleteIcon from '@mui/icons-material/Delete';
+import { useParams, Navigate } from "react-router";
+import { Button, CircularProgress } from "@mui/material";
+import Stack from "@mui/material/Stack";
 import SaveIcon from '@mui/icons-material/Save';
+import { useForm } from "@refinedev/core";
+import { DeleteButton } from "@refinedev/mui";
 import { FirmContext } from "../../../contexts/FirmContext";
 import { CrudForm } from "../../../lib/crud/components/crud-form";
 import Stack from "@mui/material/Stack";
@@ -21,14 +23,30 @@ const Edit = <T,>(props: EditProps) => {
   const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
   const { record_id } = useParams();
 
+  const { onFinish, query, formLoading } = useForm({
+    resource: `${resourceBasePath}/${resource}`,
+    action: "edit",
+    redirect: "show",
+    id: record_id,
+  });
+
+  if (formLoading) {
+    return <CircularProgress />
+  }
+
+  if (!query?.data?.data) {
+    return <Navigate to="../" />
+  }
+
+  const record = query.data.data;
   return (
     <>
       <CrudForm
+        resourceBasePath={resourceBasePath}
         schemaName={schemaName}
         uiSchema={uiSchema}
-        resourceBasePath={resourceBasePath}
-        resource={resource}
-        id={record_id}
+        record={record}
+        onSubmit={(data: any) => onFinish(data)}
       >
         <Stack
           direction="row"

gui/rpk-gui/src/pages/firm/base-page/New.tsx

@@ -1,6 +1,7 @@
-import { CrudForm } from "../../../lib/crud/components/crud-form";
 import { UiSchema } from "@rjsf/utils";
 import { useContext } from "react";
+import { useForm } from "@refinedev/core";
+import { CrudForm } from "../../../lib/crud/components/crud-form";
 import { FirmContext } from "../../../contexts/FirmContext";
 
 type NewProps = {
@@ -15,6 +16,12 @@ const New = <T,>(props: NewProps) => {
   const { currentFirm } = useContext(FirmContext);
   const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
 
+  const { onFinish } = useForm({
+    resource: `${resourceBasePath}/${resource}`,
+    action: "create",
+    redirect: "show",
+  });
+
   return (
     <CrudForm
       schemaName={schemaName}
@@ -22,6 +29,7 @@ const New = <T,>(props: NewProps) => {
       resourceBasePath={resourceBasePath}
       resource={resource}
       defaultValue={defaultValue}
+      onSubmit={(data: any) => onFinish(data)}
     />
   )
 }

gui/rpk-gui/src/pages/firm/index.tsx

@@ -1,8 +1,8 @@
 import { Route, Routes, Link } from "react-router";
 import React, { useContext } from "react";
+import { useForm, useOne, useTranslation } from "@refinedev/core";
 import { FirmContext, FirmContextProvider } from "../../contexts/FirmContext";
 import { Header } from "../../components";
-import { useOne } from "@refinedev/core";
 import { CrudForm } from "../../lib/crud/components/crud-form";
 import { IFirm } from "../../interfaces";
 import { EntityRoutes } from "./EntityRoutes";
@@ -34,6 +34,7 @@ export const FirmRoutes = () => {
 const FirmHome = () => {
   const { currentFirm } = useContext(FirmContext);
   const { data: firm, isError, error, isLoading } = useOne({resource: 'firm', id: `${currentFirm.instance}/${currentFirm.firm}/`, errorNotification: false})
+  const { translate: t } = useTranslation();
 
   if (isLoading) {
     return <h1>Loading...</h1>
@@ -64,16 +65,25 @@ type FirmInitFormPros = {
 
 const FirmInitForm = (props: FirmInitFormPros) => {
   const { currentFirm } = props;
+  const { translate: t } = useTranslation();
+  const resourceBasePath = `firm`
+
+  const { onFinish } = useForm({
+    resource: `${resourceBasePath}/${currentFirm.instance}/${currentFirm.firm}`,
+    action: "create",
+    redirect: "show",
+  });
+
   return (
     <>
       <h1>Initialization of {`${currentFirm.instance} / ${currentFirm.firm}`}</h1>
-
       <CrudForm
-        schemaName={"CurrentFirmSchemaCreate"}
-        resource={`firm/${currentFirm.instance}/${currentFirm.firm}/`}
+        schemaName={"CurrentFirmSchema"}
+        resourceBasePath={resourceBasePath}
         uiSchema={{
           corporation: {entity_data: {employees: {"ui:style": {"display": "none"}}}},
         }}
+        onSubmit={(data: any) => onFinish(data)}
       />
     </>
   )

gui/rpk-gui/src/pages/hub/CreateFirm.tsx

@@ -1,6 +1,6 @@
-import { useInvalidateAuthStore } from "@refinedev/core";
+import { useForm, useInvalidateAuthStore } from "@refinedev/core";
 import { CrudForm } from "../../lib/crud/components/crud-form";
-import {empty_user} from "../../providers/auth-provider";
+import { empty_user } from "../../providers/auth-provider";
 
 export const CreateFirm = () => {
   const invalidateAuthStore = useInvalidateAuthStore()
@@ -9,11 +9,19 @@ export const CreateFirm = () => {
     invalidateAuthStore().then();
   }
 
+  const resourceBasePath = "hub/users";
+  const { onFinish } = useForm({
+    resource: `${resourceBasePath}/firms`,
+    action: "create",
+    redirect: "list",
+    onMutationSuccess: data => refreshUser()
+  });
+
   return (
     <CrudForm
-      schemaName={"FirmCreate"}
-      resource={"hub/users/firms/"}
-      onSuccess={() => { refreshUser() }}
+      schemaName={"Firm"}
+      resourceBasePath={resourceBasePath}
+      onSubmit={(data: any) => onFinish(data)}
     />
   )
 }