mgply09ox: Publish an image post through a server upload pipeline

src/components/Feed.tsx

@@ -22,6 +22,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
   const [deleteBusy, setDeleteBusy] = useState<ReadonlySet<string>>(new Set());
   const [deleteErrors, setDeleteErrors] = useState<ReadonlySet<string>>(new Set());
   const [draft, setDraft] = useState("");
+  const [file, setFile] = useState<File | null>(null);
   const [posting, setPosting] = useState(false);
   const [postFailed, setPostFailed] = useState(false);
   // Id of a post already created but not yet seen on the first page. A retry
@@ -187,22 +188,24 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
 
   const publish = useCallback(async () => {
     const text = draft.trim();
-    if (!text || posting) return;
+    // A post needs either text or an image.
+    if ((!text && !file) || posting) return;
     setPosting(true);
     setPostFailed(false);
     try {
-      const page = await publishAndConfirm(text, unconfirmed.current);
+      const page = await publishAndConfirm(text, file, unconfirmed.current);
       setPosts(mergePosts(toCardPosts(page.items)));
       setNextCursor(page.nextCursor);
       setPending([]);
       setDraft("");
+      setFile(null);
     } catch (e) {
       if (e instanceof PostError && e.signedOut) onSignedOut();
       setPostFailed(true);
     } finally {
       setPosting(false);
     }
-  }, [draft, posting, onSignedOut]);
+  }, [draft, file, posting, onSignedOut]);
 
   function changeDraft(v: string) {
     // New text is a new post; forget a stale unconfirmed id.
@@ -210,6 +213,12 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
     setDraft(v);
   }
 
+  function changeFile(f: File | null) {
+    // A different attachment is a new post; forget a stale unconfirmed id.
+    unconfirmed.current = { id: null };
+    setFile(f);
+  }
+
   function showNew() {
     setPosts((cur) => mergePosts(cur, pending));
     setPending([]);
@@ -233,7 +242,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
       deleteBusy={deleteBusy}
       deleteErrors={deleteErrors}
       onSignedOut={onSignedOut}
-      composer={{ value: draft, busy: posting, error: postFailed, onChange: changeDraft, onSubmit: () => void publish() }}
+      composer={{ value: draft, busy: posting, error: postFailed, file, onChange: changeDraft, onFile: changeFile, onSubmit: () => void publish() }}
       sentinelRef={sentinel}
     />
   );