2023-01-05 15:23:55 +00:00
|
|
|
import "./Root.css";
|
2023-03-28 14:34:01 +00:00
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
|
|
import { Link, Outlet, RouteObject, useLocation, useNavigate, useParams } from "react-router-dom";
|
2023-02-13 15:49:19 +00:00
|
|
|
import { useIntl, FormattedMessage } from "react-intl";
|
2023-01-20 11:11:50 +00:00
|
|
|
|
2023-02-06 21:42:47 +00:00
|
|
|
import Tabs, { Tab } from "Element/Tabs";
|
2023-01-20 11:11:50 +00:00
|
|
|
import Timeline from "Element/Timeline";
|
2023-02-20 23:14:15 +00:00
|
|
|
import { System } from "System";
|
2023-01-20 11:11:50 +00:00
|
|
|
import { TimelineSubject } from "Feed/TimelineFeed";
|
2023-03-28 14:34:01 +00:00
|
|
|
import { debounce, getRelayName, sha256, unixNow, unwrap } from "Util";
|
2023-04-14 11:57:48 +00:00
|
|
|
import useLogin from "Hooks/useLogin";
|
2023-01-05 15:23:55 +00:00
|
|
|
|
2023-02-08 21:10:26 +00:00
|
|
|
import messages from "./messages";
|
|
|
|
|
2023-02-20 17:54:07 +00:00
|
|
|
interface RelayOption {
|
|
|
|
url: string;
|
|
|
|
paid: boolean;
|
|
|
|
}
|
|
|
|
|
2022-12-18 14:51:47 +00:00
|
|
|
export default function RootPage() {
|
2023-02-13 15:49:19 +00:00
|
|
|
const { formatMessage } = useIntl();
|
2023-03-28 14:34:01 +00:00
|
|
|
const navigate = useNavigate();
|
|
|
|
const location = useLocation();
|
2023-04-14 11:33:19 +00:00
|
|
|
const { publicKey: pubKey, tags, preferences } = useLogin();
|
2023-03-28 14:34:01 +00:00
|
|
|
|
2023-02-13 15:49:19 +00:00
|
|
|
const RootTab: Record<string, Tab> = {
|
|
|
|
Posts: {
|
|
|
|
text: formatMessage(messages.Posts),
|
|
|
|
value: 0,
|
2023-03-28 14:34:01 +00:00
|
|
|
data: "/posts",
|
2023-02-13 15:49:19 +00:00
|
|
|
},
|
|
|
|
PostsAndReplies: {
|
|
|
|
text: formatMessage(messages.Conversations),
|
|
|
|
value: 1,
|
2023-03-28 14:34:01 +00:00
|
|
|
data: "/conversations",
|
2023-02-13 15:49:19 +00:00
|
|
|
},
|
|
|
|
Global: {
|
|
|
|
text: formatMessage(messages.Global),
|
|
|
|
value: 2,
|
2023-03-28 14:34:01 +00:00
|
|
|
data: "/global",
|
2023-02-13 15:49:19 +00:00
|
|
|
},
|
|
|
|
};
|
2023-04-15 23:08:16 +00:00
|
|
|
|
|
|
|
const tagTabs = tags.item.map((t, idx) => {
|
|
|
|
return { text: `#${t}`, value: idx + 3, data: `/tag/${t}` };
|
|
|
|
});
|
|
|
|
const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
|
2023-03-28 14:34:01 +00:00
|
|
|
const tab = useMemo(() => {
|
|
|
|
const pTab = location.pathname.split("/").slice(-1)[0];
|
2023-04-15 23:08:16 +00:00
|
|
|
|
|
|
|
if (location.pathname.startsWith("/tag")) {
|
|
|
|
const selectedTag = tagTabs.find(t => t.text.slice(1) === pTab);
|
|
|
|
|
|
|
|
if (selectedTag) {
|
|
|
|
return selectedTag;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-03-28 14:34:01 +00:00
|
|
|
switch (pTab) {
|
|
|
|
case "conversations": {
|
2023-02-16 14:13:36 +00:00
|
|
|
return RootTab.PostsAndReplies;
|
2023-03-28 14:34:01 +00:00
|
|
|
}
|
|
|
|
case "global": {
|
2023-02-16 14:13:36 +00:00
|
|
|
return RootTab.Global;
|
2023-03-28 14:34:01 +00:00
|
|
|
}
|
|
|
|
default: {
|
2023-02-17 11:31:03 +00:00
|
|
|
return RootTab.Posts;
|
2023-03-28 14:34:01 +00:00
|
|
|
}
|
2023-02-16 14:13:36 +00:00
|
|
|
}
|
2023-03-28 14:34:01 +00:00
|
|
|
}, [location]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (location.pathname === "/") {
|
2023-03-29 13:56:34 +00:00
|
|
|
const t = pubKey ? preferences.defaultRootTab ?? tab.data : "/global";
|
|
|
|
navigate(t, {
|
2023-03-28 14:34:01 +00:00
|
|
|
replace: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}, [location]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="main-content">
|
|
|
|
{pubKey && <Tabs tabs={tabs} tab={tab} setTab={t => navigate(unwrap(t.data))} />}
|
|
|
|
</div>
|
|
|
|
<Outlet />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const FollowsHint = () => {
|
2023-04-14 11:33:19 +00:00
|
|
|
const { publicKey: pubKey, follows } = useLogin();
|
|
|
|
if (follows.item?.length === 0 && pubKey) {
|
2023-03-28 14:34:01 +00:00
|
|
|
return (
|
|
|
|
<FormattedMessage
|
|
|
|
{...messages.NoFollows}
|
|
|
|
values={{
|
|
|
|
newUsersPage: (
|
|
|
|
<Link to={"/new/discover"}>
|
|
|
|
<FormattedMessage {...messages.NewUsers} />
|
|
|
|
</Link>
|
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-03-28 14:34:01 +00:00
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
|
|
|
const GlobalTab = () => {
|
2023-04-14 11:33:19 +00:00
|
|
|
const { relays } = useLogin();
|
2023-03-28 14:34:01 +00:00
|
|
|
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)}`,
|
|
|
|
};
|
2023-02-07 20:04:50 +00:00
|
|
|
|
2023-02-21 14:35:53 +00:00
|
|
|
function globalRelaySelector() {
|
2023-03-28 14:34:01 +00:00
|
|
|
if (!allRelays || allRelays.length === 0) return null;
|
2023-02-21 14:35:53 +00:00
|
|
|
|
|
|
|
const paidRelays = allRelays.filter(a => a.paid);
|
|
|
|
const publicRelays = allRelays.filter(a => !a.paid);
|
|
|
|
return (
|
2023-03-24 09:41:44 +00:00
|
|
|
<div className="flex mb10 f-end nowrap">
|
2023-02-21 14:35:53 +00:00
|
|
|
<FormattedMessage
|
|
|
|
defaultMessage="Read global from"
|
|
|
|
description="Label for reading global feed from specific relays"
|
|
|
|
/>
|
|
|
|
|
2023-03-24 09:41:44 +00:00
|
|
|
<select
|
|
|
|
className="f-ellipsis"
|
|
|
|
onChange={e => setRelay(allRelays.find(a => a.url === e.target.value))}
|
|
|
|
value={relay?.url}>
|
2023-02-21 14:35:53 +00:00
|
|
|
{paidRelays.length > 0 && (
|
|
|
|
<optgroup label="Paid Relays">
|
|
|
|
{paidRelays.map(a => (
|
|
|
|
<option key={a.url} value={a.url}>
|
2023-03-23 13:25:07 +00:00
|
|
|
{getRelayName(a.url)}
|
2023-02-21 14:35:53 +00:00
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</optgroup>
|
|
|
|
)}
|
|
|
|
<optgroup label="Public Relays">
|
|
|
|
{publicRelays.map(a => (
|
|
|
|
<option key={a.url} value={a.url}>
|
2023-03-23 13:25:07 +00:00
|
|
|
{getRelayName(a.url)}
|
2023-02-21 14:35:53 +00:00
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</optgroup>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-02-14 11:04:11 +00:00
|
|
|
useEffect(() => {
|
2023-03-28 14:34:01 +00:00
|
|
|
return debounce(500, () => {
|
|
|
|
const ret: RelayOption[] = [];
|
|
|
|
System.Sockets.forEach((v, k) => {
|
|
|
|
ret.push({
|
|
|
|
url: k,
|
|
|
|
paid: v.Info?.limitation?.payment_required ?? false,
|
2023-02-20 17:54:07 +00:00
|
|
|
});
|
2023-02-21 14:35:53 +00:00
|
|
|
});
|
2023-03-28 14:34:01 +00:00
|
|
|
ret.sort(a => (a.paid ? -1 : 1));
|
2023-02-13 15:49:19 +00:00
|
|
|
|
2023-03-28 14:34:01 +00:00
|
|
|
if (ret.length > 0 && !relay) {
|
|
|
|
setRelay(ret[0]);
|
|
|
|
}
|
|
|
|
setAllRelays(ret);
|
|
|
|
});
|
|
|
|
}, [relays, relay]);
|
2023-02-10 18:25:17 +00:00
|
|
|
|
2023-03-28 14:34:01 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{globalRelaySelector()}
|
|
|
|
{relay && (
|
|
|
|
<Timeline subject={subject} postsOnly={false} method={"TIME_RANGE"} window={600} relay={relay.url} now={now} />
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2023-02-21 14:35:53 +00:00
|
|
|
|
2023-03-28 14:34:01 +00:00
|
|
|
const PostsTab = () => {
|
2023-04-14 11:33:19 +00:00
|
|
|
const { follows } = useLogin();
|
|
|
|
const subject: TimelineSubject = { type: "pubkey", items: follows.item, discriminator: "follows" };
|
2023-02-21 14:35:53 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2023-03-28 14:34:01 +00:00
|
|
|
<FollowsHint />
|
|
|
|
<Timeline subject={subject} postsOnly={true} method={"TIME_RANGE"} window={undefined} relay={undefined} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</>
|
|
|
|
);
|
2023-03-28 14:34:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const ConversationsTab = () => {
|
2023-04-14 11:33:19 +00:00
|
|
|
const { follows } = useLogin();
|
|
|
|
const subject: TimelineSubject = { type: "pubkey", items: follows.item, discriminator: "follows" };
|
2023-03-28 14:34:01 +00:00
|
|
|
|
|
|
|
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[];
|