SHARE
TWEET

Untitled

a guest Nov 19th, 2019 87 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import { Link } from 'react-router-dom';
  3.  
  4. import axios from 'axios';
  5.  
  6. function Formulario() {
  7.  
  8.     const [id, setId] = useState("");
  9.     const [name, setName] = useState("");
  10.     const [email, setEmail] = useState("");
  11.     const [city, setCity] = useState("");
  12.     const [country, setCountry] = useState("");
  13.     const [job, setJob] = useState("");
  14.     const [message, setMessage] = useState("");
  15.     const [alertClass, setAlertClass] = useState("");
  16.     const [edit, setEdit] = useState(false);
  17.  
  18.     const handleSubmit = e => {
  19.         e.preventDefault();
  20.  
  21.         const person = {
  22.             auth: 'Bearer: e97838bcd746c15765c22e1f372c8761',
  23.             request_type: 'create',
  24.             name,
  25.             email,
  26.             city,
  27.             country,
  28.             job
  29.         }
  30.  
  31.         if(!edit) {
  32.             axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', person).then(r => {
  33.                 const { dados } = r.data;
  34.                 if(r.status) {
  35.                     setAlertClass(dados !== 'Cadastro relizado' ? 'alert alert-warning' : 'alert alert-success');
  36.                     setMessage(dados);
  37.                     setTimeout(() => {
  38.                         setAlertClass("");
  39.                         setMessage("");
  40.                     }, 2000);
  41.                     if(dados === 'Cadastro realizado') {
  42.                         setName("");
  43.                         setEmail("");
  44.                         setCity("");
  45.                         setCountry("");
  46.                         setJob("");
  47.                     }
  48.                 }
  49.             });
  50.         } else {
  51.             person.request_type = 'update';
  52.             person.id = id;
  53.             axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', person ).then(r => {
  54.                 const { dados } = r.data;
  55.                 if(r.status) {
  56.                     setAlertClass(dados !== 'CADASTRO ATUALIZADO' ? 'alert alert-warning' : 'alert alert-success');
  57.                     setMessage(dados);
  58.                     setTimeout(() => {
  59.                         setAlertClass("");
  60.                         setMessage("");
  61.                     }, 2000);
  62.                 }
  63.             });
  64.         }
  65.     }
  66.  
  67.    
  68.     return(
  69.         <>
  70.         <form onSubmit={handleSubmit}>
  71.             <input type="hidden" name="id" value={id} />
  72.             { message !== '' ? <div className={alertClass + ' text-center mt-5'} role="alert">
  73.                 {message}
  74.             </div> : <></>
  75.             }
  76.             <div className="form-group mt-5">
  77.                 <div className="row">
  78.                     <div className="col-md-6">
  79.                         <label>Nome</label>
  80.                         <input type="text" name="name" className="form-control form-control-sm" placeholder="Seu nome" onChange={e => setName(e.target.value)} value={name} />
  81.                     </div>
  82.                     <div className="col-md-6">
  83.                         <label>E-mail</label>
  84.                         <input type="email" name="email" className="form-control form-control-sm" placeholder="exemplo@email.com" onChange={e => setEmail(e.target.value)} value={email} />
  85.                     </div>
  86.                 </div>
  87.                 <div className="row mt-3">
  88.                     <div className="col-md-4">
  89.                         <label>Cidade</label>
  90.                         <input type="text" name="city" className="form-control form-control-sm" placeholder="Sua cidade natal" onChange={e => setCity(e.target.value)} value={city} />
  91.                     </div>
  92.                     <div className="col-md-4">
  93.                         <label>Pais</label>
  94.                         <input type="text" name="country" className="form-control form-control-sm" placeholder="Seu pais de origem" onChange={e => setCountry(e.target.value)} value={country} />
  95.                     </div>
  96.                     <div className="col-md-4">
  97.                         <label>Ocupação Profissional</label>
  98.                         <input type="text" name="job" className="form-control form-control-sm" placeholder="Analista de algo" onChange={e => setJob(e.target.value)} value={job} />
  99.                     </div>
  100.                 </div>
  101.                 <div className="row mt-5">
  102.                     <div className="col-md-12 text-center">
  103.                         {edit ? <button type="submit" name="" className="btn btn-sm btn-warning">Editar</button> : <button type="submit" name="" className="btn btn-sm btn-primary">Cadastrar</button>}
  104.                         <Link
  105.                             className="btn btn-sm btn-secondary ml-2"
  106.                             to="/"
  107.                             from="/formulario"
  108.                         >Voltar</Link>
  109.                     </div>
  110.                 </div>
  111.             </div>
  112.         </form>
  113.         </>
  114.     );
  115. }
  116.  
  117. export default Formulario;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top