2023-01-21 16:09:35 +00:00
|
|
|
import "./Timeline.css";
|
2023-02-08 21:10:26 +00:00
|
|
|
import { FormattedMessage } from "react-intl";
|
2023-03-28 14:34:01 +00:00
|
|
|
import { useCallback, useMemo } from "react";
|
2023-02-13 23:11:51 +00:00
|
|
|
import { useInView } from "react-intersection-observer";
|
2023-03-28 14:34:01 +00:00
|
|
|
import { TaggedRawEvent, EventKind, u256 } from "@snort/nostr";
|
2023-01-26 11:34:18 +00:00
|
|
|
|
2023-03-02 17:47:02 +00:00
|
|
|
import Icon from "Icons/Icon";
|
2023-03-28 15:41:57 +00:00
|
|
|
import { dedupeByPubkey, findTag, tagFilterOfTextRepost } from "Util";
|
2023-02-12 19:02:55 +00:00
|
|
|
import ProfileImage from "Element/ProfileImage";
|
2023-03-28 14:34:01 +00:00
|
|
|
import useTimelineFeed, { TimelineFeed, TimelineSubject } from "Feed/TimelineFeed";
|
2023-01-20 11:11:50 +00:00
|
|
|
import LoadMore from "Element/LoadMore";
|
2023-02-03 21:38:14 +00:00
|
|
|
import Zap, { parseZap } from "Element/Zap";
|
2023-01-20 11:11:50 +00:00
|
|
|
import Note from "Element/Note";
|
|
|
|
import NoteReaction from "Element/NoteReaction";
|
2023-01-27 07:21:48 +00:00
|
|
|
import useModeration from "Hooks/useModeration";
|
2023-03-28 14:34:01 +00:00
|
|
|
import ProfilePreview from "Element/ProfilePreview";
|
2023-02-06 19:05:22 +00:00
|
|
|
import Skeleton from "Element/Skeleton";
|
2023-01-04 13:23:05 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface TimelineProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
postsOnly: boolean;
|
|
|
|
subject: TimelineSubject;
|
|
|
|
method: "TIME_RANGE" | "LIMIT_UNTIL";
|
|
|
|
ignoreModeration?: boolean;
|
|
|
|
window?: number;
|
2023-02-10 18:25:17 +00:00
|
|
|
relay?: string;
|
2023-03-28 14:34:01 +00:00
|
|
|
now?: number;
|
2023-04-18 13:09:19 +00:00
|
|
|
loadMore?: boolean;
|
2023-01-16 17:48:25 +00:00
|
|
|
}
|
|
|
|
|
2023-01-04 13:23:05 +00:00
|
|
|
/**
|
|
|
|
* A list of notes by pubkeys
|
|
|
|
*/
|
2023-03-28 14:34:01 +00:00
|
|
|
const Timeline = (props: TimelineProps) => {
|
|
|
|
const feedOptions = useMemo(() => {
|
|
|
|
return {
|
|
|
|
method: props.method,
|
|
|
|
window: props.window,
|
|
|
|
relay: props.relay,
|
|
|
|
now: props.now,
|
|
|
|
};
|
|
|
|
}, [props]);
|
|
|
|
const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
|
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const { muted, isMuted } = useModeration();
|
2023-02-13 23:11:51 +00:00
|
|
|
const { ref, inView } = useInView();
|
2023-01-04 13:23:05 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const filterPosts = useCallback(
|
2023-03-28 14:34:01 +00:00
|
|
|
(nts: readonly TaggedRawEvent[]) => {
|
2023-02-07 20:04:50 +00:00
|
|
|
return [...nts]
|
|
|
|
.sort((a, b) => b.created_at - a.created_at)
|
2023-03-29 13:08:45 +00:00
|
|
|
?.filter(a => (props.postsOnly ? !a.tags.some(b => b[0] === "e") : true))
|
2023-03-28 14:34:01 +00:00
|
|
|
.filter(a => props.ignoreModeration || !isMuted(a.pubkey));
|
2023-02-07 20:04:50 +00:00
|
|
|
},
|
2023-03-28 14:34:01 +00:00
|
|
|
[props.postsOnly, muted, props.ignoreModeration]
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
2023-01-21 16:09:35 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const mainFeed = useMemo(() => {
|
2023-03-28 14:34:01 +00:00
|
|
|
return filterPosts(feed.main ?? []);
|
|
|
|
}, [feed, filterPosts]);
|
2023-02-07 20:04:50 +00:00
|
|
|
const latestFeed = useMemo(() => {
|
2023-03-28 14:34:01 +00:00
|
|
|
return filterPosts(feed.latest ?? []).filter(a => !mainFeed.some(b => b.id === a.id));
|
|
|
|
}, [feed, filterPosts]);
|
|
|
|
const relatedFeed = useCallback(
|
|
|
|
(id: u256) => {
|
|
|
|
return (feed.related ?? []).filter(a => findTag(a, "e") === id);
|
|
|
|
},
|
|
|
|
[feed.related]
|
|
|
|
);
|
|
|
|
const findRelated = useCallback(
|
|
|
|
(id?: u256) => {
|
|
|
|
if (!id) return undefined;
|
|
|
|
return (feed.related ?? []).find(a => a.id === id);
|
|
|
|
},
|
|
|
|
[feed.related]
|
|
|
|
);
|
2023-02-12 19:02:55 +00:00
|
|
|
const latestAuthors = useMemo(() => {
|
|
|
|
return dedupeByPubkey(latestFeed).map(e => e.pubkey);
|
|
|
|
}, [latestFeed]);
|
2023-01-21 16:09:35 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
function eventElement(e: TaggedRawEvent) {
|
|
|
|
switch (e.kind) {
|
|
|
|
case EventKind.SetMetadata: {
|
2023-02-14 22:41:05 +00:00
|
|
|
return <ProfilePreview actions={<></>} pubkey={e.pubkey} className="card" />;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-04-05 15:10:14 +00:00
|
|
|
case EventKind.Polls:
|
2023-02-07 20:04:50 +00:00
|
|
|
case EventKind.TextNote: {
|
2023-02-16 14:11:29 +00:00
|
|
|
const eRef = e.tags.find(tagFilterOfTextRepost(e))?.at(1);
|
2023-02-16 09:11:36 +00:00
|
|
|
if (eRef) {
|
2023-03-28 14:34:01 +00:00
|
|
|
return <NoteReaction data={e} key={e.id} root={findRelated(eRef)} />;
|
2023-02-16 09:11:36 +00:00
|
|
|
}
|
2023-04-18 21:20:13 +00:00
|
|
|
return (
|
|
|
|
<Note key={e.id} data={e} related={relatedFeed(e.id)} ignoreModeration={props.ignoreModeration} depth={0} />
|
|
|
|
);
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
|
|
|
case EventKind.ZapReceipt: {
|
|
|
|
const zap = parseZap(e);
|
2023-03-05 16:58:34 +00:00
|
|
|
return zap.event ? null : <Zap zap={zap} key={e.id} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
|
|
|
case EventKind.Reaction:
|
|
|
|
case EventKind.Repost: {
|
2023-03-28 14:34:01 +00:00
|
|
|
const eRef = findTag(e, "e");
|
|
|
|
return <NoteReaction data={e} key={e.id} root={findRelated(eRef)} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-01-08 18:35:36 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2023-01-08 18:35:36 +00:00
|
|
|
|
2023-02-13 23:11:51 +00:00
|
|
|
function onShowLatest(scrollToTop = false) {
|
2023-02-21 14:35:53 +00:00
|
|
|
feed.showLatest();
|
2023-02-13 23:11:51 +00:00
|
|
|
if (scrollToTop) {
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
}
|
|
|
|
}
|
2023-03-28 14:34:01 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<div className="main-content">
|
2023-02-12 19:02:55 +00:00
|
|
|
{latestFeed.length > 0 && (
|
2023-02-13 23:11:51 +00:00
|
|
|
<>
|
|
|
|
<div className="card latest-notes pointer" onClick={() => onShowLatest()} ref={ref}>
|
|
|
|
{latestAuthors.slice(0, 3).map(p => {
|
|
|
|
return <ProfileImage pubkey={p} showUsername={false} linkToProfile={false} />;
|
|
|
|
})}
|
|
|
|
<FormattedMessage
|
|
|
|
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
|
|
|
|
values={{ n: latestFeed.length }}
|
|
|
|
/>
|
2023-03-02 17:47:02 +00:00
|
|
|
<Icon name="arrowUp" />
|
2023-02-13 23:11:51 +00:00
|
|
|
</div>
|
|
|
|
{!inView && (
|
2023-02-14 21:32:34 +00:00
|
|
|
<div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
|
2023-02-13 23:11:51 +00:00
|
|
|
{latestAuthors.slice(0, 3).map(p => {
|
|
|
|
return <ProfileImage pubkey={p} showUsername={false} linkToProfile={false} />;
|
|
|
|
})}
|
|
|
|
<FormattedMessage
|
|
|
|
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
|
|
|
|
values={{ n: latestFeed.length }}
|
|
|
|
/>
|
2023-03-02 17:47:02 +00:00
|
|
|
<Icon name="arrowUp" />
|
2023-02-13 23:11:51 +00:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</>
|
2023-02-07 20:04:50 +00:00
|
|
|
)}
|
|
|
|
{mainFeed.map(eventElement)}
|
2023-04-18 13:09:19 +00:00
|
|
|
{(props.loadMore === undefined || props.loadMore === true) && (
|
|
|
|
<LoadMore onLoadMore={feed.loadMore} shouldLoadMore={!feed.loading}>
|
|
|
|
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
|
|
|
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
|
|
|
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
|
|
|
</LoadMore>
|
|
|
|
)}
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
);
|
2023-03-28 14:34:01 +00:00
|
|
|
};
|
|
|
|
export default Timeline;
|