#42 As a user, so I can interact with others, I want to be able to comment on posts. #325
Description
User Story
As a user, so I can interact with others, I want to be able to comment on posts
Tasks (Front-end)
- Modify renderPosts function in /posts/utils/getAllPosts.js to also format the createdAt time for each comment, this is to make the time format more readable to the user.
- Implement a comment entry area to the bottom of a post, this textarea will be controlled using a state(https://reactjs.org/docs/forms.html#controlled-components) and submitting it will send a POST request to the server(https://axios-http.com/docs/post_example). The comment also must not exceed 150 characters:
<TextField
...
defaultValue="Comment here..."
inputProps={{ maxLength: 150 }}
/>
POST request to ‘/post/:id’ example:
request header: { Authorization: Bearer <token> },
request body: { “content”: <String> }
Response example:
{
"status": "success",
"data": {
"comment": {
"id": 1,
"content": "Hello world!",
"user": {
"id": 5,
"cohortId": null,
"firstName": "Nathan",
"lastName": "King",
"email": "ngk2@gmail.com",
"bio": "Hello world",
"githubUrl": "https://github.com/vherus",
"role": "STUDENT"
}
}
}
}
-
Add a comment component where comments will be rendered in conditionally, the first comment displayed will always be the latest, if there is more than one comment then a button to view all comments will be shown at the bottom of the post, when the user clicks this the post will be expanded displaying all the comments.
-
Then add a filtering function that sorts the comments by ‘Most Recent’ and ‘Oldest’, the UI will be created using MUI(https://mui.com/material-ui/react-menu/)
