image

components/detail/DetailGallery.js

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ImageGallery from "react-image-gallery";
 import ImageGallery from "react-image-gallery";
 import Image from "next/image";
 import Image from "next/image";
+import { cleanImage } from "../../services/imageHandling";
 
 
 const DetailGallery = ({ activityById }) => {
 const DetailGallery = ({ activityById }) => {
+  console.log("activityById here", activityById);
 
 
-
-
-  const images = [
-    {
-      original: "/images/product-gallery/01.png",
-      thumbnail: "/images/product-gallery/01.png"
-    },
-    {
-      original: "/images/product-gallery/01.png",
-      thumbnail: "/images/product-gallery/01.png"
-    },
-    {
-      original: "/images/product-gallery/01.png",
-      thumbnail: "/images/product-gallery/01.png"
-    },
-    {
-      original: "/images/product-gallery/01.png",
-      thumbnail: "/images/product-gallery/01.png"
-    },
-    {
-      original: "/images/product-gallery/01.png",
-      thumbnail: "/images/product-gallery/01.png"
-    },
-    {
-      original: "/images/product-gallery/01.png",
-      thumbnail: "/images/product-gallery/01.png"
-    }
-  ];
-
+  // const images = [
+  //   {
+  //     original: "/images/product-gallery/01.png",
+  //     thumbnail: "/images/product-gallery/01.png"
+  //   },
+  //   {
+  //     original: "/images/product-gallery/01.png",
+  //     thumbnail: "/images/product-gallery/01.png"
+  //   },
+  //   {
+  //     original: "/images/product-gallery/01.png",
+  //     thumbnail: "/images/product-gallery/01.png"
+  //   },
+  //   {
+  //     original: "/images/product-gallery/01.png",
+  //     thumbnail: "/images/product-gallery/01.png"
+  //   },
+  //   {
+  //     original: "/images/product-gallery/01.png",
+  //     thumbnail: "/images/product-gallery/01.png"
+  //   },
+  //   {
+  //     original: "/images/product-gallery/01.png",
+  //     thumbnail: "/images/product-gallery/01.png"
+  //   }
+  // ];
+  // let images = [];
+  const [images, setimages] = useState([]);
+  useEffect(() => {
+    setimages(
+      activityById &&
+        activityById.data.attributes.imagesComponent.map(item => {
+          return {
+            original: cleanImage(item.image.data.attributes),
+            thumbnail: cleanImage(item.image.data.attributes)
+          };
+        })
+    );
+  }, [activityById]);
 
 
   return (
   return (
     <>
     <>
@@ -56,6 +68,7 @@ const DetailGallery = ({ activityById }) => {
           <div className="product-name">Edge City Climb</div>
           <div className="product-name">Edge City Climb</div>
         </div>
         </div>
       </div>
       </div>
+      {activityById && (
         <div className="product-gallery">
         <div className="product-gallery">
           <div className="row">
           <div className="row">
             <div className="col-12">
             <div className="col-12">
@@ -64,8 +77,8 @@ const DetailGallery = ({ activityById }) => {
               </div>
               </div>
             </div>
             </div>
           </div>
           </div>
-        
         </div>
         </div>
+      )}
     </>
     </>
   );
   );
 };
 };