2023-01-09 12:40:10 +00:00
|
|
|
import "./Relay.css"
|
|
|
|
|
2023-01-11 13:05:32 +00:00
|
|
|
import { faPlug, faTrash, faSquareCheck, faSquareXmark, faWifi, faUpload, faDownload, faPlugCircleXmark, faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
|
2023-01-09 12:40:10 +00:00
|
|
|
import useRelayState from "../feed/RelayState";
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2023-01-11 13:05:32 +00:00
|
|
|
import { useMemo, useState } from "react";
|
2023-01-09 12:40:10 +00:00
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import { removeRelay, setRelays } from "../state/Login";
|
|
|
|
|
|
|
|
|
|
|
|
export default function Relay(props) {
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const relaySettings = useSelector(s => s.login.relays[props.addr]);
|
|
|
|
const state = useRelayState(props.addr);
|
|
|
|
const name = useMemo(() => new URL(props.addr).host, [props.addr]);
|
2023-01-11 13:05:32 +00:00
|
|
|
const [showExtra, setShowExtra] = useState(false);
|
2023-01-09 12:40:10 +00:00
|
|
|
|
|
|
|
function configure(o) {
|
|
|
|
dispatch(setRelays({
|
|
|
|
[props.addr]: o
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2023-01-11 13:05:32 +00:00
|
|
|
|
|
|
|
let latency = parseInt(state?.avgLatency ?? 0);
|
2023-01-09 12:40:10 +00:00
|
|
|
return (
|
|
|
|
<>
|
2023-01-11 13:05:32 +00:00
|
|
|
<div className={`relay w-max`}>
|
|
|
|
<div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
|
|
|
|
<FontAwesomeIcon icon={faPlug} />
|
2023-01-09 12:40:10 +00:00
|
|
|
</div>
|
|
|
|
<div className="f-grow f-col">
|
2023-01-11 13:05:32 +00:00
|
|
|
<div className="flex mb10">
|
|
|
|
<b className="f-2">{name}</b>
|
|
|
|
<div className="f-1">
|
|
|
|
Write
|
|
|
|
<span className="pill" onClick={() => configure({ write: !relaySettings.write, read: relaySettings.read })}>
|
|
|
|
<FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="f-1">
|
|
|
|
Read
|
|
|
|
<span className="pill" 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 ? `${(latency / 1000).toFixed(0)} secs` : `${latency.toLocaleString()} ms`}
|
|
|
|
|
|
|
|
<FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<span className="pill" onClick={() => setShowExtra(s => !s)}>
|
|
|
|
<FontAwesomeIcon icon={faEllipsisVertical} />
|
|
|
|
</span>
|
|
|
|
</div>
|
2023-01-09 12:40:10 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-11 13:05:32 +00:00
|
|
|
</div>
|
|
|
|
{showExtra ? <div className="flex relay-extra w-max">
|
|
|
|
<div className="f-1">
|
|
|
|
<FontAwesomeIcon icon={faUpload} /> {state?.events.send}
|
|
|
|
</div>
|
|
|
|
<div className="f-1">
|
|
|
|
<FontAwesomeIcon icon={faDownload} /> {state?.events.received}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="f-1">
|
|
|
|
Delete
|
|
|
|
<span className="pill" onClick={() => dispatch(removeRelay(props.addr))}>
|
|
|
|
<FontAwesomeIcon icon={faTrash} />
|
2023-01-09 12:40:10 +00:00
|
|
|
</span>
|
|
|
|
</div>
|
2023-01-11 13:05:32 +00:00
|
|
|
</div> : null}
|
2023-01-09 12:40:10 +00:00
|
|
|
</>
|
|
|
|
)
|
2023-01-10 09:18:46 +00:00
|
|
|
}
|