refactor: simplify ApiForm component

src/Components/ApiForm.tsx

@@ -1,25 +1,21 @@
-import React, { PropsWithChildren, useState } from "react";
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
+import { PropsWithChildren, useState } from "react";
 import { Observable, firstValueFrom } from "rxjs";
-import { withTranslation, WithTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Form } from "semantic-ui-react";
 import { JSONSchema7 } from "json-schema";
 import { UiSchema, FormValidation } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 
 import RjsfForm from "~/rjsf-theme";
 
-import {
-  Notification,
-  notificationConnectionIssue,
-} from "~/modules/notification";
+import { notificationConnectionIssue } from "~/modules/notification";
 import { addNotificationRequest } from "~/modules/notification/actions";
 
 import { requestWrapper } from "~/utils/api";
 import { PDInvalidParameters, InvalidParametersFormErrors } from "../problems";
 import { ErrorResponse } from "~/api";
 import { Button } from "./Button";
+import { useAppDispatch } from "~/hooks";
 
 export type Props<T, R> = {
   idPrefix: string;
@@ -37,22 +33,18 @@ export type Props<T, R> = {
   readonly?: boolean;
 };
 
-type AllProps<T, R> = PropsWithChildren<
-  WithTranslation &
-    Props<T, R> & {
-      addNotificationRequest: (
-        notification: Notification,
-        timeout?: number | null,
-      ) => void;
-    }
->;
+type AllProps<T, R> = PropsWithChildren<Props<T, R>>;
 
 /** A json-schema based form with functionality to interact with the API.
  *
  * Child components are rendered in the same Form.Group as the submit button.
  */
-function ApiForm<T = any, R = any>(props: AllProps<T, R>) {
-  const { t, children, formData: initialFormData, disabled, readonly } = props;
+export default function ApiForm<T = any, R = any>(props: AllProps<T, R>) {
+  const { children, formData: initialFormData, disabled, readonly } = props;
+
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
   const [formData, setFormData] = useState(initialFormData);
   const [submitting, setSubmitting] = useState(false);
   const [formEpoch, setFormEpoch] = useState(0);
@@ -80,7 +72,7 @@ function ApiForm<T = any, R = any>(props: AllProps<T, R>) {
       // we just... ignore them. Which is bad.
       if (e instanceof ErrorResponse) {
         if (e.details.status === 0 || e.details.status >= 500) {
-          props.addNotificationRequest(notificationConnectionIssue(t));
+          dispatch(addNotificationRequest(notificationConnectionIssue(t)));
         }
 
         if (e.details.type === "APPLICATION") {
@@ -132,18 +124,3 @@ function ApiForm<T = any, R = any>(props: AllProps<T, R>) {
     </>
   );
 }
-
-const mapDispatchToProps = (dispatch: any) =>
-  bindActionCreators(
-    {
-      addNotificationRequest,
-    },
-    dispatch,
-  );
-
-export default function Conn<T, R>(): React.ComponentType<Props<T, R>> {
-  return connect(
-    null,
-    mapDispatchToProps,
-  )(withTranslation()(ApiForm as React.ComponentType<AllProps<T, R>>));
-}

src/scenes/CreateKit.tsx

@@ -25,7 +25,7 @@ import commonStyle from "~/Common.module.css";
 const CreateKitForm = ApiForm<
   any,
   Response<{ kitSerial: string; password: string }>
->();
+>;
 
 function CreateKit() {
   const { t } = useTranslation();

src/scenes/LogIn.tsx

@@ -15,7 +15,7 @@ import ApiForm from "~/Components/ApiForm";
 import { useAppDispatch } from "~/hooks";
 import { api, schemas, Response } from "~/api";
 
-const LogInForm = ApiForm<any, Response<schemas["AuthenticationTokens"]>>();
+const LogInForm = ApiForm<any, Response<schemas["AuthenticationTokens"]>>;
 
 export default function LogInPage() {
   const { t } = useTranslation();

src/scenes/SignUp.tsx

@@ -10,7 +10,7 @@ import { api } from "~/api";
 
 import commonStyle from "~/Common.module.css";
 
-const SignUpForm = ApiForm();
+const SignUpForm = ApiForm;
 
 export default function SignUpPage() {
   const { t } = useTranslation();

src/scenes/kit/CreateConfiguration.tsx

@@ -13,7 +13,7 @@ import { rtkApi } from "~/services/astroplant";
 const CreateConfigurationForm = ApiForm<
   any,
   Response<schemas["KitConfiguration"]>
->();
+>;
 
 export type CreateConfigurationProps = {
   kit: KitState;

src/scenes/kit/details/index.tsx

@@ -26,7 +26,7 @@ import style from "./index.module.css";
 import { rtkApi } from "~/services/astroplant";
 import Gravatar from "~/Components/Gravatar";
 
-const PatchKitForm = ApiForm<any, Response<schemas["Kit"]>>();
+const PatchKitForm = ApiForm<any, Response<schemas["Kit"]>>;
 
 export default function KitDetails() {
   const { t } = useTranslation();

src/scenes/kit/kit-data/configure/Description.tsx

@@ -13,10 +13,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-const DescriptionForm = ApiForm<
-  string,
-  Response<schemas["KitConfiguration"]>
->();
+const DescriptionForm = ApiForm<string, Response<schemas["KitConfiguration"]>>;
 
 export default function Description({ kit, configuration, readOnly }: Props) {
   const dispatch = useAppDispatch();

src/scenes/kit/kit-data/configure/Peripherals/components/AddPeripheral.tsx

@@ -22,7 +22,7 @@ export type Props = {
   configuration: schemas["KitConfigurationWithPeripherals"];
 };
 
-const PeripheralForm = ApiForm<any, any>();
+const PeripheralForm = ApiForm<any, any>;
 
 export default function AddPeripheral({ kit, configuration }: Props) {
   const { t } = useTranslation();

src/scenes/kit/kit-data/configure/Peripherals/components/ViewEditPeripheral.tsx

@@ -25,7 +25,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-const PeripheralForm = ApiForm<any, any>();
+const PeripheralForm = ApiForm<any, any>;
 const DeletePeripheralButton = ApiButton<any>();
 
 export default function ViewEditPeripheral({