As a student or teacher, I should be able to create a new post by typing the content in a text area and submitting
I should not be able to submit if the text is too short (0 characters? or some other meaningful limit to be decided)
When a new post is created, it should appear in the posts feed and the form should be cleared
Any errors from the API should appear as a small error message for the user to see
UI Design
Aim for the following features to be part of the design:
name / initials of the logged in user that is writing the post
text area where user types the content of the post; can be multiline and expand and can also include character limits
a message area for displaying any errors/warnings, if needed (empty otherwise)
a submit button that when pressed creates the post
In the example below, the text area expands and the button to create post is below the text area.
UI Functionality
The create post UI should live inside the <PostsForm> component.
The <PostsForm> component is instantiated inside the <PostsPage> component.
The should know about the logged in user so that we can present the initials of the user that is writing the post. (pass this down from App.js to the component)
The form should be a controlled form with enough state to control the text area
On submit of the form, we send a request to the API to create a post from this user (see API/Networking below); on submit the form is cleared, if there were no errors; if there are errors, these are presented to the user.
Do not submit if the text is empty
API / NETWORKING
On submit, we POST the following payload to the api's /posts endpoint using utils/client.js:
{
"content": "the text the user typed"
}
On successful response, we add the post sent back by the server to the list of posts in the feed of so that the new post appears at the top; we also reset the form
The state for the posts feed is currently in <PostsPage>; to update it we add a function in <PostsPage> called addPostToFeed(post). This function is passed down via props and called by the <PostsForm> fetch response handler when the created post comes back. This function then adds the newly created post to the list of posts, so that the component re-renders with the new post.
On error, we display a message that the user can understand of the error
Requirements
UI Design
Aim for the following features to be part of the design:
In the example below, the text area expands and the button to create post is below the text area.
UI Functionality
<PostsForm>component.<PostsForm>component is instantiated inside the<PostsPage>component.API / NETWORKING
/postsendpoint usingutils/client.js:<PostsPage>; to update it we add a function in<PostsPage>calledaddPostToFeed(post). This function is passed down via props and called by the<PostsForm>fetch response handler when the created post comes back. This function then adds the newly created post to the list of posts, so that the component re-renders with the new post.