fix product details

src/components/ImageView/ImageView.jsx

 } from "@mui/material";
 import Grid from '@mui/material/Grid2';
 
+// Utility function to check if an object is empty
+const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
+
 const ImageView = () => {
 
   const product = useSelector((state) => state.products.product.data)
-  
+
   const [previewImage, setPreviewImage] = useState("");
   const [isZoomed, setIsZoomed] = useState(false);
 
-  useEffect(()=>{
+  useEffect(() => {
+
+    if (!isEmptyObject(product)) {
+      setPreviewImage(product?.images[0]?.url)
+    }
 
-    setPreviewImage(product?.images?.nodes[0]?.url)
-  
-  },[product])
+  }, [product])
 
   const handleThumbnailClick = (image) => {
     setPreviewImage(image);
                 width: "70%",
                 height: "auto",
                 display: "block",
-                margin:"auto auto"
+                margin: "auto auto"
               }}
             />
           </Box>
             sx={{
               display: "flex",
               flexDirection: "row",
-              justifyContent:"center",
+              justifyContent: "center",
               padding: 2,
-              gap:2
+              gap: 2
             }}
           >
-            {product?.images?.nodes?.map(({src, url}, index) => (
+            {product?.images?.map(({ src, url }, index) => (
               <IconButton
                 key={index}
                 onClick={() => handleThumbnailClick(url)}

src/components/Navbar/Navbar.jsx

 import BrushIcon from '@mui/icons-material/Brush';
 import LoyaltyIcon from '@mui/icons-material/Loyalty';
 import Grid from '@mui/material/Grid2';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchProducts } from "../../redux/slices/productSlice";
 import ProductService from "../../services/ProductService";
 
 import { Swiper, SwiperSlide } from 'swiper/react';
   const [showHeader, setShowHeader] = useState(true);
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
+  const dispatch = useDispatch();
 
   const cart = useSelector((state) => state.cart.cart)
   const products = useSelector((state) => state.products.products.data)
     list:[]
   })
 
+  useEffect(() => {
+
+    dispatch(fetchProducts())
+
+  }, [])
+
   useEffect(() => {
 
     if (!cart?.lines?.nodes) return // don't need to do anything if we have no cart data
               color="inherit"
               onClick={() => {
                 sessionStorage.setItem('amber-select-product-type', productType)
+                sessionStorage.removeItem('amber-select-collection')
                 window.location.href = `/products`;
               }}
               onMouseEnter={() => {
             </FormControl> */}
 
             <IconButton color="inherit">
-              <SearchIcon sx={{ color: "white" }} />
+              <SearchIcon/>
             </IconButton>
 
             <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
-              <LocalMallIcon color="action" sx={{ color: "white" }} />
+              <LocalMallIcon color="action" />
             </Badge>
 
             {/* <IconButton color="inherit">

src/components/ProductDetails/ProductDetails.jsx

 
   const [quantity, setQuantity] = useState(1)
   const [variantSelection, setVariantSelection] = useState({
-    price: 0,
-    currencyCode: "",
-    quantityAvailable: 0
+    amount: "0",
+    currencyCode: ""
   })
   const [variants, setVariants] = useState([])
   const [showLoader, setShowLoader] = useState(false)
     if (!isEmptyObject(product)) {
 
       console.log("Product: ", product)
-      debugger
+      
 
-      let productVariants = product?.variants?.nodes
+      let productVariants = product?.variants
 
       // get all variant type
       if (!productVariants || productVariants?.length == 0) return
-
+      
       // we want to get the title for each variant
       const uniqueOptions = {};
       productVariants.forEach(variant => {
+        
         variant.selectedOptions.forEach(option => {
           if (!uniqueOptions[option.name]) {
             uniqueOptions[option.name] = new Set();
   }, [variantSelection])
 
   const handleVariantClick = (name, value) => {
+
+    
+
     setVariantSelection({ ...variantSelection, [name]: value })
 
     setVariantSelection((prev) => {
 
       let newVariantSelection = { ...prev }
       newVariantSelection = { ...newVariantSelection, [name]: value }
-      let productVariants = product?.variants?.nodes
+      let productVariants = product?.variants
 
       // find variant price if it all match initial variant selection
       for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
         }
       }
 
+      debugger
+
 
       return newVariantSelection
 
           <Typography variant="h5" sx={{ fontWeight: "bold", mb: 2 }}>
             {product?.title}
           </Typography>
-          <Typography variant="body2" color="text.secondary">
+          {/* <Typography variant="body2" color="text.secondary">
             {product?.collections?.nodes[0]?.title}
-          </Typography>
+          </Typography> */}
 
 
           <Typography

src/components/ProductList/ProductList.jsx

       if (!sessionStorage.getItem('amber-select-collection')) {
         const collectionList = getAllCollection(newFilteredProducts);
         setCollectionFilterOption(collectionList);
-      }else{
+      } else {
         setCollection(sessionStorage.getItem('amber-select-collection'))
       }
 
 
         }
       );
-      
+
       // Collection
       newFilteredProducts = newFilteredProducts.filter(
         (product) => {
 
         }
       );
-      
+
 
       if (sort === "title") {
         newFilteredProducts = newFilteredProducts.sort((a, b) => a.title.localeCompare(b.title));
     //setInput({ ...input, [event.target.name]: event.target.value });
   };
 
-  const renderProduct = (id, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
+  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
 
     return (
-      <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
-
-        <Box
-          onClick={() => { window.location.href = `/products/${id}` }}
-          sx={{
-            overflow: 'hidden',
-            position: 'relative',
-            cursor: 'pointer'
-          }}
-
-        >
-          <img
-            src={img_url}
-            alt={title}
-            style={{
-              width: '100%',
-              aspectRatio: '3 / 4',
-              objectFit: 'cover',
-              objectPosition: 'top center'
+      <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
+
+        <a href={`/products/${handle}`} style={{textDecoration:"none",color:"#000"}}>
+          <Box
+            sx={{
+              overflow: 'hidden',
+              position: 'relative',
+              cursor: 'pointer'
             }}
-          />
 
-          {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+          >
+            <img
+              src={img_url}
+              alt={title}
+              style={{
+                width: '100%',
+                aspectRatio: '3 / 4',
+                objectFit: 'cover',
+                objectPosition: 'top center'
+              }}
+            />
+
+            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
             NEW
           </Button> */}
 
-          <Box sx={{ pb: 5, pt: 3, width: "80%" }}>
-            <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
-              {collection_name}
-            </Typography>
-            <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
-              {title}
-            </Typography>
-            <Typography variant="body1" sx={{ fontWeight: "400" }}>
-              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
-            </Typography>
-            <Typography variant="body1" sx={{ mt: 2 }}>
-              {extra_desc}
-            </Typography>
+            <Box sx={{ pb: 5, pt: 3, width: "80%" }}>
+              <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
+                {collection_name}
+              </Typography>
+              <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
+                {title}
+              </Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>
+                {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
+              </Typography>
+              <Typography variant="body1" sx={{ mt: 2 }}>
+                {extra_desc}
+              </Typography>
+            </Box>
           </Box>
-        </Box>
+        </a>
       </Grid>
     )
 
         <Grid container spacing={0.5} columns={12}>
           {filteredProducts.map((product, index) => {
 
-            let { id, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
 
             let minPrice = minVariantPrice.amount
             let minPriceCurrency = minVariantPrice.currencyCode
             let img_url = images[0].url
             let collection_name = collections[0].title
 
-            // ID
-            const parts = id.split('/');
-            let prodID = parts[parts.length - 1];
-
-
             if (index < size) {
-              return renderProduct(prodID, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")
+              return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")
             }
 
           })}

src/components/ProductSelected/ProductSelected.jsx

 
   const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const products = useSelector((state) => state.products.products.data)
-  const dispatch = useDispatch();
 
   const [filterProducts, setFilterProducts] = useState([])
 
-  useEffect(() => {
-
-    dispatch(fetchProducts())
-
-  }, [])
-
   useEffect(() => {
 
     if (products.length > 0) {

src/pages/Products/Product.jsx

   useEffect(() => {
 
     dispatch(fetchProduct(pid))
-
+    
     if(localStorage.getItem('amber-product-history')){
 
       let productHistory = JSON.parse(localStorage.getItem('amber-product-history'))
         <Grid size={{ xs: 12, md: 6 }}>
           <Box sx={{ paddingRight: 1 }}>
             <Box>
-              {/* <ImageView /> */}
+              <ImageView />
             </Box>
           </Box>
         </Grid>
           YOU MAY ALSO LIKE
         </Typography>
 
-        <ProductSuggestion />
+        {/* <ProductSuggestion /> */}
 
       </Box>
 
           RECENTLY VIEWED
         </Typography>
 
-        <ProductHistoryList />
+        {/* <ProductHistoryList /> */}
 
       </Box>
 

src/services/ProductService.js

   publicAccessToken: REACT_APP_ACCESS_TOKEN,
 });
 
-const getProducts = async (maxResults = 2) => {
+const getProducts = async () => {
 
   let hasNextCursor = true
   let products = []; 
       products(first: ${2}, ${cursor},  sortKey: CREATED_AT) {
         nodes {
           id
+          handle
           title
-          createdAt
+          createdAt 
           productType
           tags
           priceRange {
 
 }
 
-const getProduct = async (id = "") => {
+const getProduct = async (handle = "") => {
 
   const query = `{
-    product(id: "gid://shopify/Product/${id}") {
+    product(handle: "${handle}") {
       id
+      handle
       title
+      createdAt 
       productType
+      tags
+      descriptionHtml
       priceRange {
         minVariantPrice {
           amount
           url
         }
       }
-      collections(first: 55) {
+      collections(first: 10) {
         nodes {
           title
+          image {
+            url
+          }
         }
       }
       variants(first: 200) {
             amount
             currencyCode
           }
+          selectedOptions {
+            name
+            value
+          }
+          quantityAvailable
         }
       }
+      metafield(key: "selected", namespace: "custom") {
+        key
+        value
+      }
     }
   }`
 

src/utils/helpers.js

 
     return {
         id: product?.id || null,
+        handle: product?.handle || "",
         title: product?.title || "",
         createdAt: product?.createdAt,
-        collections: product?.collections?.nodes || [],
-        tags:product?.tags || [],
-        images: product?.images?.nodes || [],
+        collections: product?.collections?.nodes || null,
+        descriptionHtml: product?.descriptionHtml || "",
+        tags:product?.tags || null,
+        images: product?.images?.nodes || null,
         selected: (product?.metafield?.key == "selected") ? product?.metafield?.value == "true" : false, // cause I want to have a true false value, somehow BE return text value "true", thus == used to convert it to proper boolean value
         minVariantPrice: product?.priceRange?.minVariantPrice || {amount:0 , currencyCode:''},
         maxVariantPrice: product?.priceRange?.maxVariantPrice || {amount:0 , currencyCode:''},
         productType: product?.productType || null,
-        variants: product?.variants?.nodes || []
+        variants: product?.variants?.nodes || null
     }
 
 }