fix filter bug

frontend/src/components/filter/Filter.jsx

@@ -45,7 +45,12 @@ const Filter = ({ orders, filtersOn, setFiltersOn, setOrdersToShow }) => {
   };
 
   useEffect(() => {
-    if (all || (!all && !received && !fulfilled && !cancelled)) {
+    if (!filtersOn) {
+      setAll(false);
+      setReceived(false);
+      setFulfilled(false);
+      setCancelled(false);
+    } else if (all || (!all && !received && !fulfilled && !cancelled)) {
       setOrdersToShow(orders);
     } else {
       const newOrders = { allIds: [], byId: {} };
@@ -76,7 +81,7 @@ const Filter = ({ orders, filtersOn, setFiltersOn, setOrdersToShow }) => {
       });
       setOrdersToShow(newOrders);
     }
-  }, [orders, setOrdersToShow, all, received, fulfilled, cancelled]);
+  }, [orders, setOrdersToShow, filtersOn, all, received, fulfilled, cancelled]);
 
   if (!orders.allIds.length) return null;
 
@@ -86,22 +91,22 @@ const Filter = ({ orders, filtersOn, setFiltersOn, setOrdersToShow }) => {
 
       <div className="filter-btns">
         <Button
-          className={`filter-all ${filtersOn && all ? "selected" : ""}`}
+          className={`filter-all ${all ? "selected" : ""}`}
           onClick={reset}
           text="All"
         />
         <Button
-          className={`filter-rec ${filtersOn && received ? "selected" : ""}`}
+          className={`filter-rec ${received ? "selected" : ""}`}
           onClick={receive}
           text="Received"
         />
         <Button
-          className={`filter-ful ${filtersOn && fulfilled ? "selected" : ""}`}
+          className={`filter-ful ${fulfilled ? "selected" : ""}`}
           onClick={fulfill}
           text="Fulfilled"
         />
         <Button
-          className={`filter-can ${filtersOn && cancelled ? "selected" : ""}`}
+          className={`filter-can ${cancelled ? "selected" : ""}`}
           onClick={cancel}
           text="Cancelled"
         />