added gallery for comment and comment-replies and made a separate component

Author: mharshita

src/assets/scss/components/comments.scss

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

src/components/Comments.js

@@ -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/ImageGallery.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/pages/Story.js

@@ -6,7 +6,7 @@ import {
   TwitterIcon,
   LinkedinIcon
 } from 'react-share'
-import ImageGallery from 'react-image-gallery'
+import Gallery from '../components/ImageGallery'
 
 import { Helmet } from 'react-helmet'
 
@@ -94,14 +94,6 @@ const Story = (props) => {
   const hashtagsArray = ['EOS', 'userstory']
   const title = 'EOS User Story - POST Stories. GET Features.'
 
-  const images =
-    story.Attachment?.map((attachment) => {
-      return {
-        original: attachment.url,
-        thumbnail: attachment.url
-      }
-    }) ?? []
-
   return (
     <>
       <Helmet>
@@ -233,9 +225,13 @@ const Story = (props) => {
                   />
                 )}
               </div>
-              <div className='gallery-container'>
-                <ImageGallery items={images} showBullets={true} />
-              </div>
+              {story.Attachment.length !== 0 ? (
+                <div className='gallery-container'>
+                  <Gallery imageArray={story.Attachment} />
+                </div>
+              ) : (
+                ''
+              )}
               <Comments storyId={storyId} />
             </div>
           </div>