Solution v 0.92

mate-academy · Oct 27, 2024 · c5534fe · c5534fe
1 parent 3aa6d6d
commit c5534fe
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,6 +15,7 @@ import { Post } from './types/Post';
 import { getPostsFromServer } from './api/posts';
 
 export const App = () => {
+  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
   const [users, setUsers] = useState<User[]>([]);
   const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -35,6 +36,7 @@ export const App = () => {
       setPosts([]);
       setErrorMessage('');
       setNotificationMessage('');
+      setActivePostId(null);
 
       getPostsFromServer(selectedUserId)
         .then(fetchPosts => {
@@ -59,6 +61,19 @@ export const App = () => {
 
     return null;
   }, [activePostId, posts]);
+
+  useEffect(() => {
+    const handleClickOutside = () => {
+      setIsDropDownOpen(false);
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
 
   return (
     <main className="section">
@@ -68,9 +83,11 @@ export const App = () => {
             <div className="tile is-child box is-success">
               <div className="block">
                 <UserSelector
+                  isDropDownOpen={isDropDownOpen}
                   users={users}
                   setSelectedUserId={setSelectedUserId}
                   selectedUserId={selectedUserId}
+                  setIsDropDownOpen={setIsDropDownOpen}
                 />
               </div>
 

diff --git a/src/components/OneUser.tsx b/src/components/OneUser.tsx
@@ -22,7 +22,9 @@ export const OneUser: React.FC<Props> = ({
   return (
     <a
       href={`#user-${user.id}`}
-      className={cn("dropdown-item", {'is-active': selectedUserId === user.id})}
+      className={cn('dropdown-item', {
+        'is-active': selectedUserId === user.id,
+      })}
       onClick={handleUserSelect}
     >
       {user.name}

diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
@@ -16,9 +16,7 @@ export const PostsList: React.FC<Props> = ({
   <div data-cy="PostsList">
     <p className="title">Posts:</p>
 
-    <table
-      className='table is-striped is-hoverable is-narrow is-fullwidth'
-    >
+    <table className="table is-striped is-hoverable is-narrow is-fullwidth">
       <thead>
         <tr className="has-background-link-light">
           <th>#</th>

diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import cn from 'classnames';
 
 import { User } from '../types/User';
@@ -8,21 +7,26 @@ type Props = {
   users: User[];
   setSelectedUserId: (id: number | null) => void;
   selectedUserId: number | null;
+  isDropDownOpen: boolean;
+  setIsDropDownOpen: (status: boolean) => void;
 };
 
 export const UserSelector: React.FC<Props> = ({
+  isDropDownOpen,
+  setIsDropDownOpen,
   users,
   setSelectedUserId,
   selectedUserId,
 }) => {
-  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+
 
   const activeUser = users.find(user => user.id === selectedUserId);
 
   return (
     <div
       data-cy="UserSelector"
       className={cn('dropdown', { 'is-active': isDropDownOpen })}
+      onClick={(event) => event.stopPropagation()}
     >
       <div className="dropdown-trigger">
         <button