Merge pull request #66 from EOS-uiux-Solutions/feat/gallery

Added basic gallery feature

Author: sharmaadityaHQ

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

@@ -25,4 +25,9 @@
       font-weight: 100;
     }
   }
+
+  .comment-gallery-container {
+    height: 20%;
+    width: 20%;
+  }
 }

src/assets/scss/components/comments.scss

@@ -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

@@ -22,3 +22,8 @@
 .share-button {
   margin-right: 2em;
 }
+
+.gallery-container {
+  height: 34%;
+  width: 34%;
+}

src/assets/scss/pages/story.scss

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react'
 import { Link } from '@reach/router'
 import Button from './Button'
+import Gallery from './ImageGallery'
 
 import CommentForm from './CommentForm'
 import Context from '../modules/Context'
@@ -133,17 +134,13 @@ const Comments = (props) => {
                   </div>
                 </div>
                 <p>{data.Comments}</p>
-                <div>
-                  {data.attachment &&
-                    data.attachment.map((obj) => (
-                      <img
-                        src={obj.url}
-                        key={obj.id}
-                        alt='attachment'
-                        height='100'
-                      />
-                    ))}
-                </div>
+                {data.attachment.length !== 0 ? (
+                  <div className='comment-gallery-container'>
+                    <Gallery imageArray={data.attachment} />
+                  </div>
+                ) : (
+                  ''
+                )}
                 <div className='reply-action'>
                   {state.auth && (
                     <Button
@@ -206,10 +203,13 @@ const Comments = (props) => {
                           }
                         </div>
                         <p>{reply.Comments}</p>
-                        {reply.attachment &&
-                          reply.attachment.map((a) => (
-                            <img src={a.url} key={a.id} alt='' width='100' />
-                          ))}
+                        {reply.attachment.length !== 0 ? (
+                          <div className='comment-gallery-container'>
+                            <Gallery imageArray={reply.attachment} />
+                          </div>
+                        ) : (
+                          ''
+                        )}
                       </div>
                     </div>
                   ))}

src/components/Comments.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ImageGallery from 'react-image-gallery'
+
+const Gallery = ({ imageArray }) => {
+  const images =
+    imageArray?.map((attachment) => {
+      return {
+        original: attachment.url,
+        thumbnail: attachment.url
+      }
+    }) ?? []
+
+  return <ImageGallery items={images} showBullets={true} />
+}
+
+export default Gallery

src/components/ImageGallery.js

@@ -6,6 +6,7 @@ import {
   TwitterIcon,
   LinkedinIcon
 } from 'react-share'
+import Gallery from '../components/ImageGallery'
 
 import { Helmet } from 'react-helmet'
 
@@ -224,17 +225,13 @@ const Story = (props) => {
                   />
                 )}
               </div>
-              <div>
-                {story.Attachment &&
-                  story.Attachment.map((obj) => (
-                    <img
-                      key={obj.id}
-                      src={obj.url}
-                      alt='attachment'
-                      height='100'
-                    />
-                  ))}
-              </div>
+              {story.Attachment.length !== 0 ? (
+                <div className='gallery-container'>
+                  <Gallery imageArray={story.Attachment} />
+                </div>
+              ) : (
+                ''
+              )}
               <Comments storyId={storyId} />
             </div>
           </div>