setting up pull request.

package.json

@@ -7,10 +7,13 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.0",
+    "cypress": "^11.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "5.0.0"
+    "react-scripts": "5.0.0",
+    "styled-components": "^5.3.6",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -36,3 +36,147 @@
     transform: rotate(360deg);
   }
 }
+.links{
+
+  display:flex;
+  justify-content: space-between;
+}
+
+.links a{
+  text-decoration: none;
+  color: black;
+}
+h1{
+  display: flex;
+  justify-content: center;
+}
+#Pizza{
+  display: flex;
+  justify-content: center;
+  border:2px solid gray;
+ max-width: 100%;
+
+}
+
+
+#Pizza{
+  background-image: url("https://raw.githubusercontent.com/LambdaSchool/web-sprint-challenge-single-page-applications/main/Assets/Pizza.jpg");
+ display: flex;
+ height:30em;
+max-width: 100%;
+
+}
+
+
+.move{
+  margin-top: 13rem;
+  font-size: 1.8rem;
+
+}
+#order-pizza{
+  text-decoration: none;
+
+}
+
+.label {
+  display: flex;
+  margin-top: 50%;
+}
+
+#pizza-form{
+display: flex;
+justify-content: center;
+flex-direction: column;
+margin-left: 19rem;
+margin-right: 19rem;
+border:3px black solid;
+height:100%;
+background-image: url(https://images.unsplash.com/photo-1622544841807-9ca22fddaba2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGxpbmUlMjBwYXBlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60);
+}
+#formWrapper{
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 19rem;
+  margin-right: 19rem;
+  border:3px black solid;
+  height:100%;
+  background-image: url(https://images.unsplash.com/photo-1622544841807-9ca22fddaba2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGxpbmUlMjBwYXBlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60);
+  }
+#ownpizza {
+  background-image: url(https://images.unsplash.com/photo-1604382355076-af4b0eb60143?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHBpenphfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60);
+  max-width: 100%;
+  height: 25rem;
+}
+#toppings-wrapper3{
+  display: flex;
+  flex-direction: row;
+
+}
+#toppings-wrapper2{
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  margin-left: 40%;
+
+}
+#toppings-wrapper{
+display: flex;
+flex-direction: column;
+
+
+}
+#pyt {
+  display:flex;
+  align-content: space-around;
+}
+#sauces1 {
+display: flex;
+flex-direction: column;
+}
+
+.array{
+display: flex;
+flex-direction: column;
+align-content: flex-start;
+margin-left: 0;
+margin-top: 20%;
+border:3px black solid,
+}
+#sauce-wrapper{
+  display: flex;
+  flex-direction: column;
+}
+
+.pizza-container {
+  display:flex;
+  background-image: url(https://media.istockphoto.com/id/655721910/photo/pizza-time.jpg?b=1&s=170667a&w=0&k=20&c=1SrrclOgH0JsaikJBJAYBpuxz-Pr7wcUTY0Zx88CoWU=);
+  max-width: 100%;
+  max-height: 100%;
+
+  height: 100rem;
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
+#btnhandle {
+  display: flex;
+  max-width: 100%;
+  margin-left: 60rem;
+  margin-top: 0%;
+  height: 2rem;
+}
+#eats {
+  color:orange;
+  display:flex;
+  flex-direction: row;
+  margin-left: 0;
+  margin-top: 0;
+  position: absolute;
+  align-items: flex-start;
+}
+
+#morder {
+  display: flex;
+  max-width: 100%;
+  width: 1rem;
+}

src/App.js

@@ -1,11 +1,152 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Route, Switch } from 'react-router-dom'
+import Home from './Components/Home'
+import Pizza from './Components/Form'
+import Confirm from "./Components/Confirm"
+import axios from "axios";
+import * as yup from "yup"
+
+const formSchema = yup.object().shape({
+  customer: yup
+    .string()
+    .required("name must be entered")
+    .min(2, "name must be at least 2 characters"),
+  size: yup
+    .string()
+    .oneOf(["small","medium","large"],"Please select a size!"),
+  sauce: yup
+    .string()
+    .required("Please select a sauce!"),
+  pepperoni: yup
+    .string(),
+  sausage: yup
+    .string(),
+  mushroom: yup
+    .string(),
+  chicken: yup
+    .string(),
+  ham: yup
+    .string(),
+  extraCheese: yup
+    .string(),
+  sub: yup 
+    .string(),
+  special: yup
+    .string()
+    .notRequired(),
+  gluten: yup
+    .string()
+    .notRequired()
+})
+
+//initial forms
+const initialFormValues = {
+  customer: "",
+  size: "",
+  sauce: "",
+  pepperoni: false,
+  sausage: false,
+  chicken: false,
+  mushroom: false,
+  ham: false,
+  extraCheese: false,
+  special: "",
+  gluten: false
+
+}
+
+const initialFormErrors = {
+  size: "",
+  sauce: "",
+  customer: ""
+}
+
+const initialOrders = []
+
+const initialDisabled = true;
 
 const App = () => {
+  const [formValues,setFormValues] = useState(initialFormValues);
+  const [disabled, setDisabled] = useState(initialDisabled);
+  const [formErrors, setFormErrors] = useState(initialFormErrors)
+  const [orders, setOrders] = useState(initialOrders)
+
+  function reset(){ //resets form on page change
+    setFormValues(initialFormValues)
+  }
+
+  function clearOrders() { //clear button on confirm page
+    setOrders(initialOrders)
+}
+
+  const validate = (name,value) => { //checks that data entered is correct
+    yup.reach(formSchema,name)
+      .validate(value)
+      .then(() => setFormErrors({...formErrors, [name]: ""}))
+      .catch(err => setFormErrors({...formErrors, [name]: err.errors[0]}))
+  }
+
+  useEffect(() => { //toggled disabled button
+    formSchema.isValid(formValues)
+      .then(valid => setDisabled(!valid))
+  }, [formValues])
+
+
+  const updateForm = (inputName,inputValue) => { //udates values when entered
+    validate(inputName,inputValue);
+    setFormValues({...formValues,[inputName]:inputValue})
+  }
+
+  const postNewOrder = newOrder => { //posts orders to confirm page
+    axios.post('https://reqres.in/api/orders', newOrder)
+      .then(({data}) => {
+        setOrders([data,...orders])
+        console.log(data)
+      })
+      .catch(err => console.error(err))
+      .finally(setFormValues(initialFormValues))
+  }
+
+  const submitOrder = () => { //creates order data
+
+    const newOrder = {
+      customer: formValues.customer,
+      size: formValues.size,
+      sauce: formValues.sauce,
+      pepperoni: formValues.pepperoni,
+      sausage: formValues.sausage,
+      chicken: formValues.chicken,
+      mushroom: formValues.mushroom,
+      ham: formValues.ham,
+      extraCheese: formValues.extraCheese,
+      special: formValues.special,
+      gluten: formValues.gluten
+    }
+    setFormValues(initialFormValues)
+    postNewOrder(newOrder)
+
+  }
+
+
   return (
-    <>
-      <h1>Lambda Eats</h1>
-      <p>You can remove this code and create your own header</p>
-    </>
+    <Switch>
+      <Route exact path="/">
+        <Home />
+      </Route>
+      <Route path="/pizza">
+        <Pizza 
+          values={formValues}
+          disabled={disabled}
+          submit={submitOrder} 
+          change={updateForm} 
+          errors={formErrors}
+          reset={reset}/>
+      </Route>
+      <Route path="/confirm">
+        <Confirm orders={orders} clear={clearOrders}/>
+      </Route>
+    </Switch>
+
   );
 };
-export default App;
+export default App;

src/Components/Confirm.js

@@ -0,0 +1,56 @@
+import React from "react";
+import {Link} from 'react-router-dom'
+import Orders from "./Orders";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+    .reset-button{
+        align-content: center;
+        display: flex;
+        justify-content: center;
+        margin: 1rem;
+    }
+    .order-details{
+        margin: 0 auto;
+        max-width: 30rem;
+        position: relative;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-bottom: 10rem;
+        padding-bottom: 3rem;
+    }
+`;
+
+function Confirm(props) {
+    const {orders, clear} = props
+
+
+    return (
+        <StyledDiv className="confirm-wrapper">
+            <header>
+                <h1>Bloomtech Eats</h1>
+                <div className="nav-links">
+                    <Link to="/"><button>Home</button></Link>
+                    <button>Help</button>
+                </div>
+            </header>
+            <div className="order-success">
+                <h2>Success! Your order is on the way</h2>
+            </div>
+            <div className="reset-button"><button onClick={clear}>Clear Orders</button></div>
+
+            <div className="order-details">
+                {
+                    orders.map(order =>{
+                        return (
+                            <Orders key={order.id} details={order} />
+                        )
+                    })
+                }
+            </div>
+
+        </StyledDiv>
+    )
+}
+
+export default Confirm