Ashish spa temsolution

package.json

@@ -3,10 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.3",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/joy": "^5.0.0-alpha.84",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.5",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.8.1",

public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <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" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,11 +1,139 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Link, Route, Routes } from "react-router-dom";
+import Home from '../src/components/Home'
+import OrderPizza from "./components/OrderPizza";
+import axios from "./axios";
+
+const intialPizzaValue = 
+  {
+    //dropdown
+    size: 'Small',
+    //radio botton
+    sauce: '',
+    // checkbox
+    pepperoni: false,
+    canadianBacon: false, 
+    grilledChiken: false,
+    greenPepper: false,
+    blackOlives: false,
+    artichokeHearts: false,
+    pinepple: false,
+    sausage: false,
+    spicyItalianSausage: false,
+    onions: false,
+    dicedTomatos: false,
+    roastedGarlic: false,
+    threeCheese: false,
+    extraCheese: false,
+    //textinput
+    specialInstc: '', 
+    name: '',
+    streetName: '',
+    city: '',
+    zipcode: '',
+    email: '',
+    numberOfOrder: 1,
+  }
 
 const App = () => {
+  //step 3 
+  const [pizzaOrder, setPizzaOrder] = useState([]);
+  const [pizzaFormValues, setPizzaFormValues] = useState(intialPizzaValue);
+  const [disabled, setDisabled] = useState(true);
+
+  const handleIncrement = () => {
+    setPizzaFormValues((prevFormValues) => ({
+      ...prevFormValues,
+      numberOfOrder: prevFormValues.numberOfOrder + 1,
+    }));
+  };
+
+  const handleDecrement = () => {
+    if (pizzaFormValues.numberOfOrder > 1) {
+      setPizzaFormValues((prevFormValues) => ({
+        ...prevFormValues,
+        numberOfOrder: prevFormValues.numberOfOrder - 1,
+      }));
+    }
+  };
+
+  //step 4
+  useEffect(() => {
+    axios.get('https://reqres.in/api/orders')
+      .then(res => setPizzaOrder(res.data))
+      .catch(err => console.error(err))
+  }, [])
+
+//step 5 (just function with parms)
+const inputChange = (input, value) => {
+  setPizzaFormValues({...pizzaFormValues, [input]: value})
+}
+
+// step 6 declared new object with function and set state for new object. 
+const formSubmit = () => {
+  const newPizzaOrder = {
+    size: pizzaFormValues.size,
+    sauce: pizzaFormValues.sauce,
+    specialInstc: pizzaFormValues.specialInstc,
+    name: pizzaFormValues.name,
+    streetName: pizzaFormValues.streetName,
+    city: pizzaFormValues.city,
+    zipcode: pizzaFormValues.zipcode,
+    email: pizzaFormValues.email,
+    numberOfOrder: pizzaFormValues.numberOfOrder,
+    toppings: [  
+      'pepperoni', 
+      'canadianBacon', 
+      'grilledChiken', 
+      'greenPepper', 
+      'blackOlives', 
+      'artichokeHearts', 
+      'pinepple', 
+      'sausage', 
+      'spicyItalianSausage',
+      'onions',
+      'dicedTomatos',
+      'roastedGarlic',
+      'threeCheese',
+      'extraCheese'].filter(topping => !!pizzaFormValues[topping])
+  }
+  postNewOrder(newPizzaOrder);
+}
+
+// step 7
+const postNewOrder = (newPizzaOrder) => {
+    axios.post('https://reqres.in/api/orders', newPizzaOrder)
+      .then(res => {
+        setPizzaOrder([res.data, ...pizzaOrder]);
+        setPizzaFormValues(intialPizzaValue);
+      })
+      .catch(err => console.error(err))
+}
+
   return (
-    <>
-      <h1>Lambda Eats</h1>
-      <p>You can remove this code and create your own header</p>
-    </>
+   <div className="App">
+      <nav className="Nav">
+        <h1 className="store-header">Pizza Eatery</h1>
+        <div className="nav-links">
+            <Link to="/">Home</Link>
+            <Link to="pizza">Order</Link>
+        </div>
+      </nav>
+
+        <Routes>
+          <Route path='/' element={<Home />}/>
+          <Route path='pizza' element={
+            <OrderPizza 
+              values={pizzaFormValues} 
+              change={inputChange} 
+              submit={formSubmit} 
+              disabled={disabled} 
+              handleIncrement={handleIncrement}
+              handleDecrement={handleDecrement}
+              pizzaOrder={pizzaOrder}
+            />}/>
+        </Routes>
+   </div>
   );
 };
-export default App;
+export default App;

src/axios/index.js

@@ -0,0 +1,43 @@
+import { v4 as uuid } from 'uuid';
+
+const pizzaOrder = [
+    {
+      id: uuid(),
+      size: 'Small',
+      sauce: 'Orignal Red',
+      toppings: [
+        'Pepperoni',
+        'Canadian Bacon',
+        'Grilled Chiken',
+        'Green Pepper',
+        'Black Olives',
+        'Artichoke Hearts',
+        'Pinepple',
+        'Sausage',
+        'Spicy Italian Sausage',
+        'Onions',
+        'Diced Tomatos',
+        'Roasted Garlic',
+        'Three Cheese',
+        'Extra Cheese',
+      ],
+      specialInstc: 'Any speical instructions goes here', 
+      name: 'Ashish',
+      email: '[email protected]',
+      streetName: '123 Main Street',
+      city: 'Frankfort',
+      zipcode: '90210',
+      numberOfOrder: 1
+    },
+  ]
+
+// 👉 simulating axios for [GET] and [POST]
+export default {
+  get() {
+    return Promise.resolve({ status: 200, success: true, data: pizzaOrder })
+  },
+  post(url, { size, sauce, toppings, specialInstc, name, email, streetName, city, zipcode, numberOfOrder }) {
+    const newPizzaOrder = { id: uuid(), size, sauce, toppings, specialInstc, name, email, streetName, city, zipcode, numberOfOrder }
+    return Promise.resolve({ status: 200, success: true, data: newPizzaOrder })
+  }
+}

src/components/Home.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+
+export default function Home (props) {
+    const nav = useNavigate();
+    const routeToPizzaOrder = () => {
+        nav('/pizza')
+    }
+    return (
+        <div className="home-wrapper">
+            <img 
+                className="home-image"
+                src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
+                alt='Pizza Eatery'
+            />
+            <button onClick={routeToPizzaOrder} className="md-button shop-button" id="order-pizza">
+                Order
+            </button>   
+        </div>
+    );
+}