add uploading state of image

web/components/editor.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx'
 import { useEffect } from 'react'
 import { Linkify } from './linkify'
 import { uploadImage } from 'web/lib/firebase/storage'
+import { useMutation } from 'react-query'
 
 const LINE_HEIGHT = 2
 
@@ -23,6 +24,10 @@ export function useTextEditor(props: {
 
   const rowsClass = rows && `box-content min-h-[${LINE_HEIGHT * rows}em]`
 
+  const upload = useMutation((files: File[]) =>
+    Promise.all(files.map((file) => uploadImage('default', file)))
+  )
+
   const editor = useEditor({
     editorProps: {
       attributes: {
@@ -38,18 +43,16 @@ export function useTextEditor(props: {
         }
 
         event.preventDefault()
-        ;(async () => {
-          // TODO: show loading state, compress large images
-          const urls = await Promise.all(
-            files.map((file) => uploadImage('default', file))
-          )
+        upload.mutate(files, {
+          onSuccess: (urls) => {
             let trans = view.state.tr
             urls.forEach((src: any) => {
               const node = view.state.schema.nodes.image.create({ src })
               trans = trans.insert(view.state.selection.to, node)
             })
             view.dispatch(trans)
-        })()
+          },
+        })
       },
     },
     extensions: [
@@ -65,7 +68,7 @@ export function useTextEditor(props: {
     editor?.setEditable(!disabled)
   }, [editor, disabled])
 
-  return editor
+  return { editor, upload }
 }
 
 function RichContent(props: { content: JSONContent }) {

web/lib/firebase/storage.ts

@@ -7,6 +7,7 @@ import {
 
 const storage = getStorage()
 
+// TODO: compress large images
 export const uploadImage = async (
   username: string,
   file: File,

web/pages/create.tsx

@@ -188,7 +188,7 @@ export function NewContract(props: {
       ? `e.g. This question resolves to "YES" if they receive the majority of votes...`
       : `e.g. I will choose the answer according to...`
 
-  const editor = useTextEditor({
+  const { editor, upload } = useTextEditor({
     rows: 3,
     max: MAX_DESCRIPTION_LENGTH,
     placeholder: descriptionPlaceholder,
@@ -442,12 +442,18 @@ export function NewContract(props: {
 
       <Spacer h={6} />
 
-      <div className="form-control mb-1 items-start">
-        <label className="label mb-1 gap-2">
+      <div className="form-control mb-1 items-start gap-1">
+        <label className="label gap-2">
           <span className="mb-1">Description</span>
           <InfoTooltip text="Optional. Describe how you will resolve this question." />
         </label>
         <EditorContent editor={editor} className="w-full" />
+        {upload.isLoading && (
+          <span className="text-xs">Uploading image...</span>
+        )}
+        {upload.isError && (
+          <span className="text-error text-xs">Error uploading image :(</span>
+        )}
       </div>
 
       <Spacer h={6} />
@@ -484,7 +490,7 @@ export function NewContract(props: {
             'btn btn-primary normal-case',
             isSubmitting && 'loading disabled'
           )}
-          disabled={isSubmitting || !isValid}
+          disabled={isSubmitting || !isValid || upload.isLoading}
           onClick={(e) => {
             e.preventDefault()
             submit()