SHARE
TWEET

Untitled

a guest Nov 19th, 2019 100 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { Link } from 'react-router-dom';
  3.  
  4. import axios from 'axios';
  5.  
  6. export default class Formulario extends Component {
  7.     state = {
  8.         id: '',
  9.         name: '',
  10.         email: '',
  11.         city: '',
  12.         country: '',
  13.         job: '',
  14.         message: '',
  15.         alertClass: '',
  16.         edit: false
  17.     }
  18.  
  19.     sendData = () => {
  20.         this.props.parentCallback('Edição');
  21.     }
  22.  
  23.     //UNSAFE (Preciso pesquisar mais sobre carregamento do componente com requisições exeternas)
  24.     UNSAFE_componentWillMount() {
  25.         const url = window.location.href.split('/');
  26.         const lastUrlIndex = url.slice(-1).pop();
  27.         if(lastUrlIndex !== '' || lastUrlIndex !== 'formulario') {
  28.             this.setState({ id: lastUrlIndex, edit: true });
  29.         }
  30.     }
  31.  
  32.     componentDidMount() {
  33.         if(this.state.id !== 'formulario') {
  34.             this.setState({ edit: true });
  35.             this.sendData();
  36.             this.getUser();
  37.         } else {
  38.             this.setState({ edit: false });
  39.         }
  40.     }
  41.  
  42.     getUser = async () => {
  43.         let res =  await axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', { auth: 'Bearer: e97838bcd746c15765c22e1f372c8761', request_type: 'read', id: this.state.id } );
  44.         let { name, email, city, country, job } = res.data.dados[0];
  45.         this.setState({ name, email, city, country, job });
  46.     }
  47.  
  48.     handleChange = e => {
  49.         this.setState({ [e.target.name]: e.target.value });
  50.     }
  51.    
  52.     handleSubmit = e => {
  53.         e.preventDefault();
  54.  
  55.         const person = {
  56.             auth: 'Bearer: e97838bcd746c15765c22e1f372c8761',
  57.             request_type: 'create',
  58.             name: this.state.name,
  59.             email: this.state.email,
  60.             city: this.state.city,
  61.             country: this.state.country,
  62.             job: this.state.job
  63.         };
  64.  
  65.         if(!this.state.edit) {
  66.                 axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', person ).then(response => {
  67.                 const { dados } = response.data;
  68.                 if(response.status) {
  69.                     this.setState({ alertClass: dados !== 'Cadastro realizado' ? 'alert alert-warning' : 'alert alert-success' , message: dados });
  70.                     setTimeout(() => {
  71.                         this.setState({ alertClass: '', message: '' });
  72.                     }, 2000);
  73.                     if(dados === 'Cadastro realizado') this.setState({ name: '', email: '', city: '', country: '', job: '' });
  74.                 }
  75.             });
  76.         } else {
  77.             person.request_type = 'update';
  78.             person.id = this.state.id;
  79.             axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', person ).then(response => {
  80.                 const { dados } = response.data;
  81.                 if(response.status) {
  82.                     this.setState({ alertClass: dados !== 'CADASTRO ATUALIZADO' ? 'alert alert-warning' : 'alert alert-success' , message: dados });
  83.                     setTimeout(() => {
  84.                         this.setState({ alertClass: '', message: '' });
  85.                     }, 2000);
  86.                 }
  87.             });
  88.         }
  89.     }
  90.  
  91.     render() {
  92.         return(
  93.             <>
  94.             <form onSubmit={this.handleSubmit}>
  95.                 <input type="hidden" name="id" value={this.state.id} />
  96.                 { this.state.message !== '' ? <div className={this.state.alertClass + ' text-center mt-5'} role="alert">
  97.                     {this.state.message}
  98.                 </div> : <></>
  99.                 }
  100.                 <div className="form-group mt-5">
  101.                     <div className="row">
  102.                         <div className="col-md-6">
  103.                             <label>Nome</label>
  104.                             <input type="text" name="name" className="form-control form-control-sm" placeholder="Seu nome" onChange={this.handleChange} value={this.state.name} />
  105.                         </div>
  106.                         <div className="col-md-6">
  107.                             <label>E-mail</label>
  108.                             <input type="email" name="email" className="form-control form-control-sm" placeholder="exemplo@email.com" onChange={this.handleChange} value={this.state.email} />
  109.                         </div>
  110.                     </div>
  111.                     <div className="row mt-3">
  112.                         <div className="col-md-4">
  113.                             <label>Cidade</label>
  114.                             <input type="text" name="city" className="form-control form-control-sm" placeholder="Sua cidade natal" onChange={this.handleChange} value={this.state.city} />
  115.                         </div>
  116.                         <div className="col-md-4">
  117.                             <label>Pais</label>
  118.                             <input type="text" name="country" className="form-control form-control-sm" placeholder="Seu pais de origem" onChange={this.handleChange} value={this.state.country} />
  119.                         </div>
  120.                         <div className="col-md-4">
  121.                             <label>Ocupação Profissional</label>
  122.                             <input type="text" name="job" className="form-control form-control-sm" placeholder="Analista de algo" onChange={this.handleChange} value={this.state.job} />
  123.                         </div>
  124.                     </div>
  125.                     <div className="row mt-5">
  126.                         <div className="col-md-12 text-center">
  127.                             {this.state.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>}
  128.                             <Link
  129.                                 className="btn btn-sm btn-secondary ml-2"
  130.                                 to="/"
  131.                                 from="/formulario"
  132.                             >Voltar</Link>
  133.                         </div>
  134.                     </div>
  135.                 </div>
  136.             </form>
  137.             </>
  138.         );
  139.     }
  140. }
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