refactor: Extract out useClickOutside.

3 files changed, 43 insertions, 16 deletions

diff --git a/FrontEnd/src/utilities/useClickOutside.ts b/FrontEnd/src/utilities/useClickOutside.ts
new file mode 100644
index 00000000..d4c53aa8
--- /dev/null
+++ b/FrontEnd/src/utilities/useClickOutside.ts
@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function useClickOutside(
+  element: HTMLElement | null | undefined,
+  onClickOutside: () => void
+): void {
+  const onClickOutsideRef = React.useRef<() => void>(onClickOutside);
+
+  React.useEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }, [onClickOutside]);
+
+  React.useEffect(() => {
+    if (element != null) {
+      const handler = (event: MouseEvent): void => {
+        let e: HTMLElement | null = event.target as HTMLElement;
+        while (e) {
+          if (e == element) {
+            return;
+          }
+          e = e.parentElement;
+        }
+        onClickOutsideRef.current();
+      };
+      document.addEventListener("click", handler);
+      return () => {
+        document.removeEventListener("click", handler);
+      };
+    }
+  }, [element]);
+}
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index d7b81f49..fce97fcd 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -3,6 +3,8 @@ import React from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
+import useClickOutside from "@/utilities/useClickOutside";
+
 import Menu, { MenuItems } from "./Menu";
 
 import "./PopupMenu.css";
@@ -28,22 +30,7 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
     React.useState<HTMLDivElement | null>(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement);
 
-  React.useEffect(() => {
-    const handler = (event: MouseEvent): void => {
-      let element: HTMLElement | null = event.target as HTMLElement;
-      while (element) {
-        if (element == referenceElement || element == popperElement) {
-          return;
-        }
-        element = element.parentElement;
-      }
-      setShow(false);
-    };
-    document.addEventListener("click", handler);
-    return () => {
-      document.removeEventListener("click", handler);
-    };
-  }, [referenceElement, popperElement]);
+  useClickOutside(popperElement, () => setShow(false));
 
   return (
     <>
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index 0954b912..de6c3e7c 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -6,6 +6,8 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
 import { pushAlert } from "@/services/alert";
 
+import useClickOutside from "@/utilities/useClickOutside";
+
 import UserAvatar from "../common/user/UserAvatar";
 import Card from "../common/Card";
 import FlatButton from "../common/button/FlatButton";
@@ -32,6 +34,12 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
     "delete" | "changeproperty" | null
   >(null);
 
+  const [maskElement, setMaskElement] = React.useState<HTMLElement | null>(
+    null
+  );
+
+  useClickOutside(maskElement, () => setOperationMaskVisible(false));
+
   const cardRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     const cardIntersectionObserver = new IntersectionObserver(([e]) => {
@@ -92,6 +100,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         </div>
         {operationMaskVisible ? (
           <div
+            ref={setMaskElement}
             className="timeline-post-item-options-mask"
             onClick={() => {
               setOperationMaskVisible(false);