Merge pull request #77 from Hello-Kitchen/76-refacto-into-a-spa

src/Components/CategoryButton/CategoryButton.js

@@ -1,36 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-
 /**
  * Component : Component handling a specific category, redirect to a page with all food associated to it
  * 
  * @component CategoryButton
  * @param {Number} id id of the specific category
  * @param {String} name name of a specific category
  * @param {String} color color code of the category
- * @param {[Object]} food Object Array with all food of the category
  * @param {String} route route used for navigation of the food page
+ * @param {function} handleClick function used to redirect to the food page
  */
-function CategoryButton({id, name, color, food, route}) {
-    const navigate = useNavigate();
-
-    //sets in local storage the foods of the category, to get them in each specific food pages
-    useEffect(() => {
-        localStorage.setItem("food_category/"+id, JSON.stringify(food));
-      }, [id, food]);
+function CategoryButton({id, name, color, handleClick}) {
 
-    //navigates to the category page
-    const handleClick = () => {
-        navigate(route + id, {state: {foods: food, color: color}})
-    }
     return (
         <div className={`${color} col-span-1 row-span-1`}>
             <button 
                 className="h-full w-full"
-                onClick={() => handleClick()}
+                onClick={() => handleClick(id)}
                 type="button"
             >
                 <h1 className="text-3xl font-bold text-white text-left ml-5">
@@ -45,8 +32,8 @@ CategoryButton.propTypes = {
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
     color: PropTypes.string.isRequired,
-    food: PropTypes.array.isRequired,
     route: PropTypes.string.isRequired,
+    handleClick: PropTypes.func.isRequired,
 }
 
 export default CategoryButton;

src/Components/CurrentCommand/CurrentCommand.js

@@ -142,7 +142,8 @@ function Footer({ config, orders, setOrders, setConfig, price, priceLess, payLis
             channel: orders[3].channel,
             number: (orders[3].channel === "En salle") ? `Table ${orders[0].nb}` : `${orders[0].nb}`,
             part: 1,
-            food_ordered: orderedFood
+            food_ordered: orderedFood,
+            served: false,
         };
 
         console.log(obj);

src/Components/FoodButton/FoodButton.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useNavigate } from "react-router-dom";
-
 import FoodStick from '../FoodStick/FoodStick';
 
 /**
@@ -12,24 +10,17 @@ import FoodStick from '../FoodStick/FoodStick';
  * @param {Number} id id of the specific food
  * @param {String} name name of a specific food
  * @param {String} color color code of the current food category
- * @param {Object} food Object with all selected food details
- * @param {[Object]} foods Object array of all foods in a category, used by background
  * @param {String} route route containing the category of the food, used for navigation
+ * @param {function} handleClick function used to redirect to the food page
  */
-function FoodButton({id, name, color, food, foods, route}) {
-    const navigate = useNavigate();
-
-    //called when clicked on a specific food, redirects to the food page
-    const handleClick = () => {
-        navigate(route + id, {state: {id: id, food: food, foods: foods, color: color}})
-    }
+function FoodButton({id, name, color, handleClick}) {
 
     return (
         <div className="bg-white col-span-1 row-span-1 grid grid-cols-12 border-b-2 border-b-white">
             <FoodStick color={color} />
             <button 
                 className="h-full w-full col-span-11"
-                onClick={() => handleClick()}
+                onClick={() => handleClick(id)}
                 type="button"
             >
                 <h1 className="text-3xl font-bold text-black text-left">
@@ -44,9 +35,8 @@ FoodButton.propTypes = {
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
     color: PropTypes.string.isRequired,
-    food: PropTypes.object.isRequired,
-    foods: PropTypes.array.isRequired,
     route: PropTypes.string.isRequired,
+    handleClick: PropTypes.func.isRequired,
 }
 
 export default FoodButton;

src/Components/FoodElem/FoodElem.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import DetailList from "../FoodElem/DetailList/DetailList";
+import ModifButton from "../FoodElem/ModifButton/ModifButton";
+import FoodHeader from "../FoodElem/FoodHeader/FoodHeader";
+import FoodFooter from "../FoodElem/FoodFooter/FoodFooter";
+import ModifBackButton from "../FoodElem/ModifButton/ModifBackButton";
+import IngredientList from "../FoodElem/Ingredientlist/IngredientList";
+
+/**
+ * Component : Component displaying all food related to a category of a restaurant
+ *
+ * @component CategoryList
+ */
+function FoodList({
+  foods,
+  color,
+  setOrders,
+  orderDetails,
+  setOrderDetails,
+  selectedFood,
+  setSelectedFood,
+}) {
+  const [modifModale, setModifModale] = useState(false);
+
+  const closeDetail = () => {
+    setSelectedFood(null);
+  };
+
+  const openModif = () => {
+    setModifModale(true);
+  };
+
+  const closeModif = () => {
+    setModifModale(false);
+  };
+
+  return (
+    <div className="h-full w-full grid grid-flow-row grid-rows-8">
+      <FoodHeader
+        id={selectedFood.id}
+        name={selectedFood.name}
+        price={selectedFood.price}
+        color={color}
+      />
+      <div className="w-full row-span-6">
+        {modifModale ? (
+          <div className="h-full w-full grid grid-flow-row grid-rows-6">
+            <ModifBackButton closeModif={closeModif} />
+            <IngredientList
+              data={selectedFood.ingredients}
+              orderDetails={orderDetails}
+              setOrderDetails={setOrderDetails}
+            />
+          </div>
+        ) : (
+          <div className="h-full w-full grid grid-flow-row grid-rows-6">
+            <DetailList
+              details={selectedFood.details}
+              orderDetails={orderDetails}
+              setOrderDetails={setOrderDetails}
+            />
+            <ModifButton
+              id={selectedFood.id}
+              food={selectedFood.food}
+              foods={foods}
+              color={color}
+              openModif={openModif}
+            />
+          </div>
+        )}
+      </div>
+      <FoodFooter
+        id={selectedFood.id}
+        name={selectedFood.name}
+        price={selectedFood.price}
+        setOrders={setOrders}
+        orderDetails={orderDetails}
+        setOrderDetails={setOrderDetails}
+        closeDetail={closeDetail}
+      />
+    </div>
+  );
+}
+
+FoodList.propTypes = {
+  foods: PropTypes.array.isRequired,
+  color: PropTypes.string.isRequired,
+  setOrders: PropTypes.func.isRequired,
+  orderDetails: PropTypes.object.isRequired,
+  setOrderDetails: PropTypes.func.isRequired,
+  selectedFood: PropTypes.object.isRequired,
+  setSelectedFood: PropTypes.func.isRequired,
+};
+
+export default FoodList;

src/Components/FoodElem/FoodFooter/FoodFooter.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useNavigate, useLocation } from "react-router-dom";
-
 /**
  * Footer Component : 
  *  
@@ -13,21 +11,13 @@ import { useNavigate, useLocation } from "react-router-dom";
  * @param {function} setOrders state function used to update the current order when the food is added
  * @param {Object} orderDetails Object used to persist detail and ingredient choices of a current food
  * @param {function} setOrderDetails state function to update the orderDetails object
+ * @param {function} closeDetail function used to reset the current order details and redirects to the dashboard page
  */
-function FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails}) {
-
-    const navigate = useNavigate();
-    const location = useLocation();
-    const { pathname } = location;
-
+function FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails, closeDetail}) {
     //function used to reset the current order details and redirects to the dashboard page, used by the "Annuler" button
     const handleBackClick = () => {
         setOrderDetails({details: [], sups: []});
-        if (pathname.endsWith("modification")) {
-            navigate(-3)
-        } else {
-            navigate(-2)
-        }
+        closeDetail();
     }
 
     //formats the detail list of a selected food
@@ -73,11 +63,7 @@ function FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails})
             return updatedOrders;
         });
         setOrderDetails({details: [], sups: []});
-        if (pathname.endsWith("modification")) {
-            navigate(-3)
-        } else {
-            navigate(-2)
-        }
+        closeDetail();
     }
 
     return (
@@ -98,7 +84,8 @@ FoodFooter.propTypes = {
     price: PropTypes.number.isRequired,
     setOrders: PropTypes.func.isRequired,
     orderDetails: PropTypes.object.isRequired,
-    setOrderDetails: PropTypes.func.isRequired
+    setOrderDetails: PropTypes.func.isRequired,
+    closeDetail: PropTypes.func.isRequired,
 }
 
 export default FoodFooter;

src/Components/FoodElem/ModifButton/ModifBackButton.js

@@ -1,19 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { GoArrowDown } from "react-icons/go";
-import { useNavigate } from "react-router-dom";
 
 /**
  * Header Component : used to change page from the ingredient modification page of a food to the detail modification page
  * 
  * @component ModifButton
+ * @param {function} closeModif function used to close the modification page
  */
-function ModifBackButton() {
+function ModifBackButton({closeModif}) {
 
-    const navigate = useNavigate();
     //Function called on button click, navigates to the previous page, the food detail page
     const handleClick = () => {
-        navigate(-1)
+        closeModif();
     }
 
     return (
@@ -32,5 +32,8 @@ function ModifBackButton() {
     )
 }
 
+ModifBackButton.propTypes = {
+    closeModif: PropTypes.func.isRequired,
+}
 
 export default ModifBackButton;

src/Components/FoodElem/ModifButton/ModifButton.js

@@ -2,22 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { GoArrowUp } from "react-icons/go";
-import { useNavigate } from "react-router-dom";
 
 /**
  * Footer Component : used to change page from the detail modification page of a food to the ingredient modification page
  * 
  * @component ModifButton
- * @param {Object} food Current selected food object
- * @param {[Object]} foods Object array of all foods in a category, used by background
- * @param {string} color Color code of the food category
+ * @param {function} openModif function used to open the modification page
  */
-function ModifButton({food, foods, color}) {
+function ModifButton({openModif}) {
 
-    const navigate = useNavigate();
     //Function called on button click, navigates to the food ingredients modification page
     const handleClick = () => {
-        navigate("modification", {state: {food: food, foods: foods, color: color}})
+        openModif();
     }
 
     return (
@@ -38,9 +34,7 @@ function ModifButton({food, foods, color}) {
 
 
 ModifButton.propTypes = {
-    food: PropTypes.object.isRequired,
-    foods: PropTypes.array.isRequired,
-    color: PropTypes.string.isRequired
+    openModif: PropTypes.func.isRequired,
 }
 
 export default ModifButton;