Added multi-image support (#35)

* Added multi-image support

* Addressing PR comments

Author: dusanradovanovic

src/Product.scss

@@ -23,6 +23,40 @@
 
     #{$block}__imgcontainer {
       flex: 0 0 $imgSize;
+      position: relative;
+
+      #{$block}__img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      #{$block}__previmagebtn, #{$block}__nextimagebtn {
+        position: absolute;
+        color: hsl(0, 0, 30%);
+        background-color: hsla(0, 0, 100%, 0.3);
+        top: 50%;
+        margin-top: -22px;
+        width: 44px;
+        height: 44px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: hsla(0, 0, 100%, 0.6);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 1px hsl(0, 0, 80%);
+        }
+      }
+
+      #{$block}__previmagebtn {
+        left: 10px;
+      }
+
+      #{$block}__nextimagebtn {
+        right: 10px;
+      }
     }
 
     #{$block}__details {

src/Product.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useResolve } from './hooks';
+import { useResolve, useProductImages } from './hooks';
 import { loadProductBySlug } from './service';
 import { CompareCheck } from './CompareCheck';
-import { ProductMainImage } from './ProductMainImage';
 import { useTranslation, useCurrency } from './app-state';
 import { isProductAvailable } from './helper';
 
@@ -18,17 +17,46 @@ export const Product: React.FC = () => {
   const { productSlug } = useParams<ProductParams>();
   const { t, selectedLanguage } = useTranslation();
   const { selectedCurrency } = useCurrency();
+
   const [product] = useResolve(
     async () => loadProductBySlug(productSlug, selectedLanguage, selectedCurrency),
     [productSlug, selectedLanguage, selectedCurrency]
   );
 
+  const productImageHrefs = useProductImages(product);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const isPrevImageVisible = currentImageIndex > 0;
+  const isNextImageVisible = currentImageIndex < (productImageHrefs?.length ?? 0) - 1;
+  const productBackground = product?.background_color ?? '';
+
+  const handlePrevImageClicked = () => {
+    setCurrentImageIndex(currentImageIndex - 1);
+  };
+
+  const handleNextImageClicked = () => {
+    setCurrentImageIndex(currentImageIndex + 1);
+  };
+
   return (
     <div className="product">
       {product && (
         <div className="product__maincontainer">
           <div className="product__imgcontainer">
-            <ProductMainImage product={product} size={400} />
+            {productImageHrefs.length > 0 && (
+              <>
+                <img className="product__img" src={productImageHrefs?.[currentImageIndex]} alt={product.name} style={{ backgroundColor: productBackground }} />
+                {isPrevImageVisible && (
+                  <button className="product__previmagebtn" aria-label={t('previous-image')} onClick={handlePrevImageClicked}>
+                    <svg fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 19l-7-7 7-7"></path></svg>
+                  </button>
+                )}
+                {isNextImageVisible && (
+                  <button className="product__nextimagebtn" aria-label={t('next-image')} onClick={handleNextImageClicked}>
+                    <svg fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 5l7 7-7 7"></path></svg>
+                  </button>
+                )}
+              </>
+            )}
           </div>
           <div className="product__details">
             <h1 className="product__name">

src/hooks.ts

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Product, loadImageHref } from './service';
 
 type FetchHookResult<R> = [
   R | undefined,
@@ -34,3 +35,48 @@ export function useResolve<R>(promiseFn: () => Promise<R> | undefined, deps?: Re
 
   return result;
 }
+
+export function useProductImages(product: Product | undefined) {
+  const [productImageHrefs, setProductImageHrefs] = useState<string[]>([]);
+
+  useEffect(() => {
+    let isCurrent = true;
+    setProductImageHrefs([]);
+
+    (async () => {
+      // Load main image first so it can be presented right away and then load additional files one by one
+      const result: string[] = [];
+      const mainImageId = product?.relationships?.main_image?.data?.id;
+      if (mainImageId) {
+        const mainImageHref = await loadImageHref(mainImageId);
+
+        if (!isCurrent) {
+          return;
+        }
+
+        if (mainImageHref) {
+          result.push(mainImageHref);
+          setProductImageHrefs(result);
+        }
+      }
+
+      const files = product?.relationships?.files?.data ?? [];
+      for (const file of files) {
+        const imageHref = await loadImageHref(file.id);
+
+        if (!isCurrent) {
+          return;
+        }
+
+        if (imageHref) {
+          result.push(imageHref);
+          setProductImageHrefs([...result]);
+        }
+      }
+    })();
+
+    return () => { isCurrent = false; };
+  }, [product]);
+
+  return productImageHrefs;
+}

src/locales/en.json

@@ -93,5 +93,7 @@
   "password-confirmation": "Password Confirmation",
   "submit": "Submit",
   "required": "Required",
-  "network-offline": "Network Offline"
+  "network-offline": "Network Offline",
+  "previous-image": "Previous image",
+  "next-image": "Next image"
 }

src/locales/fr.json

@@ -93,5 +93,7 @@
   "password-confirmation": "ÞÞåššŵŵöŕð ÇÇöñƒƒîŕɱɱåţţîöñ",
   "submit": "ŠŠûƀɱɱîţ",
   "required": "ŔŔéǫûîîŕéð",
-  "network-offline": "ÑÑéţŵŵöŕķ ÖÖƒƒļļîñé"
+  "network-offline": "ÑÑéţŵŵöŕķ ÖÖƒƒļļîñé",
+  "previous-image": "ÞÞŕéṽîîöûš îîɱååĝé",
+  "next-image": "ÑÑéẋţ îîɱååĝé"
 }

src/service.ts

@@ -63,6 +63,12 @@ export interface ProductBase {
         type: string;
       };
     };
+    files: {
+      data: {
+        type: 'file';
+        id: string;
+      }[];
+    };
     categories?: any;
     collections?: any;
     brands?: any;
@@ -182,18 +188,26 @@ export async function loadCategoryProducts(categoryId: string, pageNum: number,
 
 const imageHrefCache: { [key: string]: string } = {};
 
-export async function loadImageHref(imageId: string): Promise<string | undefined> {
-  if (!imageId) {
-    return undefined;
-  }
+const imageMimeTypes = [
+  'image/jpg',
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+];
 
+// Loads a file with a provided id and returns its url if it's mime type is an image or undefined otherwise
+export async function loadImageHref(imageId: string): Promise<string | undefined> {
   if (imageHrefCache[imageId]) {
     return imageHrefCache[imageId];
   }
 
   const moltin = MoltinGateway({ client_id: config.clientId });
   const result = await moltin.Files.Get(imageId);
 
+  if (imageMimeTypes.indexOf(result.data.mime_type) === -1) {
+    return undefined;
+  }
+
   imageHrefCache[imageId] = result.data.link.href;
 
   return result.data.link.href;