Convert 'whoami' page to App Router [#134]

Note: updates the page to use the default layout with the toolbar and
team avatars, in addition to the sponsor logos.

static-site/app/whoami/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useContext } from "react";
+
+import { UserContext } from "../../components/user-data-wrapper";
+
+import styles from "./styles.module.css";
+
+// we don't export a metadata object here because react client
+// components aren't allowed to do that, and we need to be a client
+// component to get access to the user context
+
+export default function WhoAmI(): React.ReactElement {
+  const { user, groupMemberships } = useContext(UserContext);
+
+  return user ? (
+    <div className={styles.userContainer}>
+      You’re logged in as <strong>{user.username}</strong>.
+      <p className={styles.subText}>
+        You are a member of the following Nextstrain groups, which each contain
+        a collection of datasets and/or narratives:
+      </p>
+      Public:
+      <ul className={styles.userGroupList}>
+        {groupMemberships
+          .filter((group) => group.isPublic)
+          .map((group) => (
+            <li key={group.name}>
+              <a href={`/groups/${group.name}`}>{group.name}</a>
+            </li>
+          ))}
+      </ul>
+      Private:
+      <ul className={styles.userGroupList}>
+        {groupMemberships
+          .filter((group) => !group.isPublic)
+          .map((group) => (
+            <li key={group.name}>
+              <a href={`/groups/${group.name}`}>{group.name}</a>
+            </li>
+          ))}
+      </ul>
+      <a href="/logout">Logout</a>
+    </div>
+  ) : (
+    <div className={styles.userContainer}>
+      <p>
+        You are not logged in.
+        <br />
+        <a href="/login">Login</a>
+      </p>
+    </div>
+  );
+}

static-site/app/whoami/styles.module.css

@@ -0,0 +1,23 @@
+.userContainer {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0px 80px;
+  text-align: center;
+}
+
+.userContainer p {
+  padding-top: 20px;
+}
+
+.subText {
+  font-size: 18px;
+  line-height: var(--niceLineHeight);
+}
+
+.userGroupList {
+  display: table;
+  margin: 0 auto !important;
+}