Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Develop #1191

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Develop #1191

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9dbf233
users loading test
momos1703 Oct 28, 2024
455e555
Solution
momos1703 Oct 31, 2024
e5c2d00
Solution. Corrections 1
momos1703 Oct 31, 2024
0c89f0f
Solution. Corrections 2
momos1703 Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ Install Prettier Extention and use this [VSCode settings](https://mate-academy.g
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;
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;
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 block;
- 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.
Expand All @@ -33,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
View file
Open in desktop
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>
Empty file added mate-scripts
View file
Open in desktop
Empty file.
3,022 changes: 2,034 additions & 988 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
Empty file added [email protected]
View file
Open in desktop
Empty file.
153 changes: 113 additions & 40 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,133 @@
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';
momos1703 marked this conversation as resolved.
Show resolved Hide resolved
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';
momos1703 marked this conversation as resolved.
Show resolved Hide resolved
import classNames from 'classnames';
import { PostDetails } from './components/PostDetails';

export const App = () => (
<main className="section">
<div className="container">
<div className="tile is-ancestor">
<div className="tile is-parent">
<div className="tile is-child box is-success">
<div className="block">
<UserSelector />
</div>
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?.length === 0;
const showPostList =
selectedUser && !isLoading && !error && posts && posts.length > 0;

<div className="block" data-cy="MainContent">
<p data-cy="NoSelectedUser">No user selected</p>
useEffect(() => {
getUsers()
.then(setUsers)
.catch(usersLoadingError => {
throw usersLoadingError;
});
momos1703 marked this conversation as resolved.
Show resolved Hide resolved
}, []);

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

<div
className="notification is-danger"
data-cy="PostsLoadingError"
>
Something went wrong!
</div>
getPosts(selectedUser.id)
.then(setPosts)
.catch(loadingError => {
setError(true);

<div className="notification is-warning" data-cy="NoPostsYet">
No posts yet
throw loadingError;
})
momos1703 marked this conversation as resolved.
Show resolved Hide resolved
.finally(() => {
setIsLoading(false);
});
}
}, [selectedUser]);

return (
<main className="section">
<div className="container">
<div className="tile is-ancestor">
<div className="tile is-parent">
<div className="tile is-child box is-success">
<div className="block">
{users && users?.length > 0 && (
<UserSelector
usersList={users}
selectedUser={selectedUser}
onSelectUser={setSelectedUser}
/>
)}
</div>

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

{isLoading && <Loader />}

{!isLoading && error && (
<div
className="notification is-danger"
data-cy="PostsLoadingError"
>
Something went wrong!
</div>
)}

{showNoPost && (
<div className="notification is-warning" data-cy="NoPostsYet">
No posts yet
</div>
)}

{showPostList && (
<PostsList
posts={posts}
selectedPost={selectedPost}
onSelectPost={setSelectedPost}
/>
)}
</div>
</div>
</div>
</div>

<div
data-cy="Sidebar"
className={classNames(
'tile',
'is-parent',
'is-8-desktop',
'Sidebar',
'Sidebar--open',
{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 className="tile is-child box is-success ">
<PostDetails />
</div>
</div>
</div>
</div>
</main>
);
</main>
);
};
Loading
Loading