From f3ffe10c51d573e5fb87df958bbef949a4a08668 Mon Sep 17 00:00:00 2001
From: Gottfried Chen <gottfried.chen@allaboutapps.at>
Date: Tue, 2 May 2023 11:57:28 +0200
Subject: [PATCH 1/4] switch formik to react-hook-form

---
 template.json                                 |   3 +-
 .../components/auth/sites/AuthLoginSite.tsx   | 127 +++++++++---------
 .../src/components/ui/CustomInputField.tsx    |  24 ++--
 3 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/template.json b/template.json
index cf002ea..f03e819 100644
--- a/template.json
+++ b/template.json
@@ -8,19 +8,20 @@
       "@emotion/styled": "^11.10.5",
       "@formatjs/intl-pluralrules": "5.1.4",
       "@formatjs/intl-relativetimeformat": "11.1.4",
+      "@hookform/resolvers": "^3.1.0",
       "@mui/icons-material": "^5.11.0",
       "@mui/lab": "^5.0.0-alpha.115",
       "@mui/material": "^5.11.4",
       "axios": "^1.3.4",
       "axios-auth-refresh": "^3.3.6",
       "dayjs": "^1.10.7",
-      "formik": "^2.2.9",
       "intl": "^1.2.5",
       "license-checker-webpack-plugin": "^0.2.1",
       "lodash": "^4.17.21",
       "query-string": "^7.0.1",
       "react": "18.2.0",
       "react-dom": "18.2.0",
+      "react-hook-form": "^7.43.9",
       "react-intl": "6.2.1",
       "react-query": "^3.39.3",
       "react-router": "^6.4.2",
diff --git a/template/src/components/auth/sites/AuthLoginSite.tsx b/template/src/components/auth/sites/AuthLoginSite.tsx
index 90256a6..d163a79 100644
--- a/template/src/components/auth/sites/AuthLoginSite.tsx
+++ b/template/src/components/auth/sites/AuthLoginSite.tsx
@@ -1,17 +1,18 @@
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Button } from "@mui/material";
-import { AxiosError } from "axios";
-import { Field, Form, Formik } from "formik";
 import * as React from "react";
+import { Controller, useForm } from "react-hook-form";
 import * as Yup from "yup";
 import { t } from "../../../i18n/util";
 import { useLogin } from "../../../network/api/useLogin";
 import { useAuthStore } from "../../../stores/authStore";
 import { useGeneralStore } from "../../../stores/generalStore";
 import { usePushRoute } from "../../app/router/history";
-import { DashboardRoutes } from "../../dashboard/router/DashboardRoutes";
 import { CustomInputField } from "../../ui/CustomInputField";
 import { Colors } from "../../util/Colors";
 import { ImageLogo } from "../../util/Images";
+import { DashboardRoutes } from "../../dashboard/router/DashboardRoutes";
+import { AxiosError } from "axios";
 
 interface ILoginValues {
     email: string;
@@ -19,6 +20,25 @@ interface ILoginValues {
 }
 
 export const AuthLoginSite = () => {
+    const { handleSubmit, formState, control } = useForm<ILoginValues>({
+        defaultValues: {
+            email: "",
+            password: "",
+        },
+        mode: "onBlur",
+        resolver: yupResolver(
+            Yup.object().shape({
+                email: Yup.string()
+                    .email(t("screen.login.form.email.validation_error"))
+                    .required(t("screen.login.form.email.validation_error"))
+                    .trim(),
+                password: Yup.string()
+                    .min(6, t("screen.login.form.password.validation_error"))
+                    .required(t("screen.login.form.password.validation_error")),
+            }),
+        ),
+    });
+
     const [error, setError] = React.useState<string>();
     const pushRoute = usePushRoute();
 
@@ -28,7 +48,7 @@ export const AuthLoginSite = () => {
 
     const setIsLoading = useGeneralStore((state) => state.setIsLoading);
 
-    const handleSubmit = async (model: ILoginValues) => {
+    const onSubmit = async (model: ILoginValues) => {
         setIsLoading(true);
         setError("");
 
@@ -84,64 +104,51 @@ export const AuthLoginSite = () => {
                 >
                     {t("screen.login.title")}
                 </div>
-                <div style={{ padding: 24, border: `1px solid ${Colors.PRIMARY_COLOR}`, borderTop: "none" }}>
-                    <Formik
-                        initialValues={{
-                            email: "",
-                            password: "",
+
+                <form
+                    onSubmit={handleSubmit(onSubmit)}
+                    style={{ padding: 24, border: `1px solid ${Colors.PRIMARY_COLOR}`, borderTop: "none" }}
+                >
+                    <Controller
+                        name="email"
+                        control={control}
+                        render={(formProps) => (
+                            <CustomInputField
+                                label={t("screen.login.form.email.label")}
+                                type="email"
+                                autoComplete="username"
+                                {...formProps}
+                            />
+                        )}
+                    />
+
+                    <Controller
+                        name="password"
+                        control={control}
+                        render={(formProps) => (
+                            <CustomInputField
+                                label={t("screen.login.form.password.label")}
+                                type="password"
+                                autoComplete="current-password"
+                                {...formProps}
+                            />
+                        )}
+                    />
+                    {error && <div style={{ color: Colors.ERROR, fontSize: 14 }}>{error}</div>}
+                    <Button
+                        variant="contained"
+                        style={{
+                            boxShadow: "none",
+                            borderRadius: 24,
+                            marginTop: 24,
                         }}
-                        onSubmit={handleSubmit}
-                        validationSchema={Yup.object().shape({
-                            email: Yup.string()
-                                .email(t("screen.login.form.email.validation_error"))
-                                .required(t("screen.login.form.email.validation_error"))
-                                .trim(),
-                            password: Yup.string()
-                                .min(6, t("screen.login.form.password.validation_error"))
-                                .required(t("screen.login.form.password.validation_error")),
-                        })}
-                        validateOnBlur
+                        fullWidth
+                        disabled={formState.isSubmitting}
+                        type="submit"
                     >
-                        {({ errors, touched, isSubmitting }) => (
-                            <Form>
-                                <Field
-                                    component={CustomInputField}
-                                    label={t("screen.login.form.email.label")}
-                                    name="email"
-                                    type="email"
-                                    required
-                                    autoComplete="username"
-                                    errorMessage={errors.email}
-                                    isTouched={touched.email}
-                                />
-                                <Field
-                                    component={CustomInputField}
-                                    label={t("screen.login.form.password.label")}
-                                    name="password"
-                                    type="password"
-                                    required
-                                    autoComplete="current-password"
-                                    errorMessage={errors.password}
-                                    isTouched={touched.password}
-                                />
-                                {error && <div style={{ color: Colors.ERROR, fontSize: 14 }}>{error}</div>}
-                                <Button
-                                    variant="contained"
-                                    style={{
-                                        boxShadow: "none",
-                                        borderRadius: 24,
-                                        marginTop: 24,
-                                    }}
-                                    fullWidth
-                                    disabled={isSubmitting}
-                                    type="submit"
-                                >
-                                    {t("screen.login.form.submit")}
-                                </Button>
-                            </Form>
-                        )}
-                    </Formik>
-                </div>
+                        {t("screen.login.form.submit")}
+                    </Button>
+                </form>
             </div>
         </div>
     );
diff --git a/template/src/components/ui/CustomInputField.tsx b/template/src/components/ui/CustomInputField.tsx
index b15cacd..3391b59 100644
--- a/template/src/components/ui/CustomInputField.tsx
+++ b/template/src/components/ui/CustomInputField.tsx
@@ -1,12 +1,14 @@
 import { MenuItem, TextField, TextFieldProps } from "@mui/material";
-import { FieldInputProps, FormikState, getIn } from "formik";
 import * as React from "react";
+import { ControllerFieldState, ControllerRenderProps, FieldValues, UseFormStateReturn } from "react-hook-form";
 import { FieldError } from "./FieldError";
 
 type IProps = TextFieldProps & {
-    field: FieldInputProps<string>;
+    field: ControllerRenderProps<any, any>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<FieldValues>;
+
     onChange?: () => void;
-    form: FormikState<any>;
     showValidationErrorText?: boolean;
     selectOptions?: { value: string; label: string }[];
 };
@@ -20,16 +22,18 @@ export const CustomInputField = ({
     minRows,
     maxRows,
     required,
-    form,
+
     field,
+    fieldState,
+    formState,
     "aria-label": ariaLabel,
     placeholder,
     showValidationErrorText = true,
     selectOptions,
     onChange,
 }: IProps) => {
-    const fieldError = getIn(form.errors, field.name);
-    const showError = getIn(form.touched, field.name) && !!fieldError;
+    const fieldError = fieldState.error?.message;
+    const showError = fieldState.isTouched && !!fieldError;
 
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         field.onChange(event);
@@ -42,10 +46,6 @@ export const CustomInputField = ({
             <TextField
                 select={!!selectOptions}
                 label={required ? `${label} *` : label}
-                value={field.value}
-                name={field.name}
-                onBlur={field.onBlur}
-                onChange={handleChange}
                 fullWidth
                 type={type}
                 autoComplete={autoComplete}
@@ -60,6 +60,10 @@ export const CustomInputField = ({
                 // For date inputs shrink does not work correctly so explicitly set it.
                 // See here: https://mui.com/material-ui/react-text-field/#shrink
                 InputLabelProps={type === "date" ? { shrink: true } : undefined}
+                // Injects name, onChange, onBlur, value, ref
+                // So if you override an of these you have to put it after this
+                {...field}
+                onChange={handleChange}
             >
                 {selectOptions?.map((selectOption) => (
                     <MenuItem key={selectOption.value} value={selectOption.value}>

From 19557373daf7d4f69754e66f4eed0846a7ae8899 Mon Sep 17 00:00:00 2001
From: Gottfried Chen <gottfried.chen@allaboutapps.at>
Date: Tue, 2 May 2023 13:09:39 +0200
Subject: [PATCH 2/4] validate onTouched instead onBlur

---
 template/src/components/app/router/AppRouter.tsx     | 2 +-
 template/src/components/auth/sites/AuthLoginSite.tsx | 2 +-
 template/src/components/ui/CustomInputField.tsx      | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/template/src/components/app/router/AppRouter.tsx b/template/src/components/app/router/AppRouter.tsx
index a121388..3fda927 100644
--- a/template/src/components/app/router/AppRouter.tsx
+++ b/template/src/components/app/router/AppRouter.tsx
@@ -1,6 +1,7 @@
 import { ReactQueryDevtools } from "react-query/devtools";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { BASE_NAME, DEBUG_PUBLIC_DASHBOARD, LOADING_INDICATOR_DELAY_MS } from "../../../config";
+import { useQueryParams } from "../../../hooks/useQueryParams";
 import { IDebugTab, useDebugStore } from "../../../stores/debugStore";
 import { useGeneralStore } from "../../../stores/generalStore";
 import { AuthLoginSite } from "../../auth/sites/AuthLoginSite";
@@ -16,7 +17,6 @@ import { NoAuthOnlyRoute } from "./NoAuthOnlyRoute";
 import { PrivateRoute } from "./PrivateRoute";
 import { RoutingManager } from "./RoutingManager";
 import ScrollToTop from "./ScrollToTop";
-import { useQueryParams } from "../../../hooks/useQueryParams";
 
 export const AppRouter = () => {
     const isLoading = useGeneralStore((state) => state.isLoading);
diff --git a/template/src/components/auth/sites/AuthLoginSite.tsx b/template/src/components/auth/sites/AuthLoginSite.tsx
index d163a79..76c2441 100644
--- a/template/src/components/auth/sites/AuthLoginSite.tsx
+++ b/template/src/components/auth/sites/AuthLoginSite.tsx
@@ -25,7 +25,7 @@ export const AuthLoginSite = () => {
             email: "",
             password: "",
         },
-        mode: "onBlur",
+        mode: "onTouched",
         resolver: yupResolver(
             Yup.object().shape({
                 email: Yup.string()
diff --git a/template/src/components/ui/CustomInputField.tsx b/template/src/components/ui/CustomInputField.tsx
index 3391b59..702c5d7 100644
--- a/template/src/components/ui/CustomInputField.tsx
+++ b/template/src/components/ui/CustomInputField.tsx
@@ -33,7 +33,6 @@ export const CustomInputField = ({
     onChange,
 }: IProps) => {
     const fieldError = fieldState.error?.message;
-    const showError = fieldState.isTouched && !!fieldError;
 
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         field.onChange(event);
@@ -49,7 +48,7 @@ export const CustomInputField = ({
                 fullWidth
                 type={type}
                 autoComplete={autoComplete}
-                error={showError}
+                error={!!fieldError}
                 margin="dense"
                 aria-label={ariaLabel}
                 variant="outlined"
@@ -71,7 +70,7 @@ export const CustomInputField = ({
                     </MenuItem>
                 ))}
             </TextField>
-            {showValidationErrorText && <FieldError>{showError ? fieldError : ""}</FieldError>}
+            {showValidationErrorText && <FieldError>{fieldError}</FieldError>}
         </div>
     );
 };

From 0f5e5ace4d996837ec3d102d813ab77801cb78c8 Mon Sep 17 00:00:00 2001
From: Gottfried Chen <gottfried.chen@allaboutapps.at>
Date: Tue, 2 May 2023 13:36:40 +0200
Subject: [PATCH 3/4] improved custom input

---
 .../components/auth/sites/AuthLoginSite.tsx   | 33 +++++++------------
 .../src/components/ui/CustomInputField.tsx    | 15 ++++-----
 2 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/template/src/components/auth/sites/AuthLoginSite.tsx b/template/src/components/auth/sites/AuthLoginSite.tsx
index 76c2441..e1b80c1 100644
--- a/template/src/components/auth/sites/AuthLoginSite.tsx
+++ b/template/src/components/auth/sites/AuthLoginSite.tsx
@@ -1,18 +1,18 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Button } from "@mui/material";
+import { AxiosError } from "axios";
 import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import * as Yup from "yup";
 import { t } from "../../../i18n/util";
 import { useLogin } from "../../../network/api/useLogin";
 import { useAuthStore } from "../../../stores/authStore";
 import { useGeneralStore } from "../../../stores/generalStore";
 import { usePushRoute } from "../../app/router/history";
+import { DashboardRoutes } from "../../dashboard/router/DashboardRoutes";
 import { CustomInputField } from "../../ui/CustomInputField";
 import { Colors } from "../../util/Colors";
 import { ImageLogo } from "../../util/Images";
-import { DashboardRoutes } from "../../dashboard/router/DashboardRoutes";
-import { AxiosError } from "axios";
 
 interface ILoginValues {
     email: string;
@@ -109,31 +109,22 @@ export const AuthLoginSite = () => {
                     onSubmit={handleSubmit(onSubmit)}
                     style={{ padding: 24, border: `1px solid ${Colors.PRIMARY_COLOR}`, borderTop: "none" }}
                 >
-                    <Controller
+                    <CustomInputField
                         name="email"
                         control={control}
-                        render={(formProps) => (
-                            <CustomInputField
-                                label={t("screen.login.form.email.label")}
-                                type="email"
-                                autoComplete="username"
-                                {...formProps}
-                            />
-                        )}
+                        label={t("screen.login.form.email.label")}
+                        type="email"
+                        autoComplete="username"
                     />
 
-                    <Controller
+                    <CustomInputField
                         name="password"
                         control={control}
-                        render={(formProps) => (
-                            <CustomInputField
-                                label={t("screen.login.form.password.label")}
-                                type="password"
-                                autoComplete="current-password"
-                                {...formProps}
-                            />
-                        )}
+                        label={t("screen.login.form.password.label")}
+                        type="password"
+                        autoComplete="current-password"
                     />
+
                     {error && <div style={{ color: Colors.ERROR, fontSize: 14 }}>{error}</div>}
                     <Button
                         variant="contained"
diff --git a/template/src/components/ui/CustomInputField.tsx b/template/src/components/ui/CustomInputField.tsx
index 702c5d7..1a12d73 100644
--- a/template/src/components/ui/CustomInputField.tsx
+++ b/template/src/components/ui/CustomInputField.tsx
@@ -1,13 +1,10 @@
 import { MenuItem, TextField, TextFieldProps } from "@mui/material";
 import * as React from "react";
-import { ControllerFieldState, ControllerRenderProps, FieldValues, UseFormStateReturn } from "react-hook-form";
+import { Control, useController } from "react-hook-form";
 import { FieldError } from "./FieldError";
 
 type IProps = TextFieldProps & {
-    field: ControllerRenderProps<any, any>;
-    fieldState: ControllerFieldState;
-    formState: UseFormStateReturn<FieldValues>;
-
+    control: Control<any>;
     onChange?: () => void;
     showValidationErrorText?: boolean;
     selectOptions?: { value: string; label: string }[];
@@ -22,16 +19,16 @@ export const CustomInputField = ({
     minRows,
     maxRows,
     required,
-
-    field,
-    fieldState,
-    formState,
+    name,
+    control,
     "aria-label": ariaLabel,
     placeholder,
     showValidationErrorText = true,
     selectOptions,
     onChange,
 }: IProps) => {
+    const { field, fieldState } = useController({ control, name: name ?? "" });
+
     const fieldError = fieldState.error?.message;
 
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {

From 4b4d2bbfa8790e97c8e1920a6b13fd452ffaedc1 Mon Sep 17 00:00:00 2001
From: Gottfried Chen <gottfried.chen@allaboutapps.at>
Date: Tue, 2 May 2023 15:11:39 +0200
Subject: [PATCH 4/4] improved typing

---
 .../src/components/ui/CustomInputField.tsx     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/template/src/components/ui/CustomInputField.tsx b/template/src/components/ui/CustomInputField.tsx
index 1a12d73..096d8a2 100644
--- a/template/src/components/ui/CustomInputField.tsx
+++ b/template/src/components/ui/CustomInputField.tsx
@@ -1,16 +1,16 @@
 import { MenuItem, TextField, TextFieldProps } from "@mui/material";
 import * as React from "react";
-import { Control, useController } from "react-hook-form";
+import { FieldValues, UseControllerProps, useController } from "react-hook-form";
 import { FieldError } from "./FieldError";
 
-type IProps = TextFieldProps & {
-    control: Control<any>;
-    onChange?: () => void;
-    showValidationErrorText?: boolean;
-    selectOptions?: { value: string; label: string }[];
-};
+type IProps<T extends FieldValues> = TextFieldProps &
+    UseControllerProps<T> & {
+        onChange?: () => void;
+        showValidationErrorText?: boolean;
+        selectOptions?: { value: string; label: string }[];
+    };
 
-export const CustomInputField = ({
+export const CustomInputField = <T extends FieldValues>({
     style,
     label,
     type,
@@ -26,7 +26,7 @@ export const CustomInputField = ({
     showValidationErrorText = true,
     selectOptions,
     onChange,
-}: IProps) => {
+}: IProps<T>) => {
     const { field, fieldState } = useController({ control, name: name ?? "" });
 
     const fieldError = fieldState.error?.message;