refactor(web): update to react 18 and other deps (#285)

* Started refactoring codebase for React 18.

* Migrated to react-router v6 fully

* Removed useless test setup along with relevant packages.

* Removed leftover console.log statement

* feat: use status forbidden for onboarding

* refactor(web): use react hook form on login

* fix: comply with r18 shenanigans

* chore: update packages

web/src/screens/auth/login.tsx

@@ -1,44 +1,48 @@
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useMutation } from "react-query";
-import { Form, Formik } from "formik";
 
 import { APIClient } from "../../api/APIClient";
-import { TextField, PasswordField } from "../../components/inputs";
 
 import logo from "../../logo.png";
 import { AuthContext } from "../../utils/Context";
 import { useEffect } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { PasswordInput, TextInput } from "../../components/inputs/text";
 
-interface LoginData {
+export type LoginFormFields = {
   username: string;
   password: string;
-}
+};
 
 export const Login = () => {
-  const history = useHistory();
+  const { handleSubmit, register, formState: { errors }  } = useForm<LoginFormFields>({
+    defaultValues: { username: "", password: "" },
+    mode: "onBlur"
+  });
+  const navigate = useNavigate();
   const [, setAuthContext] = AuthContext.use();
 
   useEffect(() => {
     // Check if onboarding is available for this instance
     // and redirect if needed
     APIClient.auth.canOnboard()
-      .then(() => history.push("/onboard"));
+      .then(() => navigate("/onboard"));
   }, [history]);
 
-  const mutation = useMutation(
-    (data: LoginData) => APIClient.auth.login(data.username, data.password),
+  const loginMutation = useMutation(
+    (data: LoginFormFields) => APIClient.auth.login(data.username, data.password),
     {
-      onSuccess: (_, variables: LoginData) => {
+      onSuccess: (_, variables: LoginFormFields) => {
         setAuthContext({
           username: variables.username,
           isLoggedIn: true
         });
-        history.push("/");
+        navigate("/");
       }
     }
   );
 
-  const handleSubmit = (data: LoginData) => mutation.mutate(data);
+  const onSubmit: SubmitHandler<LoginFormFields> = (data: LoginFormFields) => loginMutation.mutate(data);
 
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
@@ -52,25 +56,39 @@ export const Login = () => {
       <div className="sm:mx-auto sm:w-full sm:max-w-md shadow-lg">
         <div className="bg-white dark:bg-gray-800 py-8 px-4 sm:rounded-lg sm:px-10">
 
-          <Formik
-            initialValues={{ username: "", password: "" }}
-            onSubmit={handleSubmit}
-          >
-            <Form>
-              <div className="space-y-6">
-                <TextField name="username" label="Username" columns={6} autoComplete="username" />
-                <PasswordField name="password" label="Password" columns={6} autoComplete="current-password" />
-              </div>
-              <div className="mt-6">
-                <button
-                  type="submit"
-                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                >
-                  Sign in
-                </button>
-              </div>
-            </Form>
-          </Formik>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="space-y-6">
+              <TextInput<LoginFormFields>
+                name="username"
+                id="username"
+                label="username"
+                type="text"
+                register={register}
+                rules={{ required: "Username is required" }}
+                errors={errors}
+                autoComplete="username"
+              />
+              <PasswordInput<LoginFormFields>
+                name="password"
+                id="password"
+                label="password"
+                register={register}
+                rules={{ required: "Password is required" }}
+                errors={errors}
+                autoComplete="current-password"
+              />
+            </div>
+
+            <div className="mt-6">
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+              >
+                Sign in
+              </button>
+            </div>
+          </form>
+
         </div>
       </div>
     </div>

web/src/screens/auth/logout.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { APIClient } from "../../api/APIClient";
 import { AuthContext } from "../../utils/Context";
 
 export const Logout = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [, setAuthContext] = AuthContext.use();
   const [,, removeCookie] = useCookies(["user_session"]);
@@ -15,10 +15,10 @@ export const Logout = () => {
     () => {
       APIClient.auth.logout()
         .then(() => {
-          setAuthContext({ username: "", isLoggedIn: false });
           removeCookie("user_session");
+          setAuthContext({ username: "", isLoggedIn: false });
 
-          history.push("/login");
+          navigate("/login");
         });
     },
     [history, removeCookie, setAuthContext]

web/src/screens/auth/onboarding.tsx

@@ -1,6 +1,6 @@
 import { Form, Formik } from "formik";
 import { useMutation } from "react-query";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { APIClient } from "../../api/APIClient";
 
 import { TextField, PasswordField } from "../../components/inputs";
@@ -30,15 +30,11 @@ export const Onboarding = () => {
     return obj;
   };
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const mutation = useMutation(
     (data: InputValues) => APIClient.auth.onboard(data.username, data.password1),
-    {
-      onSuccess: () => {
-        history.push("/login");
-      }
-    }
+    { onSuccess: () => navigate("/login") }
   );
 
   return (