refactor: RequestBuilder

packages/app/src/Pages/Root.tsx

@@ -1,7 +1,7 @@
 import "./Root.css";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, Outlet, RouteObject, useLocation, useNavigate, useParams } from "react-router-dom";
 import { useIntl, FormattedMessage } from "react-intl";
 
 import Tabs, { Tab } from "Element/Tabs";
@@ -9,7 +9,7 @@ import { RootState } from "State/Store";
 import Timeline from "Element/Timeline";
 import { System } from "System";
 import { TimelineSubject } from "Feed/TimelineFeed";
-import { debounce, getRelayName, sha256, unwrap } from "Util";
+import { debounce, getRelayName, sha256, unixNow, unwrap } from "Util";
 
 import messages from "./messages";
 
@@ -20,58 +20,98 @@ interface RelayOption {
 
 export default function RootPage() {
   const { formatMessage } = useIntl();
-  const { loggedOut, publicKey: pubKey, follows, tags, relays, preferences } = useSelector((s: RootState) => s.login);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { publicKey: pubKey, tags, preferences } = useSelector((s: RootState) => s.login);
+
   const RootTab: Record<string, Tab> = {
     Posts: {
       text: formatMessage(messages.Posts),
       value: 0,
+      data: "/posts",
     },
     PostsAndReplies: {
       text: formatMessage(messages.Conversations),
       value: 1,
+      data: "/conversations",
     },
     Global: {
       text: formatMessage(messages.Global),
       value: 2,
+      data: "/global",
     },
   };
-  const [tab, setTab] = useState<Tab>(() => {
-    switch (preferences.defaultRootTab) {
-      case "conversations":
+  const tab = useMemo(() => {
+    const pTab = location.pathname.split("/").slice(-1)[0];
+    switch (pTab) {
+      case "conversations": {
         return RootTab.PostsAndReplies;
-      case "global":
+      }
+      case "global": {
         return RootTab.Global;
-      default:
+      }
+      default: {
         return RootTab.Posts;
+      }
     }
-  });
-  const [relay, setRelay] = useState<RelayOption>();
-  const [allRelays, setAllRelays] = useState<RelayOption[]>();
+  }, [location]);
+
+  useEffect(() => {
+    if (location.pathname === "/") {
+      navigate(unwrap(preferences.defaultRootTab ?? tab.data), {
+        replace: true,
+      });
+    }
+  }, [location]);
+
   const tagTabs = tags.map((t, idx) => {
-    return { text: `#${t}`, value: idx + 3 };
+    return { text: `#${t}`, value: idx + 3, data: `/tag/${t}` };
   });
   const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
-  const isGlobal = loggedOut || tab.value === RootTab.Global.value;
 
-  function followHints() {
-    if (follows?.length === 0 && pubKey && tab !== RootTab.Global) {
-      return (
-        <FormattedMessage
-          {...messages.NoFollows}
-          values={{
-            newUsersPage: (
-              <Link to={"/new/discover"}>
-                <FormattedMessage {...messages.NewUsers} />
-              </Link>
-            ),
-          }}
-        />
-      );
-    }
+  return (
+    <>
+      <div className="main-content">
+        {pubKey && <Tabs tabs={tabs} tab={tab} setTab={t => navigate(unwrap(t.data))} />}
+      </div>
+      <Outlet />
+    </>
+  );
+}
+
+const FollowsHint = () => {
+  const { publicKey: pubKey, follows } = useSelector((s: RootState) => s.login);
+  if (follows?.length === 0 && pubKey) {
+    return (
+      <FormattedMessage
+        {...messages.NoFollows}
+        values={{
+          newUsersPage: (
+            <Link to={"/new/discover"}>
+              <FormattedMessage {...messages.NewUsers} />
+            </Link>
+          ),
+        }}
+      />
+    );
   }
+  return null;
+};
+
+const GlobalTab = () => {
+  const { relays } = useSelector((s: RootState) => s.login);
+  const [relay, setRelay] = useState<RelayOption>();
+  const [allRelays, setAllRelays] = useState<RelayOption[]>();
+  const [now] = useState(unixNow());
+
+  const subject: TimelineSubject = {
+    type: "global",
+    items: [],
+    discriminator: `all-${sha256(relay?.url ?? "").slice(0, 12)}`,
+  };
 
   function globalRelaySelector() {
-    if (!isGlobal || !allRelays || allRelays.length === 0) return null;
+    if (!allRelays || allRelays.length === 0) return null;
 
     const paidRelays = allRelays.filter(a => a.paid);
     const publicRelays = allRelays.filter(a => !a.paid);
@@ -108,60 +148,80 @@ export default function RootPage() {
   }
 
   useEffect(() => {
-    if (isGlobal) {
-      return debounce(500, () => {
-        const ret: RelayOption[] = [];
-        System.Sockets.forEach((v, k) => {
-          ret.push({
-            url: k,
-            paid: v.Info?.limitation?.payment_required ?? false,
-          });
+    return debounce(500, () => {
+      const ret: RelayOption[] = [];
+      System.Sockets.forEach((v, k) => {
+        ret.push({
+          url: k,
+          paid: v.Info?.limitation?.payment_required ?? false,
         });
-        ret.sort(a => (a.paid ? -1 : 1));
-
-        if (ret.length > 0 && !relay) {
-          setRelay(ret[0]);
-        }
-        setAllRelays(ret);
       });
-    }
-  }, [relays, relay, tab]);
+      ret.sort(a => (a.paid ? -1 : 1));
 
-  const timelineSubect: TimelineSubject = (() => {
-    if (isGlobal) {
-      return { type: "global", items: [], discriminator: `all-${sha256(relay?.url ?? "").slice(0, 12)}` };
-    }
-    if (tab.value >= 3) {
-      const hashtag = tab.text.slice(1);
-      return { type: "hashtag", items: [hashtag], discriminator: hashtag };
-    }
-
-    return { type: "pubkey", items: follows, discriminator: "follows" };
-  })();
-
-  function renderTimeline() {
-    if (isGlobal && !relay) return null;
-
-    return (
-      <Timeline
-        key={tab.value}
-        subject={timelineSubect}
-        postsOnly={tab.value === RootTab.Posts.value}
-        method={"TIME_RANGE"}
-        window={undefined}
-        relay={isGlobal ? unwrap(relay).url : undefined}
-      />
-    );
-  }
+      if (ret.length > 0 && !relay) {
+        setRelay(ret[0]);
+      }
+      setAllRelays(ret);
+    });
+  }, [relays, relay]);
 
   return (
     <>
-      <div className="main-content">
-        {pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}
-        {globalRelaySelector()}
-      </div>
-      {followHints()}
-      {renderTimeline()}
+      {globalRelaySelector()}
+      {relay && (
+        <Timeline subject={subject} postsOnly={false} method={"TIME_RANGE"} window={600} relay={relay.url} now={now} />
+      )}
     </>
   );
-}
+};
+
+const PostsTab = () => {
+  const follows = useSelector((s: RootState) => s.login.follows);
+  const subject: TimelineSubject = { type: "pubkey", items: follows, discriminator: "follows" };
+
+  return (
+    <>
+      <FollowsHint />
+      <Timeline subject={subject} postsOnly={true} method={"TIME_RANGE"} window={undefined} relay={undefined} />
+    </>
+  );
+};
+
+const ConversationsTab = () => {
+  const { follows } = useSelector((s: RootState) => s.login);
+  const subject: TimelineSubject = { type: "pubkey", items: follows, discriminator: "follows" };
+
+  return <Timeline subject={subject} postsOnly={false} method={"TIME_RANGE"} window={undefined} relay={undefined} />;
+};
+
+const TagsTab = () => {
+  const { tag } = useParams();
+  const subject: TimelineSubject = { type: "hashtag", items: [tag ?? ""], discriminator: `tags-${tag}` };
+
+  return <Timeline subject={subject} postsOnly={false} method={"TIME_RANGE"} window={undefined} relay={undefined} />;
+};
+
+export const RootRoutes = [
+  {
+    path: "/",
+    element: <RootPage />,
+    children: [
+      {
+        path: "global",
+        element: <GlobalTab />,
+      },
+      {
+        path: "posts",
+        element: <PostsTab />,
+      },
+      {
+        path: "conversations",
+        element: <ConversationsTab />,
+      },
+      {
+        path: "tag/:tag",
+        element: <TagsTab />,
+      },
+    ],
+  },
+] as RouteObject[];