chore: rename Dirs

2023-01-20 11:30:04 +00:00
parent ab1efc2e2e
commit 3533f26e4e
90 changed files with 0 additions and 0 deletions
--- a/src/Element/Relay.tsx
+++ b/src/Element/Relay.tsx
@ -0,0 +1,89 @@
+import "./Relay.css"
+
+import { faPlug, faTrash, faSquareCheck, faSquareXmark, faWifi, faUpload, faDownload, faPlugCircleXmark, faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
+import useRelayState from "Feed/RelayState";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { removeRelay, setRelays } from "State/Login";
+import { RootState } from "State/Store";
+import { RelaySettings } from "Nostr/Connection";
+
+export interface RelayProps {
+    addr: string
+}
+
+export default function Relay(props: RelayProps) {
+    const dispatch = useDispatch();
+    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]);
+    const [showExtra, setShowExtra] = useState(false);
+
+    function configure(o: RelaySettings) {
+        dispatch(setRelays({
+            relays: {
+                ...allRelaySettings,
+                [props.addr]: o
+            },
+            createdAt: Math.floor(new Date().getTime() / 1000)
+        }));
+    }
+
+
+    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">
+                            Write
+                            <span className="checkmark" onClick={() => configure({ write: !relaySettings.write, read: relaySettings.read })}>
+                                <FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
+                            </span>
+                        </div>
+                        <div className="f-1">
+                            Read
+                            <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 ? `${(latency / 1000).toFixed(0)} secs` : `${latency.toLocaleString()} ms`}
+                            &nbsp;
+                            <FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
+                        </div>
+                        <div>
+                            <span className="icon-btn" onClick={() => setShowExtra(s => !s)}>
+                                <FontAwesomeIcon icon={faEllipsisVertical} />
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </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="icon-btn" onClick={() => dispatch(removeRelay(props.addr))}>
+                        <FontAwesomeIcon icon={faTrash} />
+                    </span>
+                </div>
+            </div> : null}
+        </>
+    )
+}