Advanced: Form state management step 2 – useLoginForm

src/features/login/lib/hooks/useLoginForm.ts

@@ -0,0 +1,118 @@
+import type { ChangeEvent, FocusEvent, FormEvent } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+
+import { mapObject } from '~/utils/mapObject'
+
+type TFields = 'email' | 'password'
+type TValues = { [key in TFields]: string }
+type TValidator = <TValue>(value: TValue) => void | string
+
+const initials = {
+  values: {
+    email: '',
+    password: '',
+  },
+
+  touched: {
+    email: false,
+    password: false,
+  },
+}
+
+const validators: { [key in TFields]: TValidator } = {
+  email: (value) => {
+    if (typeof value !== 'string') return 'Invalid e-mail value type'
+    if (!value) return 'E-mail is required'
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/u.test(value)) return 'Invalid e-mail'
+  },
+
+  password: (value) => {
+    if (typeof value !== 'string') return 'Invalid password value type'
+    if (!value) return 'Password is required'
+  },
+}
+
+/**
+ * Controls login form state.
+ */
+const useLoginForm = () => {
+  const [values, setValues] = useState<TValues>(initials.values)
+  const [touched, setTouched] = useState(initials.touched)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<Error | null>(null)
+
+  // Compute errors based on validators.
+  const errors = useMemo(
+    () => mapObject(validators, (fn, field) => fn(values[field]) ?? null),
+    [values]
+  )
+
+  // Compute the validity of field.
+  const invalid = useMemo(() => mapObject(errors, Boolean), [errors])
+
+  // Form is invalid when any field is invalid.
+  const isValid = useMemo(
+    () => !Object.values(invalid).some(Boolean),
+    [invalid]
+  )
+
+  /**
+   * Form submit handler constructor.
+   */
+  const handleSubmit = useCallback(
+    (handler: (values: TValues) => Promise<void | Error>) =>
+      (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        // Touch all fields uppon submission trial, so that
+        // errors might be shown to the UI.
+        setTouched((touched) => mapObject(touched, () => true))
+
+        if (isValid) {
+          setIsSubmitting(true)
+
+          const handling = handler(values)
+
+          handling
+            .catch(setSubmitError)
+            // Ensure we reset submit state even if promise fails
+            .finally(() => setIsSubmitting(false))
+        }
+      },
+    [values, isValid]
+  )
+
+  /**
+   * Input value change handler.
+   */
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+
+    // Update value.
+    setValues((values) => ({ ...values, [name]: value }))
+  }, [])
+
+  /**
+   * Input value blur handler.
+   */
+  const handleBlur = useCallback((e: FocusEvent<HTMLInputElement>) => {
+    const { name } = e.target
+
+    setTouched((touched) => ({ ...touched, [name]: true }))
+  }, [])
+
+  return {
+    values,
+    touched,
+    errors,
+    invalid,
+    isValid,
+    isSubmitting,
+    submitError,
+    handleSubmit,
+    handleChange,
+    handleBlur,
+  } as const
+}
+
+export { useLoginForm }

src/features/login/pages/LoginPage/index.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import type { FormEvent } from 'react'
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
 
-import { Button } from '~/features/ui/components/Button'
 import { Container } from '~/features/ui/components/Container'
 import { Input } from '~/features/ui/components/Input'
 import { LayoutExternal } from '~/features/ui/components/LayoutExternal'
@@ -15,50 +14,110 @@ import {
   ErrorMessage,
 } from './styled'
 
+const validators = {
+  email: (value: string) => {
+    if (typeof value !== 'string') return 'Invalid e-mail value type'
+    if (!value) return 'E-mail is required'
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/u.test(value)) return 'Invalid e-mail'
+  },
+
+  password: (value: string) => {
+    if (typeof value !== 'string') return 'Invalid password value type'
+    if (!value) return 'Password is required'
+  },
+}
+
 export const LoginPage: NextPage = () => {
-  const [error, setError] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const [emailError, setEmailError] = useState<string | null>(null)
+  const [passwordError, setPasswordError] = useState<string | null>(null)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  /**
+   * Login handler.
+   */
+  const login = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+
+      const errors = {
+        email: validators.email(email),
+        password: validators.password(password),
+      }
+
+      if (errors.email) {
+        setEmailError(errors.email)
+      }
+
+      if (errors.password) {
+        setPasswordError(errors.password)
+      }
+
+      // Only submit in case of no errors.
+      if (!errors.email && !errors.password) {
+        setIsSubmitting(true)
 
-  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault()
+        setTimeout(() => {
+          // Mocking to represent login submit outcome.
+          const shouldFail = Math.random() < 0.5
 
-    alert('TODO')
-  }
+          if (shouldFail) {
+            setSubmitError('Something went terribly wrong!')
+          } else {
+            alert('Success!')
+          }
+
+          setIsSubmitting(false)
+        }, 1000)
+      }
+    },
+    [email, password]
+  )
 
   return (
     <LayoutExternal>
       <Container>
         <FormWrapper>
           <Title>Sign in to Eventio.</Title>
-          {error ? (
-            <ErrorMessage>{error}</ErrorMessage>
+
+          {submitError ? (
+            <ErrorMessage>{submitError}</ErrorMessage>
           ) : (
             <Description>Enter your details below.</Description>
           )}
-          <form onSubmit={onSubmit}>
-            <Input label="Email" type="email" name="email" error={error} />
+
+          <form onSubmit={login}>
+            <Input
+              label="Email"
+              type="email"
+              name="email"
+              value={email}
+              error={emailError}
+              onChange={(e) => {
+                setEmailError(null)
+                setEmail(e.target.value)
+              }}
+            />
+
             <Input
               label="Password"
               type="password"
               name="password"
-              error={error}
+              value={password}
+              error={passwordError}
+              onChange={(e) => {
+                setPasswordError(null)
+                setPassword(e.target.value)
+              }}
             />
             <p>
-              <SubmitButton>Sign In</SubmitButton>
-            </p>
-
-            {/*
-            Created just to showcase CSS animations.
-            To be removed. Please do not use style attribute.
-          */}
-            <p style={{ marginTop: '1rem' }}>
-              <Button
-                type="button"
-                size="small"
-                accent="destructive"
-                onClick={() => setError(Date.now().toString())}
-              >
-                Trigger Error
-              </Button>
+              <SubmitButton disabled={isSubmitting}>
+                {isSubmitting ? 'Submitting' : 'Sign In'}
+              </SubmitButton>
             </p>
           </form>
         </FormWrapper>

src/features/ui/components/Input/index.tsx

@@ -6,13 +6,14 @@ import {
   InputWrapper,
   Label,
   LabelText,
+  ErrorMessage,
   PasswordToggle,
   StyledInput,
 } from './styled'
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label: string
-  error?: string
+  error?: string | null
 }
 
 export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
@@ -21,18 +22,16 @@ export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
 
   return (
     <InputWrapper>
-      {/*
-        By changing the value of key prop, we're making the component
-        remount, which also triggers an attached animation again.
-      */}
-      <Label hasError={Boolean(error)} key={error}>
+      <Label hasError={Boolean(error)}>
         <StyledInput
           placeholder={label}
           name={name}
           type={inputType}
           {...rest}
         />
+
         <LabelText>{label}</LabelText>
+
         {type === 'password' && (
           <PasswordToggle
             isActive={isPasswordShown}
@@ -42,6 +41,8 @@ export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
             <EyeIcon />
           </PasswordToggle>
         )}
+
+        {error ? <ErrorMessage>{error}</ErrorMessage> : null}
       </Label>
     </InputWrapper>
   )

src/features/ui/components/Input/styled.ts

@@ -79,6 +79,10 @@ export const Label = styled.label<{ hasError?: boolean }>`
     `}
 `
 
+export const ErrorMessage = styled.span`
+  color: ${colors.accent.destructive};
+`
+
 export const PasswordToggle = styled.button.attrs({ type: 'button' })<{
   isActive: boolean
 }>`

src/utils/mapObject.ts

@@ -0,0 +1,23 @@
+/**
+ * Maps through an object's properties.
+ *
+ * i.e.:
+ * mapObject({ foo: '' }, (value, key) => key) // { foo: 'foo' }
+ * mapObject({ foo: 1, bar: 3 }, (value) => value + 1) // { foo: 2, bar; 4 }
+ */
+const mapObject = <
+  TObject extends object,
+  TKeys extends keyof TObject,
+  TResult
+>(
+  obj: TObject,
+  fn: (value: TObject[keyof TObject], key: TKeys, obj: TObject) => TResult
+) =>
+  Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [
+      key,
+      fn(value, key as TKeys, obj),
+    ])
+  ) as { [key in TKeys]: TResult }
+
+export { mapObject }