workspace with decoupled nostr package

packages/app/src/Pages/Root.tsx

@@ -0,0 +1,121 @@
+import "./Root.css";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import { useIntl, FormattedMessage } from "react-intl";
+
+import Tabs, { Tab } from "Element/Tabs";
+import { RootState } from "State/Store";
+import Timeline from "Element/Timeline";
+import { System } from "@snort/nostr";
+import { TimelineSubject } from "Feed/TimelineFeed";
+
+import messages from "./messages";
+import { debounce } from "Util";
+
+export default function RootPage() {
+  const { formatMessage } = useIntl();
+  const { loggedOut, publicKey: pubKey, follows, tags, relays } = useSelector((s: RootState) => s.login);
+  const RootTab: Record<string, Tab> = {
+    Posts: {
+      text: formatMessage(messages.Posts),
+      value: 0,
+    },
+    PostsAndReplies: {
+      text: formatMessage(messages.Conversations),
+      value: 1,
+    },
+    Global: {
+      text: formatMessage(messages.Global),
+      value: 2,
+    },
+  };
+  const [tab, setTab] = useState<Tab>(RootTab.Posts);
+  const [relay, setRelay] = useState<string>();
+  const [globalRelays, setGlobalRelays] = useState<string[]>([]);
+  const tagTabs = tags.map((t, idx) => {
+    return { text: `#${t}`, value: idx + 3 };
+  });
+  const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
+
+  function followHints() {
+    if (follows?.length === 0 && pubKey && tab !== RootTab.Global) {
+      return (
+        <FormattedMessage
+          {...messages.NoFollows}
+          values={{
+            newUsersPage: (
+              <Link to={"/new/discover"}>
+                <FormattedMessage {...messages.NewUsers} />
+              </Link>
+            ),
+          }}
+        />
+      );
+    }
+  }
+
+  useEffect(() => {
+    return debounce(1_000, () => {
+      const ret: string[] = [];
+      System.Sockets.forEach((v, k) => {
+        if (v.Info?.limitation?.payment_required === true) {
+          ret.push(k);
+        }
+      });
+
+      if (ret.length > 0 && !relay) {
+        setRelay(ret[0]);
+      }
+      setGlobalRelays(ret);
+    });
+  }, [relays, relay]);
+
+  const isGlobal = loggedOut || tab.value === RootTab.Global.value;
+  const timelineSubect: TimelineSubject = (() => {
+    if (isGlobal) {
+      return { type: "global", items: [], discriminator: "all" };
+    }
+    if (tab.value >= 3) {
+      const hashtag = tab.text.slice(1);
+      return { type: "hashtag", items: [hashtag], discriminator: hashtag };
+    }
+
+    return { type: "pubkey", items: follows, discriminator: "follows" };
+  })();
+
+  if (isGlobal && globalRelays.length === 0) return null;
+  return (
+    <>
+      <div className="main-content">{pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}</div>
+      {isGlobal && (
+        <div className="flex mb10">
+          <div className="f-grow">
+            <FormattedMessage
+              defaultMessage="Read global from"
+              description="Label for reading global feed from specific relays"
+            />
+          </div>
+          <div>
+            <select onChange={e => setRelay(e.target.value)}>
+              {globalRelays.map(a => (
+                <option key={a} value={a}>
+                  {new URL(a).host}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+      {followHints()}
+      <Timeline
+        key={tab.value}
+        subject={timelineSubect}
+        postsOnly={tab.value === RootTab.Posts.value}
+        method={"TIME_RANGE"}
+        window={undefined}
+        relay={isGlobal ? relay : undefined}
+      />
+    </>
+  );
+}