future4code · gabazevdo · Aug 13, 2021 · Aug 14, 2021 · Aug 18, 2021 · Aug 18, 2021
diff --git a/quinzena7/labenusers/src/App.js b/quinzena7/labenusers/src/App.js
@@ -1,11 +1,12 @@
+import React from "react";
+import TelaPrincipal from "./components/TelaPrincipal/TelaPrincipal";
 
-
-function App() {
+export default class App extends React.Component{
+  render(){
   return (
-    <div>
-      <h1>Iniciando projeto LabenuUsers</h1>
-    </div>
-  );
+    <>
+      <TelaPrincipal />
+    </>
+  )
+  }
 }
-
-export default App;
diff --git a/quinzena7/labenusers/src/GlobalStyled.js b/quinzena7/labenusers/src/GlobalStyled.js
@@ -0,0 +1,13 @@
+import { createGlobalStyle } from "styled-components";
+
+
+const GlobalStyled = createGlobalStyle`
+    *{
+        margin:0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: sans-serif;
+
+    }
+`
+export default GlobalStyled
diff --git a/quinzena7/labenusers/src/StyledApp.js b/quinzena7/labenusers/src/StyledApp.js
@@ -0,0 +1,2 @@
+import styled from "styled-components";
+
diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
@@ -0,0 +1,83 @@
+import styled from "styled-components";
+
+export const Body = styled.body`
+  height: 100vh;
+  width: 100vw;
+  background-color: aliceblue;
+  display: flex;
+`;
+
+export const LateralDireita = styled.div`
+  background-color: #444;
+  width: 70%;
+`;
+export const LateralEsquerda = styled.div`
+  width: 30%;
+  background-color: #d4d4d4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const Titulo = styled.h1`
+  margin-top: 20%;
+  color: #444;
+
+  span{
+    color: grey;
+  }
+`;
+
+export const FotoUsuario = styled.div`
+  background-color: #e5e5e5;
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  margin-top: 10%;
+
+  background-image: url("https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png");
+  background-size: cover;
+`;
+
+export const Divinputs = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 5%;
+  width: 50%;
+  height: 30%;
+  display: flex;
+  border-bottom: 1px solid #444;
+`;
+
+export const Input = styled.input`
+  height: 30px;
+  width: 100%;
+  margin-bottom: 5%;
+  padding-left: 5%;
+  border: none;
+  border-radius: 8px;
+  outline: 0;
+
+  :focus {
+    background-color: #f4f4f4 transparent;
+    border-radius: 8px 8px 0 0;
+
+    border-bottom: 1px solid #444;
+
+  }
+`;
+
+export const Button = styled.button`
+  margin-top: 5%;
+  padding: 4%;
+  width: 60%;
+  border-radius: 8px;
+  background-color: yellowgreen;
+  border: none;
+
+  :hover {
+    background-color: orangered;
+    cursor: pointer;
+  }
+`;
diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
@@ -0,0 +1,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>
+    );
+  }
+}
diff --git a/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
@@ -0,0 +1,65 @@
+import styled from "styled-components";
+
+export const DivContainer = styled.div`
+  height: 100vh;
+  width: 100vw;
+  background-color: teal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Secaousuarios = styled.section`
+  width: 80%;
+  height: 80%;
+  background-color: thistle;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2%;
+  border-radius: 10px;
+`;
+
+export const Usuario = styled.div`
+  display: flex;
+  justify-content: space-between;
+  background-color: aliceblue;
+  width: 70%;
+  padding: 1vh;
+  border-radius: 10px;
+  margin-top: 10px;
+  align-items: center;
+`
+
+export const ButtonUser = styled.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border:none;
+    padding: 4px;
+    background-color: blueviolet;
+    height: 25px;
+    width: 25px;
+    border-radius: 50px;
+
+
+    :hover{
+      cursor: pointer;
+      background-color: pink;
+      font-weight: 600;
+    }
+` 
+
+export const Button = styled.button`
+  margin-top: 5%;
+  width: 20%;
+  height: 10%;
+  border-radius: 8px;
+  background-color: yellowgreen;
+  border: none;
+
+  :hover {
+    background-color: orangered;
+    cursor: pointer;
+  }
+`;
diff --git a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
@@ -0,0 +1,84 @@
+import React from "react";
+import axios from "axios";
+import TelaPrincipal from "../TelaPrincipal/TelaPrincipal";
+import {
+  DivContainer,
+  Button,
+  Secaousuarios,
+  Usuario,
+  ButtonUser,
+} from "./StyledTelausuarios";
+
+export default class TelaUsuarios extends React.Component {
+  state = {
+    trocarTela: false,
+    usuarios: [],
+  };
+
+  componentDidMount() {
+    this.trazerUsuarios();
+  }
+
+  trocarTela = () => {
+    this.setState({ trocarTela: true });
+  };
+
+  trazerUsuarios = () => {
+    const url =
+      "https://us-central1-labenu-apis.cloudfunctions.net/labenusers/users";
+    axios
+      .get(url, {
+        headers: {
+          Authorization: "gabriel-azevedo-johnson",
+        },
+      })
+      .then((res) => {
+        this.setState({ usuarios: res.data });
+      })
+      .catch((err) => {
+        alert("Ocorreu um erro e não foi possível carregar os usuários.");
+      });
+  };
+
+
+
+  deletarUsuario=(id)=>{
+    const url = `https://us-central1-labenu-apis.cloudfunctions.net/labenusers/users/${id}`
+    axios.delete(url, {
+      headers: {
+        Authorization:"gabriel-azevedo-johnson"
+      }
+    })
+    .then(()=>{
+      this.trazerUsuarios()
+      window.confirm("Deseja realmente deletar o usuário?")
+    })
+    .catch(()=>{
+      alert("Não foi possível deletar usuário, tente novamente")
+    })
+  }
+
+  render() {
+    if (this.state.trocarTela) return <TelaPrincipal />;
+    console.log(this.state)
+    const listaUsuarios = this.state.usuarios.map((user) => {
+      return(
+      <Usuario key={user.id}>
+        <p>{user.name}</p>
+        <ButtonUser onClick={()=> this.deletarUsuario(user.id)}>x</ButtonUser>
+      </Usuario>
+      )
+    });
+    return (
+      <>
+        <DivContainer>
+          <Secaousuarios>
+            <h1>Usuários</h1>
+              {listaUsuarios}
+            <Button onClick={this.trocarTela}> Voltar para Home</Button>
+          </Secaousuarios>
+        </DivContainer>
+      </>
+    );
+  }
+}
diff --git a/quinzena7/labenusers/src/index.js b/quinzena7/labenusers/src/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import GlobalStyled from './GlobalStyled'
 
 ReactDOM.render(
   <React.StrictMode>
+    <GlobalStyled/>
     <App />
   </React.StrictMode>,
   document.getElementById('root')