done product section

API/shopify/storefront/authentication.js

@@ -1,21 +0,0 @@
-// import {createStorefrontApiClient} from '@shopify/storefront-api-client';
-
-// const client = createStorefrontApiClient({
-//   storeDomain: 'http://amberdevstore.myshopify.com',
-//   apiVersion: '2024-10',
-//   publicAccessToken: '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',
-// });
-
-const adminApiClient = new shopify.clients.Rest({session});
-const storefrontTokenResponse = await adminApiClient.post({
-  path: 'storefront_access_tokens',
-  type: DataType.JSON,
-  data: {
-    storefront_access_token: {
-      title: 'This is my test access token',
-    },
-  },
-});
-
-const storefrontAccessToken =
-  storefrontTokenResponse.body['b3e24842a76e27e1d87206daededdab0']['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'];

API/shopify/storefront/product/getProduct.js

@@ -1,57 +0,0 @@
-const storefrontClient = require('../storefrontClient');
-
-const defaultQuery = 'status:active, product_type:clothing, product_categroy:dresses'; // Replace to see custom result
-
-const defaultResult = 10; // Replace to change the number of result
-
-const defaultSortBy = 'TITLE'; // Replace with CREATED_AT if need to sort by date, current value is for name 
-
-const getProduct = async ( maxResults = defaultResult, sortBy = defaultSortBy, customQuery = defaultQuery ) => {
-    try {
- 
-        const query = `{
-            products (first: ${maxResults}, sortKey: ${sortBy}, query: ${customQuery}) {
-                edges {
-                    node {
-                        id
-                        title
-                        status
-                        productType
-                        comparisonAtPriceRange {
-                            minVariantPrice {
-                                amount
-                                currencyCode
-                            }
-                            maxVariantPrice {
-                                amount
-                                currencyCode
-                            }
-                        }
-                        variants(first: 5) {
-                            edges {
-                                node {
-                                    id
-                                    title
-                                    price
-                                }
-                            }
-                        }
-                    }
-                }
-                pageInfo {
-                        hasNextPage
-                        hasPreviousPage
-                }
-            }
-        }`;
-
-        const products = await storefrontClient.query({ data: query });
-
-        return products;
-    } catch (error) {
-        throw error;
-    }
-};
-
-// Example
-// getProduct(5, CREATED_AT, 'product_type:clothing'); 

API/shopify/storefront/storefrontClient.js

@@ -1,13 +0,0 @@
-const shopify = require('@shopify/shopify-api'); // Adjust import based on your environment
-
-// Load the access token and shop
-const storefrontAccessToken = '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'; // Replace with your actual access token
-const shop = 'amberdevstore.myshopify.com'; // Replace with your actual shop domain
-
-// Create and export the storefront client
-const storefrontClient = new shopify.clients.Storefront({
-  domain: shop,
-  storefrontAccessToken,
-});
-
-module.exports = storefrontClient;

API/shopify/storefront/to_do_list.txt

@@ -1,4 +0,0 @@
-1. product tag
-2. product sort by date and name
-3. product suggested ( tagging?? )
-4. buang product replace with new product

src/components/Filter/Filter.jsx

@@ -7,6 +7,7 @@ import MenuItem from "@mui/material/MenuItem";
 import InputLabel from "@mui/material/InputLabel";
 import { InputBase } from "@mui/material";
 import { styled } from "@mui/material";
+import { useSelector } from "react-redux";
 
 const BootstrapInput = styled(InputBase)(({ theme }) => ({
     'label + &': {
@@ -35,6 +36,8 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
 
 const Filter = () => {
 
+    const products = useSelector((state) => state.products.products.data)
+
     const [input, setInput] = useState({
         type:0,
         sort:0,
@@ -62,7 +65,7 @@ const Filter = () => {
         >
             {/* Left Side: Page Title */}
             <Typography variant="body2">
-                13 Item
+                {`${products.length} Item`}
             </Typography>
 
             {/* Right Side: Option Inputs */}
@@ -99,21 +102,6 @@ const Filter = () => {
                     </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"}}>Show</Typography>
-                    <Select
-                        labelId="demo-customized-select-label"
-                        id="demo-customized-select"
-                        value={input.show}
-                        onChange={handleChange}
-                        input={<BootstrapInput />}
-                        name="show"
-                    >
-                        <MenuItem value={0}>All</MenuItem>
-                        <MenuItem value={1}>Red</MenuItem>
-                    </Select>
-                </FormControl>
-
             </Box>
         </Box>
     );

src/components/ProductHistoryList/ProductHistoryList.jsx

@@ -1,104 +1,87 @@
-import {useState} from 'react';
+import { useState, useEffect } from 'react';
 import { Box, Typography, IconButton, Pagination } from '@mui/material';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchProductsHistory } from '../../redux/slices/productSlice';
 
 import Grid from '@mui/material/Grid2';
 
 const ProductHistoryList = () => {
 
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 10;
-  const totalPages = 5;
-
-  const handleChangePage = (event, value) => {
-    setCurrentPage(value);
-  };
-
-  const handlePrevious = () => {
-    setCurrentPage((prev) => (prev > 1 ? prev - 1 : 1));
-  };
-
-  const handleNext = () => {
-    setCurrentPage((prev) => (prev < totalPages ? prev + 1 : totalPages));
-  };
-
-  const images = [
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+  const products = useSelector((state) => state.products.productsHistory.data) // state.store.initialState.data
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+
+    if (localStorage.getItem('amber-product-history')) {
+
+      let productIDList = JSON.parse(localStorage.getItem('amber-product-history'))
+
+      dispatch(fetchProductsHistory(productIDList))
+
     }
-  ];
+
+  }, [])
+
+  useEffect(()=>{ console.log(products) }, [products])
+
+  const renderProduct = (id, img_url, title, price, currency) => {
+
+    return (
+      <Grid item size={{ xs: 12, md: 2 }}>
+        <Box
+          onClick={()=>{ window.location.href = `/products/${id}` }}
+          sx={{
+            overflow: 'hidden',
+            position: 'relative',
+            cursor: 'pointer'
+          }}
+        >
+          <img
+            src={img_url}
+            alt={title}
+            style={{
+              width: '100%',
+              aspectRatio: '4 / 4',
+              objectPosition:"top center",
+              objectFit: 'cover',
+            }}
+          />
+
+          <Box sx={{ py: 5 }}>
+            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+              {title}
+            </Typography>
+            <Typography variant="h6" >
+              {`${currency} ${parseFloat(price).toFixed(2)}`}
+            </Typography>
+          </Box>
+        </Box>
+      </Grid>
+    )
+
+  }
+
 
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {images.map((image, index) => (<Grid item size={{xs:12, md:2}} key={index}>
-          <Box
-            sx={{
-              overflow: 'hidden',
-              position: 'relative'
-            }}
-          >
-            <img
-              src={image.url}
-              alt={image.title}
-              style={{
-                width: '100%',
-                aspectRatio: '4 / 4',
-                objectFit: 'cover',
-              }}
-            />
-
-            <Box sx={{ py: 5 }}>
-              <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
-                {image.title}
-              </Typography>
-              <Typography variant="h6" >
-                {`RM ${image.price}`}
-              </Typography>
-            </Box>
-          </Box>
-        </Grid>))}
+        {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
+
+            // ID
+            const parts = id.split('/');
+            let prodID = parts[parts.length - 1];
+
+            return renderProduct(prodID, img_url, title, price, currency)
+
+        })}
       </Grid>
-      {/* Pagination Controls */}
-      <Box
+      {/* Pagination Controls - DON'T REMOVE, CAUSE IT IS STILL HAVEN'T BEEN DECIDED IF WE NEED TO HAVA PAGINATION OR NOT*/}
+      {/* <Box
         sx={{
           display: 'flex',
           justifyContent: 'center',
@@ -112,7 +95,7 @@ const ProductHistoryList = () => {
           onChange={handleChangePage}
           sx={{ mx: 2 }}
         />
-      </Box>
+      </Box> */}
     </Box>
   );
 };

src/components/ProductSuggestion/ProductSuggestion.jsx

@@ -1,71 +1,77 @@
-import React from 'react';
+import {useState, useEffect} from 'react';
 import { Box, Typography, Button } from '@mui/material';
+import { useSelector } from 'react-redux';
 
 import Grid from '@mui/material/Grid2';
 
 const ProductSuggestion = () => {
 
-  const images = [
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+  const [suggestProducts, setSuggestProducts] = useState([]);
+  const products = useSelector((state) => state.products.productsHistory.data);
+
+  useEffect(() => {
+    if (products && products.length > 0) {
+      const getRandomProducts = (arr, num) => {
+        const shuffled = [...arr].sort(() => 0.5 - Math.random());
+        return shuffled.slice(0, num);
+      };
+
+      const randomProducts = getRandomProducts(products, 4); // Select 4 random elements
+      setSuggestProducts(randomProducts);
     }
-  ];
+  }, [products]);
+
+  const renderProduct = (id, img_url, title, price, currency) => {
+    return (
+      <Grid item size={{ xs: 12, md: 3 }}>
+        <Box
+          onClick={() => { window.location.href = `/products/${id}` }}
+          sx={{
+            overflow: 'hidden',
+            position: 'relative'
+          }}
+        >
+          <img
+            src={img_url}
+            alt={title}
+            style={{
+              width: '100%',
+              aspectRatio: '4 / 4',
+              objectPosition:"top center",
+              objectFit: 'cover',
+            }}
+          />
+
+          <Box sx={{ py: 5 }}>
+            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+              {title}
+            </Typography>
+            <Typography variant="h6" >
+              {`${currency} ${parseFloat(price).toFixed(2)}`}
+            </Typography>
+          </Box>
+        </Box>
+      </Grid>
+    )
+  }
+
 
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {images.map((image, index) => (<Grid item size={{xs:12, md:3}} key={index}>
-          <Box
-            sx={{
-              overflow: 'hidden',
-              position: 'relative'
-            }}
-          >
-            <img
-              src={image.url}
-              alt={image.title}
-              style={{
-                width: '100%',
-                aspectRatio: '4 / 4',
-                objectFit: 'cover',
-              }}
-            />
+        {suggestProducts.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
 
-            <Box sx={{ py: 5 }}>
-              <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
-                {image.title}
-              </Typography>
-              <Typography variant="h6" >
-                {`RM ${image.price}`}
-              </Typography>
-            </Box>
-          </Box>
-        </Grid>))}
+          // ID
+          const parts = id.split('/');
+          let prodID = parts[parts.length - 1];
+
+          return renderProduct(prodID, img_url, title, price, currency)
+        })}
       </Grid>
     </Box>
   );

src/pages/Products/Product.jsx

@@ -17,11 +17,33 @@ const Product = () => {
   let { pid } = useParams();
   const product = useSelector((state) => state.products.product.data)
   const dispatch = useDispatch();
+  
 
   useEffect(() => {
 
     dispatch(fetchProduct(pid))
 
+    if(localStorage.getItem('amber-product-history')){
+
+      let productHistory = JSON.parse(localStorage.getItem('amber-product-history'))
+      
+      if(productHistory.includes(pid)) return
+
+      productHistory = [pid, ...productHistory]
+      
+      productHistory = productHistory.slice(0, 6)
+  
+      productHistory = JSON.stringify(productHistory)
+
+      localStorage.setItem('amber-product-history', productHistory)
+    } else {
+
+      let productHistory = [pid]
+      productHistory = JSON.stringify(productHistory)
+      localStorage.setItem('amber-product-history', productHistory)
+
+    }
+
   }, [])
 
   return (

src/redux/slices/productSlice.js

@@ -12,7 +12,11 @@ const initialState = {
       status: 'idle',
       error: null,
     },
-    productsHistory:[],
+    productsHistory:{
+      data: [],
+      status: 'idle',
+      error: null,
+    },
     productsSelected:[],
     ProductsSuggestion:[]
 };
@@ -36,6 +40,17 @@ export const fetchProducts = createAsyncThunk(
   }
 )
 
+export const fetchProductsHistory = createAsyncThunk(
+  'product/fetchProductsHistory',
+  async (productIDList) => {
+
+    const idsQuery = productIDList.map(id => `id:${id}`).join(" OR ");
+    const response = await ProductService.getProducts(6, "TITLE", idsQuery)
+    return response
+
+  }
+)
+
 export const productSlice = createSlice({
   name: 'product',
   initialState,
@@ -67,6 +82,19 @@ export const productSlice = createSlice({
         state.product.data = {};
         state.product.error = action.error.message;
       })
+      .addCase(fetchProductsHistory.pending, (state) => {
+        state.productsHistory.status = 'loading';
+        state.productsHistory.error = null;
+      })
+      .addCase(fetchProductsHistory.fulfilled, (state, action) => {
+        state.productsHistory.status = 'succeeded';
+        state.productsHistory.data = action.payload
+      })
+      .addCase(fetchProductsHistory.rejected, (state, action) => {
+        state.productsHistory.status = 'failed';
+        state.productsHistory.data = [];
+        state.productsHistory.error = action.error.message;
+      })
   }
 });