Added basic file upload

Author: SundeepChand

src/components/CommentInput.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+
+import Button from './Button'
+import FormError from '../components/FormError'
+
+const CommentInput = (props) => {
+  const {
+    attachments,
+    setAttachments,
+    addCommentReply,
+    commentReply,
+    setCommentReply
+  } = props
+
+  const {
+    register: registerReply,
+    errors: errorsReply,
+    handleSubmit: handleSubmitReply
+  } = useForm()
+
+  const mediaPreview = attachments.map((file) => (
+    <div className='preview-root' key={file.name}>
+      <div className='preview-inner'>
+        <img src={file.preview} className='preview-image' alt='preview' />
+      </div>
+    </div>
+  ))
+
+  const handleFileChange = async (event) => {
+    const newFiles = event.target.files
+    const newFilesArray = []
+    for (let i = 0; i < newFiles.length; i++) {
+      newFilesArray.push(
+        Object.assign(newFiles[i], {
+          preview: URL.createObjectURL(newFiles[i])
+        })
+      )
+    }
+    setAttachments([...attachments, ...newFilesArray])
+  }
+
+  return (
+    <form
+      className='comment-form'
+      onSubmit={handleSubmitReply(addCommentReply)}
+    >
+      <div className='field'>
+        <textarea
+          rows='4'
+          cols='16'
+          name='Comments'
+          ref={registerReply({ required: true })}
+          value={commentReply}
+          onChange={(e) => setCommentReply(e.target.value)}
+        ></textarea>
+        <input
+          type='file'
+          name='File'
+          multiple={true}
+          onChange={handleFileChange}
+        />
+        <div className='preview-container'>{mediaPreview}</div>
+        {errorsReply.addReply && <FormError message='Reply cannot be empty' />}
+      </div>
+      <Button className='btn btn-default'>Add Reply</Button>
+    </form>
+  )
+}
+
+export default CommentInput

src/components/Comments.js

@@ -3,6 +3,7 @@ import { Link } from '@reach/router'
 import Button from './Button'
 import { useForm } from 'react-hook-form'
 
+import CommentInput from './CommentInput'
 import Context from '../modules/Context'
 import FormError from '../components/FormError'
 import userStory from '../services/user_story'
@@ -16,12 +17,6 @@ const Comments = (props) => {
     handleSubmit: handleSubmitComment
   } = useForm()
 
-  const {
-    register: registerReply,
-    errors: errorsReply,
-    handleSubmit: handleSubmitReply
-  } = useForm()
-
   const { state } = useContext(Context)
 
   const id = localStorage.getItem('id')
@@ -40,6 +35,8 @@ const Comments = (props) => {
 
   const [viewRepliesToggled, setViewRepliesToggled] = useState([])
 
+  const [attachments, setAttachments] = useState([])
+
   useEffect(() => {
     const fetchComments = async () => {
       const response = await userStory.getComments(storyId)
@@ -48,6 +45,13 @@ const Comments = (props) => {
     fetchComments()
   }, [storyId, fetchComments])
 
+  useEffect(
+    () => () => {
+      attachments.forEach((file) => URL.revokeObjectURL(file.preview))
+    },
+    [attachments]
+  )
+
   const addComment = async (data) => {
     const response = await userStory.postComment(data.addComment, storyId, id)
     setComments([
@@ -58,8 +62,21 @@ const Comments = (props) => {
   }
 
   const addCommentReply = async (data) => {
-    await userStory.postCommentReply(data.addReply, commentId, id)
+    const formData = new FormData()
+
+    data.user = id
+    data.user_story_comment = commentId
+    formData.append('data', JSON.stringify(data))
+
+    if (attachments.length) {
+      attachments.forEach((file) => {
+        formData.append('files.attachment', file)
+      })
+    }
+
+    await userStory.postCommentReply(formData)
     setCommentReply('')
+    setAttachments([])
     setFetchComments((fetchComments) => !fetchComments)
     setRepliesToggled(null)
   }
@@ -167,29 +184,21 @@ const Comments = (props) => {
                           }
                         </div>
                         <p>{reply.Comments}</p>
+                        {reply.attachment &&
+                          reply.attachment.map((a) => (
+                            <img src={a.url} key={a.id} alt='' width='100' />
+                          ))}
                       </div>
                     </div>
                   ))}
                 {repliesToggled === key + 1 && state.auth && (
-                  <form
-                    className='comment-form'
-                    onSubmit={handleSubmitReply(addCommentReply)}
-                  >
-                    <div className='field'>
-                      <textarea
-                        rows='4'
-                        cols='16'
-                        name='addReply'
-                        ref={registerReply({ required: true })}
-                        value={commentReply}
-                        onChange={(e) => setCommentReply(e.target.value)}
-                      ></textarea>
-                      {errorsReply.addReply && (
-                        <FormError message='Reply cannot be empty' />
-                      )}
-                    </div>
-                    <Button className='btn btn-default'>Add Reply</Button>
-                  </form>
+                  <CommentInput
+                    attachments={attachments}
+                    setAttachments={setAttachments}
+                    addCommentReply={addCommentReply}
+                    commentReply={commentReply}
+                    setCommentReply={setCommentReply}
+                  />
                 )}
               </div>
             </div>

src/services/user_story.js

@@ -304,6 +304,10 @@ const userStory = {
                 id
                 username
               }
+              attachment {
+                id
+                url
+              }
             }
           }
         }
@@ -345,25 +349,8 @@ const userStory = {
     }
     return apiCall('/graphql', postCommentQuery)
   },
-  postCommentReply: (addReply, commentId, id) => {
-    const postCommentReplyQuery = {
-      query: `
-      mutation {
-        createUserStoryCommentThread (input: {
-          data: {
-            Comments: "${addReply}"
-            user_story_comment: "${commentId}"
-            user: "${id}"
-          }
-        }){
-          userStoryCommentThread {
-            createdAt
-          }
-        }
-      }
-      `
-    }
-    return apiCall('/graphql', postCommentReplyQuery)
+  postCommentReply: (data) => {
+    return apiCall('/user-story-comment-threads', data)
   },
   getNotificationsByUserId: (userId) => {
     const getNotificationsByUserIdQuery = {