From 61bb1d8d9e4aefd73bc5247dd0aa2f1b761d1126 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Fri, 14 Jan 2022 13:58:04 -0500
Subject: [PATCH] Admin page using gridjs

---
 web/hooks/use-all-users.ts |  0
 web/lib/firebase/users.ts  | 14 +++++++++
 web/package.json           |  2 ++
 web/pages/admin.tsx        | 64 ++++++++++++++++++++++++++++++++++++++
 web/yarn.lock              | 20 +++++++++++-
 5 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 web/hooks/use-all-users.ts
 create mode 100644 web/pages/admin.tsx

diff --git a/web/hooks/use-all-users.ts b/web/hooks/use-all-users.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts
index 7ee32430..1311bdd4 100644
--- a/web/lib/firebase/users.ts
+++ b/web/lib/firebase/users.ts
@@ -20,6 +20,7 @@ import {
 } from 'firebase/auth'
 
 import { User } from '../../../common/user'
+import { listenForValues } from './utils'
 export type { User }
 
 export const STARTING_BALANCE = 1000
@@ -111,3 +112,16 @@ export async function uploadData(
   await uploadBytes(uploadRef, data, metadata)
   return await getDownloadURL(uploadRef)
 }
+
+export async function listAllUsers() {
+  const userCollection = collection(db, 'users')
+  const q = query(userCollection)
+  const docs = await getDocs(q)
+  return docs.docs.map((doc) => doc.data() as User)
+}
+
+export function listenForAllUsers(setUsers: (users: User[]) => void) {
+  const userCollection = collection(db, 'users')
+  const q = query(userCollection)
+  listenForValues(q, setUsers)
+}
diff --git a/web/package.json b/web/package.json
index a13eee2b..9bcede3d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -19,6 +19,8 @@
     "daisyui": "1.16.4",
     "dayjs": "1.10.7",
     "firebase": "9.6.0",
+    "gridjs": "^5.0.2",
+    "gridjs-react": "^5.0.2",
     "lodash": "4.17.21",
     "next": "12.0.7",
     "react": "17.0.2",
diff --git a/web/pages/admin.tsx b/web/pages/admin.tsx
new file mode 100644
index 00000000..df4e7326
--- /dev/null
+++ b/web/pages/admin.tsx
@@ -0,0 +1,64 @@
+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
+}
+
+function avatarHtml(avatarUrl: string) {
+  return `<img
+  class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center"
+  src="${avatarUrl}"
+  alt=""
+/>`
+}
+
+export default function Admin() {
+  const users = useUsers()
+
+  return (
+    <Page wide>
+      <Grid
+        data={users}
+        columns={[
+          {
+            id: 'avatarUrl',
+            name: 'Avatar',
+            formatter: (cell) => html(avatarHtml(cell as string)),
+          },
+          'Username',
+          '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',
+        ]}
+        search={true}
+        sort={true}
+        pagination={{
+          enabled: true,
+          limit: 25,
+        }}
+      />
+    </Page>
+  )
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index abff3d3e..7f9cd557 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2597,6 +2597,19 @@ graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
 
+gridjs-react@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/gridjs-react/-/gridjs-react-5.0.2.tgz#5c561b89a391615fc8242223649e56808fcdd824"
+  integrity sha512-K8bEUL8MuRRbu6o9hCc/bn+H7UfstN0yRIb/UMzVIbJ7ROR0ns9UA63mr4xcMP5keqolCPuLuM1manlH17BZCA==
+
+gridjs@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/gridjs/-/gridjs-5.0.2.tgz#27c4bd7399d07770e68b45bcca20c3b1fea828b6"
+  integrity sha512-7EaMc4/IhqRcSbdOYvHOlHETciWmbbhMU6rDr2e0UfzIXSkb7X3Lhf9+bGv+v4JaWnJW5GBillgIIHrAvIIoFg==
+  dependencies:
+    preact "^10.5.12"
+    tslib "^2.0.1"
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -3771,6 +3784,11 @@ postcss@^8.1.6, postcss@^8.3.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.1"
 
+preact@^10.5.12:
+  version "10.6.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.6.4.tgz#ad12c409ff1b4316158486e0a7b8d43636f7ced8"
+  integrity sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -4621,7 +4639,7 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==