diff --git a/README.md b/README.md
index c33761fd7..c36849bfe 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ form to add new comments.
 Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 
 > Here is [the working version](https://mate-academy.github.io/react_dynamic-list-of-posts/)
+Demo: (https://moskkat40/react_dynamic-list-of-posts/)
 
 1. Learn the `utils/fetchClient.ts` and use it to interact with the API (tests expect that you each API request is sent after 300 ms delay);
 1. Initially the `App` shows the `UserSelector` and a paragraph `No user selected` in the main content block.
diff --git a/src/App.tsx b/src/App.tsx
index 017957182..d03477acd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/indent */
 import classNames from 'classnames';
 
 import 'bulma/css/bulma.css';
@@ -8,53 +10,174 @@ import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
+import { useEffect, useMemo, useState } from 'react';
+import * as servicesUsers from './api/users';
+import * as servicesPosts from './api/posts';
+import * as servicesComments from './api/comments';
+import { Post } from './types/Post';
+import { Comment } from './types/Comment';
 
-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([]);
+  const [isUser, setIsUser] = useState(false);
+  const [userId, setUserId] = useState<number | null>(null);
+  const [posts, setPosts] = useState([]);
+  const [comments, setComments] = useState([]);
+  const [currentPostId, setCurrentPostId] = useState(0);
+  const [openPostId, setOpenPostId] = useState<number | null>(null);
+  const [isWritePostButton, setIsWritePostButton] = useState(false);
+  const [loading, setLoading] = useState('');
+  const [isError, setIsError] = useState(false);
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  useEffect(() => {
+    setLoading('users');
+    servicesUsers
+      .getUsers()
+      .then(res => {
+        setUsers(res);
+        setIsError(false);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setLoading(''));
+  }, []);
 
-              <Loader />
+  useEffect(() => {
+    if (userId) {
+    setLoading('posts');
+    servicesPosts.getPosts(userId)
+      .then(res => {
+        setPosts(res);
+        setIsError(false);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setLoading(''));
+    }
+}, [userId]);
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+  const getCommentsByPostId = (postId: number) => {
+    setLoading('comments');
+    setCurrentPostId(postId);
+
+    return servicesComments
+      .getComments(postId)
+      .then(res => {
+        setComments(res);
+        setIsError(false);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setLoading(''));
+  };
+
+  const addComment = ({ name, email, body, postId }: Comment) => {
+    setLoading('addComment');
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+    return servicesComments
+      .createComment({ name, email, body, postId })
+      .then(newComment => {
+        setComments(currentComments => [...currentComments, newComment]);
+        setIsError(false);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setLoading(''));
+  };
+
+  const deleteComment = (commentId: number) => {
+    servicesComments
+      .deleteComment(commentId)
+      .then(() =>
+        setComments(currentComments =>
+          currentComments.filter(comment => comment.id !== commentId),
+        ),
+      );
+  };
+
+  const currentPost = useMemo(() => {
+    return posts.find((post: Post) => post.id === currentPostId);
+  }, [currentPostId, posts]);
+
+  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
+                  users={users}
+                  setIsUser={setIsUser}
+                  setOpenPostId={setOpenPostId}
+                  setUserId={setUserId}
+                />
               </div>
+              {loading === 'users' && <Loader />}
+              <div className="block" data-cy="MainContent">
+                <p data-cy="NoSelectedUser">
+                  {!isUser && loading !== 'users' && 'No user selected'}
+                </p>
 
-              <PostsList />
-            </div>
-          </div>
-        </div>
+                {loading === 'posts' && <Loader />}
+                {isError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </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 />
+                {posts.length === 0 &&
+                  isUser &&
+                  loading !== 'posts' &&
+                  !isError && (
+                  <div
+                    className="notification is-warning"
+                    data-cy="NoPostsYet"
+                  >
+                      No posts yet
+                    </div>
+                )}
+
+                {isUser &&
+                  posts.length > 0 &&
+                  loading !== 'posts' &&
+                  !isError && (
+                  <PostsList
+                    posts={posts}
+                    getCommentsByPostId={getCommentsByPostId}
+                    openPostId={openPostId}
+                    setOpenPostId={setOpenPostId}
+                    setIsWritePostButton={setIsWritePostButton}
+                  />
+                )}
+              </div>
+            </div>
           </div>
+            <div
+              data-cy="Sidebar"
+              className={classNames(
+                'tile',
+                'is-parent',
+                'is-8-desktop',
+                'Sidebar',
+                {'Sidebar--open': posts.length > 0 && openPostId}
+              )}
+            >
+              <div className="tile is-child box is-success ">
+                <PostDetails
+                  comments={comments}
+                  currentPost={currentPost}
+                  addComment={addComment}
+                  isWritePostButton={isWritePostButton}
+                  setIsWritePostButton={setIsWritePostButton}
+                  deleteComment={deleteComment}
+                  loadingComments={loading === 'comments'}
+                  loadingAddNewComment={loading === 'addComment'}
+                  isError={isError}
+                />
+              </div>
+            </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};
diff --git a/src/api/comments.ts b/src/api/comments.ts
new file mode 100644
index 000000000..084b04a39
--- /dev/null
+++ b/src/api/comments.ts
@@ -0,0 +1,19 @@
+import { Comment } from '../types/Comment';
+import { client } from '../utils/fetchClient';
+
+export const getComments = (postId: number) => {
+  return client.get(`/comments?postId=${postId}`);
+};
+
+export const createComment = ({
+  name,
+  email,
+  body,
+  postId,
+}: Omit<Comment, 'id'>) => {
+  return client.post<Comment>('/comments', { name, email, body, postId });
+};
+
+export const deleteComment = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};
diff --git a/src/api/posts.ts b/src/api/posts.ts
new file mode 100644
index 000000000..c0733b040
--- /dev/null
+++ b/src/api/posts.ts
@@ -0,0 +1,5 @@
+import { client } from '../utils/fetchClient';
+
+export const getPosts = (userId: number) => {
+  return client.get(`/posts?userId=${userId}`);
+};
diff --git a/src/api/users.ts b/src/api/users.ts
new file mode 100644
index 000000000..70a263bb9
--- /dev/null
+++ b/src/api/users.ts
@@ -0,0 +1,5 @@
+import { client } from '../utils/fetchClient';
+
+export const getUsers = () => {
+  return client.get('/users');
+};
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index 73a8a0b45..5b10d982a 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -1,6 +1,87 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { Comment } from '../types/Comment';
+
+type Props = {
+  addComment: (a: Comment) => Promise<void>;
+  postId: number;
+  loadingAddNewComment: boolean;
+};
+
+export const NewCommentForm: React.FC<Props> = ({
+  addComment,
+  postId,
+  loadingAddNewComment,
+}) => {
+  const [name, setName] = useState('');
+  const [titleError, setTitleError] = useState(false);
+
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState(false);
+
+  const [body, setBody] = useState('');
+  const [bodyError, setBodyError] = useState(false);
+
+  const [isReset, setIsReset] = useState(false);
+
+  function reset() {
+    setBody('');
+  }
+
+  function resetAllFields() {
+    setIsReset(true);
+    setName('');
+    setEmail('');
+    setBody('');
+  }
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+    setTitleError(false);
+  };
+
+  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+    setEmailError(false);
+  };
+
+  const handleBodyChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setBody(event.target.value);
+    setBodyError(false);
+  };
+
+  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    const trimmedName = name.trim();
+    const trimmedEmail = email.trim();
+    const trimmedBody = body.trim();
+
+    if (name.length === 0 || !trimmedName) {
+      setTitleError(true);
+    }
+
+    if (email.length === 0 || !trimmedEmail) {
+      setEmailError(true);
+    }
+
+    if (body.length === 0 || !trimmedBody) {
+      setBodyError(true);
+    }
+
+    if (name.length > 0 && email.length > 0 && body.length > 0) {
+      addComment({
+        name,
+        email,
+        body,
+        postId,
+        id: 0,
+      }).then(() => {
+        reset();
+      });
+    }
+  };
 
-export const NewCommentForm: React.FC = () => {
   return (
     <form data-cy="NewCommentForm">
       <div className="field" data-cy="NameField">
@@ -12,26 +93,34 @@ export const NewCommentForm: React.FC = () => {
           <input
             type="text"
             name="name"
+            value={name}
             id="comment-author-name"
             placeholder="Name Surname"
-            className="input is-danger"
+            className={classNames('input', {
+              'is-danger': titleError && !isReset,
+            })}
+            onChange={handleNameChange}
           />
 
           <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>
+          {titleError && !isReset && (
+            <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>
+        {titleError && !isReset && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Name is required
+          </p>
+        )}
       </div>
 
       <div className="field" data-cy="EmailField">
@@ -41,28 +130,36 @@ export const NewCommentForm: React.FC = () => {
 
         <div className="control has-icons-left has-icons-right">
           <input
-            type="text"
+            type="email"
             name="email"
             id="comment-author-email"
+            value={email}
             placeholder="email@test.com"
-            className="input is-danger"
+            className={classNames('input', {
+              'is-danger': emailError && !isReset,
+            })}
+            onChange={handleEmailChange}
           />
 
           <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>
+          {emailError && !isReset && (
+            <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>
+        {emailError && !isReset && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Email is required
+          </p>
+        )}
       </div>
 
       <div className="field" data-cy="BodyField">
@@ -74,26 +171,42 @@ export const NewCommentForm: React.FC = () => {
           <textarea
             id="comment-body"
             name="body"
+            value={body}
             placeholder="Type comment here"
-            className="textarea is-danger"
+            className={classNames('textarea', {
+              'is-danger': bodyError && !isReset,
+            })}
+            onChange={handleBodyChange}
           />
         </div>
 
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Enter some text
-        </p>
+        {bodyError && !isReset && (
+          <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': loadingAddNewComment,
+            })}
+            onClick={handleSubmit}
+          >
             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={resetAllFields}
+          >
             Clear
           </button>
         </div>
diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
index 2f82db916..5e546e4a2 100644
--- a/src/components/PostDetails.tsx
+++ b/src/components/PostDetails.tsx
@@ -1,106 +1,118 @@
 import React from 'react';
 import { Loader } from './Loader';
 import { NewCommentForm } from './NewCommentForm';
+import { Comment } from '../types/Comment';
+import { Post } from '../types/Post';
+
+type Props = {
+  comments: Comment[];
+  currentPost: Post;
+  addComment: (a: Comment) => Promise<void>;
+  isWritePostButton: boolean;
+  setIsWritePostButton: (a: boolean) => void;
+  deleteComment: (a: number) => void;
+  loadingComments: boolean;
+  loadingAddNewComment: boolean;
+  isError: boolean;
+};
+
+export const PostDetails: React.FC<Props> = ({
+  comments,
+  currentPost,
+  addComment,
+  isWritePostButton,
+  setIsWritePostButton,
+  deleteComment,
+  loadingComments,
+  loadingAddNewComment,
+  isError,
+}) => {
+  if (!currentPost) {
+    return null;
+  }
+
+  const handleOpenWritePost = () => {
+    setIsWritePostButton(true);
+  };
+
+  const handleDeleteComment = (postId: number) => {
+    deleteComment(postId);
+  };
 
-export const PostDetails: React.FC = () => {
   return (
     <div className="content" data-cy="PostDetails">
       <div className="content" data-cy="PostDetails">
         <div className="block">
           <h2 data-cy="PostTitle">
-            #18: voluptate et itaque vero tempora molestiae
+            {`#${currentPost.id}: ${currentPost.title}`}
           </h2>
 
-          <p data-cy="PostBody">
-            eveniet quo quis laborum totam consequatur non dolor ut et est
-            repudiandae est voluptatem vel debitis et magnam
-          </p>
+          <p data-cy="PostBody">{currentPost.body}</p>
         </div>
-
+        {loadingComments && <Loader />}
         <div className="block">
-          <Loader />
-
-          <div className="notification is-danger" data-cy="CommentsError">
-            Something went wrong
-          </div>
-
-          <p className="title is-4" data-cy="NoCommentsMessage">
-            No comments yet
-          </p>
-
-          <p className="title is-4">Comments:</p>
-
-          <article className="message is-small" data-cy="Comment">
-            <div className="message-header">
-              <a href="mailto:misha@mate.academy" data-cy="CommentAuthor">
-                Misha Hrynko
-              </a>
-              <button
-                data-cy="CommentDelete"
-                type="button"
-                className="delete is-small"
-                aria-label="delete"
-              >
-                delete button
-              </button>
+          {isError && (
+            <div className="notification is-danger" data-cy="CommentsError">
+              Something went wrong
             </div>
+          )}
+          {!loadingComments && !isError && (
+            <>
+              {comments.length === 0 ? (
+                <p className="title is-4" data-cy="NoCommentsMessage">
+                  No comments yet
+                </p>
+              ) : (
+                <p className="title is-4">Comments:</p>
+              )}
 
-            <div className="message-body" data-cy="CommentBody">
-              Some comment
-            </div>
-          </article>
+              {comments.map(comment => (
+                <article
+                  key={comment.id}
+                  className="message is-small"
+                  data-cy="Comment"
+                >
+                  <div className="message-header">
+                    <a href={`mailto:${comment.email}`} data-cy="CommentAuthor">
+                      {comment.name}
+                    </a>
+                    <button
+                      data-cy="CommentDelete"
+                      type="button"
+                      className="delete is-small"
+                      aria-label="delete"
+                      onClick={() => handleDeleteComment(comment.id)}
+                    >
+                      delete button
+                    </button>
+                  </div>
 
-          <article className="message is-small" data-cy="Comment">
-            <div className="message-header">
-              <a href="mailto:misha@mate.academy" data-cy="CommentAuthor">
-                Misha Hrynko
-              </a>
-
-              <button
-                data-cy="CommentDelete"
-                type="button"
-                className="delete is-small"
-                aria-label="delete"
-              >
-                delete button
-              </button>
-            </div>
-            <div className="message-body" data-cy="CommentBody">
-              One more comment
-            </div>
-          </article>
-
-          <article className="message is-small" data-cy="Comment">
-            <div className="message-header">
-              <a href="mailto:misha@mate.academy" data-cy="CommentAuthor">
-                Misha Hrynko
-              </a>
-
-              <button
-                data-cy="CommentDelete"
-                type="button"
-                className="delete is-small"
-                aria-label="delete"
-              >
-                delete button
-              </button>
-            </div>
-
-            <div className="message-body" data-cy="CommentBody">
-              {'Multi\nline\ncomment'}
-            </div>
-          </article>
-
-          <button
-            data-cy="WriteCommentButton"
-            type="button"
-            className="button is-link"
-          >
-            Write a comment
-          </button>
+                  <div className="message-body" data-cy="CommentBody">
+                    {comment.body}
+                  </div>
+                </article>
+              ))}
+            </>
+          )}
         </div>
-
-        <NewCommentForm />
+        {!loadingComments &&
+          !isError &&
+          (isWritePostButton ? (
+            <NewCommentForm
+              addComment={addComment}
+              postId={currentPost.id}
+              loadingAddNewComment={loadingAddNewComment}
+            />
+          ) : (
+            <button
+              data-cy="WriteCommentButton"
+              type="button"
+              className="button is-link"
+              onClick={handleOpenWritePost}
+            >
+              Write a comment
+            </button>
+          ))}
       </div>
     </div>
   );
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
index cf90f04b0..02978ce23 100644
--- a/src/components/PostsList.tsx
+++ b/src/components/PostsList.tsx
@@ -1,86 +1,69 @@
-import React from 'react';
+import { Post } from '../types/Post';
+import classNames from 'classnames';
 
-export const PostsList: React.FC = () => (
-  <div data-cy="PostsList">
-    <p className="title">Posts:</p>
+type Props = {
+  posts: Post[];
+  getCommentsByPostId: (a: number) => void;
+  openPostId: number | null;
+  setOpenPostId: (a: number | null) => void;
+  setIsWritePostButton: (a: boolean) => void;
+};
 
-    <table className="table is-fullwidth is-striped is-hoverable is-narrow">
-      <thead>
-        <tr className="has-background-link-light">
-          <th>#</th>
-          <th>Title</th>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <th> </th>
-        </tr>
-      </thead>
+export const PostsList: React.FC<Props> = ({
+  posts,
+  getCommentsByPostId,
+  openPostId,
+  setOpenPostId,
+  setIsWritePostButton,
+}) => {
+  const handleOpenComments = (postId: number) => {
+    if (openPostId === postId) {
+      setOpenPostId(null);
+      setIsWritePostButton(false);
+    } else {
+      setOpenPostId(postId);
+      getCommentsByPostId(postId);
+      setIsWritePostButton(false);
+    }
+  };
 
-      <tbody>
-        <tr data-cy="Post">
-          <td data-cy="PostId">17</td>
+  return (
+    <div data-cy="PostsList">
+      <p className="title">Posts:</p>
 
-          <td data-cy="PostTitle">
-            fugit voluptas sed molestias voluptatem provident
-          </td>
+      <table className="table is-fullwidth is-striped is-hoverable is-narrow">
+        <thead>
+          <tr className="has-background-link-light">
+            <th>#</th>
+            <th>Title</th>
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <th> </th>
+          </tr>
+        </thead>
 
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
+        <tbody>
+          {posts.map(post => (
+            <tr key={post.id} data-cy="Post">
+              <td data-cy="PostId">{post.id}</td>
 
-        <tr data-cy="Post">
-          <td data-cy="PostId">18</td>
+              <td data-cy="PostTitle">{post.title}</td>
 
-          <td data-cy="PostTitle">
-            voluptate et itaque vero tempora molestiae
-          </td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link"
-            >
-              Close
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">19</td>
-          <td data-cy="PostTitle">adipisci placeat illum aut reiciendis qui</td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">20</td>
-          <td data-cy="PostTitle">doloribus ad provident suscipit at</td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-);
+              <td className="has-text-right is-vcentered">
+                <button
+                  type="button"
+                  data-cy="PostButton"
+                  className={classNames('button is-link', {
+                    'is-light': openPostId !== post.id,
+                  })}
+                  onClick={() => handleOpenComments(post.id)}
+                >
+                  {openPostId === post.id ? 'Close' : 'Open'}
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index c89442841..378575738 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -1,16 +1,63 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { User } from '../types/User';
+
+type Props = {
+  users: User[];
+  setIsUser: (a: boolean) => void;
+  setUserId: (a: number | null) => void;
+  setOpenPostId: (a: null | number) => void;
+};
+
+export const UserSelector: React.FC<Props> = ({
+  users,
+  setIsUser,
+  setUserId,
+  setOpenPostId,
+}) => {
+  const [isActive, setIsActive] = useState(false);
+  const [isActiveUserId, setIsActiveUserId] = useState(0);
+  const [userName, setUserName] = useState('');
+
+  const handleClickDropdown = () => {
+    setIsActive(!isActive);
+  };
+
+  const handleShowUsersPosts = (
+    event: React.MouseEvent<HTMLAnchorElement>,
+    userId: number,
+  ) => {
+    event.preventDefault();
+    setOpenPostId(null);
+    setIsActiveUserId(userId);
+    setIsUser(true);
+    setUserId(userId);
+
+    setUserName(event.currentTarget.innerHTML);
+    setIsActive(false);
+  };
+
+  const handleCloseDropdown = (event: React.FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setIsActive(false);
+    }
+  };
 
-export const UserSelector: React.FC = () => {
   return (
-    <div data-cy="UserSelector" className="dropdown is-active">
+    <div
+      data-cy="UserSelector"
+      className={classNames('dropdown', { 'is-active': isActive })}
+      onBlur={handleCloseDropdown}
+    >
       <div className="dropdown-trigger">
         <button
           type="button"
           className="button"
           aria-haspopup="true"
           aria-controls="dropdown-menu"
+          onClick={handleClickDropdown}
         >
-          <span>Choose a user</span>
+          <span>{userName ? userName : 'Choose a user'}</span>
 
           <span className="icon is-small">
             <i className="fas fa-angle-down" aria-hidden="true" />
@@ -20,21 +67,18 @@ export const UserSelector: React.FC = () => {
 
       <div className="dropdown-menu" id="dropdown-menu" role="menu">
         <div className="dropdown-content">
-          <a href="#user-1" className="dropdown-item">
-            Leanne Graham
-          </a>
-          <a href="#user-2" className="dropdown-item is-active">
-            Ervin Howell
-          </a>
-          <a href="#user-3" className="dropdown-item">
-            Clementine Bauch
-          </a>
-          <a href="#user-4" className="dropdown-item">
-            Patricia Lebsack
-          </a>
-          <a href="#user-5" className="dropdown-item">
-            Chelsey Dietrich
-          </a>
+          {users.map(user => (
+            <a
+              key={user.id}
+              href={`#user-${user.id}`}
+              className={classNames('dropdown-item', {
+                'is-active': isActiveUserId === user.id,
+              })}
+              onClick={event => handleShowUsersPosts(event, user.id)}
+            >
+              {user.name}
+            </a>
+          ))}
         </div>
       </div>
     </div>