Salve, Gabriel!
Você pode criar os hooks em qualquer arquivo, o que você tem de levar em conta aqui é a organização de código.
Podemos, então, ter um arquivo index.ts
dentro da pasta src/hooks
, assim:
// src/hooks/index.ts
export const usePersistirToken = () => {
return (token: string) => {
sessionStorage.setItem('token', token);
};
};
export const useObterToken = () => {
return sessionStorage.getItem('token');
};
export const useLimparToken = () => {
sessionStorage.removeItem('token');
};
Para importar e usar o hook, no momento em que está na aula 2, basta alterar o componente ModalLoginUsuario
para usar o novo hook:
import { AbBotao, AbCampoTexto, AbModal } from "ds-alurabooks"
import { useState } from "react"
import { usePersistirToken } from "../../hooks"
import http from "../../http"
import imagemPrincipal from './assets/login.png'
import './ModalLoginUsuario.css'
interface PropsModalLoginUsuario {
aberta: boolean
aoFechar: () => void
aoEfetuarLogin: () => void
}
const ModalLoginUsuario = ({ aberta, aoFechar, aoEfetuarLogin } : PropsModalLoginUsuario) => {
const [email, setEmail] = useState('')
const [senha, setSenha] = useState('')
const setToken = usePersistirToken();
const aoSubmeterFormular = (evento: React.FormEvent<HTMLFormElement>) => {
evento.preventDefault()
const usuario = {
email,
senha,
}
http.post('public/login', usuario)
.then(reposta => {
setToken(reposta.data.access_token)
setEmail('')
setSenha('')
aoEfetuarLogin()
})
.catch(erro => {
if (erro?.response?.data?.message) {
alert(erro.response.data.message)
} else {
alert('Aconteceu um erro inesperado ao afetuar o seu login! Entre em contato com o suporte!')
}
})
}
return (<AbModal
titulo="Login"
aberta={aberta}
aoFechar={aoFechar}
>
<section className="corpoModalCadastro">
<figure>
<img src={imagemPrincipal} alt="Pessoa segurando uma chave na frente de uma tela de computador que está exibindo uma fechadura" />
</figure>
<form onSubmit={aoSubmeterFormular}>
<AbCampoTexto
label="E-mail"
value={email}
onChange={setEmail}
type="email"
/>
<AbCampoTexto
label="Senha"
value={senha}
onChange={setSenha}
type="password"
/>
<div className="acoes">
<AbBotao texto="Fazer login"/>
</div>
</form>
</section>
</AbModal>)
}
export default ModalLoginUsuario