Implement the App with ability to show posts of a selected user. Each post can be opened in the sidebar with its comments. There should delete a comment and a form to add new comments. Install Prettier Extention and use this VSCode settings to enable format on save.
Here is the working version
- Learn the
utils/fetchClient.tsand use it to interact with the API (tests expect that you each API request is sent after 300 ms delay); - Initially the
Appshows theUserSelectorand a paragraphNo user selectedin the main content block.- load users from the API on page load;
- implement the
UserSelectoras a dropdown using the given markup;
- When a user is selected load the user's posts form the API and show them using a table in the main content clock;
- show the
<Loader>while waiting for the API response; - show an error notification if
postsloading fails; - if the user has no posts show the
No posts yetnotification.
- show the
- Add the
Sidebar--openclass to the sidebar when a post is selected;- the post details should appear there immediately;
- the post commnets should be loaded from the API;
- the
Loaderis shown before comments are loaded; CommentsErrornotification is show on loading error;NoCommentsmessage is shown if the post does not have comments yet;
- Show the
Write a commentbutton below the comments- after click hide the button and show the form to add new comment;
- the form stays visible until the other post is opened;
- the form should be implemented as a separate component;
- The form requires an author's name and email and a comment text.
- show errors only after the form is submitted;
- remove an error on the field change;
- keep the
nameandemailafter the successful submit but clear a comment text; - The
Clearbutton should also clear all errors; - Add the
is-loadingclass to the submit button while waiting for a response; - Add the new comment received as a response from the
APIto the end of the list;
- Implement comment deletion
- Delete the commnet immediately not waiting for the server response to improve the UX.
- (*) Handle
AddandDeleteerrors so the user can retry