2023-01-05 15:23:55 +00:00
|
|
|
import "./Root.css";
|
2023-02-14 11:04:11 +00:00
|
|
|
import { useEffect, useState } from "react";
|
2022-12-18 14:51:47 +00:00
|
|
|
import { useSelector } from "react-redux";
|
2023-01-04 13:23:05 +00:00
|
|
|
import { Link } 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 { RootState } from "State/Store";
|
|
|
|
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-01-05 15:23:55 +00:00
|
|
|
|
2023-02-08 21:10:26 +00:00
|
|
|
import messages from "./messages";
|
2023-02-21 14:35:53 +00:00
|
|
|
import { debounce, unwrap } from "Util";
|
2023-02-08 21:10:26 +00:00
|
|
|
|
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-02-16 14:13:36 +00:00
|
|
|
const { loggedOut, publicKey: pubKey, follows, tags, relays, preferences } = useSelector((s: RootState) => s.login);
|
2023-02-13 15:49:19 +00:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
};
|
2023-02-16 14:13:36 +00:00
|
|
|
const [tab, setTab] = useState<Tab>(() => {
|
2023-02-17 01:27:46 +00:00
|
|
|
switch (preferences.defaultRootTab) {
|
2023-02-16 14:13:36 +00:00
|
|
|
case "conversations":
|
|
|
|
return RootTab.PostsAndReplies;
|
|
|
|
case "global":
|
|
|
|
return RootTab.Global;
|
2023-02-17 11:31:03 +00:00
|
|
|
default:
|
|
|
|
return RootTab.Posts;
|
2023-02-16 14:13:36 +00:00
|
|
|
}
|
|
|
|
});
|
2023-02-20 17:54:07 +00:00
|
|
|
const [relay, setRelay] = useState<RelayOption>();
|
2023-02-21 14:35:53 +00:00
|
|
|
const [allRelays, setAllRelays] = useState<RelayOption[]>();
|
2023-02-13 15:49:19 +00:00
|
|
|
const tagTabs = tags.map((t, idx) => {
|
|
|
|
return { text: `#${t}`, value: idx + 3 };
|
|
|
|
});
|
|
|
|
const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
|
2023-02-21 14:35:53 +00:00
|
|
|
const isGlobal = loggedOut || tab.value === RootTab.Global.value;
|
2023-01-02 11:59:03 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function followHints() {
|
|
|
|
if (follows?.length === 0 && pubKey && tab !== RootTab.Global) {
|
|
|
|
return (
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage
|
|
|
|
{...messages.NoFollows}
|
|
|
|
values={{
|
|
|
|
newUsersPage: (
|
2023-02-12 21:55:35 +00:00
|
|
|
<Link to={"/new/discover"}>
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.NewUsers} />
|
|
|
|
</Link>
|
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-02-21 14:35:53 +00:00
|
|
|
function globalRelaySelector() {
|
|
|
|
if (!isGlobal || !allRelays || allRelays.length === 0) return null;
|
|
|
|
|
|
|
|
const paidRelays = allRelays.filter(a => a.paid);
|
|
|
|
const publicRelays = allRelays.filter(a => !a.paid);
|
|
|
|
return (
|
|
|
|
<div className="flex mb10 f-end">
|
|
|
|
<FormattedMessage
|
|
|
|
defaultMessage="Read global from"
|
|
|
|
description="Label for reading global feed from specific relays"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<select onChange={e => setRelay(allRelays.find(a => a.url === e.target.value))} value={relay?.url}>
|
|
|
|
{paidRelays.length > 0 && (
|
|
|
|
<optgroup label="Paid Relays">
|
|
|
|
{paidRelays.map(a => (
|
|
|
|
<option key={a.url} value={a.url}>
|
|
|
|
{new URL(a.url).host}
|
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</optgroup>
|
|
|
|
)}
|
|
|
|
<optgroup label="Public Relays">
|
|
|
|
{publicRelays.map(a => (
|
|
|
|
<option key={a.url} value={a.url}>
|
|
|
|
{new URL(a.url).host}
|
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</optgroup>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-02-14 11:04:11 +00:00
|
|
|
useEffect(() => {
|
2023-02-21 14:35:53 +00:00
|
|
|
if (isGlobal) {
|
|
|
|
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
|
|
|
ret.sort(a => (a.paid ? -1 : 1));
|
2023-02-14 11:04:11 +00:00
|
|
|
|
2023-02-21 14:35:53 +00:00
|
|
|
if (ret.length > 0 && !relay) {
|
|
|
|
setRelay(ret[0]);
|
|
|
|
}
|
|
|
|
setAllRelays(ret);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}, [relays, relay, tab]);
|
2023-02-10 18:25:17 +00:00
|
|
|
|
2023-02-13 15:49:19 +00:00
|
|
|
const timelineSubect: TimelineSubject = (() => {
|
|
|
|
if (isGlobal) {
|
2023-02-21 14:35:53 +00:00
|
|
|
return { type: "global", items: [], discriminator: `all-${relay?.url}` };
|
2023-02-13 15:49:19 +00:00
|
|
|
}
|
|
|
|
if (tab.value >= 3) {
|
|
|
|
const hashtag = tab.text.slice(1);
|
|
|
|
return { type: "hashtag", items: [hashtag], discriminator: hashtag };
|
|
|
|
}
|
|
|
|
|
|
|
|
return { type: "pubkey", items: follows, discriminator: "follows" };
|
|
|
|
})();
|
2023-02-10 18:25:17 +00:00
|
|
|
|
2023-02-21 14:35:53 +00:00
|
|
|
function renderTimeline() {
|
|
|
|
if (isGlobal && !relay) return null;
|
|
|
|
|
|
|
|
return (
|
2023-02-07 20:04:50 +00:00
|
|
|
<Timeline
|
|
|
|
key={tab.value}
|
|
|
|
subject={timelineSubect}
|
|
|
|
postsOnly={tab.value === RootTab.Posts.value}
|
|
|
|
method={"TIME_RANGE"}
|
2023-02-14 11:04:11 +00:00
|
|
|
window={undefined}
|
2023-02-21 14:35:53 +00:00
|
|
|
relay={isGlobal ? unwrap(relay).url : undefined}
|
2023-02-07 20:04:50 +00:00
|
|
|
/>
|
2023-02-21 14:35:53 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="main-content">
|
|
|
|
{pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}
|
|
|
|
{globalRelaySelector()}
|
|
|
|
</div>
|
|
|
|
{followHints()}
|
|
|
|
{renderTimeline()}
|
2023-02-07 20:04:50 +00:00
|
|
|
</>
|
|
|
|
);
|
2023-01-25 18:08:53 +00:00
|
|
|
}
|