From c2bebc356fd36614bd28c114a4a6c5c03480387a Mon Sep 17 00:00:00 2001
From: Gabazvedo <gbldja@gmail.com>
Date: Fri, 13 Aug 2021 13:28:37 -0300
Subject: [PATCH 1/5] =?UTF-8?q?Mudan=C3=A7a=20no=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 quinzena7/labenusers/src/App.js               | 19 +++--
 quinzena7/labenusers/src/GlobalStyled.js      | 12 +++
 quinzena7/labenusers/src/StyledApp.js         |  2 +
 .../TelaPrincipal/StyledTelaPrincipal.js      | 79 +++++++++++++++++++
 .../components/TelaPrincipal/TelaPrincipal.js | 49 ++++++++++++
 .../TelaUsuario/StyledTelausuarios.js         | 10 +++
 .../components/TelaUsuario/TelaUsuarios.js    | 14 ++++
 quinzena7/labenusers/src/index.js             |  2 +
 8 files changed, 179 insertions(+), 8 deletions(-)
 create mode 100644 quinzena7/labenusers/src/GlobalStyled.js
 create mode 100644 quinzena7/labenusers/src/StyledApp.js
 create mode 100644 quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
 create mode 100644 quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
 create mode 100644 quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
 create mode 100644 quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js

diff --git a/quinzena7/labenusers/src/App.js b/quinzena7/labenusers/src/App.js
index d2be873..f960ebf 100644
--- a/quinzena7/labenusers/src/App.js
+++ b/quinzena7/labenusers/src/App.js
@@ -1,11 +1,14 @@
+import React from "react";
+import TelaPrincipal from "./components/TelaPrincipal/TelaPrincipal";
+import TelaUsuarios from "./components/TelaUsuario/TelaUsuarios";
 
-
-function App() {
+export default class App extends React.Component{
+  render(){
   return (
-    <div>
-      <h1>Iniciando projeto LabenuUsers</h1>
-    </div>
-  );
+    <>
+      <TelaPrincipal />
+      {/* <TelaUsuarios/> */}
+    </>
+  )
+  }
 }
-
-export default App;
diff --git a/quinzena7/labenusers/src/GlobalStyled.js b/quinzena7/labenusers/src/GlobalStyled.js
new file mode 100644
index 0000000..c3700d9
--- /dev/null
+++ b/quinzena7/labenusers/src/GlobalStyled.js
@@ -0,0 +1,12 @@
+import { createGlobalStyle } from "styled-components";
+
+
+const GlobalStyled = createGlobalStyle`
+    *{
+        margin:0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: sans-serif;
+    }
+`
+export default GlobalStyled
\ No newline at end of file
diff --git a/quinzena7/labenusers/src/StyledApp.js b/quinzena7/labenusers/src/StyledApp.js
new file mode 100644
index 0000000..e25d346
--- /dev/null
+++ 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
new file mode 100644
index 0000000..556d2e2
--- /dev/null
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
@@ -0,0 +1,79 @@
+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;
+`;
+
+export const LogoLogin = 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.form`
+  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: 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
new file mode 100644
index 0000000..35bcd63
--- /dev/null
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  Body,
+  LateralDireita,
+  LateralEsquerda,
+  LogoLogin,
+  Titulo,
+  Divinputs,
+  Input,
+  Button,
+} from "./StyledTelaPrincipal";
+import TelaUsuarios from "../TelaUsuario/TelaUsuarios";
+
+
+
+
+
+export default class TelaPrincipal extends React.Component{
+  
+  TrocarPagina = () =>{
+    return <TelaUsuarios/>
+    alert("trocoou")
+  }
+
+
+  render(){
+  return (
+    <Body>
+      <LateralDireita />
+        <LateralEsquerda>
+        <Titulo> LabenUserss</Titulo>
+
+        <LogoLogin />
+
+        <Divinputs>
+          <Input type="text" placeholder="Insira seu nome" required></Input>
+          <Input type="email" placeholder="Insira seu nome" required></Input>
+          <Button>Enviar</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
new file mode 100644
index 0000000..41e758c
--- /dev/null
+++ b/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const DivContainer = styled.div`
+    height: 100vh;
+    width: 100vw;
+
+    background-color: teal;
+`
+
+export default DivContainer
\ No newline at end of file
diff --git a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
new file mode 100644
index 0000000..f558595
--- /dev/null
+++ b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
@@ -0,0 +1,14 @@
+import React from "react";
+import DivContainer from "./StyledTelausuarios";
+
+export default class TelaUsuarios extends React.Component {
+  render() {
+    return (
+      <>
+        <DivContainer>
+          <h1>Testes</h1>
+        </DivContainer>
+      </>
+    );
+  }
+}
diff --git a/quinzena7/labenusers/src/index.js b/quinzena7/labenusers/src/index.js
index abefd0a..b37a02d 100644
--- 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')

From 520857a4e47f188989659fbd9f88487ffb9a9356 Mon Sep 17 00:00:00 2001
From: Gabazvedo <gbldja@gmail.com>
Date: Sat, 14 Aug 2021 00:20:43 -0300
Subject: [PATCH 2/5] =?UTF-8?q?Inserindo=20a=20l=C3=B3gica=20-=20falta=20a?=
 =?UTF-8?q?penas=20fazer=20a=20integra=C3=A7=C3=A3o=20com=20a=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 quinzena7/labenusers/src/App.js               |  2 -
 .../TelaPrincipal/StyledTelaPrincipal.js      |  6 +-
 .../components/TelaPrincipal/TelaPrincipal.js | 84 ++++++++++++-------
 .../TelaUsuario/StyledTelausuarios.js         | 52 ++++++++++--
 .../components/TelaUsuario/TelaUsuarios.js    | 29 ++++++-
 5 files changed, 131 insertions(+), 42 deletions(-)

diff --git a/quinzena7/labenusers/src/App.js b/quinzena7/labenusers/src/App.js
index f960ebf..9d5092a 100644
--- a/quinzena7/labenusers/src/App.js
+++ b/quinzena7/labenusers/src/App.js
@@ -1,13 +1,11 @@
 import React from "react";
 import TelaPrincipal from "./components/TelaPrincipal/TelaPrincipal";
-import TelaUsuarios from "./components/TelaUsuario/TelaUsuarios";
 
 export default class App extends React.Component{
   render(){
   return (
     <>
       <TelaPrincipal />
-      {/* <TelaUsuarios/> */}
     </>
   )
   }
diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
index 556d2e2..d185941 100644
--- a/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
@@ -24,7 +24,7 @@ export const Titulo = styled.h1`
   color: #444;
 `;
 
-export const LogoLogin = styled.div`
+export const FotoUsuario = styled.div`
   background-color: #e5e5e5;
   height: 100px;
   width: 100px;
@@ -35,7 +35,7 @@ export const LogoLogin = styled.div`
   background-size: cover;
 `;
 
-export const Divinputs = styled.form`
+export const Divinputs = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -57,7 +57,7 @@ export const Input = styled.input`
 
   :focus {
     background-color: #f4f4f4 transparent;
-    border-radius: 0;
+    border-radius: 8px 8px 0 0;
 
     border-bottom: 1px solid #444;
 
diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
index 35bcd63..103ee6e 100644
--- a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
@@ -3,7 +3,7 @@ import {
   Body,
   LateralDireita,
   LateralEsquerda,
-  LogoLogin,
+  FotoUsuario,
   Titulo,
   Divinputs,
   Input,
@@ -11,39 +11,65 @@ import {
 } from "./StyledTelaPrincipal";
 import TelaUsuarios from "../TelaUsuario/TelaUsuarios";
 
+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 });
+  };
 
-export default class TelaPrincipal extends React.Component{
-  
-  TrocarPagina = () =>{
-    return <TelaUsuarios/>
-    alert("trocoou")
-  }
+  novoUsuario = () => {
+    console.log("nome ", this.state.nome, "email ", this.state.email);
+
+  };
 
+  render() {
+    if (this.state.novaTela) return <TelaUsuarios usuario={{nome: this.state.nome, email:this.state.email}}/>;
 
-  render(){
-  return (
-    <Body>
-      <LateralDireita />
+    return (
+      <Body>
+        <LateralDireita />
         <LateralEsquerda>
-        <Titulo> LabenUserss</Titulo>
-
-        <LogoLogin />
-
-        <Divinputs>
-          <Input type="text" placeholder="Insira seu nome" required></Input>
-          <Input type="email" placeholder="Insira seu nome" required></Input>
-          <Button>Enviar</Button>
-        </Divinputs>
-
-        {/* Ir para a tela de usuários cadastrados */}
-        <Button onClick={this.TrocarPagina}>Lista de usuários</Button>
-        
-      </LateralEsquerda>
-    </Body>
-  );
-  }
-};
+          <Titulo> LabenUsers</Titulo>
+
+          <FotoUsuario />
 
+          <Divinputs>
+            <Input
+              type="text"
+              placeholder="Nome"
+              required
+              onChange={this.inputNome}
+              value={this.state.nome}
+            ></Input>
+
+            <Input
+              onChange={this.inputEmail}
+              value={this.state.email}
+              type="email"
+              placeholder="Email"
+              require
+            ></Input>
+
+            <Button onClick={this.novoUsuario}>Enviar</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
index 41e758c..54fbb8b 100644
--- a/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
+++ b/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
@@ -1,10 +1,52 @@
 import styled from "styled-components";
 
-const DivContainer = styled.div`
-    height: 100vh;
-    width: 100vw;
+export const DivContainer = styled.div`
+  height: 100vh;
+  width: 100vw;
+  background-color: teal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 
-    background-color: teal;
+export const Secaousuarios = styled.section`
+  width: 80%;
+  height: 80%;
+  background-color: thistle;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  justify-content: space-between;
+  padding: 2%;
+  border-radius: 10px;
+`;
+
+export const Usuario = styled.div`
+  display: flex;
+  justify-content: space-between;
+  background-color: aliceblue;
+  width: 60%;
+
+  button{
+    border:none;
+    padding: 4px;
+    background-color: blueviolet;
+    height: 20px;
+    width: 20px;
+  }
 `
 
-export default DivContainer
\ No newline at end of file
+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;
+  }
+`;
\ No newline at end of file
diff --git a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
index f558595..34a46cc 100644
--- a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
+++ b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
@@ -1,12 +1,35 @@
 import React from "react";
-import DivContainer from "./StyledTelausuarios";
+import TelaPrincipal from "../TelaPrincipal/TelaPrincipal";
+import { DivContainer, Button, Secaousuarios, Usuario } from "./StyledTelausuarios";
 
 export default class TelaUsuarios extends React.Component {
+  state = {
+    trocarTela: false,
+    usuarios: [],
+  };
+
+  
+
+
+  trocarTela = () => {
+    this.setState({ trocarTela: true });
+  };
+
   render() {
-    return (
+    if (this.state.trocarTela) return <TelaPrincipal />;
+    console.log(this.props)
+    return (  
       <>
         <DivContainer>
-          <h1>Testes</h1>
+          <Secaousuarios>
+              <h1>Usuários</h1>
+            <Usuario>
+              <p>{this.props.usuario.nome}</p>
+              <p>{this.props.usuario.email}</p>
+              <button>X</button>
+            </Usuario>
+            <Button onClick={this.trocarTela}> Voltar para Home</Button>
+          </Secaousuarios>
         </DivContainer>
       </>
     );

From 76a0273fd2f39c3a6fde0ab66e06952a17938f9c Mon Sep 17 00:00:00 2001
From: Gabazvedo <gbldja@gmail.com>
Date: Wed, 18 Aug 2021 10:46:24 -0300
Subject: [PATCH 3/5] =?UTF-8?q?alteral=C3=A7=C3=B5oes=20no=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../labenusers/src/components/TelaPrincipal/TelaPrincipal.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
index 103ee6e..a5083de 100644
--- a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
@@ -31,7 +31,6 @@ export default class TelaPrincipal extends React.Component {
   };
 
   novoUsuario = () => {
-    console.log("nome ", this.state.nome, "email ", this.state.email);
 
   };
 

From 2ee033822761111b40fe3a1fa74b913f1b855eca Mon Sep 17 00:00:00 2001
From: Gabazvedo <gbldja@gmail.com>
Date: Wed, 18 Aug 2021 16:40:59 -0300
Subject: [PATCH 4/5] =?UTF-8?q?L=C3=B3gica=20inserida?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 quinzena7/labenusers/src/GlobalStyled.js      |  1 +
 .../TelaPrincipal/StyledTelaPrincipal.js      |  4 ++
 .../components/TelaPrincipal/TelaPrincipal.js | 35 ++++++++--
 .../TelaUsuario/StyledTelausuarios.js         | 29 +++++---
 .../components/TelaUsuario/TelaUsuarios.js    | 69 ++++++++++++++++---
 5 files changed, 112 insertions(+), 26 deletions(-)

diff --git a/quinzena7/labenusers/src/GlobalStyled.js b/quinzena7/labenusers/src/GlobalStyled.js
index c3700d9..717113a 100644
--- a/quinzena7/labenusers/src/GlobalStyled.js
+++ b/quinzena7/labenusers/src/GlobalStyled.js
@@ -7,6 +7,7 @@ const GlobalStyled = createGlobalStyle`
         padding: 0;
         box-sizing: border-box;
         font-family: sans-serif;
+
     }
 `
 export default GlobalStyled
\ No newline at end of file
diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
index d185941..708c68c 100644
--- a/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/StyledTelaPrincipal.js
@@ -22,6 +22,10 @@ export const LateralEsquerda = styled.div`
 export const Titulo = styled.h1`
   margin-top: 20%;
   color: #444;
+
+  span{
+    color: grey;
+  }
 `;
 
 export const FotoUsuario = styled.div`
diff --git a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
index a5083de..3565d37 100644
--- a/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
+++ b/quinzena7/labenusers/src/components/TelaPrincipal/TelaPrincipal.js
@@ -10,6 +10,8 @@ import {
   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 = {
@@ -31,7 +33,24 @@ export default class TelaPrincipal extends React.Component {
   };
 
   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() {
@@ -41,7 +60,7 @@ export default class TelaPrincipal extends React.Component {
       <Body>
         <LateralDireita />
         <LateralEsquerda>
-          <Titulo> LabenUsers</Titulo>
+          <Titulo> Laben<span>Users</span></Titulo>
 
           <FotoUsuario />
 
@@ -49,20 +68,22 @@ export default class TelaPrincipal extends React.Component {
             <Input
               type="text"
               placeholder="Nome"
-              required
-              onChange={this.inputNome}
               value={this.state.nome}
+              onChange={this.inputNome}
+
+              required
             ></Input>
 
             <Input
-              onChange={this.inputEmail}
-              value={this.state.email}
               type="email"
               placeholder="Email"
-              require
+              value={this.state.email}
+              onChange={this.inputEmail}
+              
+              required
             ></Input>
 
-            <Button onClick={this.novoUsuario}>Enviar</Button>
+            <Button onClick={this.novoUsuario}>Cadastrar</Button>
           </Divinputs>
 
           {/* Ir para a tela de usuários cadastrados */}
diff --git a/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
index 54fbb8b..3b26354 100644
--- a/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
+++ b/quinzena7/labenusers/src/components/TelaUsuario/StyledTelausuarios.js
@@ -16,8 +16,6 @@ export const Secaousuarios = styled.section`
   display: flex;
   flex-direction: column;
   align-items: center;
-
-  justify-content: space-between;
   padding: 2%;
   border-radius: 10px;
 `;
@@ -26,16 +24,31 @@ export const Usuario = styled.div`
   display: flex;
   justify-content: space-between;
   background-color: aliceblue;
-  width: 60%;
+  width: 70%;
+  padding: 1vh;
+  border-radius: 10px;
+  margin-top: 10px;
+  align-items: center;
+`
 
-  button{
+export const ButtonUser = styled.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border:none;
     padding: 4px;
     background-color: blueviolet;
-    height: 20px;
-    width: 20px;
-  }
-`
+    height: 25px;
+    width: 25px;
+    border-radius: 50px;
+    
+
+    :hover{
+      cursor: pointer;
+      background-color: pink;
+      font-weight: 600;
+    }
+` 
 
 export const Button = styled.button`
   margin-top: 5%;
diff --git a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
index 34a46cc..c6fa675 100644
--- a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
+++ b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
@@ -1,6 +1,13 @@
 import React from "react";
+import axios from "axios";
 import TelaPrincipal from "../TelaPrincipal/TelaPrincipal";
-import { DivContainer, Button, Secaousuarios, Usuario } from "./StyledTelausuarios";
+import {
+  DivContainer,
+  Button,
+  Secaousuarios,
+  Usuario,
+  ButtonUser,
+} from "./StyledTelausuarios";
 
 export default class TelaUsuarios extends React.Component {
   state = {
@@ -8,26 +15,66 @@ export default class TelaUsuarios extends React.Component {
     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()
+      alert("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.props)
-    return (  
+    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>
-            <Usuario>
-              <p>{this.props.usuario.nome}</p>
-              <p>{this.props.usuario.email}</p>
-              <button>X</button>
-            </Usuario>
+            <h1>Usuários</h1>
+              {listaUsuarios}
             <Button onClick={this.trocarTela}> Voltar para Home</Button>
           </Secaousuarios>
         </DivContainer>

From fed770d6ea3c8979f632d41664645b494bd70410 Mon Sep 17 00:00:00 2001
From: Gabazvedo <gbldja@gmail.com>
Date: Wed, 18 Aug 2021 22:11:23 -0300
Subject: [PATCH 5/5] Finalizando atividade

---
 quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
index c6fa675..3c47816 100644
--- a/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
+++ b/quinzena7/labenusers/src/components/TelaUsuario/TelaUsuarios.js
@@ -51,7 +51,7 @@ export default class TelaUsuarios extends React.Component {
     })
     .then(()=>{
       this.trazerUsuarios()
-      alert("Deseja realmente deletar o usuário?")
+      window.confirm("Deseja realmente deletar o usuário?")
     })
     .catch(()=>{
       alert("Não foi possível deletar usuário, tente novamente")