sort by category

src/components/CollectionList/CollectionList.jsx

                 <Typography variant="h4" gutterBottom>
                   {name}
                 </Typography>
-                <Button onClick={()=>{ window.location.href = "/products" }} variant="contained" color="primary">
+                <Button onClick={()=>{ 
+                  sessionStorage.removeItem('amber-select-category')
+                  sessionStorage.setItem('amber-select-collection', JSON.stringify({id, name, src}))
+                  window.location.href = "/products" 
+                }} variant="contained" color="primary">
                   SHOP NOW
                 </Button>
               </Box>

src/components/Filter/Filter.jsx

         show:1,
     })
 
-
-
     const handleChange = (event) => {
         setInput({...input, [event.target.name]:event.target.value });
     };

src/components/Navbar/Navbar.jsx

       >
 
         {/* Conditionally render the Header */}
-        {showHeader && <Header />}
+        {/* {showHeader && <Header />} */}
 
         <Toolbar sx={{
           px: {
             {navItem.map(({ title, link }) => (<Button
               color="inherit"
               onClick={() => {
+
+                sessionStorage.setItem('amber-select-product-type',title.toLocaleLowerCase())
                 window.location.href = link;
+              
               }}
             >
               {title}
           {/* Right Section: Search and Profile */}
           <Box sx={{ display: "flex", alignItems: "center", gap: 1.2, ml: "auto" }}>
 
-            <FormControl
+            {/* <FormControl
               sx={{
                 display: {
                   xs: "none",
                 <LanguageSelectItem value="Malay">Malay</LanguageSelectItem>
                 <LanguageSelectItem value="Chinese">Chinese</LanguageSelectItem>
               </LanguageSelect>
-            </FormControl>
+            </FormControl> */}
 
             <IconButton color="inherit">
               <SearchIcon sx={{ color: "white" }} />
               <LocalMallIcon color="action" sx={{ color: "white" }} />
             </Badge>
 
-            <IconButton color="inherit">
+            {/* <IconButton color="inherit">
               <AccountCircleIcon sx={{ color: "white" }} />
-            </IconButton>
+            </IconButton> */}
           </Box>
 
         </Toolbar>

src/components/ProductList/ProductList.jsx

-import React, { useEffect } from 'react';
-import { Box, Typography, Button } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Box, Typography, Button, FormControl, Select, MenuItem, InputBase } from '@mui/material';
 import Grid from '@mui/material/Grid2';
-
+import { styled } from "@mui/material";
 //REDUX
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchProducts } from '../../redux/slices/productSlice';
+import { fetchProducts, fetchProductsByCollection } from '../../redux/slices/productSlice';
+
+//UTIL FUNCTION
+function getAllTags(data) {
+  const products = data || [];
+  const allTags = products.flatMap(product => product.tags);
+  const uniqueTags = [...new Set(allTags)];
+  return uniqueTags;
+}
+
+const BootstrapInput = styled(InputBase)(({ theme }) => ({
+  'label + &': {
+    marginTop: theme.spacing(3),
+  },
+  '& .MuiInputBase-input': {
+    position: 'relative',
+    backgroundColor: "#2E2E2E",
+    border: '1px solid #ced4da',
+    color: "#FFF",
+    fontSize: 13,
+    padding: '5px 0',
+    paddingRight: '50px !important',
+    paddingLeft: "10px",
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    '&:focus': {
+      borderRadius: 4,
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+  '& .MuiSvgIcon-root': {
+    color: "#FFF !important"
+  },
+}));
 
 const ProductList = ({ size = 99999 }) => {
 
-  const products = useSelector((state) => state.products.products.data)
+  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 dispatch = useDispatch();
 
+  //filter
+  const [category, setCategory] = useState('all');
+  const [sort, setSort] = useState('all')
+
   useEffect(() => {
 
-    dispatch(fetchProducts())
+    // if user come from select collection
+    if (sessionStorage.getItem('amber-select-collection')) {
+
+      let { id } = JSON.parse(sessionStorage.getItem('amber-select-collection'))
+      dispatch(fetchProductsByCollection({ collectionId: id }))
+
+    } else if (sessionStorage.getItem('amber-select-category')) {
+
+    }
 
   }, [])
 
   useEffect(() => {
-    if(products) 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)
+
   }, [products])
 
+
+  useEffect(() => {
+
+    if (products?.length > 0) {
+
+      let productType = sessionStorage.getItem('amber-select-product-type')
+
+      let newFilteredProducts = products.filter(
+        (product) => {
+
+          if(category == 'all'){
+            return product.productType === productType
+          } else {
+            return product.productType === productType && product.tags.includes(category)
+          }
+
+        }
+      );
+
+      setFilteredProducts(newFilteredProducts)
+
+    }
+
+  }, [category])
+
+
+
+  useEffect(() => {
+    if (products) console.log(products)
+  }, [products])
+
+
+
+
+  const handleChange = (event) => {
+    //setInput({ ...input, [event.target.name]: event.target.value });
+  };
+
   const renderProduct = (id, img_url, title, collection, price, currency, extra_desc) => {
 
     return (
               width: '100%',
               aspectRatio: '3 / 4',
               objectFit: 'cover',
-              objectPosition:'top center'
+              objectPosition: 'top center'
             }}
           />
 
   }
 
   return (
-    <Box sx={{ mb: 5 }}>
-      <Grid container spacing={1} columns={12}>
-        {products.map((product, index) => {
-          
-          let {id, title, compareAtPriceRange, images, collections} = product
-          let price = compareAtPriceRange.maxVariantPrice.amount
-          let currency = compareAtPriceRange.maxVariantPrice.currencyCode
-          let img_url = images.nodes[0].url
-          let collection_name = collections.nodes[0]?.title
-          
-          // ID
-          const parts = id.split('/');
-          let prodID = parts[parts.length - 1];
-
-
-          if (index < size) {
-            return renderProduct(prodID, img_url, title, collection_name, price, currency, "" )
-          }
+    <>
+      {/* FILTER */}
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          backgroundColor: "background.black",
+          color: "white",
+          px: 2, // Add padding around the box
+          my: 4
+        }}
+      >
+        {/* Left Side: Page Title */}
+        <Typography variant="body2">
+          {`${filteredProducts.length} Item`}
+        </Typography>
+
+        {/* Right Side: Option Inputs */}
+        <Box sx={{ display: "flex", gap: 2 }}>
+
+          <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Filter By Category</Typography>
+            <Select
+              value={category}
+              onChange={(event) => {
+                setCategory(event.target.value);
+              }}
+              input={<BootstrapInput />}
+              name="type"
+            >
+              <MenuItem value={'all'}>All</MenuItem>
+              {categoryFilterOption?.map((data) => (<MenuItem value={data}>{data}</MenuItem>))}
+            </Select>
+          </FormControl>
+
+          <FormControl sx={{ m: 1, display: { xs: "none", sm: "none", md: "flex" }, flexDirection: "row" }} variant="standard">
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Sort By</Typography>
+            <Select
+              value={sort}
+              onChange={handleChange}
+              input={<BootstrapInput />}
+              name="sort"
+            >
+              <MenuItem defaultValue value={''}>All</MenuItem>
+              <MenuItem defaultValue value={'all'}>Newest</MenuItem>
+
+            </Select>
+          </FormControl>
 
-        })}
-      </Grid>
-    </Box>
+        </Box>
+      </Box>
+
+      {/* LIST */}
+      <Box sx={{ mb: 5 }}>
+        <Grid container spacing={1} columns={12}>
+          {filteredProducts.map((product, index) => {
+
+            let { id, title, compareAtPriceRange, images, collections } = product
+            let price = compareAtPriceRange.maxVariantPrice.amount
+            let currency = compareAtPriceRange.maxVariantPrice.currencyCode
+            let img_url = images.nodes[0].url
+            let collection_name = collections.nodes[0]?.title
+
+            // ID
+            const parts = id.split('/');
+            let prodID = parts[parts.length - 1];
+
+
+            if (index < size) {
+              return renderProduct(prodID, img_url, title, collection_name, price, currency, "")
+            }
+
+          })}
+        </Grid>
+      </Box>
+    </>
   );
 };
 

src/pages/Collection.jsx

 const Collection = () => {
 
   let { pid } = useParams();
-  const dispatch = useDispatch();
-
-  useEffect(()=>{
-
-   //dispatch(fetchProducts(250, 'created_at',  `product_type:${pid}`))
-
-  }, [])
 
   return (
     <>

src/pages/Products/index.jsx

-import React from 'react'
+import {useEffect, useState} from 'react'
 import PageTitle from '../../components/PageTitle'
 import Filter from '../../components/Filter'
 import ProductList from '../../components/ProductList'
 import Feature from '../../components/Feature'
 
 const Products = () => {
+
+  const [title, setTitle] = useState('')
+  const [image, setImage] = useState('')
+
+  useEffect(()=>{
+    
+    // if user come from select collection
+    if(sessionStorage.getItem('amber-select-collection')){
+
+      let { id, name, src } = JSON.parse(sessionStorage.getItem('amber-select-collection'))
+      setTitle(name)
+      setImage(src)
+
+    }else if(sessionStorage.getItem('amber-select-category')){
+
+      let categoryData = JSON.parse(sessionStorage.getItem('amber-select-category'))
+
+    }else{
+      window.location.href = '/'
+    }
+
+  },[])
+
   return (
     <>
-      <PageTitle />
+      <PageTitle title={title} image={image} />
       <Box sx={{
         px: {
           xs: 2,
           lg: 10
         }
       }}>
-        <Filter />
         <ProductList />
         <SocialMedia />
         <Feature />

src/redux/slices/productSlice.js

   }
 )
 
+export const fetchProductsByCollection = createAsyncThunk(
+  'product/fetchProductsByCollection',
+  async ({collectionId}) => {
+    
+    const response = await ProductService.getProductsByCollection(collectionId)
+    return response
+
+  }
+)
+
 export const fetchProductsHistory = createAsyncThunk(
   'product/fetchProductsHistory',
   async (productIDList) => {
         state.product.data = {};
         state.product.error = action.error.message;
       })
+      .addCase(fetchProductsByCollection.pending, (state) => {
+        state.products.status = 'loading';
+        state.products.error = null;
+      })
+      .addCase(fetchProductsByCollection.fulfilled, (state, action) => {
+        state.products.status = 'succeeded';
+        state.products.data = action.payload
+      })
+      .addCase(fetchProductsByCollection.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

     },
   });
 
-  debugger
-
   return data.products.nodes
 
 }
 
 }
 
+const getProductsByCollection = async (collectionId) => {
+
+  const query = `{
+    collection(id: "${collectionId}") {
+      products(first: 250) {
+        nodes {
+          id
+          title
+          productType
+          tags
+          compareAtPriceRange {
+            maxVariantPrice {
+              amount
+              currencyCode
+            }
+            minVariantPrice {
+              amount
+              currencyCode
+            }
+          }
+          images(first: 4) {
+            nodes {
+              src
+              url
+            }
+          }
+          collections(first: 55) {
+            nodes {
+              title
+            }
+          }
+        }
+      }
+    }
+  }`
+
+  const { data, errors, extensions } = await client.request(query, {
+    variables: {},
+  });
+
+  return data.collection.products.nodes
+}
+
 const getProductTypes = async () => {
   const query = `{
     productTypes(first: 250) {
 
 }
 
+
+
 const ProductService = {
   getProducts,
   getProduct,
+  getProductsByCollection,
   getProductTypes,
   getCollections
 }