refactor: improve rebroadcaster

packages/app/src/Components/ReBroadcaster.tsx

@@ -1,65 +1,75 @@
-import { TaggedNostrEvent } from "@snort/system";
+import { OkResponse, TaggedNostrEvent } from "@snort/system";
 import { SnortContext } from "@snort/system-react";
 import { useContext, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
+import AsyncButton from "@/Components/Button/AsyncButton";
 import Modal from "@/Components/Modal/Modal";
 import useRelays from "@/Hooks/useRelays";
 
-import AsyncButton from "./Button/AsyncButton";
-import messages from "./messages";
-
 export function ReBroadcaster({ onClose, ev }: { onClose: () => void; ev: TaggedNostrEvent }) {
   const [selected, setSelected] = useState<Array<string>>();
+  const [replies, setReplies] = useState<Array<OkResponse>>([]);
+  const [sending, setSending] = useState(false);
   const system = useContext(SnortContext);
   const relays = useRelays();
 
   async function sendReBroadcast() {
-    if (selected) {
-      await Promise.all(selected.map(r => system.WriteOnceToRelay(r, ev)));
-    } else {
-      system.BroadcastEvent(ev);
+    setSending(true);
+    setReplies([]);
+    try {
+      if (selected) {
+        await Promise.all(selected.map(r => system.WriteOnceToRelay(r, ev).then(o => setReplies(v => [...v, o]))));
+      } else {
+        const rsp = await system.BroadcastEvent(ev);
+        setReplies(rsp);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSending(false);
     }
   }
 
-  function renderRelayCustomisation() {
-    return (
-      <div className="flex flex-col g8">
-        {Object.keys(relays)
-          .filter(el => relays[el].write)
-          .map((r, i, a) => (
-            <div key={r} className="card flex justify-between">
-              <div>{r}</div>
-              <div>
-                <input
-                  type="checkbox"
-                  checked={!selected || selected.includes(r)}
-                  onChange={e =>
-                    setSelected(
-                      e.target.checked && selected && selected.length === a.length - 1
-                        ? undefined
-                        : a.filter(el => (el === r ? e.target.checked : !selected || selected.includes(el))),
-                    )
-                  }
-                />
-              </div>
-            </div>
-          ))}
-      </div>
-    );
-  }
-
   return (
     <>
       <Modal id="broadcaster" onClose={onClose}>
-        {renderRelayCustomisation()}
-        <div className="flex g8">
-          <button className="secondary" onClick={onClose}>
-            <FormattedMessage {...messages.Cancel} />
-          </button>
-          <AsyncButton onClick={sendReBroadcast}>
-            <FormattedMessage {...messages.ReBroadcast} />
-          </AsyncButton>
+        <div className="flex flex-col gap-4">
+          <div className="text-xl font-medium">
+            <FormattedMessage defaultMessage="Broadcast Event" />
+          </div>
+          {Object.keys(relays)
+            .filter(el => relays[el].write)
+            .map((r, i, a) => (
+              <div key={r} className="flex justify-between">
+                <div className="flex flex-col gap-1">
+                  <div>{r}</div>
+                  <small>{replies.findLast(a => a.relay === r)?.message}</small>
+                </div>
+                <div>
+                  <input
+                    type="checkbox"
+                    disabled={sending}
+                    checked={!selected || selected.includes(r)}
+                    onChange={e =>
+                      setSelected(
+                        e.target.checked && selected && selected.length === a.length - 1
+                          ? undefined
+                          : a.filter(el => (el === r ? e.target.checked : !selected || selected.includes(el))),
+                      )
+                    }
+                  />
+                </div>
+              </div>
+            ))}
+          <div className="flex gap-2">
+            <button className="secondary" onClick={onClose}>
+              <FormattedMessage defaultMessage="Cancel" />
+            </button>
+            <AsyncButton onClick={sendReBroadcast} disabled={sending}>
+              <FormattedMessage defaultMessage="Send" />
+            </AsyncButton>
+          </div>
         </div>
       </Modal>
     </>