Comments - SingleHoleView Component/Route - DELETE comment

[phillipsja97]

UserStory

• As a user, I should be able to go to a comment that I have made and delete that comment from the web application.

AC

WHEN a user navigates to a comment that they have made THEN they should be able to delete their comment from the web application AND the comment will be delete from firebase.

DevNotes

• First, go to commentsData.js and create a deleteComment axios function call. It will look like this:

  const deleteComment = (commentId) => axios.delete(`${baseUrl}/comments/${commentId}.json`);

• Export the deleteComment function at the end of the file.
• Since the state for comments lives in the SingleHoleView component, this is where the delete function will start.
• Above the render(), create a function called deleteAComment.
• DeleteAComment will make a firebase axios call with the delete function we created above. The outline will be this:

  deleteComment = (commentId) => {
  commentData.deleteComment(commentId)
    .then(() => {
      this.getComments();
    })
    .catch((errorFromDeleteComment) => (errorFromDeleteComment));
  }

• Next, pass the function through the SingleHoleCard component by adding it to the end of this line: <SingleHoleCard key={comment.id} comment={comment} deleteAComment={this.deleteAComment} />
• Now, in SingleHoleCard start a new function called deleteACommentEvent.
• In this function, call the deleteAComment function along with the commentId. Like this:

  deleteACommentEvent = (e) => {
  e.preventDefault();
  const { deleteAComment, comment } = this.props;
  deleteAComment(comment.id);
  }

• Finally, in the button we created in the SingleHoleCard class, add an onClick event that will call the delete event:

  
  <button className="btn btn-outline-danger" onClick={this.deleteACommentEvent}>Delete</button>

• Try deleting a comment and see if it not only deletes in from the web application but also off of firebase.