From 2cf359fd05129a854570c75645a319d85683ccd1 Mon Sep 17 00:00:00 2001
From: "https://github.com/Michelineffb" <michelinemm@gmail.com>
Date: Fri, 28 May 2021 16:28:27 -0300
Subject: [PATCH 1/2] tentando fazer o carrinho

---
 src/App.js                                  |  2 +-
 src/components/Cards/Cards.js               |  1 +
 src/components/Cards/Informacoes.js         |  2 +-
 src/components/Cart/Cart.js                 | 22 ++++++-
 src/components/Cart/CartItens.js            | 23 +++++++
 src/components/Cart/Styled.js               | 21 +++++-
 src/components/pages/MainPage/MainPage.js   |  2 +-
 src/components/pages/NinjaPage/NinjaPage.js |  2 +-
 src/components/pages/UserPage/Styled.js     |  3 +-
 src/components/pages/UserPage/UserPage.js   | 73 ++++++++++++++++++---
 10 files changed, 134 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Cart/CartItens.js

diff --git a/src/App.js b/src/App.js
index 0878ebf..c715189 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,7 @@ export default class App extends React.Component {
 
   
   state = {
-    page: "main"
+    page: "user" //main
   }
 
  
diff --git a/src/components/Cards/Cards.js b/src/components/Cards/Cards.js
index 8f2370b..a7c1501 100644
--- a/src/components/Cards/Cards.js
+++ b/src/components/Cards/Cards.js
@@ -52,6 +52,7 @@ export default class CardProduto extends Component {
               item={this.props.product}
               preco={this.props.price}
               adicionarproduto={this.props.adicionarproduto}
+              // add={() => this.props.add()} // testar pra ver se está funcionando - micheline
             />
           </Box>
         </Box>
diff --git a/src/components/Cards/Informacoes.js b/src/components/Cards/Informacoes.js
index aa1143e..609efc4 100644
--- a/src/components/Cards/Informacoes.js
+++ b/src/components/Cards/Informacoes.js
@@ -39,7 +39,7 @@ export default function Informacoes(props) {
           </PopoverBody>
           <PopoverFooter>
             <Button
-              onClick={"#F5F4FC"}
+              // onClick={() => this.props.add(servico.id)}// this.props.add        testar pra ver se está funcionando - micheline
               bg="#7660C3"
               color="#FFFFFF"
               _hover={{ bg: "" }}
diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
index e6306fd..7d9d943 100644
--- a/src/components/Cart/Cart.js
+++ b/src/components/Cart/Cart.js
@@ -1,14 +1,32 @@
 import React from 'react';
-import { CartMain } from './Styled';
+import { CartMain, ContainerCartItens } from './Styled';
+import CartItens from './CartItens.js'
 
 
 
 export default class Cart extends React.Component{
+    totalValorCart = () => {
+        let total = 0
+        for (let servico of this.props.servicosCarrinho){
+            total += servico.price * 1
+        }
+        return total
+    }
 
     render(){
         return(
             <CartMain>
-                <h1>H</h1>
+               <h1>Carrinho</h1>
+               <hr />
+               <ContainerCartItens>
+                   {this.props.servicosCarrinho.map((servico) => {
+                    return <CartItens cartItemServico = { servico }/> 
+                })}
+               </ContainerCartItens>
+              <hr />
+              <p>Valor total: R$ { this.totalValorCart() },00</p>
+              <br />
+              <button>contratar</button>
             </CartMain>
         )
             
diff --git a/src/components/Cart/CartItens.js b/src/components/Cart/CartItens.js
new file mode 100644
index 0000000..fc0d7a3
--- /dev/null
+++ b/src/components/Cart/CartItens.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ItemContainer } from './Styled';
+
+
+
+
+export default class CartItens extends React.Component{
+
+    render(){
+        return(
+            <div>
+                <ItemContainer>
+                        <p>{this.props.cartItemServico.title}</p>
+                        <p>R$ {this.props.cartItemServico.price},00</p>
+                        <p><button>Remover</button></p>
+                </ItemContainer>
+
+            </div>
+        )
+            
+
+    }
+}
\ No newline at end of file
diff --git a/src/components/Cart/Styled.js b/src/components/Cart/Styled.js
index e37cc87..0607f38 100644
--- a/src/components/Cart/Styled.js
+++ b/src/components/Cart/Styled.js
@@ -2,5 +2,22 @@ import styled from "styled-components";
 
 
 export const CartMain = styled.div`
-    background-color: purple;
-`
\ No newline at end of file
+padding: 1px;
+margin: 10px;
+border: 1px solid black;
+p{
+   padding-top:20px;
+}
+`
+
+export const ContainerCartItens= styled.div`
+display: grid;
+gap: 4px;
+`
+
+export const ItemContainer = styled.div `
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+gap: 10px;
+align-items: center;
+`
diff --git a/src/components/pages/MainPage/MainPage.js b/src/components/pages/MainPage/MainPage.js
index 34f0bfc..788b8f8 100644
--- a/src/components/pages/MainPage/MainPage.js
+++ b/src/components/pages/MainPage/MainPage.js
@@ -30,7 +30,7 @@ export default class MainPage extends React.Component{
                             colorScheme="purple" 
                             variant="solid"
                             onClick={this.selectNinjaPage}
-                            >Seja Ninja
+                            >Seja um Ninja
                             </Button>
                             <Button 
                             colorScheme="purple" 
diff --git a/src/components/pages/NinjaPage/NinjaPage.js b/src/components/pages/NinjaPage/NinjaPage.js
index 0895c29..eb74658 100644
--- a/src/components/pages/NinjaPage/NinjaPage.js
+++ b/src/components/pages/NinjaPage/NinjaPage.js
@@ -114,7 +114,7 @@ export default class NinjaPage extends React.Component {
         return (
             <Main>
                 <HeaderContainer>
-                <Header texto={'Nossos Serviços'} troca={this.userPage}/>
+                <Header texto={'Contrate um Ninja'} troca={this.userPage}/>
                 </HeaderContainer>
                 <NinjaForm>
                     <h1>Seja Um Ninja:</h1>
diff --git a/src/components/pages/UserPage/Styled.js b/src/components/pages/UserPage/Styled.js
index e914f22..6e2d4e7 100644
--- a/src/components/pages/UserPage/Styled.js
+++ b/src/components/pages/UserPage/Styled.js
@@ -118,4 +118,5 @@ export const ContainerProducts = styled.div`
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   width: 80vw;
-`;
\ No newline at end of file
+`;
+
diff --git a/src/components/pages/UserPage/UserPage.js b/src/components/pages/UserPage/UserPage.js
index 4b87d56..3a62025 100644
--- a/src/components/pages/UserPage/UserPage.js
+++ b/src/components/pages/UserPage/UserPage.js
@@ -2,6 +2,9 @@ import React from "react";
 import CardProduto from "../../Cards/Cards";
 import Header from "../../Header/Header";
 import styled from 'styled-components';
+import Cart from '../../Cart/Cart.js'
+import axios from "axios"
+
 
 const ContainerProducts = styled.div`
   display: grid;
@@ -13,24 +16,78 @@ padding: 20px;
 margin-top: 10px;
 margin-left: 30px;
 `
+const ProductCart = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+`
+const Auth = 'd2941f53-4b06-40c4-a403-922f99164edc'
+const baseURL= 'https://labeninjas.herokuapp.com'
 
 export default class UserPage extends React.Component {
+  state={
+    servicosCadastrados:[],
+    servicosCart:[
+      {
+          title:'Cortar grama',
+          price:'20'
+
+    },
+    {
+      title:'Cortar grama',
+      price:'20'
+
+},
+{
+  title:'Cortar grama',
+  price:'20'
+
+}
+  ]
+  }
+
   ninjaPage = () => {
     this.props.choosePage("ninja");
   };
 
+  componentDidMount(){
+    this.getAllJobs();
+  }
+
+  getAllJobs = async () =>{
+    const header = {
+      headers:{
+        Authorization: Auth
+      }
+    };
+    axios.get(`${baseURL}/jobs`, header)
+    .then((res) => {
+      this.setState({servicosCadastrados: res.data.jobs})
+      console.log('produtos cadastrados',this.state.servicosCadastrados)
+     
+    })
+    .catch((err) => {
+      // alert(err)
+    })
+  }
+
+ 
+
+
   render() {
     return (
       <div>
         <Header texto={"Seja um Ninja"} troca={this.ninjaPage} />
-        <ContainerProducts>
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-        </ContainerProducts>
+        <ProductCart>
+          <ContainerProducts>
+            <CardProduto /> 
+            <CardProduto />
+            <CardProduto />
+            <CardProduto />
+            <CardProduto />
+            <CardProduto />
+          </ContainerProducts>
+          <Cart servicosCarrinho={this.state.servicosCart}/>
+        </ProductCart>
       </div>
     );
   }

From 88a870d0293ba033bfc9cb6a3431eb474c6bf2db Mon Sep 17 00:00:00 2001
From: "https://github.com/Michelineffb" <michelinemm@gmail.com>
Date: Fri, 28 May 2021 20:07:48 -0300
Subject: [PATCH 2/2] main

---
 src/App.js                          | 2 +-
 src/components/Cards/Informacoes.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index c715189..cb32e2a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,7 @@ export default class App extends React.Component {
 
   
   state = {
-    page: "user" //main
+    page: "main" 
   }
 
  
diff --git a/src/components/Cards/Informacoes.js b/src/components/Cards/Informacoes.js
index 609efc4..8c79c60 100644
--- a/src/components/Cards/Informacoes.js
+++ b/src/components/Cards/Informacoes.js
@@ -39,7 +39,7 @@ export default function Informacoes(props) {
           </PopoverBody>
           <PopoverFooter>
             <Button
-              // onClick={() => this.props.add(servico.id)}// this.props.add        testar pra ver se está funcionando - micheline
+              // onClick={() => this.props.add(servico.id)}// this.props.add        
               bg="#7660C3"
               color="#FFFFFF"
               _hover={{ bg: "" }}