Skip to content

Commit e97069b

Browse files
committed
added gallery for comment and comment-replies and made a separate component
1 parent b0c66d8 commit e97069b

File tree

4 files changed

+44
-27
lines changed

4 files changed

+44
-27
lines changed

src/assets/scss/components/comments.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,9 @@
2525
font-weight: 100;
2626
}
2727
}
28+
29+
.comment-gallery-container {
30+
height: 20%;
31+
width: 20%;
32+
}
2833
}

src/components/Comments.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect, useContext, useCallback } from 'react'
22
import { Link } from '@reach/router'
33
import Button from './Button'
4+
import Gallery from './ImageGallery'
45

56
import CommentForm from './CommentForm'
67
import Context from '../modules/Context'
@@ -133,17 +134,13 @@ const Comments = (props) => {
133134
</div>
134135
</div>
135136
<p>{data.Comments}</p>
136-
<div>
137-
{data.attachment &&
138-
data.attachment.map((obj) => (
139-
<img
140-
src={obj.url}
141-
key={obj.id}
142-
alt='attachment'
143-
height='100'
144-
/>
145-
))}
146-
</div>
137+
{data.attachment.length !== 0 ? (
138+
<div className='comment-gallery-container'>
139+
<Gallery imageArray={data.attachment} />
140+
</div>
141+
) : (
142+
''
143+
)}
147144
<div className='reply-action'>
148145
{state.auth && (
149146
<Button
@@ -206,10 +203,13 @@ const Comments = (props) => {
206203
}
207204
</div>
208205
<p>{reply.Comments}</p>
209-
{reply.attachment &&
210-
reply.attachment.map((a) => (
211-
<img src={a.url} key={a.id} alt='' width='100' />
212-
))}
206+
{reply.attachment.length !== 0 ? (
207+
<div className='comment-gallery-container'>
208+
<Gallery imageArray={reply.attachment} />
209+
</div>
210+
) : (
211+
''
212+
)}
213213
</div>
214214
</div>
215215
))}

src/components/ImageGallery.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import ImageGallery from 'react-image-gallery'
3+
4+
const Gallery = ({ imageArray }) => {
5+
const images =
6+
imageArray?.map((attachment) => {
7+
return {
8+
original: attachment.url,
9+
thumbnail: attachment.url
10+
}
11+
}) ?? []
12+
13+
return <ImageGallery items={images} showBullets={true} />
14+
}
15+
16+
export default Gallery

src/pages/Story.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
TwitterIcon,
77
LinkedinIcon
88
} from 'react-share'
9-
import ImageGallery from 'react-image-gallery'
9+
import Gallery from '../components/ImageGallery'
1010

1111
import { Helmet } from 'react-helmet'
1212

@@ -94,14 +94,6 @@ const Story = (props) => {
9494
const hashtagsArray = ['EOS', 'userstory']
9595
const title = 'EOS User Story - POST Stories. GET Features.'
9696

97-
const images =
98-
story.Attachment?.map((attachment) => {
99-
return {
100-
original: attachment.url,
101-
thumbnail: attachment.url
102-
}
103-
}) ?? []
104-
10597
return (
10698
<>
10799
<Helmet>
@@ -233,9 +225,13 @@ const Story = (props) => {
233225
/>
234226
)}
235227
</div>
236-
<div className='gallery-container'>
237-
<ImageGallery items={images} showBullets={true} />
238-
</div>
228+
{story.Attachment.length !== 0 ? (
229+
<div className='gallery-container'>
230+
<Gallery imageArray={story.Attachment} />
231+
</div>
232+
) : (
233+
''
234+
)}
239235
<Comments storyId={storyId} />
240236
</div>
241237
</div>

0 commit comments

Comments
 (0)