solution

cypress/integration/page.spec.js

@@ -254,7 +254,7 @@ describe('', () => {
         cy.get('@users').should('have.callCount', 1);
       });
 
-      it.skip('should not request posts from API', () => {
+      it('should not request posts from API', () => {
         page.mockUsers();
         page.spyOn('**/posts**', 'posts');
 
@@ -265,7 +265,7 @@ describe('', () => {
         cy.get('@posts').should('not.be.called');
       });
 
-      it.skip('should not request comments from API', () => {
+      it('should not request comments from API', () => {
         page.mockUsers();
         page.mockUser1Posts();
         page.spyOn('**/comments**', 'comments');
@@ -283,21 +283,21 @@ describe('', () => {
     const { el, button, users, selectedUser } = userSelector;
 
     describe('', () => {
-      it.skip('should have all the loaded users', () => {
+      it('should have all the loaded users', () => {
         page.mockUsers();
         cy.visit('/');
 
         users().should('have.length', 10);
       });
 
-      it.skip('should not have users hardcoded', () => {
+      it('should not have users hardcoded', () => {
         cy.intercept('**/users', { fixture: 'someUsers' });
         cy.visit('/');
 
         users().should('have.length', 3);
       });
 
-      it.skip('should not have users before they are loaded', () => {
+      it('should not have users before they are loaded', () => {
         cy.clock();
         page.mockUsers();
         cy.visit('/');

src/components/Post.tsx

@@ -36,9 +36,3 @@ export const Post: React.FC<Props> = props => {
     </tr>
   );
 };
-
-{
-  <button type="button" data-cy="PostButton" className="button is-link">
-    Close
-  </button>;
-}

src/components/PostDetails.tsx

@@ -13,19 +13,19 @@ export const PostDetails: React.FC<Props> = ({ postSelected }) => {
   const [comments, setComments] = useState<CommentItem[]>([]);
 
   const [isError, setIsError] = useState<boolean>(false);
-  const [isLoading, setIsLoadind] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [isAddingComment, setIsAddingComment] = useState<boolean>(false);
 
   useEffect(() => {
-    setIsLoadind(true);
+    setIsLoading(true);
 
     commentsService
       .getComments(postSelected.id)
       .then(setComments)
       .catch(() => {
         setIsError(true);
       })
-      .finally(() => setIsLoadind(false));
+      .finally(() => setIsLoading(false));
   }, [postSelected]);
 
   useEffect(() => {
@@ -47,64 +47,62 @@ export const PostDetails: React.FC<Props> = ({ postSelected }) => {
 
   return (
     <div className="content" data-cy="PostDetails">
-      <div className="content" data-cy="PostDetails">
-        <div className="block">
-          <h2 data-cy="PostTitle">
-            #{postSelected.id}: {postSelected.title}
-          </h2>
+      <div className="block">
+        <h2 data-cy="PostTitle">
+          #{postSelected.id}: {postSelected.title}
+        </h2>
 
-          <p data-cy="PostBody">{postSelected.body}</p>
-        </div>
-
-        <div className="block">
-          {isLoading && <Loader />}
+        <p data-cy="PostBody">{postSelected.body}</p>
+      </div>
 
-          {isError && !isLoading && (
-            <div className="notification is-danger" data-cy="CommentsError">
-              Something went wrong
-            </div>
-          )}
+      <div className="block">
+        {isLoading && <Loader />}
 
-          {!comments.length && !isError && !isLoading && (
-            <p className="title is-4" data-cy="NoCommentsMessage">
-              No comments yet
-            </p>
-          )}
+        {isError && !isLoading && (
+          <div className="notification is-danger" data-cy="CommentsError">
+            Something went wrong
+          </div>
+        )}
 
-          {!!comments.length && !isLoading && !isError && (
-            <>
-              <p className="title is-4">Comments:</p>
-              {comments.map(comment => (
-                <Comment
-                  key={comment.id}
-                  comment={comment}
-                  handleDeleteComment={handleDeleteComment}
-                />
-              ))}
-            </>
-          )}
+        {!comments.length && !isError && !isLoading && (
+          <p className="title is-4" data-cy="NoCommentsMessage">
+            No comments yet
+          </p>
+        )}
 
-          {!isLoading && !isError && !isAddingComment && (
-            <button
-              onClick={() => setIsAddingComment(true)}
-              data-cy="WriteCommentButton"
-              type="button"
-              className="button is-link"
-            >
-              Write a comment
-            </button>
-          )}
-        </div>
+        {!!comments.length && !isLoading && !isError && (
+          <>
+            <p className="title is-4">Comments:</p>
+            {comments.map(comment => (
+              <Comment
+                key={comment.id}
+                comment={comment}
+                handleDeleteComment={handleDeleteComment}
+              />
+            ))}
+          </>
+        )}
 
-        {isAddingComment && (
-          <NewCommentForm
-            postId={postSelected.id}
-            addNewComment={addNewComment}
-            setIsError={setIsError}
-            setIsAddingComment={setIsAddingComment}
-          />
+        {!isLoading && !isError && !isAddingComment && (
+          <button
+            onClick={() => setIsAddingComment(true)}
+            data-cy="WriteCommentButton"
+            type="button"
+            className="button is-link"
+          >
+            Write a comment
+          </button>
         )}
       </div>
+
+      {isAddingComment && (
+        <NewCommentForm
+          postId={postSelected.id}
+          addNewComment={addNewComment}
+          setIsError={setIsError}
+          setIsAddingComment={setIsAddingComment}
+        />
+      )}
     </div>
   );
 };

src/utils/fetchClient.ts

@@ -30,8 +30,8 @@ function request<T>(
   return wait(300)
     .then(() => fetch(BASE_URL + url, options))
     .then(response => response.json())
-    .catch(() => {
-      throw new Error();
+    .catch(error => {
+      throw new Error(error);
     });
 }