Use enum

leaky-ships/pages/dev/login.tsx

@@ -9,22 +9,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { FormEvent, useState } from "react"
 import classNames from "classnames"
 
+enum ProcessStates {
+  "waiting",
+  "loading",
+  "success",
+  "wrong",
+  "error",
+}
+const messages: { [key in ProcessStates]: string } = {
+  [ProcessStates.waiting]: "Enter Login Details",
+  [ProcessStates.loading]: "Logging in...",
+  [ProcessStates.success]: "Done!",
+  [ProcessStates.wrong]: "Wrong username or password",
+  [ProcessStates.error]: "An error occurred!",
+}
+const icons = {
+  [ProcessStates.loading]: faSpinnerThird,
+  [ProcessStates.success]: faCheck,
+  [ProcessStates.wrong]: faXmark,
+  [ProcessStates.error]: faWifiExclamation,
+}
+const iconClasses = {
+  [ProcessStates.loading]: "animate-spin",
+  [ProcessStates.success]: "text-green-500",
+  [ProcessStates.wrong]: "text-red-500",
+  [ProcessStates.error]: "animate-pulse text-amber-500 !text-8xl",
+}
+
 function Login() {
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
-  type ProcessStates = "waiting" | "loading" | "success" | "wrong" | "error"
+
-  const [state, setState] = useState<ProcessStates>("waiting")
+  const [state, setState] = useState<ProcessStates>(ProcessStates.waiting)
   const [error, setError] = useState("")
 
-  const messages: { [key in ProcessStates]: string } = {
-    waiting: "Enter Login Details",
-    loading: "Logging in...",
-    success: "Done!",
-    wrong: "Wrong username or password",
-    error: "An error occured!",
-  }
   const elem = () => {
-    if (state === "waiting")
+    if (state === ProcessStates.waiting)
       return (
         <form onSubmit={login}>
           <div className="mb-4 text-lg">
@@ -59,18 +79,6 @@ function Login() {
         </form>
       )
 
-    const icons = {
-      loading: faSpinnerThird,
-      success: faCheck,
-      wrong: faXmark,
-      error: faWifiExclamation,
-    }
-    const iconClasses = {
-      loading: "animate-spin",
-      success: "text-green-500",
-      wrong: "text-red-500",
-      error: "animate-pulse text-amber-500 !text-8xl",
-    }
     return (
       <>
         <div className="flex flex-col items-center rounded-3xl bg-slate-800/50 py-8 px-16 shadow-lg drop-shadow-md">
@@ -84,7 +92,7 @@ function Login() {
             type="button"
             className="rounded-3xl bg-blue-400 bg-opacity-50 px-10 py-2 text-white shadow-xl backdrop-blur-md transition-colors duration-300 hover:bg-blue-600"
             onClick={() => {
-              setState("waiting")
+              setState(ProcessStates.waiting)
               setError("")
             }}
           >
@@ -98,17 +106,17 @@ function Login() {
 
   async function login(e: FormEvent<HTMLFormElement>) {
     e.preventDefault()
-    setState("loading")
+    setState(ProcessStates.loading)
     await fetch("/api/login", {
       method: "POST",
       body: JSON.stringify({ username, password }),
     })
       .then((res) => {
-        if (res.status === 200) setState("success")
+        if (res.status === 200) setState(ProcessStates.success)
-        if (res.status === 401) setState("wrong")
+        if (res.status === 401) setState(ProcessStates.wrong)
       })
       .catch((err: Error) => {
-        setState("error")
+        setState(ProcessStates.error)
         setError(err.message)
       })
   }