Finished dynamic list of posts using api

README.md

@@ -8,29 +8,36 @@ form to add new comments.
 
 1. Learn the `utils/fetchClient.ts` and use it to interact with the API (tests expect that you each API request is sent after 300 ms delay);
 1. Initially the `App` shows the `UserSelector` and a paragraph `No user selected` in the main content block.
-    - load users from the API on page load;
-    - implement the `UserSelector` as a dropdown using the given markup;
+   - load users from the API on page load;
+   - implement the `UserSelector` as a dropdown using the given markup;
 1. When a user is selected load the user's posts form [the API](https://mate-academy.github.io/fe-students-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 `posts` loading fails;
-    - if the user has no posts show the `No posts yet` notification.
+   - show the `<Loader>` while waiting for the API response;
+   - show an error notification if `posts` loading fails;
+   - if the user has no posts show the `No posts yet` notification.
 1. Add the `Sidebar--open` class 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 `Loader` is shown before comments are loaded;
-    - `CommentsError` notification is show on loading error;
-    - `NoComments` message is shown if the post does not have comments yet;
+   - the post details should appear there immediately;
+   - the post commnets should be loaded from the API;
+   - the `Loader` is shown before comments are loaded;
+   - `CommentsError` notification is show on loading error;
+   - `NoComments` message is shown if the post does not have comments yet;
 1. Show the `Write a comment` button 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;
+   - 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;
 1. 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 `name` and `email` after the successful submit but clear a comment text;
-    - The `Clear` button should also clear all errors;
-    - Add the `is-loading` class to the submit button while waiting for a response;
-    - Add the new comment received as a response from the `API` to the end of the list;
+   - show errors only after the form is submitted;
+   - remove an error on the field change;
+   - keep the `name` and `email` after the successful submit but clear a comment text;
+   - The `Clear` button should also clear all errors;
+   - Add the `is-loading` class to the submit button while waiting for a response;
+   - Add the new comment received as a response from the `API` to the end of the list;
 1. Implement comment deletion
-    - Delete the commnet immediately not waiting for the server response to improve the UX.
-1. (*) Handle `Add` and `Delete` errors so the user can retry
+   - Delete the commnet immediately not waiting for the server response to improve the UX.
+1. (\*) Handle `Add` and `Delete` errors so the user can retry
+
+## Instructions
+
+- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
+- Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
+- Open one more terminal and run tests with `npm test` to ensure your solution is correct.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://Iksich.github.io/react_dynamic-list-of-posts/) and add it to the PR description.

cypress/support/index.d.ts

@@ -1,9 +1 @@
 import '@mate-academy/cypress-tools/support';
-
-declare global {
-  namespace Cypress {
-    interface Chainable<Subject> {
-      byDataCy(name: string, text: string): Chainable<JQuery>;
-    }
-  }
-}

cypress/support/index.js

@@ -1,19 +1 @@
 require('@mate-academy/cypress-tools/support');
-
-Cypress.Commands.add(
-  'byDataCy',
-  { prevSubject: 'optional' },
-
-  (subject, name, text = '') => {
-    const target = subject || cy;
-    const selector = `[data-cy="${name}"]`;
-
-    if (text) {
-      return target.contain(selector, text);
-    }
-
-    return subject
-      ? subject.find(selector)
-      : cy.get(selector);
-  },
-);