Validar Registro - ReactJS

[Rony2]

Como validar para o cadastro não aceitar registros iguais usando react e javascript? peguei de um canal esse código mas não fala como validar os registro.

import React, { useState } from 'react';
import {Link, Redirect}  from 'react-router-dom';
import Navbar from '../Components/Navbar/navbar';
import './novocliente.css';
import firebase from '../Config/firebase';

function NovoCliente(){

  const [empresa, setEmpresa] = useState('');
  const [qlf, setQlf] = useState('');
  const [tag, setTag] = useState('');
  const [equipamento, setEquipamento] = useState('');
  const [sistema, setSistema] = useState('');
  const [versao, setVersao] = useState('');
  const [statu, setStatu] = useState('');

    const [mensagem, setMensagem] = useState('');
    const [sucesso, setSucesso] = useState('N');
    const db = firebase.firestore();

    function CadastrarCliente(){

      if (empresa.length === 0){
        setMensagem('Informe a empresa');
      }
      else if (sistema.length === 0){
        setMensagem('Informe o sistema');
      }

      else if (sistema === 0){
        setMensagem('Informe o sistema');
      }


      else{
          db.collection('clientes').add({
            empresa: empresa,
            qlf: qlf,
            tag: tag,
            equipamento: equipamento,
            sistema: sistema,
            versao: versao,
            statu:statu,

          }).then(() => {
            setMensagem('');
            setSucesso('S');
          }).catch((erro) =>{
            setMensagem(erro);
            setSucesso('N');
          })
        }
      }

    return <div>
        <Navbar/>
        <div className="container-fluid titulo">

          <div className="offset-lg-3 col-lg-6">
            <h1>Novo Cliente</h1>
            <form>
            <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">Empresa</label>
                <input onChange={(e) => setEmpresa(e.target.value)} value={empresa} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">QLF-VSC</label>
                <input onChange={(e) => setQlf(e.target.value)} value={qlf} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">tag</label>
                <input  onChange={(e) => setTag(e.target.value)} value={tag} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">Equipamento</label>
                <input onChange={(e) => setEquipamento(e.target.value)} value={equipamento} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">Sistema</label>
                <input onChange={(e) => setSistema(e.target.value)} value={sistema} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">Versão</label>
                <input  onChange={(e) => setVersao(e.target.value)} value={versao} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">Status</label>
                <input  onChange={(e) => setStatu(e.target.value)} value={statu} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
              </div>

              <div className="text-center">
                <Link to="/app/home" className="btn btn-outline-primary btn-acao">Cancelar</Link>
                <button onClick={CadastrarCliente} type="button" className="btn btn-primary btn-acao">Salvar</button>
              </div>

              {mensagem.length > 0 ? <div className="alert alert-danger mt-2" role="alert">{mensagem}</div> : null}
              {sucesso === 'S' ? <Redirect to='/app/home' /> : null}

            </form>
          </div>
        </div>
    </div>;  
  }

export default NovoCliente;

[rodriguesabner]

@Rony2

não fala como validar os registro.

oq exatamente vc quer validar?

[Rony2]

Para o cadastro não aceitar valores iguais

[Rony2]

os campos (empresa, qlf-vsc, tag, equipamento e etc), os registros cadastrados nesses campos não podem ser igual.

[rodriguesabner]

vc quer validar esses dados com os dados que estão no banco? Ou checar se os campos estão com valores iguais no proprio formulario?

[Rony2]

checar se os valores que estão sendo adicionados nos formulários não sejam iguais aos que já estão no banco de dados

[Rony2]

Tipo uma validação assim, fiz mas não dar certo

[rodriguesabner]

vc pode criar uma função pra verificar isso:

async function registerCompany(){
  const clientesRef = db.collection('clientes');

  const novoCliente = {
      empresa: empresa,
      qlf: qlf,
      tag: tag,
      equipamento: equipamento,
      sistema: sistema,
      versao: versao,
      statu:statu,
   };

   const consulta = clientesRef
      .where('empresa', '==', novoCliente.empresa)
      .where('qlf', '==', novoCliente.qlf)
      .where('tag', '==', novoCliente.tag)
      .where('equipamento', '==', novoCliente.equipamento)
      .where('sistema', '==', novoCliente.sistema)
      .where('versao', '==', novoCliente.versao)
      .where('statu', '==', novoCliente.statu);

   consulta.get().then((querySnapshot) => {
       // Se a consulta retornar algum resultado, os valores já existem
       if (!querySnapshot.empty) {
           console.log('Os valores já existem no Firestore.');
           return;
       }

       // Caso contrário, adiciona os valores na coleção "clientes"
       clientesRef.add(novoCliente)
         .then((docRef) => {
              console.log('Novo cliente adicionado com o ID:', docRef.id);
       })
         .catch((error) => {
             console.error('Erro ao adicionar novo cliente:', error);
        });
   });
}

coloca essa function acima no seu codigo e substitui o trecho que vc faz o .add() no else. e coloca lá:

} else {
   registerCompany();
}

[Rony2]

import React, { useState } from ‘react’;
import {Link, Redirect} from ‘react-router-dom’;
import Navbar from ‘…/Components/Navbar/navbar’;
import ‘./novocliente.css’;
import firebase from ‘…/Config/firebase’;

function NovoCliente(){

const [empresa, setEmpresa] = useState(‘’);
const [qlf, setQlf] = useState(‘’);
const [tag, setTag] = useState(‘’);
const [equipamento, setEquipamento] = useState(‘’);
const [sistema, setSistema] = useState(‘’);
const [versao, setVersao] = useState(‘’);
const [statu, setStatu] = useState(‘’);

const [mensagem, setMensagem] = useState('');
const [sucesso, setSucesso] = useState('N');
const db = firebase.firestore();


async function registerCompany(){
  const clientesRef = db.collection('clientes');

  const novoCliente = {
      empresa: empresa,
      qlf: qlf,
      tag: tag,
      equipamento: equipamento,
      sistema: sistema,
      versao: versao,
      statu:statu,
   };

   const consulta = clientesRef
      .where('empresa', '==', novoCliente.empresa)
      .where('qlf', '==', novoCliente.qlf)
      .where('tag', '==', novoCliente.tag)
      .where('equipamento', '==', novoCliente.equipamento)
      .where('sistema', '==', novoCliente.sistema)
      .where('versao', '==', novoCliente.versao)
      .where('statu', '==', novoCliente.statu);

   consulta.get().then((querySnapshot) => {
       // Se a consulta retornar algum resultado, os valores já existem
       if (!querySnapshot.empty) {
           console.log('Os valores já existem no Firestore.');
           return;
       }

       // Caso contrário, adiciona os valores na coleção "clientes"
       clientesRef.add(novoCliente)
         .then((docRef) => {
              console.log('Novo cliente adicionado com o ID:', docRef.id);
       })
         .catch((error) => {
             console.error('Erro ao adicionar novo cliente:', error);
        });
   });
}


function CadastrarCliente(){

  if (empresa.length === 0){
    setMensagem('Informe a empresa');
  }
  else if (sistema.length === 0){
    setMensagem('Informe o sistema');
  }

  else if (sistema === 0){
    setMensagem('Informe o sistema');
  }

  


  else{
    registerCompany()
        setSucesso('S');
     
    }
  }

return <div>
    <Navbar/>
    <div className="container-fluid titulo">

      <div className="offset-lg-3 col-lg-6">
        <h1>Novo Cliente</h1>
        <form>
        <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Empresa</label>
            <input onChange={(e) => setEmpresa(e.target.value)} value={empresa} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">QLF-VSC</label>
            <input onChange={(e) => setQlf(e.target.value)} value={qlf} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">tag</label>
            <input  onChange={(e) => setTag(e.target.value)} value={tag} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Equipamento</label>
            <input onChange={(e) => setEquipamento(e.target.value)} value={equipamento} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Sistema</label>
            <input onChange={(e) => setSistema(e.target.value)} value={sistema} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Versão</label>
            <input  onChange={(e) => setVersao(e.target.value)} value={versao} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Status</label>
            <input  onChange={(e) => setStatu(e.target.value)} value={statu} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />              
          </div>

          <div className="text-center">
            <Link to="/app/home" className="btn btn-outline-primary btn-acao">Cancelar</Link>
            <button onClick={CadastrarCliente} type="button" className="btn btn-primary btn-acao">Salvar</button>
          </div>

          {mensagem.length > 0 ? <div className="alert alert-danger mt-2" role="alert">{mensagem}</div> : null}
          {sucesso === 'S' ? <Redirect to='/app/home' /> : null}

        </form>
      </div>
    </div>
</div>;  

}

export default NovoCliente;

[Rony2]

Está retornando sempre o mesmo valor se o registro for igual ou não

[Rony2]

[rodriguesabner]

cara, o que exatamente não pode ser igual?? só o nome da empresa?

pq pelo oq vc disse tudo nao pode se repetir, agora se vc muda um campo, esses valores nao sao mais iguais.

Se vc quer que a Empresa01 tenha somente UM registro, aí vc altera o where pra buscar pelo nome da empresa…

 //ficaria só isso
 const consulta = clientesRef
      .where('empresa', '==', novoCliente.empresa);

---

Seja mais objetivo na sua dúvida.

[Rony2]

Há foi mal entendi agora então ele só vai retornar qeu o registro já existe se todos os campos forem iguais.

[rodriguesabner]

@Rony2

Deu certo quando coloquei todos iguais

se vc quer campos especificos, aí nao precisa deixar todos…

---

@Rony2

no caso para não permitir cadastrar qual seria o direcionamento que eu faria pra ele não cadastrar e só exibir o alerta

Se bater nesse trecho abaixo nao vai chegar a cadastrar, vai dar o console e vai parar

@rodriguesabner

  // Se a consulta retornar algum resultado, os valores já existem
       if (!querySnapshot.empty) {
           console.log('Os valores já existem no Firestore.');
           return;
       }

se vc quiser mostrar o alert, pode colocar assim:

   if (!querySnapshot.empty) {
       alert('Os dados dessa empresa já foram cadastrados anteriormente.');
       return;
   }

[Rony2]

No caso a condição da consulta é como se fosse o operador & (E)todas as condições tem que ser true para exibir que o cadastro já existe. Tem a possibilidade de usar essa consulta como se fosse um operador || (OU), se uma das iguladades for TRUE ela alertar?

[rodriguesabner]

• O Cloud Firestore oferece suporte limitado para consultas com um OR lógico. Os operadores in e array-contains-any são compatíveis com um OR lógico de até 10 condições de igualdade (==) ou de array-contains em um único campo. Para outros casos, crie uma consulta separada para cada condição OR e combine os resultados da consulta no seu aplicativo.

const q1 = query(citiesRef, where("state", ">=", "CA"), where("state", "<=", "IN"));

Fonte: Executar consultas simples e compostas no Cloud Firestore  |  Firebase

Parece que fazer tudo em uma consulta já é um OR, acessa o link da documentação q passei e dá uma lida.

Se não funcionar assim, só fazer uma consulta pra cada OR e depois faz a condição no seu código

[Rony2]

Valeu obrigado de verdade, ajudou muito vou verificar

[Rony2]

No caso como seria fazer uma consulta para cada OR, não entendi