From f8b400cc8afb55fa61b544a4b4e357a90cb7de61 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 15 Jan 2022 18:09:27 -0500
Subject: [PATCH] Link to each user's Manifold and Firestore /user entry

---
 web/pages/admin.tsx | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/web/pages/admin.tsx b/web/pages/admin.tsx
index df4e7326..83118369 100644
--- a/web/pages/admin.tsx
+++ b/web/pages/admin.tsx
@@ -1,21 +1,9 @@
 import { Page } from '../components/page'
 import { Grid } from 'gridjs-react'
 import 'gridjs/dist/theme/mermaid.css'
-import { useEffect, useState } from 'react'
-import { User } from '../../common/user'
-import { listenForAllUsers } from '../lib/firebase/users'
 import { html } from 'gridjs'
 import dayjs from 'dayjs'
-
-export const useUsers = () => {
-  const [users, setUsers] = useState<User[]>([])
-
-  useEffect(() => {
-    listenForAllUsers(setUsers)
-  }, [])
-
-  return users
-}
+import { useUsers } from '../hooks/use-users'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -26,7 +14,9 @@ function avatarHtml(avatarUrl: string) {
 }
 
 export default function Admin() {
-  const users = useUsers()
+  let users = useUsers()
+  // Sort users by createdTime descending, by default
+  users = users.sort((a, b) => b.createdTime - a.createdTime)
 
   return (
     <Page wide>
@@ -38,7 +28,14 @@ export default function Admin() {
             name: 'Avatar',
             formatter: (cell) => html(avatarHtml(cell as string)),
           },
-          'Username',
+          {
+            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',
@@ -50,7 +47,14 @@ export default function Admin() {
             name: 'Balance',
             formatter: (cell) => (cell as number).toFixed(0),
           },
-          'ID',
+          {
+            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}