Users can add comments to posts - implement functionality

[fatimaahmed14]

Requirements

Post comments

• A teacher or student should be able to add a new comment to a post by entering the comment content
• Comments should be sorted by oldest firstly a teacher can edit or delete another student's comment
• The user who made a comment can edit or delete their comment
• A comment should present:
  • the user's INITIALS that should be clickable to visit that users' profile page
  • the content of the comment
  • (if possible, the date/time it was created)
  • an edit/delete icon if the user viewing the comment can edit or delete this
  • a like icon if the user viewing the post can like (see below)

UI Approach

Code structure

• The code for the component will live in a Comments.js file in the folder: /src/components/Comments
• All relevant styles will be added to the style.css in the same folder
• The <Comment> component will be instantiated in the <CommentsList> component where we map for each comment. The comments are fetched with client.js from the API on component load.
• The CommentsList component will be instantiated in the Postcomponent

Wireframe

• After user types comment and presses submit, POST request is sent to the API (client.js) specifying the content of the comment and data in regard to time of the comment and user who sent request to comment
• endpoint for creating comment: {{ _.base_url }}/posts/9/comment
• Setting up state for comments : state will be stored in post's state

  const post = {
  text: "This is the text of the post"
  userID: 6
  date: "24 Nov 2022"
  comments: [{
  text: "Hello this is a comment"
  userID: 7
  date: "24 Nov 2022"
  },{
  text: "Hello this is another comment"
  userID: 8
  date: "23 Nov 2022"
  }
  ]
  }

• Conditional rendering which displays a button for a user to edit their own comment, via a PATCH request (client.js) sent to the API
• This conditional rendering will also be used so teachers can always have access to this edit button on every comment
• Conditional rendering which displays a button for a user to delete their own comment, via a PATCH request (client.js) sent to the API
• This conditional rendering will also be used so teachers can always have access to this delete button on every comment
• Comment edit endpoint: {{ _.base_url }}/posts/9/comment/12

[dogezen]

I am assuming you'll be using utils/client.js to send requests.

Can you detail the ENDPOINTS and example PAYLOAD to be sent to the API for a) creating a comment; b) editing a comment?

Where will the state for the comments be stored? Where is CommentList being instantiated?

[fatimaahmed14]

Where will the state for the comments be stored? I don't know if you have seen but we have said above in the issue , the the comments state will be stored within the Post's state

[georgeroth]

Comments JSX template has been created, ready to receive functionality.

[georgeroth]

Comments are now displaying under posts. We will need the actual post component to be ready to be able to plug the real comments into but it should be fairly straightforward.

[georgeroth]

Editing and deleting comments have been implemented: https://www.youtube.com/watch?v=qSNZywr4jgo