Merge pull request #7 from iamsharzil/image-https

changed link from http to https

Author: iamsharzil

components/Card.tsx

@@ -13,6 +13,7 @@ import { IInitialState } from 'interfaces/state';
 
 // import animationData from 'lottie/loader.json';
 import successAnimation from 'lottie/success.json';
+import { cacheRemove } from 'utils/cacheRemove';
 
 type Inputs = {
   quantity: Number;
@@ -67,6 +68,7 @@ const Card: FC<IProduct> = (product) => {
   };
 
   const imageUrl = product.image.url;
+  const httpsImage = cacheRemove(imageUrl);
   const price = product.price_range.maximum_price.final_price.value;
 
   if (product.stock_status === 'OUT_OF_STOCK') {
@@ -90,7 +92,7 @@ const Card: FC<IProduct> = (product) => {
         <div className='card-body'>
           <h5 className='card-title'>{product.name}</h5>
         </div>
-        <img src={imageUrl} className='img-fluid' alt={product.name} />
+        <img src={httpsImage} className='img-fluid' alt={product.name} />
         <div className='card-body text-center'>
           <p className='card-text'>
             <strong>Rs. {price}</strong>{' '}

components/Cart/CartItems.tsx

@@ -2,6 +2,7 @@ import { TCart } from 'interfaces/cart';
 import { useSelector } from 'react-redux';
 import { IInitialState } from 'interfaces/state';
 import { motion } from 'framer-motion';
+import { cacheRemove } from 'utils/cacheRemove';
 
 type Inputs = {
   cart_item_id: string;
@@ -32,7 +33,7 @@ const CartItems = ({
     (state: IInitialState) => state
   );
 
-  let {
+  const {
     product: {
       name,
       price_range: { maximum_price },
@@ -43,19 +44,17 @@ const CartItems = ({
     },
   } = cartItem;
 
-  let final_price = maximum_price.final_price.value;
-  let total_price = value;
+  const final_price = maximum_price.final_price.value;
+  const total_price = value;
+
+  const httpsImage = cacheRemove(cartItem.product.thumbnail.url);
 
   return (
     <motion.tr key={cartItem.id} variants={item}>
       <td className='col-sm-8 col-md-6'>
         <div className='media'>
           <a className='thumbnail pull-left' href='#'>
-            <img
-              className='media-object'
-              width={60}
-              src={cartItem.product.thumbnail.url}
-            />
+            <img className='media-object' width={60} src={httpsImage} />
           </a>
           <div className='media-body ml-3 pt-4'>
             <h6 className='media-heading'>{name}</h6>

utils/cacheRemove.tsx

@@ -0,0 +1,5 @@
+const regexCacheRemove = /\/cache\/[a-z0-9]*\//g;
+
+export const cacheRemove = (url: string) => {
+  return url.replace('http:', 'https:').replace(regexCacheRemove, '/');
+};