From aa164cd5f5a2a0256f49defa5737a037d8bd1653 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 18 Jan 2022 16:10:40 -0600
Subject: [PATCH 1/4] Add contracts table to admin page

---
 web/pages/admin.tsx | 61 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/web/pages/admin.tsx b/web/pages/admin.tsx
index baea0c8b..233effcb 100644
--- a/web/pages/admin.tsx
+++ b/web/pages/admin.tsx
@@ -5,8 +5,8 @@ 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'
 import Custom404 from './404'
+import { useContracts } from '../hooks/use-contracts'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -73,6 +73,64 @@ function UsersTable() {
   )
 }
 
+function ContractsTable() {
+  let contracts = useContracts() ?? []
+  // Sort users by createdTime descending, by default
+  contracts.sort((a, b) => b.createdTime - a.createdTime)
+
+  return (
+    <Grid
+      data={contracts}
+      columns={[
+        {
+          id: 'creatorUsername',
+          name: 'Username',
+          formatter: (cell) =>
+            html(`<a 
+              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
+              target="_blank"
+              href="/${cell}">@${cell}</a>`),
+        },
+        {
+          id: 'question',
+          name: 'Question',
+          formatter: (cell) => cell,
+        },
+        {
+          id: 'volume24Hours',
+          name: '24 hour vol',
+          formatter: (cell) => (cell as number).toFixed(0),
+        },
+        {
+          id: 'closeTime',
+          name: 'Close time',
+          formatter: (cell) =>
+            html(
+              `<span class="whitespace-nowrap">${dayjs(cell as number).format(
+                'MMM D, h:mma'
+              )}</span>`
+            ),
+        },
+        {
+          id: 'id',
+          name: 'ID',
+          formatter: (cell) =>
+            html(`<a
+              class="hover:underline hover:decoration-indigo-400 hover:decoration-2"
+              target="_blank"
+              href="https://console.firebase.google.com/project/mantic-markets/firestore/data/~2Fcontracts~2F${cell}">${cell}</a>`),
+        },
+      ]}
+      search={true}
+      sort={true}
+      pagination={{
+        enabled: true,
+        limit: 25,
+      }}
+    />
+  )
+}
+
 export default function Admin() {
   const user = useUser()
   const adminIds = [
@@ -84,6 +142,7 @@ export default function Admin() {
   return isAdmin ? (
     <Page wide>
       <UsersTable />
+      <ContractsTable />
     </Page>
   ) : (
     <Custom404 />

From d3031e0f10458c174fe46c99f1a64879259e9b75 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 18 Jan 2022 16:29:49 -0600
Subject: [PATCH 2/4] Admin contracts tabel: Add visibility column, filter out
 resolved

---
 web/pages/admin.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/pages/admin.tsx b/web/pages/admin.tsx
index 233effcb..d0346ee1 100644
--- a/web/pages/admin.tsx
+++ b/web/pages/admin.tsx
@@ -77,6 +77,7 @@ function ContractsTable() {
   let contracts = useContracts() ?? []
   // Sort users by createdTime descending, by default
   contracts.sort((a, b) => b.createdTime - a.createdTime)
+  contracts = contracts.filter((contract) => !contract.isResolved)
 
   return (
     <Grid
@@ -111,6 +112,11 @@ function ContractsTable() {
               )}</span>`
             ),
         },
+        {
+          id: 'visibility',
+          name: 'Visibility',
+          formatter: (cell) => cell,
+        },
         {
           id: 'id',
           name: 'ID',

From ee64c4e923e4a5c2bd406affbe6f9504c11fc00d Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 18 Jan 2022 16:55:39 -0600
Subject: [PATCH 3/4] Bring back cards having different heights in a row

---
 web/components/contract-card.tsx | 44 +++++++++++++++++---------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index c3d9595d..a452fec1 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -26,28 +26,30 @@ export function ContractCard(props: {
   const { probPercent } = contractMetrics(contract)
 
   return (
-    <div
-      className={clsx(
-        'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
-        className
-      )}
-    >
-      <Link href={contractPath(contract)}>
-        <a className="absolute left-0 right-0 top-0 bottom-0" />
-      </Link>
-      <Row className="justify-between gap-4 mb-2">
-        <p className="font-medium text-indigo-700">{question}</p>
-        <ResolutionOrChance
-          className="items-center"
-          resolution={resolution}
-          probPercent={probPercent}
+    <div>
+      <div
+        className={clsx(
+          'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
+          className
+        )}
+      >
+        <Link href={contractPath(contract)}>
+          <a className="absolute left-0 right-0 top-0 bottom-0" />
+        </Link>
+        <Row className="justify-between gap-4 mb-2">
+          <p className="font-medium text-indigo-700">{question}</p>
+          <ResolutionOrChance
+            className="items-center"
+            resolution={resolution}
+            probPercent={probPercent}
+          />
+        </Row>
+        <AbbrContractDetails
+          contract={contract}
+          showHotVolume={showHotVolume}
+          showCloseTime={showCloseTime}
         />
-      </Row>
-      <AbbrContractDetails
-        contract={contract}
-        showHotVolume={showHotVolume}
-        showCloseTime={showCloseTime}
-      />
+      </div>
     </div>
   )
 }

From 21949abbe1f2d6436e48b2bdeff78df11b119ae1 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 18 Jan 2022 17:10:21 -0600
Subject: [PATCH 4/4] Shorter graph on mobile

---
 web/components/contract-prob-graph.tsx |  5 ++++-
 web/hooks/use-window-size.ts           | 10 +++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx
index 3be73c6b..94f9646a 100644
--- a/web/components/contract-prob-graph.tsx
+++ b/web/components/contract-prob-graph.tsx
@@ -47,7 +47,10 @@ export function ContractProbGraph(props: { contract: Contract }) {
   const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
 
   return (
-    <div className="w-full" style={{ height: 400 }}>
+    <div
+      className="w-full"
+      style={{ height: !width || width >= 800 ? 400 : 250 }}
+    >
       <ResponsiveLine
         data={data}
         yScale={{ min: 0, max: 100, type: 'linear' }}
diff --git a/web/hooks/use-window-size.ts b/web/hooks/use-window-size.ts
index 94b3d6ae..6bc750e8 100644
--- a/web/hooks/use-window-size.ts
+++ b/web/hooks/use-window-size.ts
@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react'
 
 export const useWindowSize = () => {
-  const [size, setSize] = useState(
-    typeof window === 'undefined'
-      ? { width: undefined, height: undefined }
-      : { width: window.innerWidth, height: window.innerHeight }
-  )
+  const [size, setSize] = useState<{
+    width: number | undefined
+    height: number | undefined
+  }>({ width: undefined, height: undefined })
 
   useEffect(() => {
     const onResize = () => {
       setSize({ width: window.innerWidth, height: window.innerHeight })
     }
 
+    onResize()
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
   }, [])