-1

Pessoal estou fazendo um formulario de cadastro em NextJS, funcionando ok, os inputs pega os dados de entrada do usuario via API FETCH do reactJS e envia para um banco de dados MYSQL, ate aqui ok, o que estou quebrando a cabeça é na hora de verificar e retorna essa verificação par o meu frontEnd antes de gravar de fato no banco.

Por exemplo: antes do INSERT tenho que verificar se ja nao tem algum registro cadastrado a esse que esta sendo inserido.

Meu fetch onde pega os dados dos inputs e manda pra mim api

async function handleSubmitPF(data, { reset }) {
  console.log(data)
  try {
    const schema = Yup.object().shape({
      cpf: Yup.string()
      .required('Campo obrigatório'),
      
      name: Yup.string()
      .min(3, 'No mínimo 11 numero para CPF')
      .required('Campo obrigatório'),

      email: Yup.string()
      .email('Digite um email valido')
      .required('Email é obrigatório'),

      celular: Yup.string()
      .required('Campo celular obrigatório'),

    });

    await schema.validate(data, {
      abortEarly: false,
    });

    const res = await fetch('/api/post-pf', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: data.name,
        email: data.email,
        cpf: data.cpf,
        celular: data.celular,
      }),
    })

    setSubmitting(false)
    const json = await res.json()
    if (!res.ok) throw Error(json.message)
    Router.push('/')
    formRef.current.setErrors({});
    reset();

  } catch (err) {
    if(err instanceof Yup.ValidationError){
      const errorMessages = {};
       
      err.inner.forEach(error => {
        errorMessages[error.path] = error.message;
      })
      formRef.current.setErrors(errorMessages);
    }else
    throw Error(err.message)
  }
}

no pages/api

const handler = async (req, res) => {

const {name,email,cpf} = req.body

  try {
      if(!name || !email  || !cpf) {
      return res
      .status(400)
      .json({ message: ` {${name}/ ${email}/ ${cpf}} are both required`})
        
    }
    
    const sqlConsut = await query(
      `
        SELECT COUNT(*) verificar from cad_empresa where cli_documento = ?
      `,
      [filter.clean(cpf)]
      ); 
   
      var verif =JSON.stringify(sqlConsut);
      console.log(verif);
      
      var json =  JSON.parse(verif);

      console.log(json[0].verificar)

      if(json[0].verificar == 1 ){
    
        return ?

     }
      
      else{
        const sqlInsert = await query(
          `
           INSERT INTO cad_empresa (cli_nome, cli_documento, cli_email) VALUES (?, ?, ?)
          `,
      
          [filter.clean(name),filter.clean(cpf),filter.clean(email)]
        );
        return res.json(sqlInsert);
      }
  } catch (e) {
    res.status(500).json({ message: e.message  });

  }
};

export default handler;

Nessa api esta gravando os dados ok no banco local na minha maquina, nao tenho ideia como retornar no if else la em cima um alerta ou uma menssagem para o frontEnd dizendo que "CPF JA CADASTRADO" caso o verificar for igual a 1. preciso que quando o usuario enviar a requisição verificar e retorna pra o frontend uma mensagem ou um modal caso ja exista um cpf ja cadastrado no banco.

pelo mysql ja tenho a minha query onde verificar isso e ela retorna 0 caso nao tenha e grava no banco caso contrario se a condição for 1 ai tenho que retorna uma mensagem pro meu frontEnd dizendo que ja tem um cadastro nao tenho ideia como fazer :(.

Qualquer dica é bem vinda, desde ja agradeço a atenção.

1 Resposta 1

0

Vou tentar explicar por cima em um Functional Component.

A primeira coisa que você deve fazer é criar um estado para a sua aplicação, digamos que seja apenas um texto.

Primeiro você deve importar o useState:

import { useState } from 'react'

Depois você vai instanciar na sua aplicação:

const [ existsCPF, setExistsCPF ] = useState()

É a variável existsCPF que você irá usar para exibir na sua aplicação. Basta inserir ela usando { existsCPF } que ele irá aparecer na aplicação (no caso, o useState() está vazio, então por enquanto não aparece nada).

Aí, quando você fizer a requisição na API, você vai mudar o valor tipo assim:

setExistsCPF('CPF JA CADASTRADO')

O React já irá se preocupar em atualizar o componente e irá exibir para você.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .