PR de correção! Não precisa mergeear!

src/components/AppContainer.js

@@ -1,11 +1,65 @@
 import React, { Component } from 'react'
+import Home from './Home'
+import Header from './Header'
+import CriacaoDeServicos from './CriacaoDeServicos'
+import Servicos from './servicos/Servicos'
+import Footer from './Footer'
+import styled from 'styled-components'
+
+const ContainerRenderiza = styled.div`
+ position:relative;
+ margin-bottom: 80px;
+`
 
 export class AppContainer extends Component {
+
+  state = {
+    paginaSelecionada: "home"
+  }
+
+  onClickVoltar = () => {
+    this.setState({paginaSelecionada: "home"})
+  }
+
+  onClickCriarServico = () => {
+    this.setState({paginaSelecionada: "criacaodeservicos"})
+  }
+
+  onClickServicos = () => {
+    this.setState({paginaSelecionada: "servicos"})
+  }
+
   render() {
+
+    const renderizaNaTela = () => {
+
+      switch (this.state.paginaSelecionada) {
+        case "home":
+          return <Home 
+            abrirServico={this.onClickServicos}
+            abrirCriacaoDeServicos={this.onClickCriarServico}
+          />
+        case "servicos":
+          return <Servicos 
+            voltar={this.onClickVoltar}
+          />
+        case "criacaodeservicos":
+          return <CriacaoDeServicos 
+            voltar={this.onClickVoltar}
+          />
+      }
+    }
+
     return (
       <div>
-
+          <Header 
+          onClickCriarServico={this.onClickCriarServico} 
+          onClickServicos={this.onClickServicos}
+          onClickHome={this.onClickVoltar}/>
+          <ContainerRenderiza>{renderizaNaTela()}</ContainerRenderiza>
+          <Footer />
       </div>
     )
+
   }
 }

src/components/CriacaoDeServicos.js

@@ -0,0 +1,184 @@
+import React from 'react'
+import styled from 'styled-components'
+import axios from 'axios'
+import CheckBox from '@material-ui/core/Checkbox'
+import TextField from '@material-ui/core/TextField'
+import FormGroup from '@material-ui/core/FormGroup'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import FormLabel from '@material-ui/core/FormLabel'
+import FormControl from '@material-ui/core/FormControl'
+
+
+const ContainerInputs = styled.div`
+    display: flex;
+    justify-content: center;
+    width: 50vw;
+    margin: 8px auto;
+`
+const ContainerButtons = styled.div`
+    width: 10vw;
+    display: flex;
+    justify-content:space-between;
+    margin: 0 auto;
+`
+const StyledTextField = styled(TextField)`
+    width: 30vw;
+`
+const ContainerServicos = styled.div`
+    border: 1px solid black;
+    width: 50vw;
+    padding: 16px;
+    margin: 16px auto;
+    border-radius: 20px;
+`
+export const ButtonCriacao = styled.button`
+    margin: 16px;
+    height: 40px;
+    width: 200px;
+    background-color: black;
+    color: #FFF;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    outline:none;
+    :hover{
+        background-color: #FFEA52;
+        color: #474117;
+    }
+`
+class CriacaoDeServicos extends React.Component {
+
+    state = {
+        inputTitulo: "",
+        inputDescricao: "",
+        inputValorDaRemuneracao: "",
+        inputPrazo: "",
+        metodosPag: []
+    }
+
+    onChangeInputTitulo = (event) => {
+        this.setState({inputTitulo: event.target.value})
+    }
+
+    onChangeInputDescricao = (event) => {
+        this.setState({inputDescricao: event.target.value})
+    }
+
+    onChangeInputValorDaRemuneracao = (event) => {
+        this.setState({inputValorDaRemuneracao: event.target.value})
+    }
+
+    onChangeInputPrazo = (event) => {
+        this.setState({inputPrazo: event.target.value})
+    }
+
+    onChangeChecked = (event) => {
+       let metodosPag = [...this.state.metodosPag, event.target.id]
+        if(this.state.metodosPag.includes(event.target.id)){
+            metodosPag = metodosPag.filter(metodo => metodo !== event.target.id)
+        }
+        this.setState({
+            metodosPag: metodosPag
+        })
+
+    }
+
+    cadastroServico = () => {
+        const body = {
+            "title": this.state.inputTitulo,
+            "description": this.state.inputDescricao,
+            "value": this.state.inputValorDaRemuneracao,
+            "paymentMethods": this.state.metodosPag,
+            "dueDate": this.state.inputPrazo
+        }
+        axios.post('https://us-central1-labenu-apis.cloudfunctions.net/futureNinjasOne/jobs', body).then(
+            alert("Serviço cadastrado com sucesso!"),
+            this.setState({inputTitulo: "", inputDescricao: "", inputValorDaRemuneracao: "", inputPrazo: "", metodosPag: []})
+        ).catch(err => {
+            console.log(err)
+        })
+    }
+
+    render () {
+        console.log(this.state.metodosPag)
+        return (
+            <ContainerServicos>
+                <ContainerInputs>
+                    <StyledTextField
+                        required
+                        label='Título' 
+                        onChange={this.onChangeInputTitulo}
+                        value={this.state.inputTitulo}
+                    />
+                </ContainerInputs>
+                <ContainerInputs>
+                    <StyledTextField 
+                        required
+                        label='Descrição'
+                        onChange={this.onChangeInputDescricao}
+                        value={this.state.inputDescricao}
+                    />
+                </ContainerInputs>
+                <ContainerInputs>
+                    <StyledTextField 
+                        required
+                        label='Valor da Remuneração'
+                        onChange={this.onChangeInputValorDaRemuneracao}
+                        value={this.state.inputValorDaRemuneracao}
+                    />
+                </ContainerInputs>
+                <ContainerInputs>
+                    <StyledTextField 
+                        required
+                        label='Prazo'
+                        onChange={this.onChangeInputPrazo}
+                        value={this.state.inputPrazo}
+                    />
+                </ContainerInputs>
+                <ContainerInputs>
+                    <FormControl>
+                    <FormLabel component="legend">Formas de Pagamento</FormLabel>
+                    <FormGroup>
+                        <FormControlLabel
+                        control={
+                            <CheckBox color="primary" type="checkbox" id="Transferência Bancária" value="Transferência Bancária" onChange={this.onChangeChecked}/> 
+                        }
+                        label="Transferência Bancária"
+                        />
+                        <FormControlLabel
+                        control={
+                            <CheckBox color="primary" type="checkbox" id="Cartão de débito" value="Cartão de débito" onChange={this.onChangeChecked}/>
+                        }
+                        label="Cartão de débito"
+                        />
+                        <FormControlLabel
+                        control={
+                            <CheckBox color="primary" type="checkbox" id="Cartão de crédito" value="Cartão de crédito" onChange={this.onChangeChecked}/>
+                        }
+                        label="Cartão de Crédito"
+                        />
+                        <FormControlLabel
+                        control={
+                            <CheckBox color="primary" type="checkbox" id="Dinheiro" value="Dinheiro" onChange={this.onChangeChecked}/>
+                        }
+                        label="Dinheiro"
+                        />
+                        <FormControlLabel
+                        control={
+                            <CheckBox color="primary" type="checkbox" id="Boleto" value="Boleto" onChange={this.onChangeChecked}/>
+                        }
+                        label="Cartão de Crédito"
+                        />
+                    </FormGroup>
+                    </FormControl>
+                </ContainerInputs>
+                <ContainerButtons>
+                    <ButtonCriacao onClick={this.cadastroServico}>Cadastrar</ButtonCriacao>
+                    <ButtonCriacao onClick={this.props.voltar}>Voltar</ButtonCriacao>
+                </ContainerButtons>
+            </ContainerServicos>
+        )
+    }
+}
+
+export default CriacaoDeServicos

src/components/Footer.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const ContainerFooter = styled.div`
+height: 50px;
+position: fixed;
+bottom: 0;
+background-color: #2B2D2F;
+color: #FFF;
+width: 100vw;
+text-align: center;
+font-size: 0.7em;
+`
+
+class Footer extends React.Component {
+    render () {
+        return (
+            <ContainerFooter>
+                <h2>Designed and created by Future Ninjas</h2>
+            </ContainerFooter>
+        )
+    }
+}
+
+export default Footer

src/components/Header.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import styled from 'styled-components'
+import Button from '@material-ui/core/Button'
+
+const H1Header = styled.h1`
+    margin: 0;
+    padding: 0;
+    font-family: Andale Mono, monospace;
+    cursor: pointer;
+`
+
+const ContainerHeader = styled.div`
+    height: 10vh;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid grey;
+    padding: 8px;
+    align-items: center;
+    padding: 0 32px;
+`
+
+export const ButtonHeader = styled.button`
+    margin: 16px;
+    height: 40px;
+    width: 200px;
+    background-color: black;
+    color: #FFF;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    outline:none;
+    :hover{
+        background-color: #FFEA52;
+        color: #474117;
+    }
+`
+
+class Servicos extends React.Component {
+    render () {
+        return (
+            <ContainerHeader>
+                <H1Header onClick={this.props.onClickHome}>Future Ninjas</H1Header>
+                <div>
+                    <ButtonHeader onClick={this.props.onClickServicos}>PROCURE SERVIÇOS!</ButtonHeader>
+                    <ButtonHeader onClick={this.props.onClickCriarServico}>SEJA UM PROFISSIONAL!</ButtonHeader>
+                </div>
+
+            </ContainerHeader>
+        )
+    }
+}
+
+export default Servicos