Refactored CommentForm

SundeepChand · SundeepChand · commit 7ee1c3ed7956 · 2021-07-11T21:57:14.000+05:30
diff --git a/src/assets/scss/components/commentForm.scss b/src/assets/scss/components/commentForm.scss
@@ -5,7 +5,6 @@
 
   &-input {
     align-items: flex-end;
-    border: 1px solid $light-gray;
     display: flex;
     margin-bottom: 5px;
     width: fit-content;
@@ -26,9 +25,11 @@
 
   &-input {
     background: $eos-white;
+    border: 1px solid $light-gray;
+    border-left: 0;
     display: flex;
     flex-direction: column-reverse;
-    height: 84px;
+    height: 82px;
   }
 
   &-button-label {
diff --git a/src/assets/scss/components/comments.scss b/src/assets/scss/components/comments.scss
@@ -26,9 +26,3 @@
     }
   }
 }
-
-.comment-attachment {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-}
diff --git a/src/assets/scss/components/mediaPreview.scss b/src/assets/scss/components/mediaPreview.scss
@@ -36,7 +36,7 @@
     border: 0;
     border-radius: 50%;
     color: $eos-white;
-    font-weight: $font-weight-close;
+    font-weight: $font-weight-600;
     height: 18px;
     padding: 0;
     position: absolute;
diff --git a/src/assets/scss/pages/page404.scss b/src/assets/scss/pages/page404.scss
@@ -8,7 +8,7 @@
   color: $dark-color;
   font-family: $font-family-spartan;
   font-size: $font-size-heading-404;
-  font-weight: $font-weight-404;
+  font-weight: $font-weight-600;
   margin-bottom: 0;
   padding-left: 0.5em;
 }
diff --git a/src/assets/scss/variables/type.scss b/src/assets/scss/variables/type.scss
@@ -12,8 +12,7 @@ $font-size-header-mobile: 26px;
 $font-size-small: 12px;
 $font-size-cookies-mobile: 13px;
 $font-size-heading-404: 10em;
-$font-weight-404: 600;
-$font-weight-close: 600;
+$font-weight-600: 600;
 $font-weight: 300;
 $line-height: 1.5em;
 $color: #141823;
diff --git a/src/components/CommentForm.js b/src/components/CommentForm.js
@@ -9,17 +9,13 @@ const CommentForm = (props) => {
   const {
     attachments,
     setAttachments,
-    commentReply,
-    setCommentReply,
-    isCommentReply,
-    isComment,
+    addComment,
     comment,
-    setComment
+    setComment,
+    submitButtonText
   } = props
 
-  const { register: registerReply, errors: errorsReply } = useForm()
-
-  const { register: registerComment, errors: errorsComment } = useForm()
+  const { register, errors, handleSubmit } = useForm()
 
   const handleFileChange = async (event) => {
     const newFiles = event.target.files
@@ -35,80 +31,33 @@ const CommentForm = (props) => {
   }
 
   return (
-    <>
-      {' '}
-      {isCommentReply ? (
-        <div>
-          <div className='comment-input'>
-            <textarea
-              rows='5'
-              cols='25'
-              name='addReply'
-              ref={registerReply({ required: true })}
-              value={commentReply}
-              onChange={(e) => setCommentReply(e.target.value)}
-            ></textarea>
-            <div className='file-input'>
-              <input
-                type='file'
-                id='file'
-                className='file'
-                multiple={true}
-                onChange={handleFileChange}
-              />
-              <label htmlFor='file' className='file-button-label'>
-                <i className='eos-icons'>attachment</i>
-              </label>
-            </div>
-          </div>
-          {errorsReply.Comments && (
-            <FormError message='Reply cannot be empty' />
-          )}
-          <MediaPreview
-            attachments={attachments}
-            setAttachments={setAttachments}
-          />
-        </div>
-      ) : (
-        ''
-      )}
-      {isComment ? (
-        <div>
-          <div className='field'>
-            <textarea
-              rows='4'
-              name='addComment'
-              data-cy='comment-input'
-              cols='16'
-              ref={registerComment({ required: true })}
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-            ></textarea>
-            <input
-              type='file'
-              id='imgupload'
-              style={{ display: 'none', cursor: 'pointer' }}
-              onChange={handleFileChange}
-              multiple={true}
-            />
-            <label for='imgupload'>
-              <Button className='eos-icons comment-attachment'>
-                attachment
-              </Button>
-            </label>
-          </div>
-          {errorsComment.addComment && (
-            <FormError message='Comment cannot be empty' />
-          )}
-          <MediaPreview
-            attachments={attachments}
-            setAttachments={setAttachments}
+    <form className='comment-form' onSubmit={handleSubmit(addComment)}>
+      <div className='comment-input'>
+        <textarea
+          rows='5'
+          cols='25'
+          name='Comments'
+          value={comment}
+          ref={register({ required: true })}
+          onChange={(e) => setComment(e.target.value)}
+        ></textarea>
+        <div className='file-input'>
+          <input
+            type='file'
+            id='file'
+            className='file'
+            multiple={true}
+            onChange={handleFileChange}
           />
+          <label htmlFor='file' className='file-button-label'>
+            <i className='eos-icons'>attachment</i>
+          </label>
         </div>
-      ) : (
-        ''
-      )}
-    </>
+      </div>
+      {errors.Comments && <FormError message='Reply cannot be empty' />}
+      <MediaPreview attachments={attachments} setAttachments={setAttachments} />
+      <Button className='btn btn-default'>{submitButtonText}</Button>
+    </form>
   )
 }
 
diff --git a/src/components/Comments.js b/src/components/Comments.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { Link } from '@reach/router'
 import Button from './Button'
-import { useForm } from 'react-hook-form'
 
 import CommentForm from './CommentForm'
 import Context from '../modules/Context'
@@ -10,12 +9,6 @@ import userStory from '../services/user_story'
 const Comments = (props) => {
   const { storyId } = props
 
-  const { handleSubmit: handleSubmitComment } = useForm()
-
-  const { handleSubmit: handleSubmitReply } = useForm()
-
-  const [commentForm, setCommentForm] = useState(false)
-
   const { state } = useContext(Context)
 
   const id = localStorage.getItem('id')
@@ -36,10 +29,15 @@ const Comments = (props) => {
 
   const [attachments, setAttachments] = useState([])
 
-  const fetchStoryComments = async () => {
-    const response = await userStory.getComments(storyId)
-    setComments(response.data.data.userStory.user_story_comments)
-  }
+  const [replyAttachments, setReplyAttachments] = useState([])
+
+  useEffect(() => {
+    const fetchStoryComments = async () => {
+      const response = await userStory.getComments(storyId)
+      setComments(response.data.data.userStory.user_story_comments)
+    }
+    fetchStoryComments()
+  }, [storyId, fetchComments])
 
   useEffect(
     () => () => {
@@ -48,6 +46,13 @@ const Comments = (props) => {
     [attachments]
   )
 
+  useEffect(
+    () => () => {
+      replyAttachments.forEach((file) => URL.revokeObjectURL(file.preview))
+    },
+    [replyAttachments]
+  )
+
   const addComment = async (data) => {
     const formData = new FormData()
     data.user = id
@@ -65,24 +70,22 @@ const Comments = (props) => {
     setAttachments([])
   }
 
-  fetchStoryComments(storyId, fetchComments)
-
   const addCommentReply = async (data) => {
     const formData = new FormData()
 
     data.user = id
     data.user_story_comment = commentId
     formData.append('data', JSON.stringify(data))
 
-    if (attachments.length) {
-      attachments.forEach((file) => {
+    if (replyAttachments.length) {
+      replyAttachments.forEach((file) => {
         formData.append('files.attachment', file)
       })
     }
 
     await userStory.postCommentReply(formData)
     setCommentReply('')
-    setAttachments([])
+    setReplyAttachments([])
     setFetchComments((fetchComments) => !fetchComments)
     setRepliesToggled(null)
   }
@@ -199,31 +202,20 @@ const Comments = (props) => {
                           reply.attachment.map((a) => (
                             <img src={a.url} key={a.id} alt='' width='100' />
                           ))}
+
+                        {repliesToggled === key + 1 && state.auth && (
+                          <CommentForm
+                            attachments={replyAttachments}
+                            setAttachments={setReplyAttachments}
+                            addComment={addCommentReply}
+                            comment={commentReply}
+                            setComment={setCommentReply}
+                            submitButtonText={'Add Reply'}
+                          />
+                        )}
                       </div>
                     </div>
                   ))}
-                {repliesToggled === key + 1 && state.auth && (
-                  <form
-                    className='comment-form'
-                    onSubmit={handleSubmitReply(addCommentReply)}
-                  >
-                    <CommentForm
-                      attachments={attachments}
-                      setAttachments={setAttachments}
-                      addCommentReply={addCommentReply}
-                      commentReply={commentReply}
-                      setCommentReply={setCommentReply}
-                      isCommentReply={commentForm}
-                    />
-                    <h1>Commented</h1>
-                    <Button
-                      onClick={() => setCommentForm(true)}
-                      className='btn btn-default'
-                    >
-                      Add Reply
-                    </Button>
-                  </form>
-                )}
               </div>
             </div>
           )
@@ -232,26 +224,16 @@ const Comments = (props) => {
         <h3>No comments yet</h3>
       )}
       {state.auth && (
-        <form
-          className='comment-form'
-          onSubmit={handleSubmitComment(addComment)}
-        >
+        <div>
           <CommentForm
             attachments={attachments}
             setAttachments={setAttachments}
             addComment={addComment}
-            setComment={setComment}
-            isComment={commentForm}
             comment={comment}
+            setComment={setComment}
+            submitButtonText={'Add Comment'}
           />
-          <Button
-            onClick={() => setCommentForm(true)}
-            className='btn btn-default'
-            data-cy='btn-comment'
-          >
-            Add Comment
-          </Button>
-        </form>
+        </div>
       )}
     </div>
   )

Original file line number	Diff line number	Diff line change
`@@ -26,9 +26,3 @@`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`	`}`
`29`		`-`
`30`		`-.comment-attachment {`
`31`		`- background: transparent;`
`32`		`- border: 0;`
`33`		`- cursor: pointer;`
`34`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`color: $dark-color;`
`9`	`9`	`font-family: $font-family-spartan;`
`10`	`10`	`font-size: $font-size-heading-404;`
`11`		`- font-weight: $font-weight-404;`
	`11`	`+ font-weight: $font-weight-600;`
`12`	`12`	`margin-bottom: 0;`
`13`	`13`	`padding-left: 0.5em;`
`14`	`14`	`}`