Gabriel-Silva/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js at fed770d6ea3c8979f632d41664645b494bd70410 · future4code/Gabriel-Silva · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React from "react";
import {
  Body,
  LateralDireita,
  LateralEsquerda,
  FotoUsuario,
  Titulo,
  Divinputs,
  Input,
  Button,
} from "./StyledTelaPrincipal";
import TelaUsuarios from "../TelaUsuario/TelaUsuarios";
import axios from "axios";
import { ThemeProvider } from "styled-components";

export default class TelaPrincipal extends React.Component {
  state = {
    novaTela: false,

    nome: "",
    email: "",
  };

  TrocarPagina = () => {
    this.setState({ novaTela: true });
  };

  inputNome = (event) => {
    this.setState({ nome: event.target.value });
  };
  inputEmail = (event) => {
    this.setState({ email: event.target.value });
  };

  novoUsuario = () => {
      const url="https://us-central1-labenu-apis.cloudfunctions.net/labenusers/users"
      const body = {
        name: this.state.nome,
        email:this.state.email,
      }
      axios.post(url, body,{
        headers: {
          Authorization:"gabriel-azevedo-johnson"
        }
      })
      .then(() =>{
        this.setState({nome:"", email:""})
        alert("Usuário cadastrado com sucesso!")
      })
      .catch(() =>{
        alert("Não foi possível cadastrar usuário")

      })
  };

  render() {
    if (this.state.novaTela) return <TelaUsuarios usuario={{nome: this.state.nome, email:this.state.email}}/>;

    return (
      <Body>
        <LateralDireita />
        <LateralEsquerda>
          <Titulo> Laben<span>Users</span></Titulo>

          <FotoUsuario />

          <Divinputs>
            <Input
              type="text"
              placeholder="Nome"
              value={this.state.nome}
              onChange={this.inputNome}

              required
            ></Input>

            <Input
              type="email"
              placeholder="Email"
              value={this.state.email}
              onChange={this.inputEmail}

              required
            ></Input>

            <Button onClick={this.novoUsuario}>Cadastrar</Button>
          </Divinputs>

          {/* Ir para a tela de usuários cadastrados */}
          <Button onClick={this.TrocarPagina}>Lista de usuários</Button>
        </LateralEsquerda>
      </Body>
    );
  }
}