From 32da9e31e6d79156607c3d4b0c30dc33a58710af Mon Sep 17 00:00:00 2001
From: Mamadou <20203997@etud.univ-evry.fr>
Date: Fri, 14 Oct 2022 15:48:34 +0200
Subject: [PATCH 1/2] close user card popover if click is outside of popover

---
 src/components/Layout/Header.js     | 27 ++++++++++++++++++++++-----
 src/components/Layout/MainLayout.js | 27 +++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 027ee1a57..e7fd954ec 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -46,11 +46,15 @@ const MdNotificationsActiveWithBadge = withBadge({
 })(MdNotificationsActive);
 
 class Header extends React.Component {
-  state = {
-    isOpenNotificationPopover: false,
-    isNotificationConfirmed: false,
-    isOpenUserCardPopover: false,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpenNotificationPopover: false,
+      isNotificationConfirmed: false,
+      isOpenUserCardPopover: false,
+    };
+  }
 
   toggleNotificationPopover = () => {
     this.setState({
@@ -63,6 +67,10 @@ class Header extends React.Component {
   };
 
   toggleUserCardPopover = () => {
+    // set isContentClicked state in "MainLyout" component to true
+    // so that when click is outside of popover, isContentClicked will be set to false
+    // then the popover will be closed
+    this.props.handleContentClickStateChange(true);
     this.setState({
       isOpenUserCardPopover: !this.state.isOpenUserCardPopover,
     });
@@ -75,6 +83,15 @@ class Header extends React.Component {
     document.querySelector('.cr-sidebar').classList.toggle('cr-sidebar--open');
   };
 
+  componentDidUpdate() {
+    // need to close popover if click is outside of popover :
+    // check if popover is open and isContentClicked is false
+    // if so, close the popover
+    if (this.state.isOpenUserCardPopover && !this.props.isContentClicked) {
+      this.setState({ isOpenUserCardPopover: this.props.isContentClicked });
+    }
+  }
+
   render() {
     const { isNotificationConfirmed } = this.state;
 
diff --git a/src/components/Layout/MainLayout.js b/src/components/Layout/MainLayout.js
index f76f35be3..c263ea7c2 100644
--- a/src/components/Layout/MainLayout.js
+++ b/src/components/Layout/MainLayout.js
@@ -9,6 +9,17 @@ import NotificationSystem from 'react-notification-system';
 import { NOTIFICATION_SYSTEM_STYLE } from 'utils/constants';
 
 class MainLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isContentClicked: false, // state to control if Content tag is clicked
+    };
+    // bind handleContentClickStateChange to the current component
+    // so that it can be use as props in Header component
+    this.handleContentClickStateChange =
+      this.handleContentClickStateChange.bind(this);
+  }
+
   static isSidebarOpen() {
     return document
       .querySelector('.cr-sidebar')
@@ -61,6 +72,15 @@ class MainLayout extends React.Component {
     ) {
       this.openSidebar('close');
     }
+    // this.handleContentClickStateChange(false);
+  };
+
+  handleContentClickStateChange(open) {
+    this.setState({ isContentClicked: open });
+  }
+
+  handleMainContentClick = () => {
+    this.handleContentClickStateChange(false);
   };
 
   checkBreakpoint(breakpoint) {
@@ -89,10 +109,13 @@ class MainLayout extends React.Component {
   render() {
     const { children } = this.props;
     return (
-      <main className="cr-app bg-light">
+      <main className="cr-app bg-light" onClick={this.handleMainContentClick}>
         <Sidebar />
         <Content fluid onClick={this.handleContentClick}>
-          <Header />
+          <Header
+            isContentClicked={this.state.isContentClicked}
+            handleContentClickStateChange={this.handleContentClickStateChange}
+          />
           {children}
           <Footer />
         </Content>

From d725f8e96a858ac28ecb6673190d054bd5bb4925 Mon Sep 17 00:00:00 2001
From: Mohamed <metzopro97@gmail.com>
Date: Fri, 21 Oct 2022 13:49:58 +0200
Subject: [PATCH 2/2] close the notification card if click outside

---
 src/components/Layout/Header.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index e7fd954ec..77162e3df 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -57,6 +57,7 @@ class Header extends React.Component {
   }
 
   toggleNotificationPopover = () => {
+    this.props.handleContentClickStateChange(true);
     this.setState({
       isOpenNotificationPopover: !this.state.isOpenNotificationPopover,
     });
@@ -90,6 +91,10 @@ class Header extends React.Component {
     if (this.state.isOpenUserCardPopover && !this.props.isContentClicked) {
       this.setState({ isOpenUserCardPopover: this.props.isContentClicked });
     }
+
+    if (this.state.isOpenNotificationPopover && !this.props.isContentClicked) {
+      this.setState({ isOpenNotificationPopover: this.props.isContentClicked });
+    }
   }
 
   render() {