fixed code

README.md

@@ -9,29 +9,30 @@ Install Prettier Extention and use this [VSCode settings](https://mate-academy.g
 
 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
+   [DEMO LINK](https://MaksymMohyla.github.io/react_dynamic-list-of-posts/)

src/App.tsx

@@ -102,7 +102,7 @@ export const App = () => {
           >
             {selectedPost && (
               <div className="tile is-child box is-success ">
-                <PostDetails selestedPost={selectedPost} />
+                <PostDetails selectedPost={selectedPost} />
               </div>
             )}
           </div>

src/api/comments.ts

@@ -15,6 +15,6 @@ export const createComment = ({
   return client.post<Comment>(`/comments`, { postId, name, email, body });
 };
 
-export const deleteComment = (commId: Comment['id']) => {
-  return client.delete(`/comments/${commId}`);
+export const deleteComment = (commentId: Comment['id']) => {
+  return client.delete(`/comments/${commentId}`);
 };

src/components/NewCommentForm.tsx

@@ -141,7 +141,7 @@ export const NewCommentForm: React.FC<Props> = ({
           <input
             value={email}
             onChange={handleEmailChange}
-            type="text"
+            type="email"
             name="email"
             id="comment-author-email"
             placeholder="email@test.com"

src/components/PostDetails.tsx

@@ -6,10 +6,12 @@ import { NewCommentForm } from './NewCommentForm';
 import { Post } from '../types/Post';
 
 type Props = {
-  selestedPost: Post;
+  selectedPost: Post;
 };
 
-export const PostDetails: React.FC<Props> = ({ selestedPost }) => {
+export const PostDetails: React.FC<Props> = ({
+  selectedPost: selectedPost,
+}) => {
   const [comments, setComments] = useState<Comment[]>([]);
   const [isCommentsLoading, setIsCommentsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -18,11 +20,11 @@ export const PostDetails: React.FC<Props> = ({ selestedPost }) => {
   useEffect(() => {
     setIsCommentsLoading(true);
     commentService
-      .getComments(selestedPost.id)
+      .getComments(selectedPost.id)
       .then(setComments)
       .catch(() => setHasError(true))
       .finally(() => setIsCommentsLoading(false));
-  }, [selestedPost]);
+  }, [selectedPost]);
 
   function deleteComment(commId: number) {
     setComments(currComments => currComments.filter(com => commId !== com.id));
@@ -39,10 +41,10 @@ export const PostDetails: React.FC<Props> = ({ selestedPost }) => {
       <div className="content" data-cy="PostDetails">
         <div className="block">
           <h2 data-cy="PostTitle">
-            #{selestedPost.id}: {selestedPost.title}
+            #{selectedPost.id}: {selectedPost.title}
           </h2>
 
-          <p data-cy="PostBody">{selestedPost.body}</p>
+          <p data-cy="PostBody">{selectedPost.body}</p>
         </div>
 
         <div className="block">
@@ -84,7 +86,7 @@ export const PostDetails: React.FC<Props> = ({ selestedPost }) => {
           <NewCommentForm
             setComments={setComments}
             setHasError={setHasError}
-            post={selestedPost}
+            post={selectedPost}
           />
         )}
       </div>

src/utils/fetchClient.ts

@@ -12,19 +12,17 @@ type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
 function request<T>(
   url: string,
   method: RequestMethod = 'GET',
-  data: any = null, // we can send any data to the server
+  data: any = null,
 ): Promise<T> {
   const options: RequestInit = { method };
 
   if (data) {
-    // We add body and Content-Type only for the requests with data
     options.body = JSON.stringify(data);
     options.headers = {
       'Content-Type': 'application/json; charset=UTF-8',
     };
   }
 
-  // should be 300
   return wait(300)
     .then(() => fetch(BASE_URL + url, options))
     .then(response => response.json());