Login.js

import axios from 'axios'
import styled from 'styled-components'
import { Link } from 'react-router-dom'

import { useState, useRef } from 'react'
import { useMutation } from 'react-query'
import { useHistory } from 'react-router-dom'

import Spinner from '../Components/Spinner'

const HiddenDiv = styled.div`
    transform: translateY(${({ transform }) => transform === 0 ? "0" : transform + "%"});
`

const Login = () => {
    const [showAlert, setShowAlert] = useState({show: false, message: null})
    const username = useRef(null), password = useRef(null)
    const history = useHistory()
    
    const { isLoading, mutate } = useMutation(login => {
        axios.post(process.env.REACT_APP_API_URL + '/users/login', login)
            .then(res => {
                if(res.status === 200)
                    storeAndNavigate(res.data.token)
                else if(res.status === 401 || res.status === 400)
                    showAlertRoutine(res.data.message)
            })
            .catch(( { response } ) => {
                showAlertRoutine(response.data.message)
            })
    })

    function handleClick(e) {
        e.preventDefault()
        var loginData = { username: username.current.value, password: password.current.value }

        if(loginData.username === "" || loginData.password === "")
            showAlertRoutine("Introduce datos primero")
        else
            mutate(loginData)
    }

    function showAlertRoutine(message) {
        setShowAlert({show: true, message: message})
        setTimeout(() => setShowAlert({show: false, message: null}), 2000)
    }

    function storeAndNavigate(token) {
        localStorage.setItem('token', token)
        history.push("/register")
    }

    return (
        <>
            { isLoading ? <Spinner /> : null }
            <div className="w-full text-white font-bold h-screen flex justify-center items-center bg-gradient-to-r from-blue-400 to-purple-600 bg-opacity-50">
                <form action="/POST" className="flex flex-col items-center justify-center">
                    <div className="flex flex-col w-full justify-center items-center">
                        <label htmlFor="" className="text-lg mt-3">Username</label>
                        <input type="text" ref={username} className="border rounded my-3 px-2 focus:border-purple-700 focus:ring-1 focus:ring-purple-700 focus:outline-none text-gray-600" />
                    </div>
                    <div className="flex flex-col w-full justify-center items-center">
                        <label htmlFor="" className="text-lg mt-3">Password</label>
                        <input type="password" ref={password} className="border rounded my-3 px-2 focus:border-purple-700 focus:ring-1 focus:ring-purple-700 focus:outline-none text-gray-600" />
                    </div>
                    <button className="shadow w-60 p-1 my-4 bg-blue-400 hover:bg-blue-600 font-bold rounded" onClick={handleClick}>Iniciar sesión</button>
                    <p className="font-normal text-sm my-1 text-center">¿No tienes cuenta?, <Link to="/register" className="font-bold text-blue-300">registrate</Link></p>
                    <HiddenDiv
                        className="absolute top-2 p-2 bg-gradient-to-r from-red-500 to-red-600 
                items-center text-indigo-100 leading-none rounded flex lg:inline-flex
                transition-all transition-500 ease-in-out"
                        role="alert"
                        transform={showAlert.show ? 0 : -500}>
                        <span className="flex rounded-full bg-red-800 uppercase px-2 py-1 text-xs font-bold mr-3"> ! </span>
                        <span className="font-semibold mr-2 text-left flex-auto">{showAlert.message}</span>
                    </HiddenDiv>
                </form>
            </div>
        </>
    )
}

export default Login;