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

Dúvida

Não entendi esse trecho do código const {cadastrarDados,erro,sucesso} = usePost() por que importar o erro e o sucesso sendo que o sucesso não está sendo usado em lugar nenhum e o erro tbm não, no try catch creio que o erro que está sendo usado sobrescreveu o erro que foi importado do usePost. isso acontece tbm no arquivo de Cadastro quando passamos os dados da clinica.

5 respostas

Oi, João. Tudo bem?

Você poderia nos dá mais detalhes?

Preciso saber qual aula e curso você está fazendo. Assim consigo ter o contexto da sua dúvida. Se puder compartilhar o código também ajudaria bastante.

Um abraço.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeNa imagem mostra que pesquisei onde estava sendo usado o sucesso mas como mostrado não aparecendo em nenhum outro lugar, e sobre o erro eu imagino que tbm não foi usado já que o erro do catch é outro e não o que foi importado o usePost, é o que imagino.

Curso React com Typescript: desenvolva um sistema de cadastro e autenticação Modulo 3 Aula : Criando uma clínica.

Aqui está o código.

import styled from 'styled-components'
import Logo from '../../componentes/Cabecalho/Assets/logo.png'
import CampoDigitacao from '../../componentes/CampoDigitacao'
import { useState } from 'react'
import { Step, StepLabel, Stepper } from '@mui/material'
import Botao from '../../componentes/Botao'
import IClinica from '../../types/IClinica'
import usePost from '../../usePost'
import { useNavigate } from 'react-router-dom'

interface PropsCustomizadas {
    cor: string
}

const Img = styled.img`
    margin-top: 16px;
`
const H2 = styled.h2`
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    text-align: center;
    color: var(--cinza);
    margin: 30px;
`
const Form = styled.form`
    width: 70%;
`
const Div = styled.div`
    display: flex;
    justify-content: center;
`
const StepCustomizada = styled.div<PropsCustomizadas>`
    background-color: ${({ cor }) => cor};
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 100px;
`
const BotaoCustomizado = styled(Botao)`
    width: 50%;
    margin-bottom: 200px;
`
const InputContainer = styled.div`
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
`
const FilhoInput = styled.div`
    display: flex;
    & > :nth-child(2) {
        width: 40%;
    }
    & > :nth-child(3) {
        width: 5%;
    }
`

export default function Cadastro() {
    const [etapaAtiva, setEtapaAtiva] = useState(0);
    const [nome, setNome] = useState('');
    const [cnpj, setCnpj] = useState('');
    const [email, setEmail] = useState('');
    const [senha, setSenha] = useState('');
    const [senhaVerificada, setSenhaVerificada] = useState('');
    const [telefone, setTelefone] = useState('');
    const [cep, setCep] = useState('');
    const [rua, setRua] = useState('');
    const [numero, setNumero] = useState('');
    const [complemento, setComplemento] = useState('');
    const [estado, setEstado] = useState('');
    const {cadastrarDados, erro, sucesso} = usePost();
    const navigate = useNavigate();

    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        const clinica: IClinica = {
            email: email,
            nome: nome,
            senha: senha,
            endereco: {
                cep: cep,
                rua: rua,
                numero: numero,
                complemento: complemento,
                estado: estado
            }
        }

        if (etapaAtiva !== 0) {
            try {
                cadastrarDados({url: 'clinica', dados: clinica})
                navigate('/login')
            } catch (erro) {
                erro && alert('Erro ao cadastrar os dados')
            }
        }
        
        setEtapaAtiva(etapaAtiva + 1);
    }

    return (
        <>
            <Img src={Logo} alt="logo da empresa" />
            <Stepper activeStep={etapaAtiva}>
                <Step>
                    <StepLabel
                        StepIconComponent={props => (
                            <StepCustomizada cor={props.active ? 'lightblue' : 'lightgrey'} />
                        )}
                    />
                </Step>
                <Step>
                    <StepLabel
                        StepIconComponent={props => (
                            <StepCustomizada cor={props.active ? 'lightblue' : 'lightgrey'} />
                        )}
                    />
                </Step>
            </Stepper>
            {etapaAtiva === 0 ? (
                <Form onSubmit={handleSubmit}>
                    <H2>Primeiro, alguns dados básicos:</H2>
                    <CampoDigitacao tipo='text' label='Nome' placeholder='Digite o nome da clínica' valor={nome}
                        onChange={setNome}
                    />
                    <CampoDigitacao tipo='text' label='CNPJ'  placeholder='Digite o CNPJ' valor={cnpj}
                        onChange={setCnpj}
                    />
                    <CampoDigitacao tipo='text' label='Email' placeholder='Insira o endereço de email para login'
                        valor={email}
                        onChange={setEmail}
                    />
                    <CampoDigitacao tipo='text' label='Crie uma senha' placeholder='Digita sua senha'  valor={senha}
                        onChange={setSenha}
                    />
                    <CampoDigitacao  tipo='text' label='Repita a senha' placeholder='Repita a senha anterior'
                        valor={senhaVerificada}
                        onChange={setSenhaVerificada}
                    />
                    <Div>
                        <BotaoCustomizado type='submit'> Avançar </BotaoCustomizado>
                    </Div>
                </Form>
            ) : (
                <Form onSubmit={handleSubmit}>
                    <H2>Agora, os dados técnicos:</H2>
                    <CampoDigitacao  tipo='text' label='Telefone' placeholder='(DDD) XXXXX-XXXX'  valor={telefone}
                        onChange={setTelefone}
                    />
                    <CampoDigitacao tipo='text' label='CEP' placeholder='Insira o CEP' valor={cep}
                        onChange={setCep}
                    />
                    <CampoDigitacao tipo='text' label='Endereço' placeholder='Rua' valor={rua}
                        onChange={setRua}
                    />
                    <InputContainer>
                        <FilhoInput>
                            <CampoDigitacao tipo='text'  placeholder='Numero' valor={numero}  onChange={setNumero}/>
                            <CampoDigitacao  tipo='text'  placeholder='Complemento' valor={complemento}
                                onChange={setComplemento}
                            />
                        </FilhoInput>
                        <CampoDigitacao tipo='text' placeholder='Estado' valor={estado} onChange={setEstado}/>
                    </InputContainer>
                    <Div>
                        <BotaoCustomizado type='submit'> Cadastrar </BotaoCustomizado>
                    </Div>
                </Form>
            )}
        </>
    )
}

solução!

Oi João!

Obrigada por compartilhar mais informações da sua dúvida.

O erro e o sucesso foram importados pois são os retornos padrão da função usePost. Apesar de não serem utilizados, como você pontuou, poderiam ser utilizados para a criação de alertas ou modais por exemplo.

Como neste caso não são utilizados, realmente não há necessidade de defini-los como constantes. Sendo assim, o código poderia ser o seguinte:

const { cadastrarDados } = usePost()

Espero ter ajudado.

Um abraço.