Product images add to Home page

mwlt68 · Mar 11, 2023 · 9d45020 · 9d45020
1 parent c8fdb34
commit 9d45020
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -22,6 +22,7 @@ import {
 } from "../../utils/consts/NavigationConsts";
 import { AdvancedSideBar } from "../../components/ui/side-bar/AdvancedSideBar";
 import { UrlHelper } from "../../utils/helpers/UrlHelper";
+import { ImageHelper } from "../../utils/helpers/ImageHelper";
 
 export default function HomePage() {
   const navigate = useNavigate();
@@ -109,20 +110,20 @@ export default function HomePage() {
         }}
       >
         <Card>
-          <ProductCardMedia />
+          <ProductCardMedia product={props.product} />
           <ProductCardContent product={props.product} />
           <ProductCardAction productPrice={props.product.price} />
         </Card>
       </CardActionArea>
     );
   }
 
-  function ProductCardMedia() {
+  function ProductCardMedia(props: { product: ProductResultModel }) {
     return (
       <CardMedia
         component="img"
         height={styles.productImage.height}
-        image="https://img-lcwaikiki.mncdn.com/mnresize/1024/-/pim/productimages/20222/6012505/v1/l_20222-w2cg02z8-rfh-96-81-93-190_a.jpg"
+        image= {ImageHelper.Get( props.product.image)}
         sx={styles.productCardImage}
       />
     );

diff --git a/src/pages/product/ProductPage.tsx b/src/pages/product/ProductPage.tsx
@@ -26,6 +26,7 @@ import {
   NavigationConsts,
   QueryParameterConsts,
 } from "../../utils/consts/NavigationConsts";
+import { ImageHelper } from "../../utils/helpers/ImageHelper";
 import { styles } from "./ProductPageStyle";
 
 export default function ProductPage() {
@@ -171,9 +172,7 @@ export default function ProductPage() {
   const getImageUrl = (): string | undefined => {
     if (pickedImage != null) return URL.createObjectURL(pickedImage);
     else
-      return product.image != null && product.image.length > 0
-        ? "data:image/png;base64," + product.image
-        : undefined;
+      return ImageHelper.Get(product.image);
   };
 
   return (

diff --git a/src/utils/helpers/ImageHelper.ts b/src/utils/helpers/ImageHelper.ts
@@ -0,0 +1,7 @@
+export class ImageHelper {
+  static Get(image: undefined | []) {
+    return image != null && image.length > 0
+      ? "data:image/png;base64," + image
+      : undefined;
+  }
+}