<file_sep>export const initialState = {
  mostraAlertAndamento: false, 
  andamentoPedido: {},
  enderecoUser: [
    {
        "city": "São Paulo",
        "complement": "71",
        "state": "SP",
        "street": "R. Afonso Braz",
        "neighbourhood": "Vila N. Conceição",
        "number": "177"
    }
  ], 
  cart: [{
    "restaurant": {
      "products": [
        {
          "id": "2wvQI3i8Zf2fMvkEq4Vo",
          "category": "Refeição",
          "description": "A melhor pedida é japonesa!",
          "price": 24.3,
          "photoUrl": "https://static-images.ifood.com.br/image/upload/f_auto,t_high/pratos/51fed2ca-70a6-4069-a203-65536c856035/201808311212_sashi.png",
          "name": "<NAME>"
        },
        {
          "id": "BmDOBMDVYDAomt7vQtuP",
          "category": "Refeição",
          "description": "A melhor pedida é japonesa!",
          "price": 52.7,
          "photoUrl": "https://static-images.ifood.com.br/image/upload/f_auto,t_high/pratos/51fed2ca-70a6-4069-a203-65536c856035/201802031948_20717381.jpg",
          "name": "<NAME>"
        },
      ],
      "id": "10",
      "name": "Tadashii",
      "shipping": 13,
      "description": "Restaurante sofisticado busca o equilíbrio entre ingredientes que realçam a experiência da culinária japonesa.",
      "address": "Travessa Reginaldo Pereira, 130 - Ibitinga",
      "logoUrl": "http://soter.ninja/futureFoods/logos/tadashii.png",
      "deliveryTime": 50,
      "category": "Asiática"
    }}
  ],
  products: [],
  restaurants:[],
  abreLoading: false,
};

export const CardReducer = (state, action) => {
  switch (action.type) {
    case 'PEGA_RESTAURANTES':
      const listaDeRestaurantes = action.restaurants
      return { ...state, restaurants: listaDeRestaurantes };
    
    case 'PEGA_PRODUTOS':
      const listaDeProdutos = action.products
      return { ...state, products: listaDeProdutos };

    case 'PEGA_ENDERECO':
      const endereco = action.endereco
      return { ...state, enderecoUser: endereco };
    
      default:
      return state;
  }
};

export function Loading (state, action) {
  switch (action.type) {
    case 'LOADING':
      let isOpenLoad = action.isOpen
      return { ...state, abreLoading: isOpenLoad }
    
    case 'VER_ANDAMENT0':
      let pedido = action.isWaiting
      return { ...state, andamentoPedido: pedido }

    default:
      return state;
  }
}


export function CartReducer(state, action) {
  switch (action.type) {
    case "ADD":
      const newProduct = action.product;

      const productIndex = state.cart.findIndex((product) => {
        return product.id === newProduct.id;
      });

      let newCart;
      if (productIndex === -1) {
        newCart = [...state.cart, { ...newProduct, quantity: 1 }];
      } else {
        newCart = state.cart.map((product, index) => {
          if (index === productIndex) {
            return { ...product, quantity: product.quantity + 1 };
          }
        });
      }
      return { products: state.products.push(newCart) };
    
    case "REMOVE":
      return { products: state.products.filter() };

    default:
      return state;
  }
}
<file_sep>import { useState } from "react";

export const baseUrl =
  "https://us-central1-missao-newton.cloudfunctions.net/futureEatsB";

export const useForm = (initialValues) => {
  const [form, setForm] = useState(initialValues);

  const onChange = (name, value) => {
    const newForm = { ...form, [name]: value };
    setForm(newForm);
  };

  const resetForm = () => {
    setForm(initialValues);
  };

  return { form, onChange, resetForm };
};

export const autorização = (history) => {
  const token = window.localStorage.getItem("token");
  if (token === null) {
    history.push("/Login");
  }
};
<file_sep>import styled from 'styled-components'
import { TextField } from '@material-ui/core'


export const Container = styled.div`
    width: 100vw;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
`
export const Paragrafo = styled.p`
    display: flex;
    justify-content:center;
    margin-top: 2.50vh;
    padding: 12px;

`


export const ContainerInput = styled.div`
    display: grid;
    justify-items: center;
    grid-auto-columns: 1fr;
    grid-gap: 2.50vh;

`

export const Input = styled(TextField)`
    width: 91.11vw;
   height: 8.75vh;

`
export const Botao = styled.button`
    display: flex;
    justify-content: center;
    margin-top: 0px;
    margin-left: 4.44vw;
    margin-right: 4.44vw;
    width: 91.11vw;
    height: 6.56vh;
    background-color: #5cb646;
    border: 0px;
    text-align: center;
    font-size: 1em;
    padding: 12px;

`
<file_sep>import React, { useEffect, useState } from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "../../Components/Button";
import Header from "../../Components/Header";
import { Text } from "./styles";
import { useForm, autorização } from "../../functions";
import "./EditarEndereco.css";
import { useHistory } from "react-router-dom";
import { pegaEndereço, upDateAddress } from "../../functions/integracao";

const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#b8b8b8",
      contrastText: "#b8b8b8",
    },
  },
});

const EditarCadastro = () => {
  const { form, onChange, resetForm } = useForm({
    logradouro: "",
    numero: "",
    complemento: "",
    bairro: "",
    cidade: "",
    estado: "",
  });

  useEffect(() => {
    autorização(history);

    pegaEndereço().then((res) => {
      form.logradouro = res.street;
      form.numero = res.number;
      form.complemento = res.complement;
      form.bairro = res.neighbourhood;
      form.cidade = res.city;
      form.estado = res.state;
    });
  }, []);

  const handleInput = (event) => {
    onChange(event.target.name, event.target.value);
  };

  const history = useHistory();

  const onClickBotao = async (event) => {
    event.preventDefault();

    const body = {
      street: form.logradouro,
      number: form.numero,
      neighbourhood: form.bairro,
      city: form.cidade,
      state: form.estado,
      complement: form.complemento,
    };

    await upDateAddress(body);

    resetForm();
  };

  return (
    <ThemeProvider theme={MyTheme}>
      <div className={"telatoda"}>
        <Header title={"Editar"} back />
  
        <form onSubmit={onClickBotao}>
          <Text
            label={"Logradouro"}
            value={form.logradouro}
            name={"logradouro"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Text
            label={"Número"}
            value={form.numero}
            name={"numero"}
            onChange={handleInput}
            min={1}
            variant={"outlined"}
            required
          />
          <Text
            label={"Complemento"}
            value={form.complemento}
            name={"complemento"}
            onChange={handleInput}
            variant={"outlined"}
          />
          <Text
            label={"Bairro"}
            value={form.bairro}
            name={"bairro"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Text
            label={"Cidade"}
            value={form.cidade}
            name={"cidade"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Text
            label={"Estado"}
            value={form.estado}
            name={"estado"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Button
            id={"submit-button"}
            type={"submit"}
            title={"Salvar"}
            active={true}
          />
        </form>
      </div>
    </ThemeProvider>
  );
};

export default EditarCadastro;
<file_sep>import React, {useState} from 'react'
import axios from 'axios'
import {Container, Imagem, Paragrafo, ContainerInput, Input, Botao } from './styles'
import Header from '../../Components/Header/index'
import logo from '../../img/logo-invertido.png'
import Password from '../../Components/InputPassword'
import { useHistory } from "react-router";


const Registro = () => {
    const [nome, setNome] = useState("")
    const [email, setEmail] = useState("")
    const [cpf, setCpf] = useState("")
    const [senha, setSenha ] = useState("")
    const [confirmar, setConfirmar] = useState("")

    
    const history = useHistory()

    const inputNome = (event) => {
        setNome(event.target.value)
    }

    const inputEmail = (event) => {
        setEmail(event.target.value)
    }

    const inputCpf = (event) => {
        setCpf(event.target.value)
    }

    const inputSenha = (event) => {
        setSenha(event.target.value)
    }

    const inputConfirma = (event) => {
        setConfirmar(event.target.value)
    }

    const enviarFormulario = () => {

    if (senha !== confirmar) {
    alert("as senhas sao diferentes")
    }
        
    const body = {
    name: nome,
	email: email,
	cpf: cpf,
	password: <PASSWORD>} 
   
    axios.post('https://us-central1-missao-newton.cloudfunctions.net/futureEatsB/signup', body
    ).then((response) => {
    console.log(response.data.token)
    localStorage.setItem("token", response.data.token)
    history.push("/cadastro-endereco")
    }).catch(error => {
    console.log(error.response)
    alert("erro dados invalidos")
    })

    }


    return (
        <>
        <Header back/> 
        <Container>   
          <Imagem src={logo}/>
            <Paragrafo>Cadastrar</Paragrafo>
            
            <ContainerInput>
            <Input 
            onChange={inputNome} 
            label="Nome" 
            placeholder="Nome e sobrenome"
            variant="outlined" 
            value={nome}
            name='name'
            />
            <Input 
            onChange={inputEmail} 
            label="E-mail" 
            placeholder="<EMAIL>"
            variant="outlined" 
            value={email}
            name='email'
            />
            <Input 
            onChange={inputCpf} 
            label="CPF" 
            placeholder="000.000.000-00"
            variant="outlined" 
            value={cpf}
            name='cpf'
            />
            <Password 
            onChange={inputSenha} 
            label="Senha"
            placeholder="Senha"   
            value={senha}
            name='password'
            />
            <Password 
            onChange={inputConfirma} 
            label="Confirmar" 
            placeholder="Confirme a senha anterior"
            variant="outlined" 
            value={confirmar}
            name='confirmar'
            />

            <Botao onClick={enviarFormulario}>Criar</Botao>

            </ContainerInput>
        
        </Container> </>
    )


} 

export default Registro
<file_sep>import React, { useState, useEffect } from "react";
import { Container } from "./styles";
import CartCard from "../../Components/CartCard";
import { getProducts } from "../../functions/integracao.js";

function PlaceholderCarrinho() {
  return (
    <Container>
      <CartCard />;
    </Container>
  );
}

export default PlaceholderCarrinho;
<file_sep>import React, { useState, useEffect, useContext } from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { useHistory } from "react-router";
import {
  NameText,
  AdressContainer,
  BotaoEdit,
  UpperContainer,
  Endereço,
  LowerContainer,
  AdressLowerContainer,
  PedidosText,
  ProfileContainer,
  HistoricoContainer,
  BasicInfoText,
  StreetText,
} from "./styles";
import { EditOutlined } from "@material-ui/icons";
import CardHistorico from "../../Components/CardHistorico";
import Footer from "../../Components/Footer";
import Header from "../../Components/Header";
import { autorização } from "../../functions";
import { getProfile, pegaEndereço } from "../../functions/integracao";
import CardContext from "../../functions/CardContext";
import Loading from './../../Components/Loading/Loading';

const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#b8b8b8",
      contrastText: "#b8b8b8",
    },
  },
});

export function Perfil(props) {
  const history = useHistory();
  const loadContexto = useContext(CardContext);
  const [profile, setProfile] = useState({});
  const [address, setAddress] = useState({});
  const [open, setOpen] = useState(true)

  useEffect(() => {
    autorização(history);
    getProfile().then((response) => {setProfile(response); setOpen(false)});
    pegaEndereço().then((res) => setAddress(res));
  }, []);

  return (
    <ThemeProvider theme={MyTheme}>
      <ProfileContainer>
        <Header title={"Meu perfil"} />
  
        <UpperContainer>
          <NameText>{profile.name}</NameText>
          <BotaoEdit onClick={() => history.push("/perfil/cadastro")}>
            <EditOutlined />
          </BotaoEdit>
        </UpperContainer>
        <LowerContainer>
          <BasicInfoText>{profile.email}</BasicInfoText>
          <BasicInfoText>{profile.cpf}</BasicInfoText>
        </LowerContainer>
        <AdressContainer>
          <Endereço>Endereço cadastrado</Endereço>
          <AdressLowerContainer>
            {address.street === undefined ? (
              <p>...</p>
            ) : (
              <StreetText>
                {address.street} nº{address.number}, {address.neighbourhood}
              </StreetText>
            )}
            <BotaoEdit onClick={() => history.push("/perfil/endereco")}>
              <EditOutlined />
            </BotaoEdit>
          </AdressLowerContainer>
        </AdressContainer>
        <HistoricoContainer>
          <PedidosText>Histórico de pedidos</PedidosText>
          <CardHistorico />
        </HistoricoContainer>
        <Footer page={"perfil"} />

        <Loading openLoading={open} />
      </ProfileContainer>
    </ThemeProvider>
  );
}

export default Perfil;
<file_sep>import React, { useState, useEffect, useContext } from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "../../Components/Button";
import Header from "../../Components/Header";
import { Text } from "./styles";
import { useForm, autorização } from "../../functions";
import "./EditarCadastro.css";
import { upDateProfile, getProfile } from "../../functions/integracao";
import { useHistory } from "react-router-dom";
import Loading from './../../Components/Loading/Loading';
import CardContext from "../../functions/CardContext";

const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#b8b8b8",
      contrastText: "#b8b8b8",
    },
  },
});

const EditarCadastro = () => {
  const history = useHistory();
  const loadContexto = useContext(CardContext);
  const { form, onChange, resetForm } = useForm({
    cpf: "",
    email: "",
    name: "",
  });

  useEffect(() => {
    autorização(history);
    // getProfile().then((res) => {
    //   form.cpf = res.cpf;
    //   form.email = res.email;
    //   form.name = res.name;
    // });
  }, []);

  const handleInput = (event) => {
    onChange(event.target.name, event.target.value);
  };

  const onClickBotao = (event) => {
    event.preventDefault();

    const body = {
      cpf: form.cpf,
      email: form.email,
      name: form.name,
    };
    upDateProfile(body, loadContexto.dispatch);
  };

  const teste = () => {
    console.log(form);
  };

  return (
    <ThemeProvider theme={MyTheme}>
      <div className={"telatoda"}>
        <Header title={"Editar"} back />
        <button onClick={teste}>teste</button>
        <form onSubmit={onClickBotao}>
          <Text
            label={"Nome"}
            value={form.name}
            name={"name"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Text
            label={"Email"}
            value={form.email}
            name={"email"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Text
            label={"CPF"}
            value={form.cpf}
            name={"cpf"}
            onChange={handleInput}
            variant={"outlined"}
            required
          />
          <Button
            id={"submit-button"}
            type={"submit"}
            title={"Salvar"}
            active={true}
          />
        </form>

        <Loading openLoading={loadContexto.loadIsOpen} />
      </div>
    </ThemeProvider>
  );
};

export default EditarCadastro;
<file_sep>import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Tabs, Tab } from "@material-ui/core";
import { FooterContainer } from "./styles";

import home from "../../img/home.svg";
import homeSelected from "../../img/home-selected.svg";
import carrinho from "../../img/carrinho.svg";
import carrinhoSelected from "../../img/carrinho-selected.svg";
import perfil from "../../img/perfil.svg";
import perfilSelected from "../../img/perfil-selected.svg";

const Footer = (props) => {
  const [homeTabImage, setHomeTabImage] = useState(home);
  const [cartTabImage, setCartTabImage] = useState(carrinho);
  const [profileTabImage, setProfileTabImage] = useState(perfil);

  useEffect(() => {
    switch (props.page) {
      case "carrinho":
        setCartTabImage(carrinhoSelected);
        break;
      case "perfil":
        setProfileTabImage(perfilSelected);
        break;
      default:
        setHomeTabImage(homeSelected);
    }
  }, [props.page]);

  let history = useHistory();

  return (
    <FooterContainer>
      <Tabs variant={"fullWidth"} textColor={"primary"} value={props.page}>
        <Tab
          value={"home"}
          icon={<img src={homeTabImage} alt={"Ícone Home"} />}
          onClick={() => history.push("/home")}
        />
        <Tab
          value={"carrinho"}
          icon={<img src={cartTabImage} alt={"Ícone Carrinho"} />}
          onClick={() => history.push("/carrinho")}
        />
        <Tab
          value={"perfil"}
          icon={<img src={profileTabImage} alt={"Ícone Perfil"} />}
          onClick={() => history.push("/perfil")}
        />
      </Tabs>
    </FooterContainer>
  );
};

export default Footer;
<file_sep># FutureEats

Projeto semanal do curso feito em conjunto com mais 4 alunos que consistia em replicar o UberEats
<br>
<br>
## Principais tecnologias/ferramentas utilizadas

1. React
2. Hooks
3. Reducer
4. Autenticação
5. Estilização Avançada com CSS
6. Uso de bibliotecas de UI (MaterialUI)
7. Aplicações com múltiplas rotas utilizando React Router
8. Formulários com Validação
<br><br>


💻 [Deploy da aplicação (Otimizado para Mobile)](http://standing-flock.surge.sh/)

## Demonstração: 
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1skVqHmglIPxS6ULqvLgsHzKnX5U6ZHs6'>
</p>
<br>

## Telas: 
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=15ve9p8orbVwV6Vdpc9mPK3hhotxNU3IA'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1cOTPzRSpsB9KNQIWTr-pZJrgZqIB-6lr'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1RShx5Ik19AOHFIM6K0qmSxyY6NpHzZ4G'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1fOmBnf1Ga29bGzY56lioY_ScF6vDGDBB'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1gHh4qulbWA7ORhGj_q5MXhO3OFk_HWtE'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1QGS9LMQsOy7ycegli9W69RWHnXTGOQrE'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1MjU7jy86lU_gra8H8kfkIIsIf79JCTU3'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1Jn8TBIMK9kZKVmmNXXqCSZuCTTvWzUi0'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=10mj2Un0ZVcwBUUzbf7rpszmirsJCnGQy'>
</p>
<p align="center">
  <img align='center' height='400' src='https://docs.google.com/uc?id=1llnYE4mGbgL_lgTp0HlppLYJiqRMmIJT'>
</p>
<br>
<br>

## Co-autores
🤝[(<NAME>)](https://github.com/walteraandrade)<br>
🤝[(<NAME>)](https://github.com/wcardosos)<br>
🤝[(<NAME>)](https://github.com/maxassis)<br>
🤝[(<NAME>)](https://github.com/JulianaBerdeville)
<file_sep>import React from "react";
import { useHistory } from "react-router-dom";
import {
  FeedCardContainer,
  ProductImg,
  StoreName,
  TextContainer,
  OrderDetailsDem,
  OrderDetailsFre,
  ContainerImg,
} from "./styles";

function FeedCard(props) {
  let history = useHistory();

  const goToRestaurante = (id) => {
    history.push(`/restaurante/${props.idRest}`);
  };

  return (
    <FeedCardContainer
      onClick={() => {
        goToRestaurante(props.idRest);
      }}
    >
      <ContainerImg>
        <ProductImg src={props.foto} />
      </ContainerImg>
      <TextContainer>
        <StoreName>{props.nome}</StoreName>
        <OrderDetailsDem>{props.demora} min</OrderDetailsDem>
        <OrderDetailsFre>
          {props.frete === "" ? "Frete Grátis" : `Frete R$${props.frete}`}
        </OrderDetailsFre>
      </TextContainer>
    </FeedCardContainer>
  );
}

export default FeedCard;
<file_sep>import styled from 'styled-components'
import { TextField } from '@material-ui/core'

export const Container = styled.div`
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vw;
    margin-left: auto;
    margin-right: auto;
`
export const Imagem = styled.img`
   width: 28.8vw;
    margin: 3.75vh auto 4.375vh auto;
    width: 104px;
    height: 58px;
`
export const Paragrafo = styled.p`
    display: flex;
    justify-content:center;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.108px;
    text-align: center;
    color: #000000;
    margin-bottom: 5vh;
`
export const ContainerInput = styled.div`
    display: grid;
    justify-items: center;
    align-items: start;
    grid-auto-columns: 1fr;
    grid-gap: 2.50vh;

`
export const Input = styled(TextField)`
   width: 91.11vw;
   height: 8.75vh;
`
export const Botao = styled.button`
    display: flex;
    justify-content: center;
    margin-left: 4.44vw;
    margin-right: 4.44vw;
    width: 91.11vw;
    background-color: #5cb646;
    border: 0px;
    text-align: center;
    font-size: 1em;
    padding: 12px;
`

<file_sep>import styled from "styled-components";
import { Typography } from "@material-ui/core";

//usarei px nas alturas porque foi pedido que não importasse o tamanho da tela, que a altura deveria ser sempre a mesma

export const CartCardContainer = styled.div`
  height: 112px;
  border: grey 1px solid;
  margin: 1vh auto;
  width: 91.111vw;
  margin: 8px auto;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
`;

export const ContainerImg = styled.div`
  height: 100%;
  width: 30%;
`;
export const CardImg = styled.img`
  object-fit: fill;
  height: 100%;
  width: 100%;
`;

export const ProductName = styled.p`
  margin-top: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.39px;
  color: #5cb646;
`;

export const TextContainer = styled.div`
  display: flex;
  flex-flow: column wrap;
  width: 70%;
  justify-content: space-between;
  margin-left: 5%;
`;

export const ProductDetails = styled.p`
  font-family: Roboto;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.29px;
  color: #b8b8b8;
`;

export const ActionButton = styled.button`
  border: ${(props) => props.borda};
  background-color: white;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  height: 31px;
  width: 25vw;
  font-family: Roboto;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.29px;
  text-align: center;
  color: ${(props) => props.cor};
`;

export const ContainerQuant = styled.div`
  width: 9.167vw;
  height: 9.167vw;
  border-radius: 0 8px 0 8px;
  border: solid 2px #5cb646;
  display: ${(props) => props.display};
  justify-content: center;
  align-items: center;
  z-index: 2;
`;

export const ProductQuant = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108vw;
  text-align: center;
  color: #5cb646;
`;

export const Price = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.39px;
  color: #000000;
`;

export const BottomContainer = styled.div`
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 7px;
`;

export const CabecalhoCard = styled.div`
  display: flex;
  width: 100%;
  margin-bottom: 8px;
  justify-content: space-between;
`;

export const UpperContainer = styled.div`
  height: 65%;
`;
<file_sep>import axios from "axios";

let baseUrl =
  "https://us-central1-missao-newton.cloudfunctions.net/futureEatsB";

let token = window.localStorage.getItem("token");

const buscaAndamentoPedido = (andamento) =>({
  type: "VER_ANDAMENT0",
  isWaiting: andamento,
})

const buscaRestaurantes = (restaurantes) => ({
  type: "PEGA_RESTAURANTES",
  restaurants: restaurantes,
});

const buscaProdutos = (produtos) => ({
  type: "PEGA_PRODUTOS",
  products: produtos,
});

const apareceLoading = (mostraLoad) => ({
  type: "LOADING",
  isOpen: mostraLoad,
})

const buscaEndereco = (endereco) => ({
  type: "PEGA_ENDERECO",
  endereco: endereco,
});

export const pegaRestaurantes = async (dispatch) => {
  try {
    const response = await axios.get(`${baseUrl}/restaurants`, {
      headers: {
        auth: token,
      },
    });
    dispatch(buscaRestaurantes(response.data.restaurants));
  } catch (err) {
    console.log(err);
  }
};

//export const pegaAndamentoPedido = async (dispatch) => {
//  try {
//    const response = await axios.get(`${baseUrl}/active-order`, {
//      headers: {
//        auth: token,
//      },
//    });
//    dispatch(buscaAndamentoPedido(response.data.order));
//  } catch (err) {
//    console.log(err);
//  }
//};

export const pegaProdutos = async (id, dispatch) => {
  try {
    const response = await axios.get(`${baseUrl}/restaurants/${id}`, {
      headers: {
        auth: token,
      },
    });
    dispatch(buscaProdutos(response.data.restaurant));
  } catch (err) {
    console.log(err);
  }
};

export const pegaEndereço = async (dispatch) => {
  const response = await axios.get(`${baseUrl}/profile/address`, {
    headers: {
      auth: token,
    },
  });
  return response.data.address;
};

export const getProfile = async () => {
  const response = await axios.get(`${baseUrl}/profile`, {
    headers: {
      auth: token,
    },
  });
  return response.data.user;
};

export const upDateProfile = (form, dispatch) => {
  dispatch(apareceLoading(true))
  const body = form;
  axios
    .put(`${baseUrl}/profile`, body, {
      headers: { "Content-Type": "application/json", auth: token },
    })
    .then((res) => {dispatch(apareceLoading(false)); console.log(res.data)})
    .catch((err) => console.log(err.data));
};

export const upDateAddress = (form, dispatch) => {
  dispatch(apareceLoading(true))
  const body = form;
  axios
    .put(`${baseUrl}/address`, body, {
      headers: { auth: token },
    })
    .then((res) => {dispatch(apareceLoading(false)); window.localStorage.setItem("token", res.data.token)});
  
  window.alert("Cadastro atualizado com sucesso");
};

export const login = (body, history) => {
  axios
    .post(
      "https://us-central1-missao-newton.cloudfunctions.net/futureEatsB/login",
      body
    )
    .then((response) => {
      localStorage.setItem("token", response.data.token);
      history.replace("/home");
    });
};

export const registro = (body, history) => {
  axios
    .post(
      "https://us-central1-missao-newton.cloudfunctions.net/futureEatsB/signup",
      body
    )
    .then((response) => {
      console.log(response.data.token);
      localStorage.setItem("token", response.data.token);
      history.push("/cadastro-endereco");
    })
    .catch((error) => {
      console.log(error.response);
      alert("erro dados invalidos");
    });
};
<file_sep>import styled from 'styled-components';

export const ButtonContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 8vh;
`

export const ButtonElement = styled.button`
    background-color: ${props => props.active ? "#5cb646" : "rgba(92, 182, 70, 0.5)"};
    color: black;
    width: 91.11vw;
    height: 6.5625vh;
    border: none;
    border-radius: 5px;
    font-family: Roboto;
`<file_sep>import { TextField } from '@material-ui/core';
import styled from 'styled-components';

export const Text = styled(TextField)`
    width: 91.11vw;
`<file_sep>import React, { useEffect, useState } from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { useHistory } from "react-router";

import {
  Container,
  Imagem,
  ContainerInput,
  Paragrafo,
  Input,
  Botao,
  Paragrafo2,
  Senha,
} from "./styles";
import Button from "../../Components/Button";
import logo from "../../img/logo-invertido.png";
import { Linki } from "./styles";
import { login } from "../../functions/integracao";
import Loading from "./../../Components/Loading/Loading";

const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#b8b8b8",
      contrastText: "#b8b8b8",
    },
  },
});

const Login = () => {
  const [email, setEmail] = useState("");
  const [senha, setSenha] = useState("");
  const [botaoAtivo, setBotaoAtivo] = useState(false);
  const [open, setOpen] = useState(false);

  const history = useHistory();

  useEffect(() => {
    if (email !== "" && senha !== "") {
      setBotaoAtivo(true);
    } else {
      setBotaoAtivo(false);
    }
  }, [email, senha]);

  const inputEmail = (event) => {
    setEmail(event.target.value);
  };

  const inputSenha = (event) => {
    setSenha(event.target.value);
  };

  const enviarInputs = () => {
    setOpen(true);
    const body = {
      email: email,
      password: <PASSWORD>,
    };
    login(body, history);
  };

  return (
    <ThemeProvider theme={MyTheme}>
      <Container>
        <Imagem src={logo} />

        <Paragrafo>Entrar</Paragrafo>

        <ContainerInput>
          <Input
            onChange={inputEmail}
            placeholder="<EMAIL>"
            type="text"
            value={email}
            required
            label="E-mail"
            variant="outlined"
          />
          <Senha
            onChange={inputSenha}
            label="Senha"
            value={senha}
            placeholder="Minimo 6 caracteres"
          />

          <Button
            active={botaoAtivo}
            title={"Entrar"}
            onClick={enviarInputs}
            type="submit"
          >
            Entrar
          </Button>
        </ContainerInput>

        <Paragrafo2>
          Nao possui cadastro?<Linki to="/registro">&nbsp; Clique aqui</Linki>
        </Paragrafo2>
        <Loading openLoading={open} />
      </Container>
    </ThemeProvider>
  );
};

export default Login;
<file_sep>import styled from 'styled-components';

export const AlertaContainer = styled.div`
    width: 100vw;
    height: 18.438vh;
    background-color: #5cb646;
    position: fixed;
    z-index: 9998;
    bottom: 7vh;
    display: grid;
    grid-template-columns: 22% 78%;
`
export const IconeRelogio = styled.img`
    width: 5vh;
    height: 5vh;
    margin-left: 6.667vw;
    margin-top:6.875vh;
`
export const Pedido = styled.p`
    font-family: Roboto;
    margin-top:3.75vh;
    margin-bottom: 1.25vh;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.108px;
    color: #ffffff;
`
export const Restaurante = styled.p`
      font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.108px;
    color: #000000;
`
export const Total = styled.p`
    margin-top: 1.25vh;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.108px;
    color: #000000;
`<file_sep>import React, { useReducer } from "react";
import {
  CartCardContainer,
  CardImg,
  ProductName,
  TextContainer,
  ProductDetails,
  Price,
  ActionButton,
  BottomContainer,
  UpperContainer,
  ContainerImg,
  CabecalhoCard,
  ContainerQuant,
  ProductQuant,
} from "./styles";


function CartCard(props) {
  return (
    <CartCardContainer>
      <ContainerImg>
        <CardImg src={props.foto} alt="Foto Produto" />
      </ContainerImg>
      <TextContainer>
        <UpperContainer>
          <CabecalhoCard>
            <ProductName>{props.nome}</ProductName>
            <ContainerQuant display={props.tituloBotao === 'adicionar' ? 'none' : 'flex'}>
              <ProductQuant>{props.quantidade}</ProductQuant>
            </ContainerQuant>
          </CabecalhoCard>
          <ProductDetails>{props.descricao}</ProductDetails>
        </UpperContainer>
        <BottomContainer>
          <Price>R${props.preco}</Price>
          <ActionButton 
            borda={props.borda} 
            cor={props.tituloBotao === 'adicionar' ? '#5cb646' : '#e02020'} 
            onClick={props.onClick}
          >
            {props.tituloBotao}
          </ActionButton>
        </BottomContainer>
      </TextContainer>
    </CartCardContainer>
  );
}

export default CartCard;
<file_sep>import styled from "styled-components";

export const NameText = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108vw;
  color: #000000;
`;

export const BasicInfoText = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108vw;
  color: #000000;
  margin-bottom: 1.250vh;
`;

export const StreetText = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108vw;
  color: #000000;
`; 

export const AdressContainer = styled.div`
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  margin-top: 1.250vh;
  padding: 0 4.444vw;
  height:11.875vh;
`;

export const BotaoEdit = styled.button`
  background: none;
  border: none;
`;

export const UpperContainer = styled.div`
  display: flex;
  justify-content: space-between;
  margin: 2.5vh 4.444vw 0 4.444vw;
`;

export const Endereço = styled.p`
  color: #b8b8b8;
`;

export const LowerContainer = styled.div`
  margin: 0 4.444vw;
`;

export const AdressLowerContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

export const PedidosText = styled.p`
  border-bottom: 1px solid black;
  padding-bottom: 1.25vh;
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108vw;
  color: #000000;
  margin: 2.5vh 4.444vw 0 4.444vw; 
`;

export const ProfileContainer = styled.div`
  height: 90vh;
  margin: 1vh auto;
`;

export const HistoricoContainer = styled.div`
  display: flex;
  flex-direction: column;
`;
<file_sep>import React from "react";
import { HistoricoContainer, StoreName, Data, Valor } from "./styles";

function CardHistorico() {
  return (
    <HistoricoContainer>
      <StoreName variant="h6"><NAME></StoreName>
      <Data variant="caption">12 outubro 2020</Data>
      <Valor variant="h6">SUBTOTAL R$ 25,00</Valor>
    </HistoricoContainer>
  );
}

export default CardHistorico;
<file_sep>import React, { useState, useEffect, useContext } from "react";
import "./Busca.css";
import CardRestaurant from "../../Components/FeedCard/index";
import CardContext from "../../functions/CardContext"
import Header from "../../Components/Header/index";
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputAdornment from '@material-ui/core/InputAdornment';
import SearchIcon from '@material-ui/icons/Search';
import clsx from 'clsx';
import { makeStyles, createMuiTheme, ThemeProvider, withStyles } from "@material-ui/core/styles";



/*comentario de teste*/

const useStyles = makeStyles((theme) => ({
  textField: {
    width: '91.111vw',
    marginTop: '1.25vh',
    marginLeft: '4.44vw'
  },
}));

const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#b8b8b8",
      contrastText: "#b8b8b8",
      light: "rgba(92, 182, 70, 0.5)",
    },
  },
});

const Busca = (props) => {

    const buscaContext = useContext(CardContext)
    /*Estado para atualização e armazenamento do valor recebido via input*/
    const [inputValue, setInputValue] = useState('')
    /*Estado para atualização e armazenamento do valor recebido via input*/
    const classes = useStyles();
    /*Captura de dados recebidos via input*/
    const onChangePegaInputValue = (event) => {
        setInputValue(event.target.value)
    }
    /*Captura de dados recebidos via input*/

    /*Lógica de busca*/
    const searchResult = buscaContext.restaurantes
      .filter((restaurantes) => {
          return restaurantes.name.toLocaleLowerCase().includes(inputValue);
        })
          .map((restaurante) => {
            return (
                      <CardRestaurant
                        foto={restaurante.logoUrl}
                        idRest={restaurante.id}
                        nome={restaurante.name}
                        demora={restaurante.deliveryTime}
                        frete={restaurante.shipping.toFixed(2).replace(".", ",")}
                      />
                    );
    });
  /*Lógica de busca*/
  return (
  <ThemeProvider theme={MyTheme}>
    <div className='telatoda'>
     <Header title={'Busca'} back/>
      
        <OutlinedInput
            className={clsx(classes.textField)}
            variant="outlined"
            placeholder="Restaurantes..."
            type="text"
            value={inputValue}
            onChange={onChangePegaInputValue}
            startAdornment={
              <InputAdornment position="start">
                <SearchIcon/>
              </InputAdornment>
            }
          />
     <div className="Result-Wrapper">
       { inputValue!==""? searchResult : <div className="Result-Wrapper"><p>Busque por nome do restaurante</p></div> }
     </div>
    </div>
  </ThemeProvider>
  );
};

/*AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/

/*AAAAAAAAAAAAAAAAAA*/
export default Busca;<file_sep>import styled from "styled-components";
import { Typography } from "@material-ui/core";

//usarei px nas alturas porque foi pedido que não importasse o tamanho da tela, que a altura deveria ser sempre a mesma

export const FeedCardContainer = styled.div`
  border: solid 1px #b8b8b8;
  width: 91.111vw;
  height: 188px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
`;

export const ProductImg = styled.img`
  object-fit: fill;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
`;

export const ContainerImg = styled.div`
  width: 100%;
  overflow: hidden;
  height: 60%;
`;

export const StoreName = styled(Typography)`
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.10833vw;
  color: #5cb646;
  grid-area: 1/1/2/2;
`;

export const TextContainer = styled.div`
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 12px 4.444vw 0 4.444vw;
  row-gap: 4px;
`;

export const OrderDetailsDem = styled.span`
  color: #b8b8b8;
  grid-area: 2/1/3/2;
`;

export const OrderDetailsFre = styled.span`
  color: #b8b8b8;
  grid-area: 2/2/3/3;
  text-align: end;
`;
<file_sep>import styled from "styled-components";
import { TextField } from "@material-ui/core";
import Password from "../../Components/InputPassword";
import { Link } from "react-router-dom";

export const Container = styled.div`
  width: 100vw;
  height: 100vw;
  margin-left: auto;
  margin-right: auto;
`;

export const Imagem = styled.img`
  display: flex;
  justify-content: center;
  margin-top: 13.75vh;
  margin-left: auto;
  margin-right: auto;
`;

export const ContainerInput = styled.div`
  display: grid;
  justify-items: center;
  grid-auto-columns: 1fr;
  grid-gap: 2.5vh;
`;

export const Paragrafo = styled.p`
  display: flex;
  justify-content: center;
  margin-top: 4.38vh;
  margin-bottom: 2.6vh;
  font-size: 1em;
  padding: 12px;
`;

export const Input = styled(TextField)`
  width: 91.11vw;
  height: 8.75vh;
  margin-top: 2.5vh;
  margin-right: 4.44vw;
  margin-left: 4.44vw;
`;
export const Paragrafo2 = styled.p`
  display: flex;
  margin-top: 4.38vh;
  justify-content: center;
`;
export const Senha = styled(Password)`
  width: 91.11vw;
  height: 8.75vh;
  margin-top: 2.5vh;
  margin-right: 4.44vw;
  margin-left: 4.44vw;
`;

export const Linki = styled(Link)`
  text-decoration: none;
`;
<file_sep>import styled from "styled-components";
import Select from "@material-ui/core/Select";
import Button from "@material-ui/core/Button";

export const TituloDialog = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108px;
  text-align: center;
  color: #000000;
  margin: 6.719vh 9vw 4.844vh 9vw;
`;

export const Botao = styled(Button)`
  span {
    color: #5cb646;
  }
`;

export const SelecionaQtdade = styled(Select)`
  width: 68vw;
`;

export const RestauranteContainer = styled.div`
  overflow-x: hidden;
  padding: 0 4.444vw;
  max-width: 99vw;
`;

export const UpperRestaurantContainer = styled.div`
  margin: 2.656vh 0 1.875vh 0;
  border-radius: 8px;
`;

export const ContainerImg = styled.div`
  height: 18.75vh;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
`;
export const ResturanteImg = styled.img`
  object-fit: fill;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
`;

export const RestaurantTitle = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108px;
  color: #5cb646;
  margin-top: 1.875vh;
`;

export const RestaurantDetails = styled.p`
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108px;
  color: #b8b8b8;
`;

export const RestaurantDetailsFrete = styled.p`
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.108px;
  color: #b8b8b8;
  margin-left: 5vw;
`;

export const DetailsMidContainer = styled.div`
  display: flex;
  justify-content: start;
  margin: 1.25vh 0;
`;

export const SectionText = styled.p`
  border-bottom: 1px solid black;
  margin-top: 2.5vh;
  padding-bottom: 1.25vh;
`;
