added basic gallery feature

Author: mharshita

package-lock.json

@@ -21,6 +21,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^6.3.2",
     "react-i18next": "^11.5.0",
+    "react-image-gallery": "^1.2.5",
     "react-markdown": "^5.0.2",
     "react-markdown-editor-lite": "^1.2.4",
     "react-promise-tracker": "^2.1.0",

package.json

@@ -5,3 +5,4 @@
 @import './modules/index';
 @import './components/index';
 @import './pages/index';
+@import '~react-image-gallery/styles/scss/image-gallery.scss';

src/assets/scss/index.scss

@@ -6,6 +6,7 @@ import {
   TwitterIcon,
   LinkedinIcon
 } from 'react-share'
+import ImageGallery from 'react-image-gallery'
 
 import { Helmet } from 'react-helmet'
 
@@ -93,6 +94,19 @@ const Story = (props) => {
   const hashtagsArray = ['EOS', 'userstory']
   const title = 'EOS User Story - POST Stories. GET Features.'
 
+  const displayImages = () => {
+    const images = []
+    for (let i = 0; i < 3; i++) {
+      images.push({
+        original: story.Attachment[`${i}`].url,
+        thumbnail: story.Attachment[`${i}`].url
+      })
+    }
+    return images
+  }
+
+  const images = [].concat(displayImages())
+
   return (
     <>
       <Helmet>
@@ -225,15 +239,12 @@ const Story = (props) => {
                 )}
               </div>
               <div>
-                {story.Attachment &&
-                  story.Attachment.map((obj) => (
-                    <img
-                      key={obj.id}
-                      src={obj.url}
-                      alt='attachment'
-                      height='100'
-                    />
-                  ))}
+                <ImageGallery
+                  items={images}
+                  showBullets={true}
+                  originalClass={'galleryoriginal'}
+                  thumbnailClass={'galleryThumbnail'}
+                />
               </div>
               <Comments storyId={storyId} />
             </div>