feat: multi-account system

packages/app/src/Pages/settings/Relays.tsx

@@ -1,24 +1,23 @@
 import { useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { useDispatch, useSelector } from "react-redux";
 
-import { randomSample } from "Util";
+import { randomSample, unixNowMs } from "Util";
 import Relay from "Element/Relay";
 import useEventPublisher from "Feed/EventPublisher";
-import { RootState } from "State/Store";
-import { setRelays } from "State/Login";
 import { System } from "System";
 
 import messages from "./messages";
+import useLogin from "Hooks/useLogin";
+import { setRelays } from "Login";
 
 const RelaySettingsPage = () => {
-  const dispatch = useDispatch();
   const publisher = useEventPublisher();
-  const relays = useSelector((s: RootState) => s.login.relays);
+  const login = useLogin();
+  const relays = login.relays;
   const [newRelay, setNewRelay] = useState<string>();
 
   const otherConnections = useMemo(() => {
-    return [...System.Sockets.keys()].filter(a => relays[a] === undefined);
+    return [...System.Sockets.keys()].filter(a => relays.item[a] === undefined);
   }, [relays]);
 
   async function saveRelays() {
@@ -69,13 +68,10 @@ const RelaySettingsPage = () => {
     if ((newRelay?.length ?? 0) > 0) {
       const parsed = new URL(newRelay ?? "");
       const payload = {
-        relays: {
-          ...relays,
-          [parsed.toString()]: { read: false, write: false },
-        },
-        createdAt: Math.floor(new Date().getTime() / 1000),
+        ...relays.item,
+        [parsed.toString()]: { read: true, write: true },
       };
-      dispatch(setRelays(payload));
+      setRelays(login, payload, unixNowMs());
     }
   }
 
@@ -85,7 +81,7 @@ const RelaySettingsPage = () => {
         <FormattedMessage {...messages.Relays} />
       </h3>
       <div className="flex f-col mb10">
-        {Object.keys(relays || {}).map(a => (
+        {Object.keys(relays.item || {}).map(a => (
           <Relay addr={a} key={a} />
         ))}
       </div>