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"