From 4c1970be14b2f9bd1dd98c465bd971af81d61b0e Mon Sep 17 00:00:00 2001
From: Kirill Gasan <dp160190gkj@gmail.com>
Date: Tue, 15 Oct 2024 17:38:26 +0300
Subject: [PATCH] add task solution

---
 README.md                         |   2 +
 src/App.tsx                       | 207 ++++++++++++++++++++++++------
 src/api/post.ts                   |  22 ++++
 src/components/NewCommentForm.tsx | 169 +++++++++++++++++++-----
 src/components/PostDetails.tsx    | 193 +++++++++++++++-------------
 src/components/PostsList.tsx      | 144 ++++++++++-----------
 src/components/UserSelector.tsx   | 101 +++++++++++----
 src/types/Comment.ts              |   2 +-
 8 files changed, 577 insertions(+), 263 deletions(-)
 create mode 100644 src/api/post.ts

diff --git a/README.md b/README.md
index c33761fd7..881e56696 100644
--- a/README.md
+++ b/README.md
@@ -35,3 +35,5 @@ Install Prettier Extention and use this [VSCode settings](https://mate-academy.g
 1. Implement comment deletion
     - Delete the commnet immediately not waiting for the server response to improve the UX.
 1. (*) Handle `Add` and `Delete` errors so the user can retry
+
+[DEMO LINK](https://Kirill1908.github.io/react_dynamic-list-of-posts/)
diff --git a/src/App.tsx b/src/App.tsx
index 017957182..da4c16b54 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,60 +1,187 @@
-import classNames from 'classnames';
+/* eslint-disable @typescript-eslint/indent */
 
+import classNames from 'classnames';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import { useEffect, useState } from 'react';
 
-import { PostsList } from './components/PostsList';
-import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
+import { PostDetails } from './components/PostDetails';
+import { PostsList } from './components/PostsList';
 import { Loader } from './components/Loader';
+import { Comment, CommentData } from './types/Comment';
+import { User } from './types/User';
+import { Post } from './types/Post';
+import {
+  addNewComment,
+  deleteComment,
+  getUserPostComments,
+  getUserPosts,
+  getUsers,
+} from './api/post';
 
-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[]>([]);
+  const [userSelected, setUserSelected] = useState<User | null>(null);
+  const [showPostLoader, setShowPostLoader] = useState<boolean>(false);
+  const [showCommentLoader, setShowCommentLoader] = useState<boolean>(false);
+  const [isAddingComment, setIsAddingComment] = useState(false);
+  const [userPosts, setUserPosts] = useState<Post[]>([]);
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+  const [isSidebarVisible, setIsSidebarVisible] = useState<number | null>(null);
+  const [postComments, setPostComments] = useState<Comment[]>([]);
+  const [hasPostError, setHasPostError] = useState<boolean>(false);
+  const [hasCommentError, setHasCommentError] = useState<boolean>(false);
+  const [isCommentFormVisible, setIsCommentFormVisible] = useState(false);
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  useEffect(() => {
+    getUsers()
+      .then(res => {
+        setUsers(res as User[]);
+      })
+      .catch(() => new Error('Failed to fetch users'));
+  }, []);
 
-              <Loader />
+  const fetchUserPosts = (user: User) => {
+    setShowPostLoader(true);
+    getUserPosts(user.id)
+      .then(res => {
+        setUserPosts(res as Post[]);
+        setHasPostError(false);
+      })
+      .catch(() => {
+        setHasPostError(true);
+      })
+      .finally(() => {
+        setShowPostLoader(false);
+      });
+  };
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+  const fetchPostComments = (currentPost: Post) => {
+    setIsSidebarVisible(currentPost.id);
+    setShowCommentLoader(true);
+
+    setSelectedPost(currentPost);
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+    getUserPostComments(currentPost.id)
+      .then(res => {
+        setPostComments(res as Comment[]);
+        setHasCommentError(false);
+      })
+      .catch(() => {
+        setHasCommentError(true);
+      })
+      .finally(() => {
+        setShowCommentLoader(false);
+      });
+  };
+
+  const removeComment = (commentId: number) => {
+    deleteComment(commentId)
+      .then(() => {
+        setPostComments(prevPostComments =>
+          prevPostComments.filter(
+            (comment: Comment) => comment.id !== commentId,
+          ),
+        );
+      })
+      .catch(() => new Error('Failed to delete comment'));
+  };
+
+  const createComment = (newComment: CommentData) => {
+    setIsAddingComment(true);
+    addNewComment(newComment)
+      .then(res => {
+        setPostComments([...postComments, res as Comment]);
+        setIsAddingComment(false);
+      })
+      .catch(() => new Error('Failed to add comment'));
+  };
+
+  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}
+                  setUserSelected={setUserSelected}
+                  userSelected={userSelected}
+                  handleUserPosts={fetchUserPosts}
+                  setShowSideBar={setIsSidebarVisible}
+                />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!userSelected && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
+
+                {showPostLoader && <Loader />}
+
+                {hasPostError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
+
+                {userPosts.length > 0 && !showPostLoader && (
+                  <PostsList
+                    userPosts={userPosts}
+                    handleShowComment={fetchPostComments}
+                    showSideBar={isSidebarVisible}
+                    setShowSideBar={setIsSidebarVisible}
+                    setShowCommentForm={setIsCommentFormVisible}
+                  />
+                )}
+                {userSelected &&
+                  userPosts.length === 0 &&
+                  !showPostLoader &&
+                  !hasPostError && (
+                    <div
+                      className="notification is-warning"
+                      data-cy="NoPostsYet"
+                    >
+                      No posts yet
+                    </div>
+                  )}
+              </div>
             </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 />
+          <div
+            data-cy="Sidebar"
+            className={classNames(
+              'tile',
+              'is-parent',
+              'is-8-desktop',
+              'Sidebar',
+              { 'Sidebar--open': isSidebarVisible },
+            )}
+          >
+            <div className="tile is-child box is-success ">
+              <PostDetails
+                isCommentLoading={showCommentLoader}
+                postComments={postComments}
+                selectedPost={selectedPost}
+                errorsComment={hasCommentError}
+                onDeleteComment={removeComment}
+                onAddComment={createComment}
+                isButtonAddLoading={isAddingComment}
+                onShowCommentFormChange={setIsCommentFormVisible}
+                isCommentFormVisible={isCommentFormVisible}
+                userSelected={userSelected}
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};
diff --git a/src/api/post.ts b/src/api/post.ts
new file mode 100644
index 000000000..e7dc0bcd9
--- /dev/null
+++ b/src/api/post.ts
@@ -0,0 +1,22 @@
+import { CommentData } from '../types/Comment';
+import { client } from '../utils/fetchClient';
+
+export const getUsers = () => {
+  return client.get('/users');
+};
+
+export const getUserPosts = (userId: number) => {
+  return client.get(`/posts?userId=${userId}`);
+};
+
+export const getUserPostComments = (postId: number) => {
+  return client.get(`/comments?postId=${postId}`);
+};
+
+export const addNewComment = (newComment: CommentData) => {
+  return client.post('/comments', newComment);
+};
+
+export const deleteComment = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index 73a8a0b45..d70acfcc8 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -1,8 +1,80 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { CommentData } from '../types/Comment';
+import { Post } from '../types/Post';
+
+type Props = {
+  addComment: (newComment: CommentData) => void;
+  buttonAddLoading: boolean;
+  selectedPost: Post | null;
+};
+
+export const NewCommentForm: React.FC<Props> = ({
+  addComment,
+  buttonAddLoading,
+  selectedPost,
+}) => {
+  const [name, setName] = useState('');
+  const [nameError, setNameError] = useState(false);
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState(false);
+  const [bodyComment, setBodyComment] = useState('');
+  const [bodyCommentError, setBodyCommentError] = useState(false);
+
+  let newComment: CommentData;
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setNameError(false);
+    setEmailError(false);
+    setBodyCommentError(false);
+
+    let hasError = false;
+
+    if (name.trim().length === 0) {
+      setNameError(true);
+      hasError = true;
+    }
+
+    if (email.trim().length === 0) {
+      setEmailError(true);
+      hasError = true;
+    }
+
+    if (bodyComment.trim().length === 0) {
+      setBodyCommentError(true);
+      hasError = true;
+    }
+
+    if (hasError) {
+      return;
+    }
+
+    if (selectedPost) {
+      newComment = {
+        postId: selectedPost.id,
+        name: name,
+        email: email,
+        body: bodyComment,
+      };
+
+      addComment(newComment);
+      setBodyComment('');
+    }
+  };
+
+  const handleFormClear = () => {
+    setName('');
+    setEmail('');
+    setBodyComment('');
+    setNameError(false);
+    setEmailError(false);
+    setBodyCommentError(false);
+  };
 
-export const NewCommentForm: React.FC = () => {
   return (
-    <form data-cy="NewCommentForm">
+    <form data-cy="NewCommentForm" onSubmit={handleFormSubmit}>
       <div className="field" data-cy="NameField">
         <label className="label" htmlFor="comment-author-name">
           Author Name
@@ -14,24 +86,32 @@ export const NewCommentForm: React.FC = () => {
             name="name"
             id="comment-author-name"
             placeholder="Name Surname"
-            className="input is-danger"
+            className={classNames('input', { 'is-danger': nameError })}
+            value={name}
+            onChange={e => {
+              setName(e.target.value);
+              setNameError(false);
+            }}
           />
 
           <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>
+          {nameError && (
+            <>
+              <span
+                className="icon is-small is-right has-text-danger"
+                data-cy="ErrorIcon"
+              >
+                <i className="fas fa-exclamation-triangle" />
+              </span>
+              <p className="help is-danger" data-cy="ErrorMessage">
+                Name is required
+              </p>
+            </>
+          )}
         </div>
-
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Name is required
-        </p>
       </div>
 
       <div className="field" data-cy="EmailField">
@@ -45,24 +125,32 @@ export const NewCommentForm: React.FC = () => {
             name="email"
             id="comment-author-email"
             placeholder="email@test.com"
-            className="input is-danger"
+            className={classNames('input', { 'is-danger': emailError })}
+            value={email}
+            onChange={e => {
+              setEmail(e.target.value);
+              setEmailError(false);
+            }}
           />
 
           <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 && (
+            <>
+              <span
+                className="icon is-small is-right has-text-danger"
+                data-cy="ErrorIcon"
+              >
+                <i className="fas fa-exclamation-triangle" />
+              </span>
+              <p className="help is-danger" data-cy="ErrorMessage">
+                Email is required
+              </p>
+            </>
+          )}
         </div>
-
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Email is required
-        </p>
       </div>
 
       <div className="field" data-cy="BodyField">
@@ -75,25 +163,42 @@ export const NewCommentForm: React.FC = () => {
             id="comment-body"
             name="body"
             placeholder="Type comment here"
-            className="textarea is-danger"
+            className={classNames('textarea', {
+              'is-danger': bodyCommentError,
+            })}
+            value={bodyComment}
+            onChange={e => {
+              setBodyComment(e.target.value);
+              setBodyCommentError(false);
+            }}
           />
         </div>
 
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Enter some text
-        </p>
+        {bodyCommentError && (
+          <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': buttonAddLoading,
+            })}
+          >
             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={handleFormClear}
+          >
             Clear
           </button>
         </div>
diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
index 2f82db916..4b89dd3d3 100644
--- a/src/components/PostDetails.tsx
+++ b/src/components/PostDetails.tsx
@@ -1,106 +1,121 @@
-import React from 'react';
-import { Loader } from './Loader';
+import React, { useEffect } from 'react';
 import { NewCommentForm } from './NewCommentForm';
+import { Loader } from './Loader';
+import { Comment, CommentData } from '../types/Comment';
+import { User } from '../types/User';
+import { Post } from '../types/Post';
+
+type Props = {
+  isCommentLoading: boolean;
+  postComments: Comment[];
+  selectedPost: Post | null;
+  errorsComment: boolean;
+  onDeleteComment: (commentId: number) => void;
+  onAddComment: (newComment: CommentData) => void;
+  isButtonAddLoading: boolean;
+  onShowCommentFormChange: (item: boolean) => void;
+  isCommentFormVisible: boolean;
+  userSelected: User | null;
+};
+
+export const PostDetails: React.FC<Props> = ({
+  isCommentLoading,
+  postComments,
+  selectedPost,
+  errorsComment,
+  onDeleteComment,
+  onAddComment,
+  isButtonAddLoading,
+  onShowCommentFormChange,
+  isCommentFormVisible,
+  userSelected,
+}) => {
+  useEffect(() => {
+    onShowCommentFormChange(false);
+  }, [selectedPost]);
+
+  if (!selectedPost || userSelected?.id !== selectedPost.userId) {
+    return null;
+  }
 
-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
-          </h2>
+          <h2 data-cy="PostTitle">{`#${selectedPost?.id}: ${selectedPost?.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">{selectedPost?.body}</p>
         </div>
 
         <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>
+          {isCommentLoading ? (
+            <Loader />
+          ) : (
+            <>
+              {errorsComment ? (
+                <div className="notification is-danger" data-cy="CommentsError">
+                  Something went wrong
+                </div>
+              ) : (
+                <>
+                  {postComments.length === 0 ? (
+                    <p className="title is-4" data-cy="NoCommentsMessage">
+                      No comments yet
+                    </p>
+                  ) : (
+                    <p className="title is-4">Comments:</p>
+                  )}
 
-          <p className="title is-4">Comments:</p>
+                  {postComments.map((comment: Comment) => (
+                    <article
+                      className="message is-small"
+                      data-cy="Comment"
+                      key={comment.id}
+                    >
+                      <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={() => onDeleteComment(comment.id)}
+                        ></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">
+                        {comment.body}
+                      </div>
+                    </article>
+                  ))}
 
-            <div className="message-body" data-cy="CommentBody">
-              Some 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">
-              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>
+                  {!isCommentFormVisible && (
+                    <button
+                      data-cy="WriteCommentButton"
+                      type="button"
+                      className="button is-link"
+                      onClick={() => onShowCommentFormChange(true)}
+                    >
+                      Write a comment
+                    </button>
+                  )}
+                </>
+              )}
+            </>
+          )}
         </div>
-
-        <NewCommentForm />
+        {isCommentFormVisible && (
+          <NewCommentForm
+            addComment={onAddComment}
+            buttonAddLoading={isButtonAddLoading}
+            selectedPost={selectedPost}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
index cf90f04b0..b20a36c69 100644
--- a/src/components/PostsList.tsx
+++ b/src/components/PostsList.tsx
@@ -1,86 +1,72 @@
 import React from 'react';
+import { Post } from '../types/Post';
 
-export const PostsList: React.FC = () => (
-  <div data-cy="PostsList">
-    <p className="title">Posts:</p>
+type Props = {
+  userPosts: Post[];
+  handleShowComment: (post: Post) => void;
+  showSideBar: number | null;
+  setShowSideBar: (id: number | null) => void;
+  setShowCommentForm: (item: 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> = ({
+  userPosts,
+  handleShowComment,
+  showSideBar,
+  setShowSideBar,
+  setShowCommentForm,
+}) => {
+  return (
+    <div data-cy="PostsList">
+      <p className="title">Posts:</p>
 
-      <tbody>
-        <tr data-cy="Post">
-          <td data-cy="PostId">17</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 data-cy="PostTitle">
-            fugit voluptas sed molestias voluptatem provident
-          </td>
+        <tbody>
+          {userPosts.map((post: Post) => (
+            <tr data-cy="Post" key={post.id}>
+              <td data-cy="PostId">{post.id}</td>
 
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
+              <td data-cy="PostTitle">{post.title}</td>
 
-        <tr data-cy="Post">
-          <td data-cy="PostId">18</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">
+                {showSideBar !== post.id ? (
+                  <button
+                    type="button"
+                    data-cy="PostButton"
+                    className="button is-link is-light"
+                    onClick={() => {
+                      handleShowComment(post);
+                    }}
+                  >
+                    Open
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    data-cy="PostButton"
+                    className="button is-link"
+                    onClick={() => {
+                      setShowSideBar(null);
+                      setShowCommentForm(false);
+                    }}
+                  >
+                    Close
+                  </button>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index c89442841..368a740c0 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -1,16 +1,63 @@
-import React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { User } from '../types/User';
+
+type Props = {
+  users: User[];
+  setUserSelected: (user: User) => void;
+  userSelected: User | null;
+  handleUserPosts: (user: User) => void;
+  setShowSideBar: (item: number | null) => void;
+};
+
+export const UserSelector: React.FC<Props> = ({
+  users,
+  setUserSelected,
+  userSelected,
+  handleUserPosts,
+  setShowSideBar,
+}) => {
+  const [showUsers, setShowUsers] = useState(false);
+  const dropdownMenuRef = useRef<HTMLDivElement | null>(null);
+  const dropdownTriggerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownMenuRef.current &&
+        !dropdownMenuRef.current.contains(event.target as Node) &&
+        dropdownTriggerRef.current &&
+        !dropdownTriggerRef.current.contains(event.target as Node)
+      ) {
+        setShowUsers(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
 
-export const UserSelector: React.FC = () => {
   return (
-    <div data-cy="UserSelector" className="dropdown is-active">
-      <div className="dropdown-trigger">
+    <div
+      data-cy="UserSelector"
+      className={classNames('dropdown', { 'is-active': showUsers })}
+    >
+      <div className="dropdown-trigger" ref={dropdownTriggerRef}>
         <button
           type="button"
           className="button"
           aria-haspopup="true"
           aria-controls="dropdown-menu"
+          onClick={() => setShowUsers(prev => !prev)}
         >
-          <span>Choose a user</span>
+          {userSelected ? (
+            <span>{userSelected.name}</span>
+          ) : (
+            <span>Choose a user</span>
+          )}
 
           <span className="icon is-small">
             <i className="fas fa-angle-down" aria-hidden="true" />
@@ -18,23 +65,33 @@ export const UserSelector: React.FC = () => {
         </button>
       </div>
 
-      <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>
+      <div
+        className="dropdown-menu"
+        id="dropdown-menu"
+        role="menu"
+        ref={dropdownMenuRef}
+      >
+        <div
+          className="dropdown-content"
+          style={{ display: showUsers ? 'block' : 'none' }}
+        >
+          {users.map(user => (
+            <a
+              href={`#user-${user.id}`}
+              className={classNames('dropdown-item', {
+                'is-active': user.id === userSelected?.id,
+              })}
+              key={user.id}
+              onClick={() => {
+                setUserSelected(user);
+                setShowUsers(false);
+                handleUserPosts(user);
+                setShowSideBar(null);
+              }}
+            >
+              {user.name}
+            </a>
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/types/Comment.ts b/src/types/Comment.ts
index 61c98619c..77c8c6654 100644
--- a/src/types/Comment.ts
+++ b/src/types/Comment.ts
@@ -6,4 +6,4 @@ export interface Comment {
   body: string;
 }
 
-export type CommentData = Pick<Comment, 'name' | 'email' | 'body'>;
+export type CommentData = Pick<Comment, 'name' | 'email' | 'body' | 'postId'>;