future4code · fernanda-tiyomi · Sep 28, 2022 · Sep 29, 2022 · Sep 30, 2022 · Oct 3, 2022
diff --git a/modulo4/Projeto-ambulnz-front/.gitignore b/modulo4/Projeto-ambulnz-front/.gitignore
@@ -0,0 +1,5 @@
+.env
+node_modules
+build
+.DS_STORE
+coverage
diff --git a/modulo4/Projeto-ambulnz-front/README.md b/modulo4/Projeto-ambulnz-front/README.md
diff --git a/modulo4/Projeto-ambulnz-front/package-lock.json b/modulo4/Projeto-ambulnz-front/package-lock.json
diff --git a/modulo4/Projeto-ambulnz-front/package.json b/modulo4/Projeto-ambulnz-front/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "projeto-ambulnz-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.6",
+    "@mui/material": "^5.10.8",
+    "@mui/styled-engine-sc": "^5.10.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.6",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/modulo4/Projeto-ambulnz-front/public/favicon.ico b/modulo4/Projeto-ambulnz-front/public/favicon.ico
diff --git a/modulo4/Projeto-ambulnz-front/public/index.html b/modulo4/Projeto-ambulnz-front/public/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+
+    <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+
+    <title>Pizza Delivery App | Ambulnz</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/modulo4/Projeto-ambulnz-front/public/logo192.png b/modulo4/Projeto-ambulnz-front/public/logo192.png
diff --git a/modulo4/Projeto-ambulnz-front/public/logo512.png b/modulo4/Projeto-ambulnz-front/public/logo512.png
diff --git a/modulo4/Projeto-ambulnz-front/public/manifest.json b/modulo4/Projeto-ambulnz-front/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/modulo4/Projeto-ambulnz-front/public/robots.txt b/modulo4/Projeto-ambulnz-front/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/modulo4/Projeto-ambulnz-front/src/App.js b/modulo4/Projeto-ambulnz-front/src/App.js
@@ -0,0 +1,142 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import styled from "styled-components"
+import OrderSuccessPopup from "./components/OrderSuccessPopup";
+import { BASE_URL } from "./constants";
+import OrderSummary from "./screens/OrderSummary";
+import PizzasMenu from "./screens/PizzasMenu";
+
+export const ContainerMain = styled.main`
+    display: flex;
+`
+
+function App() {
+    const [ cart, setCart ] = useState([])
+    const [ total, setTotal ] = useState(0)
+
+    const [ orderSuccessPopupState, setOrderSuccessPopupState] = useState({
+        isActive: false,
+        summary: {
+            id: null,
+            pizzas: null,
+            total: null
+        }
+    })
+
+    useEffect(() => {
+        calculateTotal()
+    }, [cart])
+
+    const addToCart = (pizzaToAdd) => {
+        // -1 se a pizza não existir
+        // 0 pra cima se ela existir
+        const foundIndex = cart.findIndex((pizzaInCart) => {
+            return pizzaInCart.name === pizzaToAdd.name
+        })
+
+        if (foundIndex >= 0) {
+            const newCart = [...cart]
+            newCart[foundIndex].quantity += 1
+
+            setCart(newCart)
+        } else {
+            const newCart = [...cart]
+            const newPizza = {
+                name: pizzaToAdd.name,
+                price: pizzaToAdd.price,
+                quantity: 1
+            }
+
+            newCart.push(newPizza)
+
+            setCart(newCart)
+        }
+    }
+
+    const removeFromCart = (pizzaToRemove) => {
+        // se a pizza possuir quantidade maior que 1
+        //  remover 1 da quantidade
+
+        // senao
+        //  remover o item inteiro do carrinho
+
+        if (pizzaToRemove.quantity > 1) {
+            const newCart = cart.map((pizza) => {
+                if (pizza.name === pizzaToRemove.name) {
+                    pizza.quantity -= 1
+                }
+
+                return pizza
+            })
+
+            setCart(newCart)
+
+        } else {
+            const newCart = cart.filter((pizza) => {
+                return pizza.name !== pizzaToRemove.name
+            })
+
+            setCart(newCart)
+        }
+    }
+
+    const calculateTotal = () => {
+        const total = cart.reduce(
+            (acc, item) => acc + (item.price * item.quantity),
+            0
+        )
+
+        setTotal(total)
+    }
+
+    const confirmOrder = async () => {
+        try {
+            const body = {
+                pizzas: cart
+            }
+
+            const res = await axios.post(`${BASE_URL}/orders`, body)
+
+            setOrderSuccessPopupState({
+                isActive: true,
+                summary: res.data.order
+            })
+
+            setCart([])
+
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    const closePopup = () => {
+        setOrderSuccessPopupState({
+            isActive: false,
+            summary: {
+                id: null,
+                pizzas: null,
+                total: null
+            }
+        })
+    }
+
+    return (
+        <ContainerMain>
+            <PizzasMenu addToCart={addToCart} />
+            <OrderSummary
+                cart={cart}
+                removeFromCart={removeFromCart}
+                total={total}
+                confirmOrder={confirmOrder}
+            />
+            { orderSuccessPopupState.isActive
+                && <OrderSuccessPopup
+                        order={orderSuccessPopupState.summary}
+                        closePopup={closePopup}
+                    />
+            }
+        </ContainerMain>
+    );
+}
+
+export default App;
diff --git a/modulo4/Projeto-ambulnz-front/src/Global.styled.js b/modulo4/Projeto-ambulnz-front/src/Global.styled.js
@@ -0,0 +1,21 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+html,
+body,
+#root,
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    width: 100%;
+
+
+
+}
+
+
+ul, li {
+    list-style-type: none;
+}
+`;
diff --git a/modulo4/Projeto-ambulnz-front/src/components/OrderItemCard.js b/modulo4/Projeto-ambulnz-front/src/components/OrderItemCard.js
@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const ContainerLi = styled.div`
+  display: flex;
+`;
+
+//botão do remover
+export const ContainerBotao = styled.div`
+  background-color: #ffd700;
+  margin: 10px 5px;
+  width: 70%;
+  cursor: pointer;
+  :hover {
+    color: black;
+    background-color: red;
+    font-weight: bold;
+  }
+`;
+
+function OrderItemCard(props) {
+  const { pizza, removeFromCart } = props;
+
+  return (
+    <ContainerLi>
+      <p>
+        Pizza {pizza.name}-{" "}
+        {pizza.price.toLocaleString("pt-br", {
+          style: "currency",
+          currency: "USD",
+        })}{" "}
+        x {pizza.quantity}
+      </p>
+
+      <ContainerBotao onClick={() => removeFromCart(pizza)}>
+        Remover item 🍕
+      </ContainerBotao>
+    </ContainerLi>
+  );
+}
+
+export default OrderItemCard;
diff --git a/modulo4/Projeto-ambulnz-front/src/components/OrderSuccessPopup.js b/modulo4/Projeto-ambulnz-front/src/components/OrderSuccessPopup.js
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+export const ContainerDiv = styled.div`
+  border: 1px solid black;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: auto;
+  margin: 5px;
+
+  background-color: #eedd82;
+  > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .close-popup {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      transform: translateX(-100%);
+
+      padding: 2px 5px;
+
+      width: auto;
+
+      :hover {
+        cursor: pointer;
+        font-weight: bold;
+        background-color: red;
+      }
+    }
+  }
+`;
+
+function OrderSuccessPopup(props) {
+  const { order, closePopup } = props;
+
+  return (
+    <ContainerDiv>
+      <div>
+        <h2>Pedido realizado com sucesso! 🍕</h2>
+        <h3>Resumo do pedido</h3>
+        <p>Id do pedido: {order.id}</p>
+        {order.pizzas.map((pizza) => (
+          <p key={pizza.name}>
+            Pizza {pizza.name} -{" "}
+            {pizza.price.toLocaleString("pt-br", {
+              style: "currency",
+              currency: "USD",
+            })}{" "}
+            x {pizza.quantity}
+          </p>
+        ))}
+        <p>
+          Total pago:{" "}
+          {order.total.toLocaleString("pt-br", {
+            style: "currency",
+            currency: "USD",
+          })}
+        </p>
+
+        <span className="close-popup" onClick={closePopup}>
+          x
+        </span>
+      </div>
+    </ContainerDiv>
+  );
+}
+
+export default OrderSuccessPopup;