Skip to content

Commit

Permalink
Solution
Browse files Browse the repository at this point in the history
  • Loading branch information
momos1703 committed Oct 31, 2024
1 parent 9dbf233 commit 455e555
Show file tree
Hide file tree
Showing 11 changed files with 441 additions and 310 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,5 @@ Install Prettier Extention and use this [VSCode settings](https://mate-academy.g
- 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.
- Delete the comment immediately not waiting for the server response to improve the UX.
1. (*) Handle `Add` and `Delete` errors so the user can retry
18 changes: 9 additions & 9 deletions cypress/support/component-index.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy="root"></div>
</body>
</html>
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"license": "GPL-3.0",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.2",
"bulma": "^1.0.1",
"bulma": "^0.9.4",
"classnames": "^2.5.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand Down
104 changes: 44 additions & 60 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,46 @@
// import classNames from 'classnames';

import 'bulma/css/bulma.css';
import '@fortawesome/fontawesome-free/css/all.css';
import './App.scss';

import { PostsList } from './components/PostsList';
// import { PostDetails } from './components/PostDetails';

import { getUsers } from './servises/user';
import { UserSelector } from './components/UserSelector';
import { useEffect, useState } from 'react';
import { User } from './types/User';
import { Post } from './types/Post';
import { getPosts } from './servises/post';
import { Loader } from './components/Loader';
import classNames from 'classnames';
import { PostDetails } from './components/PostDetails';

export const App = () => {
const [users, setUsers] = useState<User[] | null>(null);
const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [selectedPost, setSelectedPost] = useState<Post | null>(null);
const [isOpenedNewCommentForm, setIsOpenedNewCommentForm] = useState(false);
const [posts, setPosts] = useState<Post[] | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(false);
const showNoPost =
selectedUser && !isLoading && !error && posts && posts.length === 0;
selectedUser && !isLoading && !error && posts?.length === 0;
const showPostList =
selectedUser && !isLoading && !error && posts && posts.length > 0;

useEffect(() => {
getUsers().then(setUsers);
getUsers()
.then(setUsers)
.catch(usersLoadingError => {
throw usersLoadingError;
});
}, []);

useEffect(() => {
if (selectedUser) {
setIsLoading(true);
setError(false);
setPosts(null);
setSelectedPost(null);
setIsOpenedNewCommentForm(false);

getPosts(selectedUser.id)
.then(setPosts)
Expand All @@ -54,7 +62,7 @@ export const App = () => {
<div className="tile is-parent">
<div className="tile is-child box is-success">
<div className="block">
{users && (
{users && users?.length > 0 && (
<UserSelector
usersList={users}
selectedUser={selectedUser}
Expand All @@ -64,7 +72,7 @@ export const App = () => {
</div>

<div className="block" data-cy="MainContent">
{!selectedUser && (
{users && !selectedUser && (
<p data-cy="NoSelectedUser">No user selected</p>
)}

Expand All @@ -85,63 +93,39 @@ export const App = () => {
</div>
)}

{selectedUser &&
!isLoading &&
!error &&
posts &&
posts.length > 0 && <PostsList posts={posts} />}

{/* {!selectedUser ? (
<p data-cy="NoSelectedUser">No user selected</p>
) : (
<>
{isLoading ? (
<Loader />
) : (
<>
{error ? (
<div
className="notification is-danger"
data-cy="PostsLoadingError"
>
Something went wrong!
</div>
) : (
<>
{!posts || posts.length === 0 ? (
<div
className="notification is-warning"
data-cy="NoPostsYet"
>
No posts yet
</div>
) : (
<PostsList posts={posts} />
)}
</>
)}
</>
)}
</>
)} */}
{showPostList && (
<PostsList
posts={posts}
selectedPost={selectedPost}
onSelectPost={setSelectedPost}
/>
)}
</div>
</div>
</div>

{/* <div
data-cy="Sidebar"
className={classNames(
'tile',
'is-parent',
'is-8-desktop',
'Sidebar',
'Sidebar--open',
)}
>
<div className="tile is-child box is-success ">
<PostDetails />
{selectedPost && (
<div
data-cy="Sidebar"
className={classNames(
'tile',
'is-parent',
'is-8-desktop',
'Sidebar',
{ 'Sidebar--open': selectedPost },
)}
>
<div className="tile is-child box is-success ">
{selectedPost && (
<PostDetails
selectedPost={selectedPost}
isOpenedNewCommentForm={isOpenedNewCommentForm}
onOpenNewCommentForm={setIsOpenedNewCommentForm}
/>
)}
</div>
</div>
</div> */}
)}
</div>
</div>
</main>
Expand Down
Loading

0 comments on commit 455e555

Please sign in to comment.