Fixes

README.md

@@ -34,3 +34,5 @@ form to add new comments.
 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
+
+[DEMO LINK](https://RomaSheva1987.github.io/react_dynamic-list-of-posts/)

cypress.json

@@ -1,6 +1,5 @@
 {
   "baseUrl": "http://localhost:3000",
-  "defaultCommandTimeout": 2000,
   "video": true,
   "viewportHeight": 1920,
   "viewportWidth": 1080,

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);
-  },
-);

package.json

@@ -21,7 +21,7 @@
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.5",
     "@mate-academy/eslint-config-react-typescript": "^1.0.5",
-    "@mate-academy/scripts": "^1.2.3",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.23",

src/App.tsx

@@ -17,15 +17,15 @@ import { Comment } from './types/Comment';
 import { ErrorMessage } from './types/ErrorMessage';
 
 export const App: React.FC = () => {
-  const [usersFromServer, setUseesFromServer] = useState<User[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [isUserLoader, setIsUserLoad] = useState(true);
+  const [isUserLoading, setIsUserLoading] = useState(true);
 
-  const [postsFromServer, setPostsFromServer] = useState<Post[] | null>(null);
+  const [posts, setPosts] = useState<Post[] | null>(null);
   const [selectedPost, setSelectedPost] = useState<Post | null>(null);
 
   const [comments, setCcomments] = useState<Comment[]>([]);
-  const [isCommentsLoader, setIsCommentsLoad] = useState(false);
+  const [isCommentsLoading, setIsCommentsLoading] = useState(false);
 
   const [isFormVisible, setIsFormVisible] = useState(false);
   const [apiErrors, setApiErrors] = useState({
@@ -88,36 +88,36 @@ export const App: React.FC = () => {
 
   const loadUsers = async () => {
     try {
-      const users = await getUsers();
+      const usersFromServer = await getUsers();
 
-      setUseesFromServer(users);
+      setUsers(usersFromServer);
     } catch {
       setApiErrors((prevState) => ({ ...prevState, userError: true }));
     }
   };
 
   const loadPosts = async () => {
     if (selectedUser) {
-      setIsUserLoad(true);
+      setIsUserLoading(true);
 
       setApiErrors((prevState) => ({ ...prevState, postError: false }));
       try {
-        const posts = await getPosts(selectedUser.id);
+        const postsFromServer = await getPosts(selectedUser.id);
 
-        setPostsFromServer(posts);
+        setPosts(postsFromServer);
       } catch {
         setApiErrors((prevState) => ({ ...prevState, postError: true }));
       } finally {
-        setIsUserLoad(false);
+        setIsUserLoading(false);
       }
     }
   };
 
-  const LoadComments = async () => {
+  const loadComments = async () => {
     if (selectedPost) {
       setApiErrors((prevState) => ({ ...prevState, commentsError: false }));
 
-      setIsCommentsLoad(true);
+      setIsCommentsLoading(true);
       setCcomments([]);
 
       try {
@@ -127,7 +127,7 @@ export const App: React.FC = () => {
       } catch {
         setApiErrors((prevState) => ({ ...prevState, commentsError: true }));
       } finally {
-        setIsCommentsLoad(false);
+        setIsCommentsLoading(false);
       }
     }
   };
@@ -141,7 +141,7 @@ export const App: React.FC = () => {
   }, [selectedUser]);
 
   useEffect(() => {
-    LoadComments();
+    loadComments();
   }, [selectedPost]);
 
   return (
@@ -152,7 +152,7 @@ export const App: React.FC = () => {
             <div className="tile is-child box is-success">
               <div className="block">
                 <UserSelector
-                  users={usersFromServer}
+                  users={users}
                   selectedUser={selectedUser}
                   onUserSelect={handleSelectUser}
                 />
@@ -176,7 +176,7 @@ export const App: React.FC = () => {
 
                 {selectedUser && (
                   <>
-                    {isUserLoader && (
+                    {isUserLoading && (
                       <Loader />
                     )}
 
@@ -189,9 +189,7 @@ export const App: React.FC = () => {
                       </div>
                     ) : (
                       <>
-                        {!isUserLoader
-                          && postsFromServer
-                          && !postsFromServer.length
+                        {!isUserLoading && !posts?.length
                           && (
                             <div
                               className="notification is-warning"
@@ -200,16 +198,13 @@ export const App: React.FC = () => {
                               No posts yet
                             </div>
                           )}
-                        {!isUserLoader
-                          && postsFromServer
-                          && postsFromServer.length > 0
-                          && (
-                            <PostsList
-                              posts={postsFromServer}
-                              selectedPost={selectedPost}
-                              onPostSelect={handleSelectPost}
-                            />
-                          )}
+                        {!isUserLoading && !!posts?.length && (
+                          <PostsList
+                            posts={posts}
+                            selectedPost={selectedPost}
+                            onPostSelect={handleSelectPost}
+                          />
+                        )}
                       </>
                     )}
                   </>
@@ -235,7 +230,7 @@ export const App: React.FC = () => {
                   selectedPost={selectedPost}
                   comments={comments}
                   isCommentsError={commentsError}
-                  isLoader={isCommentsLoader}
+                  isLoading={isCommentsLoading}
                   isFormVisible={isFormVisible}
                   isDeleteError={deleteCommentError}
                   onDelete={removeComment}

src/components/NewCommentForm.tsx

@@ -20,7 +20,7 @@ export const NewCommentForm: React.FC<Props> = ({ selectedPost, onAdd }) => {
   };
 
   const [comment, setComment] = useState(initComment);
-  const [isButtonLoad, setIsButtonLoad] = useState(false);
+  const [isButtonLoading, setIsButtonLoading] = useState(false);
   const [isError, setIsError] = useState(false);
   const [validationErrors, setValidationErrors] = useState({
     isName: true,
@@ -73,7 +73,7 @@ export const NewCommentForm: React.FC<Props> = ({ selectedPost, onAdd }) => {
 
     try {
       if (isFormValid) {
-        setIsButtonLoad(true);
+        setIsButtonLoading(true);
         const newComment = await addComment(comment);
 
         onAdd(newComment);
@@ -82,7 +82,7 @@ export const NewCommentForm: React.FC<Props> = ({ selectedPost, onAdd }) => {
     } catch {
       setIsError(true);
     } finally {
-      setIsButtonLoad(false);
+      setIsButtonLoading(false);
     }
   };
 
@@ -231,7 +231,7 @@ export const NewCommentForm: React.FC<Props> = ({ selectedPost, onAdd }) => {
             type="submit"
             className={classNames(
               'button is-link', {
-                'is-loading': isButtonLoad,
+                'is-loading': isButtonLoading,
               },
             )}
           >

src/components/PostDetails.tsx

@@ -9,7 +9,7 @@ type Props = {
   selectedPost: Post | null;
   comments: Comment[];
   isCommentsError: boolean;
-  isLoader: boolean;
+  isLoading: boolean;
   isFormVisible: boolean;
   isDeleteError: boolean;
   onDelete: (commentId: number) => void;
@@ -21,7 +21,7 @@ export const PostDetails: React.FC<Props> = ({
   selectedPost,
   comments,
   isCommentsError,
-  isLoader,
+  isLoading,
   isFormVisible,
   isDeleteError,
   onDelete,
@@ -44,7 +44,7 @@ export const PostDetails: React.FC<Props> = ({
         </div>
 
         <div className="block">
-          {isLoader && (
+          {isLoading && (
             <Loader />
           )}
 
@@ -54,13 +54,13 @@ export const PostDetails: React.FC<Props> = ({
             </div>
           ) : (
             <>
-              {(!comments.length && !isLoader) && (
+              {(!comments.length && !isLoading) && (
                 <p className="title is-4" data-cy="NoCommentsMessage">
                   No comments yet
                 </p>
               )}
 
-              {(comments.length > 0 && !isLoader) && (
+              {(comments.length > 0 && !isLoading) && (
                 <p className="title is-4">Comments:</p>
               )}
 
@@ -103,7 +103,7 @@ export const PostDetails: React.FC<Props> = ({
                 </div>
               )}
 
-              {(!isLoader && !isFormVisible) && (
+              {(!isLoading && !isFormVisible) && (
                 <button
                   data-cy="WriteCommentButton"
                   type="button"