Don't leak the existence of /admin

web/pages/admin.tsx

@@ -5,6 +5,7 @@ import { html } from 'gridjs'
 import dayjs from 'dayjs'
 import { useUsers } from '../hooks/use-users'
 import { useUser } from '../hooks/use-user'
+import Error from 'next/error'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -14,67 +15,76 @@ function avatarHtml(avatarUrl: string) {
 />`
 }
 
+function UsersTable() {
+  let users = useUsers()
+  // Sort users by createdTime descending, by default
+  users = users.sort((a, b) => b.createdTime - a.createdTime)
+
+  return (
+    <Grid
+      data={users}
+      columns={[
+        {
+          id: 'avatarUrl',
+          name: 'Avatar',
+          formatter: (cell) => html(avatarHtml(cell as string)),
+        },
+        {
+          id: 'username',
+          name: 'Username',
+          formatter: (cell) =>
+            html(`<a 
+              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
+              href="/${cell}">@${cell}</a>`),
+        },
+        'Email',
+        {
+          id: 'createdTime',
+          name: 'Created Time',
+          formatter: (cell) =>
+            html(
+              `<span class="whitespace-nowrap">${dayjs(cell as number).format(
+                'MMM D, h:mma'
+              )}</span>`
+            ),
+        },
+        {
+          id: 'balance',
+          name: 'Balance',
+          formatter: (cell) => (cell as number).toFixed(0),
+        },
+        {
+          id: 'id',
+          name: 'ID',
+          formatter: (cell) =>
+            html(`<a
+              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
+              href="https://console.firebase.google.com/project/mantic-markets/firestore/data/~2Fusers~2F${cell}">${cell}</a>`),
+        },
+      ]}
+      search={true}
+      sort={true}
+      pagination={{
+        enabled: true,
+        limit: 25,
+      }}
+    />
+  )
+}
+
 export default function Admin() {
   const user = useUser()
-  let users = useUsers()
-
   const adminIds = [
     'igi2zGXsfxYPgB0DJTXVJVmwCOr2', // Austin
     '5LZ4LgYuySdL1huCWe7bti02ghx2', // James
     'tlmGNz9kjXc2EteizMORes4qvWl2', // Stephen
   ]
-  if (!adminIds.includes(user?.id || '')) {
-    return <Page>Nice try. No access for you.</Page>
-  }
-
-  // Sort users by createdTime descending, by default
-  users = users.sort((a, b) => b.createdTime - a.createdTime)
-
-  return (
+  const isAdmin = adminIds.includes(user?.id || '')
+  return isAdmin ? (
     <Page wide>
-      <Grid
-        data={users}
-        columns={[
-          {
-            id: 'avatarUrl',
-            name: 'Avatar',
-            formatter: (cell) => html(avatarHtml(cell as string)),
-          },
-          {
-            id: 'username',
-            name: 'Username',
-            formatter: (cell) =>
-              html(`<a 
-              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
-              href="/${cell}">@${cell}</a>`),
-          },
-          'Email',
-          {
-            id: 'createdTime',
-            name: 'Created Time',
-            formatter: (cell) => dayjs(cell as number).format('MMM D, h:mma'),
-          },
-          {
-            id: 'balance',
-            name: 'Balance',
-            formatter: (cell) => (cell as number).toFixed(0),
-          },
-          {
-            id: 'id',
-            name: 'ID',
-            formatter: (cell) =>
-              html(`<a
-              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
-              href="https://console.firebase.google.com/project/mantic-markets/firestore/data/~2Fusers~2F${cell}">${cell}</a>`),
-          },
-        ]}
-        search={true}
-        sort={true}
-        pagination={{
-          enabled: true,
-          limit: 25,
-        }}
-      />
+      <UsersTable />
     </Page>
+  ) : (
+    <Error statusCode={404} title='Who is this "admin" you speak of...' />
   )
 }