viewed prodyct

src/components/hooks/useLocalStorage.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+// Hook
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      // Get from local storage by key
+      const item = localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      // console.log(error);
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      // console.log(error);
+    }
+  };
+  return [storedValue, setValue] as const;
+}

src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx

@@ -3,7 +3,6 @@ import ProductImgs from './components/ProductImgs/ProductImgs'
 import ProductInfo from './components/ProductInfo/ProductInfo'
 import s from './ProductInfoDetail.module.scss'
 import { Product } from '@commerce/types/product'
-import { Collection } from '@framework/schema'
 
 interface Props {
     productDetail: Product,

src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx

@@ -1,5 +1,5 @@
+import { Collection } from '@commerce/types/collection';
 import { ProductCard } from '@commerce/types/product';
-import { Collection } from '@framework/schema';
 import React, { useMemo } from 'react';
 import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
 import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils';

src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

@@ -1,13 +1,28 @@
-import React from 'react';
+import { Product } from '@commerce/types/product';
+import React, { useEffect, useState } from 'react';
 import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
-import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard';
+import { LOCAL_STORAGE_KEY } from 'src/utils/constanst.utils'
+import { normalizeProductCard } from '@framework/utils/normalize';
+import { useLocalStorage } from 'src/components/hooks/useLocalStorage';
+interface Props {
+}
+const ViewedProducts = ({}:Props) => {
+    const [data, setData] = useState<ProductCardProps[]>([])
+    const [viewedProduct] = useLocalStorage<Product[]>(LOCAL_STORAGE_KEY.VIEWEDPRODUCT, []);
 
-const ViewedProducts = () => {
+    useEffect(() => {
+        setData(viewedProduct.map((p)=>normalizeProductCard(p)))
+    }, [viewedProduct])
+    
+    if (data.length>0){
+        return <div></div>
+    }
     return (
         <ListProductWithInfo
             title="viewed Products"
             subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-            data={PRODUCT_DATA_TEST}
+            data={data}
             hasBorderBottomMobile={true}
         />
     );

src/utils/constanst.utils.ts

@@ -44,7 +44,8 @@ export const ACCOUNT_TAB = {
 }
 
 export const LOCAL_STORAGE_KEY = {
-  TOKEN: 'token'
+  TOKEN: 'token',
+  VIEWEDPRODUCT: "viewed-product"
 }
 
 export const QUERY_SPLIT_SEPERATOR = ','

src/utils/funtion.utils.ts

@@ -1,6 +1,7 @@
+import { Collection } from '@commerce/types/collection';
 import { Facet } from "@commerce/types/facet";
 import { Product, ProductCard, ProductOption, ProductOptionValues } from "@commerce/types/product";
-import { Collection, FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
+import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
 import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, FACET, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
 import { PromiseWithKey, SelectedOptions, SortOrder } from "./types.utils";