From b9fc0b7d5a59a299580ae1ac98e33861b075a611 Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Thu, 24 Oct 2024 16:27:05 -0700
Subject: [PATCH] Add context for login state display in nav [#134]

* Add <UserDataWrapper> component to base layout to provide access to
  logged in user via React Context
* Wrap username or login link display into <UserOrLoginLink> Client
  Component; add to <Nav> component
---
 static-site/app/layout.tsx                    | 19 ++++---
 static-site/components/nav/index.tsx          |  5 +-
 .../components/nav/user-or-login-link.tsx     | 19 +++++++
 .../components/user-data-wrapper/index.tsx    | 53 +++++++++++++++++++
 4 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 static-site/components/nav/user-or-login-link.tsx
 create mode 100644 static-site/components/user-data-wrapper/index.tsx
diff --git a/static-site/app/layout.tsx b/static-site/app/layout.tsx
index 9397ff8e0..645b8cd9e 100644
--- a/static-site/app/layout.tsx
+++ b/static-site/app/layout.tsx
@@ -13,6 +13,7 @@ import {
   siteTitle,
   siteTitleAlt,
 } from "../data/BaseConfig";
+import UserDataWrapper from "../components/user-data-wrapper";
 
 import "./styles/browserCompatability.css";
 import "./styles/bootstrap.css";
@@ -68,17 +69,19 @@ export default function RootLayout({
         )}
       </head>
       <body className={lato.variable}>
-        <Nav />
-        <main>
-          {children}
+        <UserDataWrapper>
+          <Nav />
+          <main>
+            {children}
 
-          <Line />
+            <Line />
 
-          <Footer />
+            <Footer />
 
-          <BigSpacer />
-        </main>
-        <PlausibleAnalytics />
+            <BigSpacer />
+          </main>
+          <PlausibleAnalytics />
+        </UserDataWrapper>
       </body>
     </html>
   );
diff --git a/static-site/components/nav/index.tsx b/static-site/components/nav/index.tsx
index cb7d34b2a..0364a48b5 100644
--- a/static-site/components/nav/index.tsx
+++ b/static-site/components/nav/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { groupsApp } from "../../data/BaseConfig";
 
 import NavLogo from "./nav-logo";
+import UserOrLoginLink from "./user-or-login-link";
 
 import "./styles.css";
 
@@ -21,9 +22,7 @@ export default function Nav(): React.ReactElement {
           <a href="https://docs.nextstrain.org">DOCS</a>
           <a href="/contact">CONTACT</a>
           <a href="/blog/">BLOG</a>
-          {/* because we need access to the current context, this also
-          needs to be an encapsulated client component */}
-          {/* FIXME <UserOrLoginLink> */}
+          <UserOrLoginLink />
         </>
       )}
     </nav>
diff --git a/static-site/components/nav/user-or-login-link.tsx b/static-site/components/nav/user-or-login-link.tsx
new file mode 100644
index 000000000..d8c3bf721
--- /dev/null
+++ b/static-site/components/nav/user-or-login-link.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import React, { useContext } from "react";
+
+import { UserContext } from "../user-data-wrapper";
+
+export default function UserOrLoginLink(): React.ReactElement {
+  const { user } = useContext(UserContext);
+  return user ? (
+    <a href="/whoami">
+      <span role="img" aria-labelledby="userIcon">
+        👤
+      </span>
+      {` ${user.username}`}
+    </a>
+  ) : (
+    <a href="/login">LOGIN</a>
+  );
+}
diff --git a/static-site/components/user-data-wrapper/index.tsx b/static-site/components/user-data-wrapper/index.tsx
new file mode 100644
index 000000000..c86109688
--- /dev/null
+++ b/static-site/components/user-data-wrapper/index.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React, { createContext } from "react";
+
+type User = {
+  username: string;
+};
+
+type Group = {
+  isPublic: boolean;
+  name: string;
+};
+
+type UserState = {
+  user: null | User;
+  groupMemberships: Group[];
+};
+
+const initialState: UserState = {
+  user: null,
+  groupMemberships: [],
+};
+
+export const UserContext = createContext(initialState);
+
+export default class UserDataWrapper extends React.Component<
+  { children: React.ReactNode },
+  UserState
+> {
+  override state = initialState;
+
+  override componentDidMount(): void {
+    this.loadUser();
+  }
+
+  async loadUser(): Promise<void> {
+    const response = await fetch("/whoami", {
+      headers: { Accept: "application/json" },
+    });
+
+    const whoami: UserState = await response.json();
+
+    this.setState((state) => ({ ...state, ...whoami }));
+  }
+
+  override render(): React.ReactNode {
+    return (
+      <UserContext.Provider value={this.state}>
+        {this.props.children}
+      </UserContext.Provider>
+    );
+  }
+}
