refactor: improve rebroadcaster

packages/app/src/Components/ReBroadcaster.tsx

@@ -1,38 +1,55 @@
-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() {
+    setSending(true);
+    setReplies([]);
+    try {
       if (selected) {
-      await Promise.all(selected.map(r => system.WriteOnceToRelay(r, ev)));
+        await Promise.all(selected.map(r => system.WriteOnceToRelay(r, ev).then(o => setReplies(v => [...v, o]))));
       } else {
-      system.BroadcastEvent(ev);
+        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">
+    <>
+      <Modal id="broadcaster" onClose={onClose}>
+        <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="card flex justify-between">
+              <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(
@@ -45,22 +62,15 @@ export function ReBroadcaster({ onClose, ev }: { onClose: () => void; ev: Tagged
                 </div>
               </div>
             ))}
-      </div>
+          <div className="flex gap-2">
-    );
-  }
-
-  return (
-    <>
-      <Modal id="broadcaster" onClose={onClose}>
-        {renderRelayCustomisation()}
-        <div className="flex g8">
             <button className="secondary" onClick={onClose}>
-            <FormattedMessage {...messages.Cancel} />
+              <FormattedMessage defaultMessage="Cancel" />
             </button>
-          <AsyncButton onClick={sendReBroadcast}>
+            <AsyncButton onClick={sendReBroadcast} disabled={sending}>
-            <FormattedMessage {...messages.ReBroadcast} />
+              <FormattedMessage defaultMessage="Send" />
             </AsyncButton>
           </div>
+        </div>
       </Modal>
     </>
   );