Skip to content

Commit eb54434

Browse files
mharshitamharshita
committed
added file uploads for Comments
1 parent c898cb9 commit eb54434

File tree

4 files changed

+148
-109
lines changed

4 files changed

+148
-109
lines changed

‎src/assets/scss/components/comments.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,9 @@
2626
}
2727
}
2828
}
29+
30+
.comment-attachment {
31+
background: transparent;
32+
border: 0;
33+
cursor: pointer;
34+
}

‎src/components/CommentInput.js‎

Lines changed: 75 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ const CommentInput = (props) => {
88
const {
99
attachments,
1010
setAttachments,
11-
addCommentReply,
1211
commentReply,
13-
setCommentReply
12+
setCommentReply,
13+
isCommentReply,
14+
isComment,
15+
comment,
16+
setComment
1417
} = props
1518

16-
const {
17-
register: registerReply,
18-
errors: errorsReply,
19-
handleSubmit: handleSubmitReply
20-
} = useForm()
19+
const { register: registerReply, errors: errorsReply } = useForm()
20+
21+
const { register: registerComment, errors: errorsComment } = useForm()
2122

2223
const removeFile = (name) => {
2324
setAttachments(attachments.filter((attachment) => attachment.name !== name))
@@ -51,36 +52,74 @@ const CommentInput = (props) => {
5152
}
5253

5354
return (
54-
<form
55-
className='comment-form'
56-
onSubmit={handleSubmitReply(addCommentReply)}
57-
>
58-
<div className='comment-input'>
59-
<textarea
60-
rows='5'
61-
cols='25'
62-
name='Comments'
63-
ref={registerReply({ required: true })}
64-
value={commentReply}
65-
onChange={(e) => setCommentReply(e.target.value)}
66-
></textarea>
67-
<div className='file-input'>
68-
<input
69-
type='file'
70-
id='file'
71-
className='file'
72-
multiple={true}
73-
onChange={handleFileChange}
74-
/>
75-
<label htmlFor='file' className='file-button-label'>
76-
<i className='eos-icons'>attachment</i>
77-
</label>
55+
<>
56+
{' '}
57+
{isCommentReply ? (
58+
<div>
59+
<div className='comment-input'>
60+
<textarea
61+
rows='5'
62+
cols='25'
63+
name='Comments'
64+
ref={registerReply({ required: true })}
65+
value={commentReply}
66+
onChange={(e) => setCommentReply(e.target.value)}
67+
></textarea>
68+
<div className='file-input'>
69+
<input
70+
type='file'
71+
id='file'
72+
className='file'
73+
multiple={true}
74+
onChange={handleFileChange}
75+
/>
76+
<label htmlFor='file' className='file-button-label'>
77+
<i className='eos-icons'>attachment</i>
78+
</label>
79+
</div>
80+
</div>
81+
{errorsReply.Comments && (
82+
<FormError message='Reply cannot be empty' />
83+
)}
84+
<div className='preview-container'>{mediaPreview}</div>
7885
</div>
79-
</div>
80-
{errorsReply.Comments && <FormError message='Reply cannot be empty' />}
81-
<div className='preview-container'>{mediaPreview}</div>
82-
<Button className='btn btn-default'>Add Reply</Button>
83-
</form>
86+
) : (
87+
''
88+
)}
89+
{isComment ? (
90+
<div>
91+
<div className='field'>
92+
<textarea
93+
rows='4'
94+
name='addComment'
95+
data-cy='comment-input'
96+
cols='16'
97+
ref={registerComment({ required: true })}
98+
value={comment}
99+
onChange={(e) => setComment(e.target.value)}
100+
></textarea>
101+
<input
102+
type='file'
103+
id='imgupload'
104+
style={{ display: 'none', cursor: 'pointer' }}
105+
onChange={handleFileChange}
106+
multiple={true}
107+
/>
108+
<label for='imgupload'>
109+
<Button className='eos-icons comment-attachment'>
110+
attachment
111+
</Button>
112+
</label>
113+
</div>
114+
{errorsComment.addComment && (
115+
<FormError message='Comment cannot be empty' />
116+
)}
117+
<div className='preview-container'>{mediaPreview}</div>
118+
</div>
119+
) : (
120+
''
121+
)}
122+
</>
84123
)
85124
}
86125

‎src/components/Comments.js‎

Lines changed: 61 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@ import { useForm } from 'react-hook-form'
55

66
import CommentInput from './CommentInput'
77
import Context from '../modules/Context'
8-
import FormError from '../components/FormError'
98
import userStory from '../services/user_story'
109

1110
const Comments = (props) => {
1211
const { storyId } = props
1312

14-
const {
15-
register: registerComment,
16-
errors: errorsComment,
17-
handleSubmit: handleSubmitComment
18-
} = useForm()
13+
const { handleSubmit: handleSubmitComment } = useForm()
14+
15+
const { handleSubmit: handleSubmitReply } = useForm()
16+
17+
const [commentInput, setCommentInput] = useState(false)
1918

2019
const { state } = useContext(Context)
2120

@@ -37,13 +36,10 @@ const Comments = (props) => {
3736

3837
const [attachments, setAttachments] = useState([])
3938

40-
useEffect(() => {
41-
const fetchComments = async () => {
42-
const response = await userStory.getComments(storyId)
43-
setComments(response.data.data.userStory.user_story_comments)
44-
}
45-
fetchComments()
46-
}, [storyId, fetchComments])
39+
const fetchStoryComments = async () => {
40+
const response = await userStory.getComments(storyId)
41+
setComments(response.data.data.userStory.user_story_comments)
42+
}
4743

4844
useEffect(
4945
() => () => {
@@ -53,14 +49,24 @@ const Comments = (props) => {
5349
)
5450

5551
const addComment = async (data) => {
56-
const response = await userStory.postComment(data.addComment, storyId, id)
57-
setComments([
58-
...comments,
59-
response.data.data.createUserStoryComment.userStoryComment
60-
])
52+
const formData = new FormData()
53+
data.user = id
54+
data.user_story = storyId
55+
formData.append('data', JSON.stringify(data))
56+
57+
if (attachments.length) {
58+
attachments.forEach((file) => {
59+
formData.append('files.attachment', file)
60+
})
61+
}
62+
63+
await userStory.postComment(formData)
6164
setComment('')
65+
setAttachments([])
6266
}
6367

68+
fetchStoryComments(storyId, fetchComments)
69+
6470
const addCommentReply = async (data) => {
6571
const formData = new FormData()
6672

@@ -112,6 +118,11 @@ const Comments = (props) => {
112118
</div>
113119
</div>
114120
<p>{data.Comments}</p>
121+
<div>
122+
{Comments.Attachment?.map((obj) => (
123+
<img src={obj.url} alt='attachment' key={obj.id} />
124+
))}
125+
</div>
115126
<div className='reply-action'>
116127
{state.auth && (
117128
<Button
@@ -192,13 +203,25 @@ const Comments = (props) => {
192203
</div>
193204
))}
194205
{repliesToggled === key + 1 && state.auth && (
195-
<CommentInput
196-
attachments={attachments}
197-
setAttachments={setAttachments}
198-
addCommentReply={addCommentReply}
199-
commentReply={commentReply}
200-
setCommentReply={setCommentReply}
201-
/>
206+
<form
207+
className='comment-form'
208+
onSubmit={handleSubmitReply(addCommentReply)}
209+
>
210+
<CommentInput
211+
attachments={attachments}
212+
setAttachments={setAttachments}
213+
addCommentReply={addCommentReply}
214+
commentReply={commentReply}
215+
setCommentReply={setCommentReply}
216+
isCommentReply={commentInput}
217+
/>
218+
<Button
219+
onClick={() => setCommentInput(true)}
220+
className='btn btn-default'
221+
>
222+
Add Reply
223+
</Button>
224+
</form>
202225
)}
203226
</div>
204227
</div>
@@ -212,21 +235,19 @@ const Comments = (props) => {
212235
className='comment-form'
213236
onSubmit={handleSubmitComment(addComment)}
214237
>
215-
<div className='field'>
216-
<textarea
217-
rows='4'
218-
name='addComment'
219-
data-cy='comment-input'
220-
cols='16'
221-
ref={registerComment({ required: true })}
222-
value={comment}
223-
onChange={(e) => setComment(e.target.value)}
224-
></textarea>
225-
{errorsComment.addComment && (
226-
<FormError message='Comment cannot be empty' />
227-
)}
228-
</div>
229-
<Button className='btn btn-default' data-cy='btn-comment'>
238+
<CommentInput
239+
attachments={attachments}
240+
setAttachments={setAttachments}
241+
addComment={addComment}
242+
setComment={setComment}
243+
isComment={commentInput}
244+
comment={comment}
245+
/>
246+
<Button
247+
onClick={() => setCommentInput(true)}
248+
className='btn btn-default'
249+
data-cy='btn-comment'
250+
>
230251
Add Comment
231252
</Button>
232253
</form>

‎src/services/user_story.js‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,10 @@ const userStory = {
297297
username
298298
}
299299
createdAt
300+
attachment {
301+
url
302+
id
303+
}
300304
user_story_comment_replies {
301305
createdAt
302306
Comments
@@ -315,39 +319,8 @@ const userStory = {
315319
}
316320
return apiCall('/graphql', commentsQuery)
317321
},
318-
postComment: (addComment, storyId, id) => {
319-
const postCommentQuery = {
320-
query: `
321-
mutation {
322-
createUserStoryComment(input: {
323-
data: {
324-
Comments: "${addComment}"
325-
user_story: "${storyId}"
326-
user: "${id}"
327-
}
328-
}) {
329-
userStoryComment {
330-
id
331-
user {
332-
id
333-
username
334-
}
335-
Comments
336-
createdAt
337-
user_story_comment_replies {
338-
createdAt
339-
Comments
340-
user {
341-
id
342-
username
343-
}
344-
}
345-
}
346-
}
347-
}
348-
`
349-
}
350-
return apiCall('/graphql', postCommentQuery)
322+
postComment: (data) => {
323+
return apiCall('/user-story-comments', data)
351324
},
352325
postCommentReply: (data) => {
353326
return apiCall('/user-story-comment-threads', data)

0 commit comments

Comments
 (0)