From 15e4ea4159a3528ed81707df829c6115743b6ba4 Mon Sep 17 00:00:00 2001
From: Eray C <hi@eri.gg>
Date: Mon, 1 Nov 2021 19:25:36 +0100
Subject: [PATCH] ref: Small changes to temporarily hide errors

---
 src/Order.jsx              | 238 ++++++++++++++++++-------------------
 src/components/Button.jsx  |   2 +-
 src/views/ChooseBread.jsx  |  29 +----
 src/views/ChooseMeat.jsx   |   5 +-
 src/views/ChooseSauces.jsx |  17 ++-
 5 files changed, 140 insertions(+), 151 deletions(-)

diff --git a/src/Order.jsx b/src/Order.jsx
index 168393a..3356ebf 100644
--- a/src/Order.jsx
+++ b/src/Order.jsx
@@ -1,131 +1,131 @@
-import { useState } from "react";
-import * as Data from "./Data";
-import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom";
+// import { useState } from "react";
+// import * as Data from "./data";
+// // import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom";
 
-export function OrderForm(props) {
-  const ingredients = {
-    sauces: [...Data.defaultBreads],
-    meats: [...Data.defaultMeats],
-    vegetables: [...Data.defaultVegetables],
-    sauces: [...Data.defaultSauces],
-  };
+// export function OrderForm(props) {
+//   const ingredients = {
+//     sauces: [...Data.defaultBreads],
+//     meats: [...Data.defaultMeats],
+//     vegetables: [...Data.defaultVegetables],
+//     sauces: [...Data.defaultSauces],
+//   };
 
-  const [selectedProducts, setSelectedProducts] = useState(
-    ...Data.defaultOrder
-  );
+//   const [selectedProducts, setSelectedProducts] = useState(
+//     ...Data.defaultOrder
+//   );
 
-  const [bread, setBread] = useState("");
-  const [meat, setMeat] = useState("");
-  const [vegetables, setVegetables] = useState("");
-  const [sauces, setSauces] = useState("");
+//   const [bread, setBread] = useState("");
+//   const [meat, setMeat] = useState("");
+//   const [vegetables, setVegetables] = useState("");
+//   const [sauces, setSauces] = useState("");
 
-  //   const [checkedState, setCheckedState] = useState(
-  //     new Array(ingredients.length).fill(false)
-  //   );
+//   //   const [checkedState, setCheckedState] = useState(
+//   //     new Array(ingredients.length).fill(false)
+//   //   );
 
-  const { onSubmit } = props;
+//   const { onSubmit } = props;
 
-  //   const handleOnChange = (position) => {
-  //     const updatedCheckedState = checkedState.map((item, index) =>
-  //       index === position ? true : item
-  //     );
+//   //   const handleOnChange = (position) => {
+//   //     const updatedCheckedState = checkedState.map((item, index) =>
+//   //       index === position ? true : item
+//   //     );
 
-  const handleOnSelected = (productSelected) => {
-    const updatedSelectedProducts = selectedProducts.map((initialProduct) =>
-      initialProduct === productSelected.name ? productSelected = productSelected.value : false
-    );
+//   const handleOnSelected = (productSelected) => {
+//     const updatedSelectedProducts = selectedProducts.map((initialProduct) =>
+//       initialProduct === productSelected.name ? productSelected = productSelected.value : false
+//     );
 
-    setSelectedProducts(updatedSelectedProducts);
+//     setSelectedProducts(updatedSelectedProducts);
 
-    // setCheckedState(updatedCheckedState);
-    // const Finishedsauces = updatedCheckedState.reduce(
-    //   (sauce, currentState, index) => {
-    //     if (currentState === false) {
-    //       switch (ingredients.vegetables) {
-    //         case "salade":
-    //           setSalade("");
-    //           break;
-    //         case "tomate":
-    //           setTomate("");
-    //           break;
-    //         case "oignon":
-    //           setOignon("");
-    //           break;
-    //         default:
-    //           console.log("aucun changement");
-    //       }
-    //     }
-    //     if (currentState === true) {
-    //       switch (ingredients[index].categorie) {
-    //         case "pains":
-    //           setPain(ingredients[index].name);
-    //           break;
-    //         case "viandes":
-    //           setViande(ingredients[index].name);
-    //           break;
-    //         case "salade":
-    //           setSalade(ingredients[index].name);
-    //           break;
-    //         case "tomate":
-    //           setTomate(ingredients[index].name);
-    //           break;
-    //         case "oignon":
-    //           setOignon(ingredients[index].name);
-    //           break;
-    //         case "sauces":
-    //           if (sauce.length < 2) {
-    //             setSauces((sauce = [...sauce, " " + ingredients[index].name]));
-    //           }
-    //           return sauce;
-    //         default:
-    //           console.log("aucun changement");
-    //       }
-    //       return sauce;
-    //     }
-    //     return sauce;
-    //   },
-    // );
+//     // setCheckedState(updatedCheckedState);
+//     // const Finishedsauces = updatedCheckedState.reduce(
+//     //   (sauce, currentState, index) => {
+//     //     if (currentState === false) {
+//     //       switch (ingredients.vegetables) {
+//     //         case "salade":
+//     //           setSalade("");
+//     //           break;
+//     //         case "tomate":
+//     //           setTomate("");
+//     //           break;
+//     //         case "oignon":
+//     //           setOignon("");
+//     //           break;
+//     //         default:
+//     //           console.log("aucun changement");
+//     //       }
+//     //     }
+//     //     if (currentState === true) {
+//     //       switch (ingredients[index].categorie) {
+//     //         case "pains":
+//     //           setPain(ingredients[index].name);
+//     //           break;
+//     //         case "viandes":
+//     //           setViande(ingredients[index].name);
+//     //           break;
+//     //         case "salade":
+//     //           setSalade(ingredients[index].name);
+//     //           break;
+//     //         case "tomate":
+//     //           setTomate(ingredients[index].name);
+//     //           break;
+//     //         case "oignon":
+//     //           setOignon(ingredients[index].name);
+//     //           break;
+//     //         case "sauces":
+//     //           if (sauce.length < 2) {
+//     //             setSauces((sauce = [...sauce, " " + ingredients[index].name]));
+//     //           }
+//     //           return sauce;
+//     //         default:
+//     //           console.log("aucun changement");
+//     //       }
+//     //       return sauce;
+//     //     }
+//     //     return sauce;
+//     //   },
+//     // );
 
-    setSauces(Finishedsauces);
-  };
+//     setSauces(Finishedsauces);
+//   };
 
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    onSubmit({ pain, viande, salade, tomate, oignon, sauces });
-  };
+//   const handleSubmit = (event) => {
+//     event.preventDefault();
+//     onSubmit({ pain, viande, salade, tomate, oignon, sauces });
+//   };
 
-  return (
-    <ul className="toppings-sauce">
-      <form className="add-form" onSubmit={handleSubmit}>
-        {ingredients.map(({ name, categorie, image }, index) => {
-          return (
-            <li key={index}>
-              <div className="toppings-sauce-item">
-                <div className="left-section">
-                  <input
-                    key={index}
-                    type="checkbox"
-                    id={index}
-                    name={name}
-                    value={name}
-                    checked={checkedState[index]}
-                    onChange={() => handleOnChange(index)}
-                  />
-                  <label>{name}</label>
-                </div>
-              </div>
-            </li>
-          );
-        })}
-        <button type="submit">Commander</button>
-      </form>
-      <li>
-        <div className="toppings-sauce-item">
-          <div className="left-section">Total:</div>
-          <div className="right-section">{sauces}</div>
-        </div>
-      </li>
-    </ul>
-  );
-}
-export default OrderForm;
+//   return (
+//     <ul className="toppings-sauce">
+//       <form className="add-form" onSubmit={handleSubmit}>
+//         {ingredients.map(({ name, categorie, image }, index) => {
+//           return (
+//             <li key={index}>
+//               <div className="toppings-sauce-item">
+//                 <div className="left-section">
+//                   <input
+//                     key={index}
+//                     type="checkbox"
+//                     id={index}
+//                     name={name}
+//                     value={name}
+//                     checked={checkedState[index]}
+//                     onChange={() => handleOnChange(index)}
+//                   />
+//                   <label>{name}</label>
+//                 </div>
+//               </div>
+//             </li>
+//           );
+//         })}
+//         <button type="submit">Commander</button>
+//       </form>
+//       <li>
+//         <div className="toppings-sauce-item">
+//           <div className="left-section">Total:</div>
+//           <div className="right-section">{sauces}</div>
+//         </div>
+//       </li>
+//     </ul>
+//   );
+// }
+// export default OrderForm;
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index c377125..f3389a0 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -22,7 +22,7 @@ export const buttonClassNames = [
 export class Button extends React.Component {
   render() {
     return (
-      <div className="px-4 py-2 transition transform rounded-md cursor-pointer duration-500ease-in-out bg-red-1000 hover:bg-opacity-90 hover:-translate-y-1 hover:scale-110">
+      <div className="px-4 py-2 my-10 transition transform rounded-md cursor-pointer duration-500ease-in-out bg-red-1000 hover:bg-opacity-90 hover:-translate-y-1 hover:scale-110">
         <div className="text-xl font-medium text-gray-100">Suivant</div>
       </div>
     );
diff --git a/src/views/ChooseBread.jsx b/src/views/ChooseBread.jsx
index 403de4b..cec86a0 100644
--- a/src/views/ChooseBread.jsx
+++ b/src/views/ChooseBread.jsx
@@ -1,6 +1,5 @@
 import * as React from "react";
-// import { Redirect } from "react-router";
-// import { useState } from "react";
+
 import "../index.css";
 
 import { IngredientBox } from "../components/IngredientBox";
@@ -8,22 +7,13 @@ import { OrderSummary } from "./OrderSummary";
 import { Button } from "../components/Button";
 import { defaultBreads } from "../data";
 
-export class ChooseBread extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { ...this.props.order };
-  }
+// import { selectedProducts } from "../Order";
 
-  onBreadSelection = () => {
-    const { bread } = this.state;
-    console.log(bread);
-    this.setState({ ...this.state, currentOrder: {...this.state.currentOrder, bread: bread.name }});
-  };
+export function ChooseBread(props) {
 
-  render() {
-    return (
-      <div className="flex flex-col items-center justify-center my-5">
-        <div className="my-3 text-3xl font-bold text-center text-red-1000">
+  return (
+      <div className={`flex flex-col items-center justify-center hidden my-5`}>
+        <div className={`my-3 text-3xl font-bold text-center text-red-1000`}>
           Choisissez le pain
         </div>
         <div className="flex flex-col items-center justify-center mt-5 space-x-4 sm:flex-row">
@@ -32,12 +22,6 @@ export class ChooseBread extends React.Component {
               <IngredientBox
                 name={bread.name}
                 image={bread.image}
-                onSelected={
-                  this.state.bread && this.state.bread === bread.name
-                    ? true
-                    : false
-                }
-                onClick={this.onBreadSelection}
               />
             </div>
           ))}
@@ -48,4 +32,3 @@ export class ChooseBread extends React.Component {
       </div>
     );
   }
-}
diff --git a/src/views/ChooseMeat.jsx b/src/views/ChooseMeat.jsx
index beb6bb5..bedbee4 100644
--- a/src/views/ChooseMeat.jsx
+++ b/src/views/ChooseMeat.jsx
@@ -1,14 +1,15 @@
 import * as React from "react";
-import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom";
+// import { BrowserRouter, Route, NavLink, Switch } from "react-router-dom";
 
 import "../index.css";
 
 import { IngredientBox } from "../components/IngredientBox";
+import { meat, setMeat } from "../Order";
 import { Button } from "../components/Button";
 
 import { defaultMeats } from "../data";
 
-export function ChooseBread(props) {
+export function ChooseMeat(props) {
   return (
     <div className="flex flex-col items-center justify-center my-5">
       <div className="my-3 text-3xl font-bold text-center text-red-1000">
diff --git a/src/views/ChooseSauces.jsx b/src/views/ChooseSauces.jsx
index d11e875..8bea8b6 100644
--- a/src/views/ChooseSauces.jsx
+++ b/src/views/ChooseSauces.jsx
@@ -1,27 +1,32 @@
 import * as React from "react";
 
 import "../index.css";
-import { buttonClassNames } from "../components/Button";
-
+import { Button, buttonClassNames } from "../components/Button";
 import { IngredientBox } from "../components/IngredientBox";
-import { Button } from "../components/Button";
+
+// import { selectedProducts, setSelectedProducts } from "../Order";
+// import { sauces, setSauces } from "../Order";
 
 import { defaultSauces } from "../data";
 
 export function ChooseSauces(props) {
+  
   return (
     <div className="flex flex-col items-center justify-center my-5 text-red-1000">
+
       <div className="my-3 text-3xl font-bold text-center">
         Des sauces pour donner de la couleur à cette magie ?
       </div>
+
       <div className="flex flex-wrap items-center justify-center mt-5 px-80">
-        {defaultSauces.map((veg) => (
+        {defaultSauces.map((s) => (
           <div className="m-2">
-            <IngredientBox name={veg.name} image={veg.image} />
+            <IngredientBox name={s.name} image={s.image}/>
           </div>
         ))}
       </div>
-      <div className={classNames.join(" ")}>Choisir sans sauce</div>
+
+      <div className={buttonClassNames.join(" ")}>Choisir sans sauce</div>
       <div className="my-10">
         <Button />
       </div>