Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Duvida no desafio aula 2 Autenticando usuario

Não entendi bem em qual arquivo devo incluir os hooks customizados, e também onde devo chama-los,

Fiquei bem na duvida pois ao olhar la no github não encontrei de forma clara a resolução do desafio. Ao fazer um pull para tentar iniciar o projeto a partir dali para aula 3 gerou varios erros de conflito, vou ter que excluir o projeto e clonar novamente para conseguir seguir com o curso.

Por gentileza, se alguém tem alguma dica para os dois casos da solução e de como posso proceder nos proximos para não perder o progresso com o github ficarei muito grato,

Abraço

2 respostas
solução!

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

Top Vinicios, obrigado pelo retorno.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software