select product by tags

src/components/ProductList/ProductList.jsx

 import { styled } from "@mui/material";
 //REDUX
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchProducts, fetchProductsByCollection } from '../../redux/slices/productSlice';
+import { fetchProductsByTags, fetchProductsByCollection } from '../../redux/slices/productSlice';
 
 //UTIL FUNCTION
 function getAllTags(data) {
   return uniqueTags;
 }
 
+function getAllCollection(data) {
+  const products = data || [];
+  const allCollection = products.flatMap(product => product.collections.nodes);
+  const uniqueCollection = Array.from(
+    new Map(allCollection.map(item => [item.title, item])).values()
+  );
+  return uniqueCollection;
+}
+
 const BootstrapInput = styled(InputBase)(({ theme }) => ({
   'label + &': {
     marginTop: theme.spacing(3),
   const products = useSelector((state) => state.products.products.data) // only used as referenced
   const [filteredProducts, setFilteredProducts] = useState([]) // this one is the actual data to be rendered
   const [categoryFilterOption, setCategoryFilterOption] = useState([])
+  const [collectionFilterOption, setCollectionFilterOption] = useState([])
   const dispatch = useDispatch();
 
   //filter
   const [category, setCategory] = useState('all');
+  const [collection, setCollection] = useState('all');
   const [sort, setSort] = useState('title')
 
   useEffect(() => {
 
     } else if (sessionStorage.getItem('amber-select-category')) {
 
-      
+      let tag = sessionStorage.getItem('amber-select-category')
+      if(tag == 'all') tag = ""
+      dispatch(fetchProductsByTags({ tag }))
 
     }
 
 
   useEffect(() => {
 
+    console.log(products)
     let productType = sessionStorage.getItem('amber-select-product-type')
     let newFilteredProducts = products.filter(
       (product) => product.productType === productType
     );
 
-    const categoryList = getAllTags(newFilteredProducts) // yes we use tags as category, while I was coding this, this is the only way to implement category
-
     setFilteredProducts(newFilteredProducts)
-    setCategoryFilterOption(categoryList)
+
+    if (sessionStorage.getItem('amber-select-collection')){
+      const categoryList = getAllTags(newFilteredProducts) // yes we use tags as category, while I was coding this, this is the only way to implement category
+      setCategoryFilterOption(categoryList)
+    } else if (sessionStorage.getItem('amber-select-category')) {
+      const collectionList = getAllCollection(newFilteredProducts)
+      setCollectionFilterOption(collectionList)
+    }
+    
 
   }, [products])
 
 
       let productType = sessionStorage.getItem('amber-select-product-type')
 
+      // Category
       let newFilteredProducts = products.filter(
         (product) => {
 
         }
       );
 
+      // Collection
+      newFilteredProducts = newFilteredProducts.filter(
+        (product) => {
+
+          if(collection == 'all'){
+            return product.productType === productType
+          } else {
+            debugger
+            return product.productType === productType && product.collections.nodes.some(data => data.title === collection)
+          }
+
+        }
+      );
+
       if (sort === "title") {
         newFilteredProducts = newFilteredProducts.sort((a, b) => a.title.localeCompare(b.title));
       } else if (sort === "new") {
 
     }
 
-  }, [category, sort])
+  }, [category, collection, sort])
 
   useEffect(() => {
     if (products) console.log(products)
             lg:"row"
           }, }}>
 
-          <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
+          {/* length 1, cause we know upon selecting by tags, there would be only 1 category, which mean no need to view this option */}
+          {(categoryFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
             <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Category</Typography>
             <Select
               value={category}
               <MenuItem value={'all'}>All</MenuItem>
               {categoryFilterOption?.map((data) => (<MenuItem value={data}>{data}</MenuItem>))}
             </Select>
-          </FormControl>
+          </FormControl>}
+
+          {(collectionFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Collection</Typography>
+            <Select
+              value={collection}
+              onChange={(event) => {
+                setCollection(event.target.value);
+              }}
+              input={<BootstrapInput />}
+              name="type"
+            >
+              <MenuItem value={'all'}>All</MenuItem>
+              {collectionFilterOption?.map(({title}) => (<MenuItem value={title}>{title}</MenuItem>))}
+            </Select>
+          </FormControl>}
 
           <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
             <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Sort</Typography>

src/redux/slices/productSlice.js

   }
 )
 
+export const fetchProductsByTags = createAsyncThunk(
+  'product/fetchProductsByTags',
+  async ({tag}) => {
+    const response = await ProductService.getProductsByTags(tag)
+    console.log(response)
+    return response
+
+  }
+)
+
 export const fetchProductsHistory = createAsyncThunk(
   'product/fetchProductsHistory',
   async (productIDList) => {
         state.products.data = [];
         state.products.error = action.error.message;
       })
+      .addCase(fetchProductsByTags.pending, (state) => {
+        state.products.status = 'loading';
+        state.products.error = null;
+      })
+      .addCase(fetchProductsByTags.fulfilled, (state, action) => {
+        state.products.status = 'succeeded';
+        state.products.data = action.payload
+      })
+      .addCase(fetchProductsByTags.rejected, (state, action) => {
+        state.products.status = 'failed';
+        state.products.data = [];
+        state.products.error = action.error.message;
+      })
       .addCase(fetchProductsHistory.pending, (state) => {
         state.productsHistory.status = 'loading';
         state.productsHistory.error = null;

src/services/ProductService.js

   return data.collection.products.nodes
 }
 
+const getProductsByTags = async (tag) => {
+
+  let customQuery = `query: "tag:${tag}"`
+  if(tag == 'all') customQuery = ''
+
+  const query = `{
+    products(first: 250, ${customQuery}) {
+      nodes {
+        id
+        title
+        createdAt
+        productType
+        tags
+        compareAtPriceRange {
+          maxVariantPrice {
+            amount
+            currencyCode
+          }
+          minVariantPrice {
+            amount
+            currencyCode
+          }
+        }
+        images(first: 4) {
+          nodes {
+            src
+            url
+          }
+        }
+        collections(first: 5) {
+          nodes {
+            title
+          }
+        }
+      }
+    }
+  }`
+
+  const { data, errors, extensions } = await client.request(query, {
+    variables: {},
+  });
+
+  return data.products.nodes
+}
+
 const getProductTypes = async () => {
   const query = `{
     productTypes(first: 250) {
   getProducts,
   getProduct,
   getProductsByCollection,
+  getProductsByTags,
   getProductTypes,
   getCollections,
   getTags