added fixes

mate-academy · Jul 18, 2023 · 8405779 · 8405779
1 parent 01b8f11
commit 8405779
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -27,6 +27,7 @@ export const App: React.FC = () => {
   const [selectedPost, setSelectedPost] = useState<Post | null>(null);
   const [comments, setComments] = useState<Comment[]>([]);
 
+  const [isCommentsLoading, setIsCommentsLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
   const [isCommentError, setIsCommentError] = useState(false);
@@ -49,13 +50,18 @@ export const App: React.FC = () => {
   };
 
   const getCommentsFromServer = (postId: number) => {
+    setIsCommentsLoading(true);
+
     getComments(postId)
       .then((data) => {
         setComments(data);
         setIsCommentError(false);
       })
       .catch(() => setIsCommentError(true))
-      .finally(() => setIsLoading(false));
+      .finally(() => {
+        setIsLoading(false);
+        setIsCommentsLoading(false);
+      });
   };
 
   const handleUserSelect = (
@@ -66,6 +72,7 @@ export const App: React.FC = () => {
 
     getUserPostsFromServer(user.id);
     setSelectedUser(user);
+    setSelectedPost(null);
   };
 
   const handleSelectPost = (post: Post) => {
@@ -113,6 +120,7 @@ export const App: React.FC = () => {
                 <UserSelector
                   users={users}
                   handleUserSelect={handleUserSelect}
+                  selectedUser={selectedUser}
                 />
               </div>
 
@@ -172,6 +180,7 @@ export const App: React.FC = () => {
                   setCanWriteComment={setCanWriteComment}
                   handleAddNewComment={handleAddNewComment}
                   handleDeleteComment={handleDeleteComment}
+                  isCommentsLoading={isCommentsLoading}
                 />
               )}
             </div>

diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
@@ -17,6 +17,7 @@ type Props = {
     body: string,
   ) => void;
   handleDeleteComment: (commentId: number) => void;
+  isCommentsLoading: boolean;
 };
 
 export const PostDetails: React.FC<Props> = ({
@@ -27,6 +28,7 @@ export const PostDetails: React.FC<Props> = ({
   setCanWriteComment,
   handleAddNewComment,
   handleDeleteComment,
+  isCommentsLoading,
 }) => {
   return (
     <div className="content" data-cy="PostDetails">
@@ -40,7 +42,7 @@ export const PostDetails: React.FC<Props> = ({
         </div>
 
         <div className="block">
-          {!comments && !isCommentError && <Loader />}
+          {isCommentsLoading && !isCommentError && <Loader />}
 
           {isCommentError && (
             <div className="notification is-danger" data-cy="CommentsError">
@@ -54,7 +56,7 @@ export const PostDetails: React.FC<Props> = ({
             </p>
           )}
 
-          {comments && comments?.length > 0 && (
+          {comments && !isCommentsLoading && (
             <>
               <p className="title is-4">Comments:</p>
               {comments.map((comment) => (

diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
@@ -7,9 +7,14 @@ type Props = {
     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
     user: User,
   ) => void;
+  selectedUser: User | null;
 };
 
-export const UserSelector: React.FC<Props> = ({ users, handleUserSelect }) => {
+export const UserSelector: React.FC<Props> = ({
+  users,
+  handleUserSelect,
+  selectedUser,
+}) => {
   const [isDropDownOpened, setIsDropDownOpened] = useState(false);
 
   return (
@@ -22,7 +27,7 @@ export const UserSelector: React.FC<Props> = ({ users, handleUserSelect }) => {
           aria-controls="dropdown-menu"
           onClick={() => setIsDropDownOpened(!isDropDownOpened)}
         >
-          <span>Choose a user</span>
+          <span>{selectedUser ? selectedUser.name : 'Choose a user'}</span>
 
           <span className="icon is-small">
             <i className="fas fa-angle-down" aria-hidden="true" />