Files
snort/packages/app/src/Element/Relay.tsx
2023-09-05 14:57:50 +01:00

90 lines
2.6 KiB
TypeScript

import "./Relay.css";
import { useMemo } from "react";
import { FormattedMessage } from "react-intl";
import { useNavigate } from "react-router-dom";
import { RelaySettings } from "@snort/system";
import { unixNowMs } from "@snort/shared";
import useRelayState from "Feed/RelayState";
import { System } from "index";
import { getRelayName, unwrap } from "SnortUtils";
import useLogin from "Hooks/useLogin";
import { setRelays } from "Login";
import Icon from "Icons/Icon";
import messages from "./messages";
export interface RelayProps {
addr: string;
}
export default function Relay(props: RelayProps) {
const navigate = useNavigate();
const login = useLogin();
const relaySettings = unwrap(
login.relays.item[props.addr] ?? System.Sockets.find(a => a.address === props.addr)?.settings ?? {}
);
const state = useRelayState(props.addr);
const name = useMemo(() => getRelayName(props.addr), [props.addr]);
function configure(o: RelaySettings) {
setRelays(
login,
{
...login.relays.item,
[props.addr]: o,
},
unixNowMs()
);
}
return (
<>
<div className={`relay w-max`}>
<div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
<Icon name="wifi" />
</div>
<div className="f-grow f-col">
<div className="flex mb10">
<b className="f-2">{name}</b>
<div className="f-1">
<FormattedMessage {...messages.Write} />
<span
className="checkmark"
onClick={() =>
configure({
write: !relaySettings.write,
read: relaySettings.read,
})
}>
<Icon name={relaySettings.write ? "check" : "close"} size={12} />
</span>
</div>
<div className="f-1">
<FormattedMessage {...messages.Read} />
<span
className="checkmark"
onClick={() =>
configure({
write: relaySettings.write,
read: !relaySettings.read,
})
}>
<Icon name={relaySettings.read ? "check" : "close"} size={12} />
</span>
</div>
</div>
<div className="flex">
<div className="f-grow"></div>
<div>
<span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>
<Icon name="gear" size={12} />
</span>
</div>
</div>
</div>
</div>
</>
);
}