feat: Add limits, displays, use React hooks

eri · Nov 1, 2021 · 6bb836c · 6bb836c
1 parent 15e4ea4
commit 6bb836c
Showing 1 changed file with 78 additions and 25 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "react";
 import "./index.css";
 
 // Components
@@ -9,78 +9,131 @@ import { Button } from "./components/Button";
 
 import { defaultOrder, defaultBreads, defaultMeats, defaultVegetables, defaultSauces } from "./data";
 
-class App extends React.Component {
-  constructor() {
-    super();
-    this.state = { currentOrder: defaultOrder, isLoading: true, timerHandle: null,
+function App() {
+  const [currentOrder, setCurrentOrder] = React.useState(defaultOrder);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [timerHandle, setTimerHandle] = React.useState(null);
+  const [orderDisplay, setOrderDisplay] = React.useState({bread: true, meat: false, vegetables: false, sauces: false});
+  const [orderLimited, setOrderLimited] = React.useState({"vegetables": { limited: false, amount: 3}, "sauces": { limited: false, amount: 2}});
+
+  React.useEffect(() => { 
+    setTimerHandle(setTimeout(() => setIsLoading(false), 2500));
+    return () => {
+      clearTimeout(timerHandle);
+      setTimerHandle(null);
     };
+  }, [setTimerHandle]);
+
+  if (isLoading) { return ( <div>its loading</div> ); }
+
+  const handleOnSelected = (ingredient, value, display) => {
+      const newOrder = {...currentOrder};
+      newOrder[ingredient] = value;
+      setCurrentOrder(newOrder);
+      if (display) { handleDisplay(display.hide, display.show); }
+  }
+
+  const handleOnAdded = (ingredient, value) => {
+    if (handleOrderLimited(ingredient)) { return false };
+    const newOrder = {...currentOrder};
+    newOrder[ingredient].push(value);
+    setCurrentOrder(newOrder);
   }
 
-  componentDidMount() { this.timerHandle = setTimeout(() => this.setState({ isLoading: false }), 2500); }
-  componentWillUnmount() {
-    if (this.timerHandle) {
-      clearTimeout(this.timerHandle);
-      this.timerHandle = null;
+  const handleOrderLimited = (ingredient) => {
+    const newLimit = {...orderLimited};
+    if (currentOrder[ingredient].length === orderLimited[ingredient].amount) {
+      console.log("limited: ", currentOrder[ingredient].length, orderLimited[ingredient].amount);
+      newLimit[ingredient].limited = true;
+      setOrderLimited(newLimit);
+      return true;
     }
+    // console.log("not limited:", currentOrder[ingredient].length, orderLimited[ingredient].amount);
+    return false;
+  }
+
+  const handleDisplay = (toHide, toShow) => {
+    // Used to toggle the display of vegetables & sauces
+    const canDisplay = {...orderDisplay};
+    canDisplay[toHide] = false;
+    canDisplay[toShow] = true;
+    setOrderDisplay(canDisplay);
   }
 
-  render() {
-    if (this.state.isLoading) { return ( <div>its loading</div> ); }
-
     return (
       <div className="min-h-screen bg-yellow-25">
         <Navbar />
+        {console.log(currentOrder)}
+        {console.log(orderLimited)}
 
         {/* Choose Bread */}
-        <div id="ChooseBread" className="flex flex-col items-center justify-center my-5">
+        <div id="ChooseBread" className={
+          `flex flex-col items-center justify-center my-5 ${orderDisplay.bread ? ' block' : ' hidden'}`
+        }>
+
           <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">
             {defaultBreads.map((bread) => (
-              <div key={bread.name}>
+              <div key={bread.name} onClick={() => handleOnSelected('bread', bread.name, {hide:'bread', show:'meat'})}>
                 <IngredientBox name={bread.name} image={bread.image} />
               </div>
             ))}
           </div>
-          <Button />
         </div>
 
         {/* Choose Meat */}
-          <div id="ChooseMeat" className="flex flex-col items-center justify-center my-5">
+        <div id="ChooseMeat" className={
+          `flex flex-col items-center justify-center my-5 ${orderDisplay.meat && !orderDisplay.bread ? ' block' : ' hidden'}`
+        }>
+
             <div className="my-3 text-3xl font-bold text-center text-red-1000">
               Passons à la viande... ou au tofu ?
             </div>
 
             <div className="flex flex-col items-center justify-center mt-5 space-x-4 sm:flex-row">
               {defaultMeats.map((meat) => (
-                <div key={meat.name}>
+                <div key={meat.name} onClick={() => handleOnSelected('meat', meat.name, {hide:'meat', show:'vegetables'})}>
                   <IngredientBox name={meat.name} image={meat.image} />
                 </div>
               ))}
             </div>
-            <Button />
+            <div onClick={() => handleDisplay('meat', 'bread')}>
+              <Button text={"Précédent"} />
+            </div>
           </div>
 
         {/* Choose Vegetables */}
-        <div id="ChooseVegetables" className="flex flex-col items-center justify-center my-5">
+        <div id="ChooseVegetables" className={
+          `flex flex-col items-center justify-center my-5 ${orderDisplay.vegetables && !orderDisplay.meat ? ' block' : ' hidden'}`
+        }>
             <div className="my-3 text-3xl font-bold text-center text-red-1000">
               Des crudités pour votre merveille ?
             </div>
 
             <div className="flex flex-col items-center justify-center mt-5 space-x-4 sm:flex-row">
               {defaultVegetables.map((veg) => (
-                <div key={veg.name}>
-                  <IngredientBox name={veg.name} image={veg.image} />
+                <div key={veg.name} onClick={() => handleOnAdded('vegetables', veg.name)}>
+                  <IngredientBox name={veg.name} image={veg.image} isDisabled={() => handleOrderLimited('vegetables')} />
                 </div>
               ))}
             </div>
-            <Button />
+            <div onClick={() => handleDisplay('vegetables', 'meat')}>
+              <Button text={"Précédent"} />
+            </div>
+
+            <div onClick={() => handleDisplay('vegetables', 'sauces')}>
+              <Button text={"Suivant"} />
+            </div>
           </div>
 
         {/* Choose Sauces */}
-        <div id="ChooseSauces" className="flex flex-col items-center justify-center my-5">
+        <div id="ChooseSauces" className={
+          `flex flex-col items-center justify-center my-5`
+          + `${currentOrder.bread && currentOrder.meat}` ? `hidden` : `hidden`
+          }>
             <div className="my-3 text-3xl font-bold text-center text-red-1000">
               Des sauces pour donner de la couleur à cette magie ?
             </div>
@@ -97,6 +150,6 @@ class App extends React.Component {
 
       </div>
     );
-}};
+};
 
 export default App;