From bcc011c1fdaba1b525f74bf003262acea56bd16b Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 9 Feb 2022 10:58:33 -0800
Subject: [PATCH] Allow admins to edit questions

---
 firestore.rules                  |   1 +
 web/components/contract-feed.tsx | 146 +++++++++++++++++++------------
 web/hooks/use-admin.ts           |  12 +++
 web/pages/admin.tsx              |  11 +--
 4 files changed, 104 insertions(+), 66 deletions(-)
 create mode 100644 web/hooks/use-admin.ts

diff --git a/firestore.rules b/firestore.rules
index 73eafb24..253d57f5 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -23,6 +23,7 @@ service cloud.firestore {
       allow read;
       allow update: if request.resource.data.diff(resource.data).affectedKeys()
         .hasOnly(['description', 'tags', 'lowercaseTags']);
+      allow update: if isAdmin();
       allow delete: if resource.data.creatorId == request.auth.uid;
     }
 
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index f902ea4e..cf794f74 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -43,6 +43,7 @@ import { fromNow } from '../lib/util/time'
 import BetRow from './bet-row'
 import { parseTags } from '../../common/util/parse'
 import { Avatar } from './avatar'
+import { useAdmin } from '../hooks/use-admin'
 
 function FeedComment(props: {
   activityItem: any
@@ -154,21 +155,75 @@ function FeedBet(props: { activityItem: any }) {
   )
 }
 
+function EditContract(props: {
+  text: string
+  onSave: (newText: string) => void
+  buttonText: string
+}) {
+  const [text, setText] = useState(props.text)
+  const [editing, setEditing] = useState(false)
+  const onSave = (newText: string) => {
+    setEditing(false)
+    setText(props.text) // Reset to original text
+    props.onSave(newText)
+  }
+
+  return editing ? (
+    <div className="mt-4">
+      <Textarea
+        className="textarea h-24 textarea-bordered w-full mb-1"
+        rows={3}
+        value={text}
+        onChange={(e) => setText(e.target.value || '')}
+        autoFocus
+        onFocus={(e) =>
+          // Focus starts at end of text.
+          e.target.setSelectionRange(text.length, text.length)
+        }
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && e.ctrlKey) {
+            onSave(text)
+          }
+        }}
+      />
+      <Row className="gap-2">
+        <button
+          className="btn btn-neutral btn-outline btn-sm"
+          onClick={() => onSave(text)}
+        >
+          Save
+        </button>
+        <button
+          className="btn btn-error btn-outline btn-sm"
+          onClick={() => setEditing(false)}
+        >
+          Cancel
+        </button>
+      </Row>
+    </div>
+  ) : (
+    <Row>
+      <button
+        className="btn btn-neutral btn-outline btn-sm mt-4"
+        onClick={() => setEditing(true)}
+      >
+        {props.buttonText}
+      </button>
+    </Row>
+  )
+}
+
 export function ContractDescription(props: {
   contract: Contract
   isCreator: boolean
 }) {
   const { contract, isCreator } = props
-  const [editing, setEditing] = useState(false)
-  const editStatement = () => `${dayjs().format('MMM D, h:mma')}: `
-  const [description, setDescription] = useState(editStatement())
+  const descriptionTimestamp = () => `${dayjs().format('MMM D, h:mma')}: `
+  const isAdmin = useAdmin()
 
   // Append the new description (after a newline)
-  async function saveDescription(e: any) {
-    e.preventDefault()
-    setEditing(false)
-
-    const newDescription = `${contract.description}\n\n${description}`.trim()
+  async function saveDescription(newText: string) {
+    const newDescription = `${contract.description}\n\n${newText}`.trim()
     const tags = parseTags(
       `${newDescription} ${contract.tags.map((tag) => `#${tag}`).join(' ')}`
     )
@@ -178,8 +233,6 @@ export function ContractDescription(props: {
       tags,
       lowercaseTags,
     })
-
-    setDescription(editStatement())
   }
 
   if (!isCreator && !contract.description.trim()) return null
@@ -188,53 +241,32 @@ export function ContractDescription(props: {
     <div className="whitespace-pre-line break-words mt-2 text-gray-700">
       <Linkify text={contract.description} />
       <br />
-      {isCreator &&
-        (editing ? (
-          <form className="mt-4">
-            <Textarea
-              className="textarea h-24 textarea-bordered w-full mb-1"
-              rows={3}
-              value={description}
-              onChange={(e) => setDescription(e.target.value || '')}
-              autoFocus
-              onFocus={(e) =>
-                // Focus starts at end of description.
-                e.target.setSelectionRange(
-                  description.length,
-                  description.length
-                )
-              }
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && e.ctrlKey) {
-                  saveDescription(e)
-                }
-              }}
-            />
-            <Row className="gap-2">
-              <button
-                className="btn btn-neutral btn-outline btn-sm"
-                onClick={saveDescription}
-              >
-                Save
-              </button>
-              <button
-                className="btn btn-error btn-outline btn-sm"
-                onClick={() => setEditing(false)}
-              >
-                Cancel
-              </button>
-            </Row>
-          </form>
-        ) : (
-          <Row>
-            <button
-              className="btn btn-neutral btn-outline btn-sm mt-4"
-              onClick={() => setEditing(true)}
-            >
-              Add to description
-            </button>
-          </Row>
-        ))}
+      {isCreator && (
+        <EditContract
+          // Note: Because descriptionTimestamp is called once, later edits use
+          // a stale timestamp. Ideally this is a function that gets called when
+          // isEditing is set to true.
+          text={descriptionTimestamp()}
+          onSave={saveDescription}
+          buttonText="Add to description"
+        />
+      )}
+      {isAdmin && (
+        <EditContract
+          text={contract.question}
+          onSave={(question) => updateContract(contract.id, { question })}
+          buttonText="ADMIN: Edit question"
+        />
+      )}
+      {/* {isAdmin && (
+        <EditContract
+          text={contract.createdTime.toString()}
+          onSave={(time) =>
+            updateContract(contract.id, { createdTime: Number(time) })
+          }
+          buttonText="ADMIN: Edit createdTime"
+        />
+      )} */}
     </div>
   )
 }
diff --git a/web/hooks/use-admin.ts b/web/hooks/use-admin.ts
new file mode 100644
index 00000000..733f73f6
--- /dev/null
+++ b/web/hooks/use-admin.ts
@@ -0,0 +1,12 @@
+import { useUser } from './use-user'
+
+export const useAdmin = () => {
+  const user = useUser()
+  const adminIds = [
+    'igi2zGXsfxYPgB0DJTXVJVmwCOr2', // Austin
+    '5LZ4LgYuySdL1huCWe7bti02ghx2', // James
+    'tlmGNz9kjXc2EteizMORes4qvWl2', // Stephen
+    'IPTOzEqrpkWmEzh6hwvAyY9PqFb2', // Manifold
+  ]
+  return adminIds.includes(user?.id || '')
+}
diff --git a/web/pages/admin.tsx b/web/pages/admin.tsx
index e28e94aa..8094ebf6 100644
--- a/web/pages/admin.tsx
+++ b/web/pages/admin.tsx
@@ -8,6 +8,7 @@ import { useUser } from '../hooks/use-user'
 import Custom404 from './404'
 import { useContracts } from '../hooks/use-contracts'
 import _ from 'lodash'
+import { useAdmin } from '../hooks/use-admin'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -190,15 +191,7 @@ function ContractsTable() {
 }
 
 export default function Admin() {
-  const user = useUser()
-  const adminIds = [
-    'igi2zGXsfxYPgB0DJTXVJVmwCOr2', // Austin
-    '5LZ4LgYuySdL1huCWe7bti02ghx2', // James
-    'tlmGNz9kjXc2EteizMORes4qvWl2', // Stephen
-    'IPTOzEqrpkWmEzh6hwvAyY9PqFb2', // Manifold
-  ]
-  const isAdmin = adminIds.includes(user?.id || '')
-  return isAdmin ? (
+  return useAdmin() ? (
     <Page wide>
       <UsersTable />
       <ContractsTable />