filter products

src/components/ProductList/ProductList.jsx

@@ -71,15 +71,11 @@ const ProductList = ({ size = 99999 }) => {
   useEffect(() => {
 
     console.log("Products: ", products)
+    
     if (products.length > 0) {
-      let productType = sessionStorage.getItem('amber-select-product-type')
-      let newFilteredProducts = products.filter(
-        (product) => product.productType === productType
-      );
 
-      setTimeout(() => {
-        setFilteredProducts(newFilteredProducts)
-      }, 100)
+      let newFilteredProducts = filterProducts()
+      setFilteredProducts(newFilteredProducts)
 
       const tagList = getAllTags(newFilteredProducts);
       setTagFilterOption(tagList);
@@ -102,6 +98,14 @@ const ProductList = ({ size = 99999 }) => {
 
   useEffect(() => {
 
+    let newFilteredProducts = filterProducts()
+    debugger
+    setFilteredProducts(newFilteredProducts)
+
+  }, [tags, collection, sort])
+
+  const filterProducts = () => {
+
     if (products?.length > 0) {
 
       let productType = sessionStorage.getItem('amber-select-product-type')
@@ -135,7 +139,6 @@ const ProductList = ({ size = 99999 }) => {
         }
       );
 
-
       if (sort === "title") {
         newFilteredProducts = newFilteredProducts.sort((a, b) => a.title.localeCompare(b.title));
       } else if (sort === "new") {
@@ -144,15 +147,13 @@ const ProductList = ({ size = 99999 }) => {
         newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
       }
 
-
-      setFilteredProducts([]) //cause I want those fadeIn animation
-      setTimeout(() => {
-        setFilteredProducts(newFilteredProducts)
-      }, 100)
+      return newFilteredProducts
 
     }
 
-  }, [tags, collection, sort])
+    return []
+
+  }
 
   const handleChange = (event) => {
     //setInput({ ...input, [event.target.name]: event.target.value });
@@ -200,7 +201,7 @@ const ProductList = ({ size = 99999 }) => {
                 },
                 boxShadow: 0,
                 fontSize: 10
-              }} 
+              }}
               variant="contained">
               NEW
             </Button>}
@@ -269,10 +270,10 @@ const ProductList = ({ size = 99999 }) => {
 
         {/* Right Side: Option Inputs */}
         <Box sx={{
-          display: "flex", gap: 2, flexDirection: "row", flexWrap:"wrap", justifyContent:"space-between", py:{
-            xs:2,
-            sm:2,
-            md:0
+          display: "flex", gap: 2, flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", py: {
+            xs: 2,
+            sm: 2,
+            md: 0
           }
         }}>