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

Solution #915

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Solution #915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
125 changes: 101 additions & 24 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import 'bulma/bulma.sass';
import '@fortawesome/fontawesome-free/css/all.css';
import './App.scss';
Expand All @@ -8,37 +8,110 @@ import { PostsList } from './components/PostsList';
import { PostDetails } from './components/PostDetails';
import { UserSelector } from './components/UserSelector';
import { Loader } from './components/Loader';
import { User } from './types/User';
import { getUsers } from './components/api/users';
import { Post } from './types/Post';
import { getPosts } from './components/api/posts';

export const App: React.FC = () => {
const [usersFroServer, setUsersFromServer] = useState<User[] | []>([]);
const [
selectedUser, setSelectedUser,
] = useState<User | null>(null);
const [userPosts, setUserPosts] = useState<Post[] | []>([]);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [showPostsList, setShowPostsList] = useState(false);
const [selectedPost, setSelectedPost] = useState<Post | null>(null);

useEffect(() => {
getUsers().then((data) => {
setUsersFromServer(data);
}).catch((error) => {
// eslint-disable-next-line no-console
console.error('Error loading users:', error);
setIsError(true);
});
}, []);

useEffect(() => {
if (selectedUser) {
setShowPostsList(false);
setIsLoading(true);
getPosts(selectedUser.id).then((data) => {
setUserPosts(data);
}).catch((error) => {
// eslint-disable-next-line no-console
console.error('Something went wrong!', error);
setIsError(true);
}).finally(() => {
setIsLoading(false);
setShowPostsList(true);
});
}
}, [selectedUser]);

const renderContent = () => {
let content = null;

if (!selectedUser) {
content = (
<p data-cy="NoSelectedUser">
No user selected
</p>
);
}

if (isLoading) {
content = (
<Loader />
);
}

if (isError) {
content = (
<div className="notification is-danger" data-cy="PostsLoadingError">
Something went wrong!
</div>
);
} else if (showPostsList) {
if (userPosts.length === 0) {
content = (
<div className="notification is-warning" data-cy="NoPostsYet">
No posts yet
</div>
);
} else {
content = (
<PostsList
userPosts={userPosts}
selectedPost={selectedPost}
setSelectedPost={setSelectedPost}
/>
);
}
}

return content;
};

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">
<UserSelector />
<UserSelector
users={usersFroServer}
selectedUser={selectedUser}
setSelectedUser={setSelectedUser}
setSelectedPost={setSelectedPost}
/>
</div>

<div className="block" data-cy="MainContent">
<p data-cy="NoSelectedUser">
No user selected
</p>

<Loader />

<div
className="notification is-danger"
data-cy="PostsLoadingError"
>
Something went wrong!
</div>

<div className="notification is-warning" data-cy="NoPostsYet">
No posts yet
</div>

<PostsList />
{renderContent()}
</div>
</div>
</div>
Expand All @@ -50,12 +123,16 @@ export const App: React.FC = () => {
'is-parent',
'is-8-desktop',
'Sidebar',
'Sidebar--open',
{ 'Sidebar--open': selectedPost },
)}
>
<div className="tile is-child box is-success ">
<PostDetails />
</div>
{selectedPost && (
<div className="tile is-child box is-success ">
<PostDetails
selectedPost={selectedPost}
/>
</div>
)}
</div>
</div>
</div>
Expand Down
175 changes: 146 additions & 29 deletions src/components/NewCommentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,84 @@
import React from 'react';
import classNames from 'classnames';

import React, { useEffect, useState } from 'react';
import { CommentData } from '../types/Comment';

type Props = {
addComment: (inputValue: CommentData) => void,
newPostLoading: boolean,
};

export const NewCommentForm: React.FC<Props> = ({
addComment,
newPostLoading,
}) => {
const [isError, setIsError] = useState({
nameError: false,
emailError: false,
textariaError: false,
});
const [inputValue, setInputValue] = useState<CommentData>({
name: '',
email: '',
body: '',
});

const handleResetComment = () => {
setInputValue({
name: '',
email: '',
body: '',
});

setIsError({
nameError: false,
emailError: false,
textariaError: false,
});
};

const handleAddComment = (e: React.FormEvent) => {
e.preventDefault();

const errors = {
nameError: !inputValue.name.trim(),
emailError: !inputValue.email.trim(),
textariaError: !inputValue.body.trim(),
};

setIsError(errors);

setIsError((prevErrors) => {
const hasErrors = Object.values(prevErrors).some((error) => error);

if (!hasErrors) {
addComment(inputValue);
setInputValue({
...inputValue,
body: '',
});
}

return prevErrors;
});
};

useEffect(() => {
if (inputValue.name) {
setIsError({ ...isError, nameError: false });
}

if (inputValue.email) {
setIsError({ ...isError, emailError: false });
}

if (inputValue.body) {
setIsError({ ...isError, textariaError: false });
}
}, [inputValue.name, inputValue.email, inputValue.body]);

export const NewCommentForm: React.FC = () => {
return (
<form data-cy="NewCommentForm">
<form data-cy="NewCommentForm" onSubmit={handleAddComment}>
<div className="field" data-cy="NameField">
<label className="label" htmlFor="comment-author-name">
Author Name
Expand All @@ -14,24 +90,35 @@ export const NewCommentForm: React.FC = () => {
name="name"
id="comment-author-name"
placeholder="Name Surname"
className="input is-danger"
className={classNames(
'input',
{ 'is-danger': isError.nameError },
)}
value={inputValue.name}
onChange={(e) => setInputValue(
{ ...inputValue, name: e.target.value },
)}
/>

<span className="icon is-small is-left">
<i className="fas fa-user" />
</span>

<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
{isError.nameError && (
<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
)}
</div>

<p className="help is-danger" data-cy="ErrorMessage">
Name is required
</p>
{isError.nameError && (
<p className="help is-danger" data-cy="ErrorMessage">
Name is required
</p>
)}
</div>

<div className="field" data-cy="EmailField">
Expand All @@ -45,24 +132,35 @@ export const NewCommentForm: React.FC = () => {
name="email"
id="comment-author-email"
placeholder="email@test.com"
className="input is-danger"
className={classNames(
'input',
{ 'is-danger': isError.emailError },
)}
value={inputValue.email}
onChange={(e) => setInputValue(
{ ...inputValue, email: e.target.value },
)}
/>

<span className="icon is-small is-left">
<i className="fas fa-envelope" />
</span>

<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
{isError.emailError && (
<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
)}
</div>

<p className="help is-danger" data-cy="ErrorMessage">
Email is required
</p>
{isError.emailError && (
<p className="help is-danger" data-cy="ErrorMessage">
Email is required
</p>
)}
</div>

<div className="field" data-cy="BodyField">
Expand All @@ -75,25 +173,44 @@ export const NewCommentForm: React.FC = () => {
id="comment-body"
name="body"
placeholder="Type comment here"
className="textarea is-danger"
className={classNames(
'textarea',
{ 'is-danger': isError.textariaError },
)}
value={inputValue.body}
onChange={(e) => setInputValue(
{ ...inputValue, body: e.target.value },
)}
/>
</div>

<p className="help is-danger" data-cy="ErrorMessage">
Enter some text
</p>
{isError.textariaError && (
<p className="help is-danger" data-cy="ErrorMessage">
Enter some text
</p>
)}
</div>

<div className="field is-grouped">
<div className="control">
<button type="submit" className="button is-link is-loading">
<button
type="submit"
className={classNames(
'button is-link',
{ 'is-loading': newPostLoading },
)}
>
Add
</button>
</div>

<div className="control">
{/* eslint-disable-next-line react/button-has-type */}
<button type="reset" className="button is-link is-light">
<button
type="reset"
className="button is-link is-light"
onClick={handleResetComment}
>
Clear
</button>
</div>
Expand Down
Loading
Loading