From 41194b9e2ef3e618f8251dfa1dc7926a63b9d743 Mon Sep 17 00:00:00 2001
From: lauti7 <lautigbustos@gmail.com>
Date: Wed, 6 Dec 2023 18:45:36 -0300
Subject: [PATCH] feat: improvement

---
 .../UserInformation/UserInformation.tsx       | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/containers/UserInformation/UserInformation.tsx b/src/containers/UserInformation/UserInformation.tsx
index 3d16df8b..0ded471f 100644
--- a/src/containers/UserInformation/UserInformation.tsx
+++ b/src/containers/UserInformation/UserInformation.tsx
@@ -35,8 +35,8 @@ export const UserInformation = (props: Props) => {
     activeTab: 'newest' as 'newest' | 'read',
     isLoading: false,
     isOnboarding: checkIsOnboarding(),
-    isOpen: false
   })
+  const [notificationsModalOpen, setNotificationsModalOpen] = useState(false)
 
   let client: NotificationsAPI
   if (identity) {
@@ -133,10 +133,9 @@ export const UserInformation = (props: Props) => {
   }
 
   const handleNotificationsOpen = async () => {
-    let currentState = notificationsState.isOpen
-    console.log("current state clicks > ", currentState)
+    let currentState = notificationsModalOpen
     
-    setNotificationsState({ ...notificationsState, isOpen: !currentState })
+    setNotificationsModalOpen(!currentState)
     
     if (!currentState) {
       const unreadNotifications = notificationsState.notifications.filter((notification) => !notification.read).map(({ id }) => id)
@@ -162,6 +161,28 @@ export const UserInformation = (props: Props) => {
     }
   }, [identity])
 
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const element = document.querySelector(".notifications-feed")
+      if (element && !element.contains(event.target as Node)) {
+        event.preventDefault()
+        event.stopPropagation()
+        handleNotificationsOpen()
+      }
+    }
+
+    if (notificationsModalOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+
+  }, [notificationsModalOpen])
+
   return (
     <UserMenuComponent
       notifications={
@@ -169,7 +190,7 @@ export const UserInformation = (props: Props) => {
           locale: props.locale as NotificationLocale,
           isLoading: notificationsState.isLoading,
           isOnboarding: notificationsState.isOnboarding,
-          isOpen: notificationsState.isOpen,
+          isOpen: notificationsModalOpen,
           items: notificationsState.notifications,
           activeTab: notificationsState.activeTab,
           onClick: handleNotificationsOpen,