diff --git a/README.md b/README.md index b8767524f..59f074664 100644 --- a/README.md +++ b/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/) diff --git a/cypress.json b/cypress.json index 9090ff06c..8c162de1f 100644 --- a/cypress.json +++ b/cypress.json @@ -1,6 +1,5 @@ { "baseUrl": "http://localhost:3000", - "defaultCommandTimeout": 2000, "video": true, "viewportHeight": 1920, "viewportWidth": 1080, diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index 3dcae91c6..6d5052517 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -1,9 +1 @@ import '@mate-academy/cypress-tools/support'; - -declare global { - namespace Cypress { - interface Chainable { - byDataCy(name: string, text: string): Chainable; - } - } -} \ No newline at end of file diff --git a/cypress/support/index.js b/cypress/support/index.js index b02de611c..98b942506 100644 --- a/cypress/support/index.js +++ b/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); - }, -); diff --git a/package-lock.json b/package-lock.json index a9f5edd43..b5faaf0b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2013,9 +2013,9 @@ } }, "@mate-academy/cypress-tools": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@mate-academy/cypress-tools/-/cypress-tools-1.0.4.tgz", - "integrity": "sha512-FWNg0VKxxAvRbGriU3MLG2WVpJjc74OERKOggA+Se+KvxeDP8xQ4Y1Zmi1uhZS2onRoCAr478AO2gZ0mf+YYCw==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@mate-academy/cypress-tools/-/cypress-tools-1.0.5.tgz", + "integrity": "sha512-4pKueJR5Sc/1abFdC5dKOFtliC5QhT22ej290btJRrY5jOV9SQgwYBlhMoFXqLilTJMceLC7DqrRDPMdqYl89A==", "dev": true, "requires": { "@cypress/react": "^5.12.4", diff --git a/package.json b/package.json index 25a798d8e..6666effb3 100755 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index d83cd0531..5bfbf8efb 100644 --- a/src/App.tsx +++ b/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([]); + const [users, setUsers] = useState([]); const [selectedUser, setSelectedUser] = useState(null); - const [isUserLoader, setIsUserLoad] = useState(true); + const [isUserLoading, setIsUserLoading] = useState(true); - const [postsFromServer, setPostsFromServer] = useState(null); + const [posts, setPosts] = useState(null); const [selectedPost, setSelectedPost] = useState(null); const [comments, setCcomments] = useState([]); - const [isCommentsLoader, setIsCommentsLoad] = useState(false); + const [isCommentsLoading, setIsCommentsLoading] = useState(false); const [isFormVisible, setIsFormVisible] = useState(false); const [apiErrors, setApiErrors] = useState({ @@ -88,9 +88,9 @@ 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 })); } @@ -98,26 +98,26 @@ export const App: React.FC = () => { 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 = () => {
@@ -176,7 +176,7 @@ export const App: React.FC = () => { {selectedUser && ( <> - {isUserLoader && ( + {isUserLoading && ( )} @@ -189,9 +189,7 @@ export const App: React.FC = () => {
) : ( <> - {!isUserLoader - && postsFromServer - && !postsFromServer.length + {!isUserLoading && !posts?.length && (
{ No posts yet
)} - {!isUserLoader - && postsFromServer - && postsFromServer.length > 0 - && ( - - )} + {!isUserLoading && !!posts?.length && ( + + )} )} @@ -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} diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx index d1426a2a6..be102f93a 100644 --- a/src/components/NewCommentForm.tsx +++ b/src/components/NewCommentForm.tsx @@ -20,7 +20,7 @@ export const NewCommentForm: React.FC = ({ 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 = ({ 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 = ({ selectedPost, onAdd }) => { } catch { setIsError(true); } finally { - setIsButtonLoad(false); + setIsButtonLoading(false); } }; @@ -231,7 +231,7 @@ export const NewCommentForm: React.FC = ({ selectedPost, onAdd }) => { type="submit" className={classNames( 'button is-link', { - 'is-loading': isButtonLoad, + 'is-loading': isButtonLoading, }, )} > diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx index e5cc2c6ed..4900957ba 100644 --- a/src/components/PostDetails.tsx +++ b/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 = ({ selectedPost, comments, isCommentsError, - isLoader, + isLoading, isFormVisible, isDeleteError, onDelete, @@ -44,7 +44,7 @@ export const PostDetails: React.FC = ({
- {isLoader && ( + {isLoading && ( )} @@ -54,13 +54,13 @@ export const PostDetails: React.FC = ({
) : ( <> - {(!comments.length && !isLoader) && ( + {(!comments.length && !isLoading) && (

No comments yet

)} - {(comments.length > 0 && !isLoader) && ( + {(comments.length > 0 && !isLoading) && (

Comments:

)} @@ -103,7 +103,7 @@ export const PostDetails: React.FC = ({ )} - {(!isLoader && !isFormVisible) && ( + {(!isLoading && !isFormVisible) && (