2023-02-07 20:04:50 +00:00
|
|
|
import "./Relay.css";
|
2023-02-08 21:10:26 +00:00
|
|
|
import { useIntl, FormattedMessage } from "react-intl";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
2023-02-07 20:04:50 +00:00
|
|
|
import {
|
|
|
|
faPlug,
|
|
|
|
faSquareCheck,
|
|
|
|
faSquareXmark,
|
|
|
|
faWifi,
|
|
|
|
faPlugCircleXmark,
|
|
|
|
faGear,
|
|
|
|
} from "@fortawesome/free-solid-svg-icons";
|
2023-01-20 11:11:50 +00:00
|
|
|
import useRelayState from "Feed/RelayState";
|
2023-01-09 12:40:10 +00:00
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2023-01-25 13:54:45 +00:00
|
|
|
import { useMemo } from "react";
|
2023-01-09 12:40:10 +00:00
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
2023-01-25 13:54:45 +00:00
|
|
|
import { setRelays } from "State/Login";
|
2023-01-20 11:11:50 +00:00
|
|
|
import { RootState } from "State/Store";
|
|
|
|
import { RelaySettings } from "Nostr/Connection";
|
2023-02-08 21:10:26 +00:00
|
|
|
|
|
|
|
import messages from "./messages";
|
2023-01-09 12:40:10 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface RelayProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
addr: string;
|
2023-01-16 17:48:25 +00:00
|
|
|
}
|
2023-01-09 12:40:10 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export default function Relay(props: RelayProps) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const dispatch = useDispatch();
|
2023-02-08 21:10:26 +00:00
|
|
|
const { formatMessage } = useIntl();
|
2023-02-07 20:04:50 +00:00
|
|
|
const navigate = useNavigate();
|
|
|
|
const allRelaySettings = useSelector<
|
|
|
|
RootState,
|
|
|
|
Record<string, RelaySettings>
|
|
|
|
>((s) => s.login.relays);
|
|
|
|
const relaySettings = allRelaySettings[props.addr];
|
|
|
|
const state = useRelayState(props.addr);
|
|
|
|
const name = useMemo(() => new URL(props.addr).host, [props.addr]);
|
2023-01-09 12:40:10 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function configure(o: RelaySettings) {
|
|
|
|
dispatch(
|
|
|
|
setRelays({
|
|
|
|
relays: {
|
|
|
|
...allRelaySettings,
|
|
|
|
[props.addr]: o,
|
|
|
|
},
|
|
|
|
createdAt: Math.floor(new Date().getTime() / 1000),
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
2023-01-09 12:40:10 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
let latency = Math.floor(state?.avgLatency ?? 0);
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={`relay w-max`}>
|
|
|
|
<div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
|
|
|
|
<FontAwesomeIcon icon={faPlug} />
|
|
|
|
</div>
|
|
|
|
<div className="f-grow f-col">
|
|
|
|
<div className="flex mb10">
|
|
|
|
<b className="f-2">{name}</b>
|
|
|
|
<div className="f-1">
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.Write} />
|
2023-02-07 20:04:50 +00:00
|
|
|
<span
|
|
|
|
className="checkmark"
|
|
|
|
onClick={() =>
|
|
|
|
configure({
|
|
|
|
write: !relaySettings.write,
|
|
|
|
read: relaySettings.read,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<FontAwesomeIcon
|
|
|
|
icon={relaySettings.write ? faSquareCheck : faSquareXmark}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="f-1">
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.Read} />
|
2023-02-07 20:04:50 +00:00
|
|
|
<span
|
|
|
|
className="checkmark"
|
|
|
|
onClick={() =>
|
|
|
|
configure({
|
|
|
|
write: relaySettings.write,
|
|
|
|
read: !relaySettings.read,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<FontAwesomeIcon
|
|
|
|
icon={relaySettings.read ? faSquareCheck : faSquareXmark}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex">
|
|
|
|
<div className="f-grow">
|
|
|
|
<FontAwesomeIcon icon={faWifi} />{" "}
|
|
|
|
{latency > 2000
|
2023-02-08 21:10:26 +00:00
|
|
|
? formatMessage(messages.Seconds, {
|
|
|
|
n: (latency / 1000).toFixed(0),
|
|
|
|
})
|
|
|
|
: formatMessage(messages.Milliseconds, {
|
|
|
|
n: latency.toLocaleString(),
|
|
|
|
})}
|
2023-02-07 20:04:50 +00:00
|
|
|
|
|
|
|
<FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<span className="icon-btn" onClick={() => navigate(state!.id)}>
|
|
|
|
<FontAwesomeIcon icon={faGear} />
|
|
|
|
</span>
|
2023-01-11 13:05:32 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
2023-01-10 09:18:46 +00:00
|
|
|
}
|