From eccb7a8e3ebbc6f96658b4deafcbbcfc94ade2bb Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Sat, 18 Feb 2023 00:53:05 +0700
Subject: [PATCH] Cleanup

---
 package-lock.json              | 94 +++++++++++++++++++++++++++++++---
 package.json                   |  1 +
 src/App.tsx                    |  2 +-
 src/components/Input/index.tsx |  2 +-
 src/helpers/validators.ts      | 11 ++++
 src/screens/Home/login.tsx     | 37 ++++---------
 6 files changed, 113 insertions(+), 34 deletions(-)
 create mode 100644 src/helpers/validators.ts

diff --git a/package-lock.json b/package-lock.json
index 57a326b..47afaae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "postcss": "8.4.21",
         "postcss-import": "14.1.0",
         "prettier": "2.6.0",
+        "prettier-plugin-tailwindcss": "0.2.3",
         "start-server-and-test": "1.14.0",
         "stylelint": "14.6.0",
         "tailwindcss": "3.2.6",
@@ -19120,9 +19121,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.0.tgz",
-      "integrity": "sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==",
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -19146,6 +19147,80 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.3.tgz",
+      "integrity": "sha512-s2N5Dh7Ao5KTV1mao5ZBnn8EKtUcDPJEkGViZIjI0Ij9TTI5zgTz4IHOxW33jOdjHKa8CSjM88scelUiC5TNRQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-php": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": ">=2.2.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-php": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -38183,9 +38258,9 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
     "prettier": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.0.tgz",
-      "integrity": "sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==",
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -38197,6 +38272,13 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.3.tgz",
+      "integrity": "sha512-s2N5Dh7Ao5KTV1mao5ZBnn8EKtUcDPJEkGViZIjI0Ij9TTI5zgTz4IHOxW33jOdjHKa8CSjM88scelUiC5TNRQ==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index a90b3d3..d32cd1c 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "postcss": "8.4.21",
     "postcss-import": "14.1.0",
     "prettier": "2.6.0",
+    "prettier-plugin-tailwindcss": "0.2.3",
     "start-server-and-test": "1.14.0",
     "stylelint": "14.6.0",
     "tailwindcss": "3.2.6",
diff --git a/src/App.tsx b/src/App.tsx
index 0586ea2..2859b18 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,7 @@ const App = (): JSX.Element => {
 
   return (
     <div>
-      <main className="flex flex-col p-0 m-0 h-screen items-center justify-center">{appRoutes}</main>
+      <main className="m-0 flex h-screen flex-col items-center justify-center p-0">{appRoutes}</main>
     </div>
   );
 };
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 3adf4e9..a217769 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -14,7 +14,7 @@ type InputProps = {
 function Input({ name, label, type, value, className, onInputChange }: InputProps) {
   return (
     <>
-      <label className="text-white text-left block my-5">
+      <label className="my-5 block text-left text-white">
         {label}
         <input name={name} type={type} value={value} className={`${styles.input} ${className}`} onChange={onInputChange} />
       </label>
diff --git a/src/helpers/validators.ts b/src/helpers/validators.ts
new file mode 100644
index 0000000..42282f8
--- /dev/null
+++ b/src/helpers/validators.ts
@@ -0,0 +1,11 @@
+export const isEmailValid = (email: string) => {
+  const emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+
+  return emailRegEx.test(email);
+};
+
+export const isPasswordValid = (password: string) => {
+  const passwordRegEx = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+
+  return passwordRegEx.test(password);
+};
diff --git a/src/screens/Home/login.tsx b/src/screens/Home/login.tsx
index dff1e09..b9c5cfd 100644
--- a/src/screens/Home/login.tsx
+++ b/src/screens/Home/login.tsx
@@ -6,11 +6,9 @@ import logo from 'assets/images/logo.svg';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import { setToken } from 'helpers/userToken';
+import { isEmailValid, isPasswordValid } from 'helpers/validators';
 
-enum InputFieldTypes {
-  EMAIL = 'Email',
-  PASSWORD = 'Password',
-}
+type InputField = 'Email' | 'Password';
 
 type Errors = {
   Email?: string;
@@ -24,25 +22,12 @@ function LoginScreen() {
   const [password, setPassword] = useState('');
   const [errors, setErrors] = useState({});
 
-  const isEmailValid = (inputEmail: string) => {
-    const emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
-
-    return emailRegEx.test(inputEmail);
-  };
-
-  const isPasswordValid = (inputPassword: string) => {
-    const passwordRegEx = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
-
-    return passwordRegEx.test(inputPassword);
-  };
-
-  const removeError = (errorField: InputFieldTypes): Errors => {
-    console.log(errorField);
+  const removeError = (field: InputField) => {
     const newState: Errors = {
       ...errors,
     };
-    delete newState[errorField];
-    return newState;
+    delete newState[field];
+    setErrors(newState);
   };
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -69,13 +54,13 @@ function LoginScreen() {
     if (!isEmailValid(email)) {
       setErrors({ ...errors, Email: 'Is invalid' });
     } else {
-      removeError(InputFieldTypes.EMAIL);
+      removeError('Email');
     }
 
     if (!isPasswordValid(password)) {
       setErrors({ ...errors, Password: 'Is invalid' });
     } else {
-      removeError(InputFieldTypes.PASSWORD);
+      removeError('Password');
     }
 
     if (Object.keys(errors).length === 0) {
@@ -86,7 +71,7 @@ function LoginScreen() {
   return (
     <>
       <img className="inline-block" src={logo} alt="logo" />
-      <p data-test-id="login-header" className="text-white opacity-50 my-8">
+      <p data-test-id="login-header" className="my-8 text-white opacity-50">
         {t('login.sign_in')} to Nimble
       </p>
       <form onSubmit={handleSubmit}>
@@ -95,7 +80,7 @@ function LoginScreen() {
           label={t('login.email')}
           type="text"
           value={email}
-          className="block h-14 w-80 my-3"
+          className="my-3 block h-14 w-80"
           onInputChange={(e) => handleEmailChange(e)}
         />
         <div className="relative w-80">
@@ -104,11 +89,11 @@ function LoginScreen() {
             label={t('login.password')}
             type="password"
             value={password}
-            className="block h-14 w-80 my-3"
+            className="my-3 block h-14 w-80"
             onInputChange={(e) => handlePasswordChange(e)}
           />
           {/* Change to React Router Link when implement #17 */}
-          <a href="." className="absolute text-white opacity-50 my-8 left-60 top-5">
+          <a href="." className="absolute left-60 top-5 my-8 text-white opacity-50">
             {t('login.forgot_password')}
           </a>
         </div>