More cleanups

web/components/editor/image-modal.tsx

@@ -22,32 +22,33 @@ export function ImageModal(props: {
   const { upload, open, setOpen } = props
   return (
     <Modal open={open} setOpen={setOpen}>
-      <Tabs
-        className="gap-2 rounded bg-white p-6"
-        tabs={[
-          {
-            title: 'Upload file',
-            content: (
-              <FileUploadButton
-                onFiles={(files) => {
-                  setOpen(false)
-                  upload.mutate(files)
-                }}
-                className="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                <UploadIcon className="mx-auto h-12 w-12 text-gray-400" />
-                <span className="mt-2 block text-sm font-medium text-gray-400">
-                  Upload an image file
-                </span>
-              </FileUploadButton>
-            ),
-          },
-          {
-            title: 'Dream',
-            content: <DreamTab {...props} />,
-          },
-        ]}
-      />
+      <Col className="gap-2 rounded bg-white p-6">
+        <Tabs
+          tabs={[
+            {
+              title: 'Upload file',
+              content: (
+                <FileUploadButton
+                  onFiles={(files) => {
+                    setOpen(false)
+                    upload.mutate(files)
+                  }}
+                  className="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  <UploadIcon className="mx-auto h-12 w-12 text-gray-400" />
+                  <span className="mt-2 block text-sm font-medium text-gray-400">
+                    Upload an image file
+                  </span>
+                </FileUploadButton>
+              ),
+            },
+            {
+              title: 'Dream',
+              content: <DreamTab {...props} />,
+            },
+          ]}
+        />
+      </Col>
     </Modal>
   )
 }

web/pages/api/v0/dream.ts

@@ -69,36 +69,22 @@ const ONE_YEAR_SECS = 60 * 60 * 24 * 365
 async function upload(buffer: Buffer) {
   const filename = `${nanoid(10)}.png`
   const storageRef = ref(storage, `dream/${filename}`)
-  const uploadTask = uploadBytesResumable(storageRef, buffer, {
+
+  function promisifiedUploadBytes(...args: any[]) {
+    return new Promise((resolve, reject) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const task = uploadBytesResumable(...args)
+      task.on(
+        'state_changed',
+        null,
+        (e: Error) => reject(e),
+        () => getDownloadURL(task.snapshot.ref).then(resolve)
+      )
+    })
+  }
+  return promisifiedUploadBytes(storageRef, buffer, {
     cacheControl: `public, max-age=${ONE_YEAR_SECS}`,
     contentType: 'image/png',
   })
-
-  let resolvePromise: (url: string) => void
-  let rejectPromise: (reason?: any) => void
-
-  const promise = new Promise<string>((resolve, reject) => {
-    resolvePromise = resolve
-    rejectPromise = reject
-  })
-
-  const unsubscribe = uploadTask.on(
-    'state_changed',
-    (_snapshot) => {},
-    (error) => {
-      // A full list of error codes is available at
-      // https://firebase.google.com/docs/storage/web/handle-errors
-      rejectPromise(error)
-      unsubscribe()
-    },
-    () => {
-      getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
-        resolvePromise(downloadURL)
-      })
-
-      unsubscribe()
-    }
-  )
-
-  return await promise
 }