feat: rebroadcast

packages/app/src/Element/ReBroadcaster.tsx

@@ -0,0 +1,87 @@
+import { FormattedMessage } from "react-intl";
+import { useDispatch, useSelector } from "react-redux";
+import useEventPublisher from "Feed/EventPublisher";
+import Modal from "Element/Modal";
+import type { RootState } from "State/Store";
+import { setShow, reset, setSelectedCustomRelays } from "State/ReBroadcast";
+import messages from "./messages";
+import useLogin from "Hooks/useLogin";
+
+export function ReBroadcaster() {
+  const publisher = useEventPublisher();
+  const { note, show, selectedCustomRelays } = useSelector((s: RootState) => s.reBroadcast);
+  const dispatch = useDispatch();
+
+  async function sendReBroadcast() {
+    if (note && publisher) {
+      if (selectedCustomRelays) publisher.broadcastAll(note, selectedCustomRelays);
+      else publisher.broadcast(note);
+      dispatch(reset());
+    }
+  }
+
+  function cancel() {
+    dispatch(reset());
+  }
+
+  function onSubmit(ev: React.MouseEvent<HTMLButtonElement>) {
+    ev.stopPropagation();
+    sendReBroadcast().catch(console.warn);
+  }
+
+  const login = useLogin();
+  const relays = login.relays;
+
+  function renderRelayCustomisation() {
+    return (
+      <div>
+        {Object.keys(relays.item || {})
+          .filter(el => relays.item[el].write)
+          .map((r, i, a) => (
+            <div className="card flex">
+              <div className="flex f-col f-grow">
+                <div>{r}</div>
+              </div>
+              <div>
+                <input
+                  type="checkbox"
+                  checked={!selectedCustomRelays || selectedCustomRelays.includes(r)}
+                  onChange={e =>
+                    dispatch(
+                      setSelectedCustomRelays(
+                        // set false if all relays selected
+                        e.target.checked && selectedCustomRelays && selectedCustomRelays.length == a.length - 1
+                          ? false
+                          : // otherwise return selectedCustomRelays with target relay added / removed
+                            a.filter(el =>
+                              el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el)
+                            )
+                      )
+                    )
+                  }
+                />
+              </div>
+            </div>
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {show && (
+        <Modal className="note-creator-modal" onClose={() => dispatch(setShow(false))}>
+          {renderRelayCustomisation()}
+          <div className="note-creator-actions">
+            <button className="secondary" onClick={cancel}>
+              <FormattedMessage {...messages.Cancel} />
+            </button>
+            <button onClick={onSubmit}>
+              <FormattedMessage {...messages.ReBroadcast} />
+            </button>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}