solution

src/App.tsx

@@ -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';
@@ -8,55 +8,107 @@ 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 { client } from './utils/fetchClient';
+import { Post } from './types/Post';
 
 export const App: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [user, setUser] = useState<User | null>(null);
+  const [posts, setPosts] = useState<Post[] | null>(null);
+  const [post, setPost] = useState<Post | null>(null);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+
+    client.get<User[]>('/users')
+      .then(setUsers)
+      .catch(() => setErrorMessage("Can't load list of users"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    if (user) {
+      setLoading(true);
+      setPosts(null);
+      setPost(null);
+
+      if (errorMessage) {
+        setErrorMessage('');
+      }
+
+      client.get<Post[]>(`/posts?userId=${user.id}`)
+        .then(setPosts)
+        .catch(() => setErrorMessage(`Can't load posts from ${user.name}`))
+        .finally(() => setLoading(false));
+    }
+  }, [user]);
+
   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={users}
+                  onSetUser={setUser}
+                />
               </div>
 
               <div className="block" data-cy="MainContent">
-                <p data-cy="NoSelectedUser">
-                  No user selected
-                </p>
-
-                <Loader />
+                {!user && !errorMessage && (
+                  <p data-cy="NoSelectedUser">
+                    No user selected
+                  </p>
+                )}
 
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
+                {loading && (
+                  <Loader />
+                )}
 
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {errorMessage && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    {errorMessage}
+                  </div>
+                )}
 
-                <PostsList />
+                {posts && (!posts.length ? (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    No posts yet
+                  </div>
+                ) : (
+                  <PostsList
+                    posts={posts}
+                    onSetPost={setPost}
+                  />
+                ))}
               </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 />
+          {post && (
+            <div
+              data-cy="Sidebar"
+              className={classNames(
+                'tile',
+                'is-parent',
+                'is-8-desktop',
+                'Sidebar',
+                'Sidebar--open',
+              )}
+            >
+              <div className="tile is-child box is-success ">
+                <PostDetails post={post} />
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </main>

src/components/NewCommentForm.tsx

@@ -1,8 +1,96 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { client } from '../utils/fetchClient';
+import { Post } from '../types/Post';
+import { Comment } from '../types/Comment';
+
+type Props = {
+  post: Post;
+  onAddNewComment: (comment: Comment) => void;
+};
+
+export const NewCommentForm: React.FC<Props> = ({ post, onAddNewComment }) => {
+  const [userName, setUserName] = useState('');
+  const [hasUserNameError, setHasUserNameError] = useState(false);
+
+  const [userEmail, setUserEmail] = useState('');
+  const [hasUserEmailError, setHasUserEmailError] = useState(false);
+
+  const [commentText, setCommentText] = useState('');
+  const [hasCommentError, setHasCommentError] = useState(false);
+
+  const [loading, setLoading] = useState(false);
+  const [addNewCommentError, setAddNewCommentError] = useState('');
+
+  const handleUserNameChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setUserName(event.target.value);
+    setHasUserNameError(false);
+  };
+
+  const handleUserEmailChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setUserEmail(event.target.value);
+    setHasUserEmailError(false);
+  };
+
+  const handleCommentChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    setCommentText(event.target.value);
+    setHasCommentError(false);
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setLoading(true);
+
+    setHasUserNameError(!userName);
+    setHasUserEmailError(!userEmail);
+    setHasCommentError(!commentText);
+
+    if (!userName || !userEmail || !commentText) {
+      setLoading(false);
+
+      return;
+    }
+
+    const data = {
+      postId: post.id,
+      name: userName,
+      email: userEmail,
+      body: commentText,
+    };
+
+    client.post<Comment>('/comments', data)
+      .then((comment) => {
+        setAddNewCommentError('');
+        setCommentText('');
+
+        onAddNewComment(comment);
+      })
+      .catch(() => setAddNewCommentError("Can't add comment. Try again later."))
+      .finally(() => setLoading(false));
+  };
+
+  const handleReset = () => {
+    setUserName('');
+    setUserEmail('');
+    setCommentText('');
+    setHasUserNameError(false);
+    setHasUserEmailError(false);
+    setHasCommentError(false);
+    setAddNewCommentError('');
+  };
 
-export const NewCommentForm: React.FC = () => {
   return (
-    <form data-cy="NewCommentForm">
+    <form
+      data-cy="NewCommentForm"
+      onSubmit={handleSubmit}
+      onReset={handleReset}
+    >
       <div className="field" data-cy="NameField">
         <label className="label" htmlFor="comment-author-name">
           Author Name
@@ -14,24 +102,30 @@ export const NewCommentForm: React.FC = () => {
             name="name"
             id="comment-author-name"
             placeholder="Name Surname"
-            className="input is-danger"
+            className={classNames('input', { 'is-danger': hasUserNameError })}
+            value={userName}
+            onChange={(event) => handleUserNameChange(event)}
           />
 
           <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>
+          {hasUserNameError && (
+            <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>
+        {hasUserNameError && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Name is required
+          </p>
+        )}
       </div>
 
       <div className="field" data-cy="EmailField">
@@ -45,24 +139,30 @@ export const NewCommentForm: React.FC = () => {
             name="email"
             id="comment-author-email"
             placeholder="email@test.com"
-            className="input is-danger"
+            className={classNames('input', { 'is-danger': hasUserEmailError })}
+            value={userEmail}
+            onChange={(event) => handleUserEmailChange(event)}
           />
 
           <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>
+          {hasUserEmailError && (
+            <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>
+        {hasUserEmailError && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Email is required
+          </p>
+        )}
       </div>
 
       <div className="field" data-cy="BodyField">
@@ -75,18 +175,25 @@ export const NewCommentForm: React.FC = () => {
             id="comment-body"
             name="body"
             placeholder="Type comment here"
-            className="textarea is-danger"
+            className={classNames('textarea', { 'is-danger': hasCommentError })}
+            value={commentText}
+            onChange={(event) => handleCommentChange(event)}
           />
         </div>
 
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Enter some text
-        </p>
+        {hasCommentError && (
+          <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': loading })}
+          >
             Add
           </button>
         </div>
@@ -98,6 +205,15 @@ export const NewCommentForm: React.FC = () => {
           </button>
         </div>
       </div>
+
+      {addNewCommentError && (
+        <div
+          className="notification is-danger"
+          data-cy="PostsLoadingError"
+        >
+          {addNewCommentError}
+        </div>
+      )}
     </form>
   );
 };