2023-01-05 15:23:55 +00:00
|
|
|
import "./Root.css";
|
2023-01-20 11:11:50 +00:00
|
|
|
import { 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-08 21:10:26 +00:00
|
|
|
import { 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";
|
|
|
|
import { HexKey } from "Nostr";
|
|
|
|
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-06 21:42:47 +00:00
|
|
|
const RootTab: Record<string, Tab> = {
|
2023-02-08 21:10:26 +00:00
|
|
|
Posts: {
|
|
|
|
text: <FormattedMessage {...messages.Posts} />,
|
|
|
|
value: 0,
|
|
|
|
},
|
|
|
|
PostsAndReplies: {
|
|
|
|
text: <FormattedMessage {...messages.Conversations} />,
|
|
|
|
value: 1,
|
|
|
|
},
|
|
|
|
Global: {
|
|
|
|
text: <FormattedMessage {...messages.Global} />,
|
|
|
|
value: 2,
|
|
|
|
},
|
2023-01-05 15:23:55 +00:00
|
|
|
};
|
2022-12-18 14:51:47 +00:00
|
|
|
|
|
|
|
export default function RootPage() {
|
2023-02-07 20:04:50 +00:00
|
|
|
const [loggedOut, pubKey, follows] = useSelector<
|
|
|
|
RootState,
|
|
|
|
[boolean | undefined, HexKey | undefined, HexKey[]]
|
|
|
|
>((s) => [s.login.loggedOut, s.login.publicKey, s.login.follows]);
|
|
|
|
const [tab, setTab] = useState<Tab>(RootTab.Posts);
|
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: (
|
|
|
|
<Link to={"/new"}>
|
|
|
|
<FormattedMessage {...messages.NewUsers} />
|
|
|
|
</Link>
|
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const isGlobal = loggedOut || tab.value === RootTab.Global.value;
|
|
|
|
const timelineSubect: TimelineSubject = isGlobal
|
|
|
|
? { type: "global", items: [], discriminator: "all" }
|
|
|
|
: { type: "pubkey", items: follows, discriminator: "follows" };
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="main-content">
|
|
|
|
{pubKey && (
|
|
|
|
<Tabs
|
|
|
|
tabs={[RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global]}
|
|
|
|
tab={tab}
|
|
|
|
setTab={setTab}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{followHints()}
|
|
|
|
<Timeline
|
|
|
|
key={tab.value}
|
|
|
|
subject={timelineSubect}
|
|
|
|
postsOnly={tab.value === RootTab.Posts.value}
|
|
|
|
method={"TIME_RANGE"}
|
|
|
|
window={tab.value === RootTab.Global.value ? 60 : undefined}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
2023-01-25 18:08:53 +00:00
|
|
|
}
|