Moving Refine Form logic from crud lib to implementation

gui/rpk-gui/src/lib/crud/components/crud-form.tsx

@@ -8,32 +8,23 @@ import { BaseForm } from "./base-form";
 type CrudFormProps = {
   schemaName: string,
   uiSchema?: UiSchema,
-  resourceBasePath?: string,
+  record?: any,
-  resource: string,
+  resourceBasePath: string,
-  id?: string,
+  onSubmit: (data: any) => void,
-  onSuccess?: (data: any) => void,
   defaultValue?: any,
   children?: ReactNode
 }
 
 export const CrudForm: React.FC<CrudFormProps> = (props) => {
-  const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess, defaultValue, children } = props;
+  const { schemaName, uiSchema, record, resourceBasePath, defaultValue, children, onSubmit } = props;
-
-  const { onFinish, query, formLoading } = useForm({
-    resource: resourceBasePath == "" ? resource : `${resourceBasePath}/${resource}`,
-    action: id === undefined ? "create" : "edit",
-    redirect: "show",
-    id,
-    onMutationSuccess: (data: any) => { if (onSuccess) { onSuccess(data) } },
-  });
 
   const [schema, setSchema] = useState({});
   const [schemaLoading, setSchemaLoading] = useState(true);
   useEffect(() => {
     const fetchSchema = async () => {
       try {
-        const resourceSchema = id === undefined ? await jsonschemaProvider.getCreateResourceSchema(schemaName)
+        const resourceSchema = record === undefined ? await jsonschemaProvider.getCreateResourceSchema(schemaName)
-          : await jsonschemaProvider.getCardResourceSchema(schemaName);
+          : await jsonschemaProvider.getUpdateResourceSchema(schemaName);
         setSchema(resourceSchema);
         setSchemaLoading(false);
       } catch (error) {
@@ -44,19 +35,18 @@ export const CrudForm: React.FC<CrudFormProps> = (props) => {
     fetchSchema();
   }, []);
 
-  if(formLoading || schemaLoading) {
+  if(schemaLoading) {
     return <CircularProgress />
   }
 
-  const record = query?.data?.data || defaultValue;
   return (
     <BaseForm
       schema={schema}
       uiSchema={uiSchema}
-      formData={record}
+      formData={record || defaultValue}
       resourceBasePath={resourceBasePath}
       onSubmit={
-        (data: any) => onFinish(data)
+        (data: any) => onSubmit(data)
       }
       children={children}
     />

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 { useParams, Navigate } from "react-router";
-import DeleteIcon from '@mui/icons-material/Delete';
+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}
+        record={record}
-        resource={resource}
+        onSubmit={(data: any) => onFinish(data)}
-        id={record_id}
       >
         <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"}
+        schemaName={"CurrentFirmSchema"}
-        resource={`firm/${currentFirm.instance}/${currentFirm.firm}/`}
+        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"}
+      schemaName={"Firm"}
-      resource={"hub/users/firms/"}
+      resourceBasePath={resourceBasePath}
-      onSuccess={() => { refreshUser() }}
+      onSubmit={(data: any) => onFinish(data)}
     />
   )
 }