Files
snort/packages/app/src/Element/ReBroadcaster.tsx
2023-09-22 09:53:37 +01:00

78 lines
2.3 KiB
TypeScript

import { useState } from "react";
import { FormattedMessage } from "react-intl";
import { TaggedNostrEvent } from "@snort/system";
import useEventPublisher from "Hooks/useEventPublisher";
import Modal from "Element/Modal";
import messages from "./messages";
import useLogin from "Hooks/useLogin";
import { System } from "index";
export function ReBroadcaster({ onClose, ev }: { onClose: () => void; ev: TaggedNostrEvent }) {
const [selected, setSelected] = useState<Array<string>>();
const publisher = useEventPublisher();
async function sendReBroadcast() {
if (publisher) {
if (selected) {
await Promise.all(selected.map(r => System.WriteOnceToRelay(r, ev)));
} else {
System.BroadcastEvent(ev);
}
}
}
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={!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" className="note-creator-modal" onClose={onClose}>
{renderRelayCustomisation()}
<div className="note-creator-actions">
<button className="secondary" onClick={onClose}>
<FormattedMessage {...messages.Cancel} />
</button>
<button onClick={onSubmit}>
<FormattedMessage {...messages.ReBroadcast} />
</button>
</div>
</Modal>
</>
);
}