From 9288fa47578c455c90682e06281501a46b77ec1d Mon Sep 17 00:00:00 2001
From: Jamie Curnow <jc@jc21.com>
Date: Thu, 15 Jul 2021 09:47:24 +1000
Subject: [PATCH] Improvements to menus and suspense

---
 frontend/src/components/Dropdown/Dropdown.tsx |  4 ++-
 .../Navigation/NavigationHeader.tsx           | 31 +++++++++++++++++--
 .../components/Navigation/NavigationMenu.tsx  | 20 ++++++++++--
 frontend/src/components/Router.tsx            |  8 ++---
 frontend/src/components/SinglePage.tsx        |  2 --
 frontend/src/components/SuspenseLoader.tsx    | 31 +++++++++++++++++++
 frontend/src/components/index.ts              |  2 ++
 7 files changed, 85 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/SuspenseLoader.tsx

diff --git a/frontend/src/components/Dropdown/Dropdown.tsx b/frontend/src/components/Dropdown/Dropdown.tsx
index 983471c7..9a73d8e3 100644
--- a/frontend/src/components/Dropdown/Dropdown.tsx
+++ b/frontend/src/components/Dropdown/Dropdown.tsx
@@ -37,6 +37,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
 	arrow,
 	dark,
 	show,
+	...rest
 }) => {
 	return (
 		<div
@@ -46,7 +47,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
 				dark && ["bg-dark", "text-white"],
 				show && "show",
 				className,
-			)}>
+			)}
+			{...rest}>
 			{header && <span className="dropdown-header">{header}</span>}
 			{children}
 		</div>
diff --git a/frontend/src/components/Navigation/NavigationHeader.tsx b/frontend/src/components/Navigation/NavigationHeader.tsx
index 49fb5b85..d593c60c 100644
--- a/frontend/src/components/Navigation/NavigationHeader.tsx
+++ b/frontend/src/components/Navigation/NavigationHeader.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useState, useRef, useEffect } from "react";
 
 import cn from "classnames";
 import { Bell } from "tabler-icons-react";
@@ -75,6 +75,30 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
 }) => {
 	const [notificationsShown, setNotificationsShown] = useState(false);
 	const [profileShown, setProfileShown] = useState(false);
+	const profileRef = useRef(null);
+	const notificationsRef = useRef(null);
+
+	const handleClickOutside = (event: any) => {
+		if (
+			profileRef.current &&
+			// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+			!profileRef.current.contains(event.target)
+		) {
+			setProfileShown(false);
+		}
+		if (
+			notificationsRef.current &&
+			// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+			!notificationsRef.current.contains(event.target)
+		) {
+			setNotificationsShown(false);
+		}
+	};
+
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
 
 	return (
 		<header
@@ -100,7 +124,9 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
 						</div>
 					) : null}
 					{notifications ? (
-						<div className="nav-item dropdown d-none d-md-flex me-3">
+						<div
+							className="nav-item dropdown d-none d-md-flex me-3"
+							ref={notificationsRef}>
 							<button
 								style={{
 									border: 0,
@@ -125,6 +151,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
 						</div>
 					) : null}
 					<div
+						ref={profileRef}
 						className={cn("nav-item", {
 							dropdown: !!profileItems,
 						})}>
diff --git a/frontend/src/components/Navigation/NavigationMenu.tsx b/frontend/src/components/Navigation/NavigationMenu.tsx
index f4145b74..382e6c44 100644
--- a/frontend/src/components/Navigation/NavigationMenu.tsx
+++ b/frontend/src/components/Navigation/NavigationMenu.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useState, useRef, useEffect } from "react";
 
 import cn from "classnames";
 
@@ -45,6 +45,22 @@ export const NavigationMenu: React.FC<NavigationMenuProps> = ({
 	searchContent,
 }) => {
 	const [dropdownShown, setDropdownShown] = useState(0);
+	const navRef = useRef(null);
+
+	const handleClickOutside = (event: any) => {
+		if (
+			navRef.current &&
+			// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+			!navRef.current.contains(event.target)
+		) {
+			setDropdownShown(0);
+		}
+	};
+
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
 
 	const itemClicked = (
 		e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -82,7 +98,7 @@ export const NavigationMenu: React.FC<NavigationMenuProps> = ({
 	};
 
 	return wrapMenu(
-		<ul className="navbar-nav">
+		<ul className="navbar-nav" ref={navRef}>
 			{items.map((item: any, idx: number) => {
 				const onClickItem = (
 					e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
diff --git a/frontend/src/components/Router.tsx b/frontend/src/components/Router.tsx
index 645beb66..a226ee13 100644
--- a/frontend/src/components/Router.tsx
+++ b/frontend/src/components/Router.tsx
@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from "react";
 
-import { Loading, SiteWrapper, SinglePage } from "components";
+import { SiteWrapper, SuspenseLoader } from "components";
 import { useAuthState, useHealthState, UserProvider } from "context";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 
@@ -17,11 +17,7 @@ const Users = lazy(() => import("pages/Users"));
 function Router() {
 	const { health } = useHealthState();
 	const { authenticated } = useAuthState();
-	const Spinner = (
-		<SinglePage>
-			<Loading />
-		</SinglePage>
-	);
+	const Spinner = <SuspenseLoader />;
 
 	if (health.loading) {
 		return Spinner;
diff --git a/frontend/src/components/SinglePage.tsx b/frontend/src/components/SinglePage.tsx
index 09f89895..db60ce6a 100644
--- a/frontend/src/components/SinglePage.tsx
+++ b/frontend/src/components/SinglePage.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
 
-import { Footer } from "components";
 import styled from "styled-components";
 
 const Root = styled.div`
@@ -24,7 +23,6 @@ function SinglePage({ children }: Props) {
 	return (
 		<Root>
 			<Wrapper>{children}</Wrapper>
-			<Footer />
 		</Root>
 	);
 }
diff --git a/frontend/src/components/SuspenseLoader.tsx b/frontend/src/components/SuspenseLoader.tsx
new file mode 100644
index 00000000..1a3111a4
--- /dev/null
+++ b/frontend/src/components/SuspenseLoader.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+import { Loading } from "components";
+import styled from "styled-components";
+
+const Root = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 100%;
+`;
+
+const Wrapper = styled.div`
+	flex: 1 1 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100px;
+`;
+
+function SuspenseLoader() {
+	return (
+		<Root>
+			<Wrapper>
+				<Loading />
+			</Wrapper>
+		</Root>
+	);
+}
+
+export { SuspenseLoader };
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 9a31df70..36bf099e 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -9,7 +9,9 @@ export * from "./Footer";
 export * from "./Loader";
 export * from "./Loading";
 export * from "./Navigation";
+export * from "./NavMenu";
 export * from "./Router";
 export * from "./SinglePage";
 export * from "./SiteWrapper";
+export * from "./SuspenseLoader";
 export * from "./Unhealthy";