Kieran
/
snort
5
14
Fork 14
Code Issues 52 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

feat: timeline fragments

This commit is contained in:
Kieran 2023-11-09 12:20:53 +00:00
parent ffda4b1a43
commit ff2da6c5fd
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
15 changed files with 140 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/Element/Deck/Articles.tsx
View File

@ -1,15 +1,21 @@
import { NostrLink } from "@snort/system";
import { useReactions } from "@snort/system-react";
import { useArticles } from "Feed/ArticlesFeed";
import { orderDescending } from "SnortUtils";
import Note from "../Event/Note";
import { useReactions } from "Feed/Reactions";
import { useContext } from "react";
import { DeckContext } from "Pages/DeckLayout";
export default function Articles() {
const data = useArticles();
const deck = useContext(DeckContext);
const related = useReactions("articles:reactions", data.data?.map(v => NostrLink.fromEvent(v)) ?? []);
const related = useReactions(
"articles:reactions",
data.data?.map(v => NostrLink.fromEvent(v)) ?? [],
undefined,
true,
);
return (
<>

2
packages/app/src/Element/Event/NostrFileHeader.tsx
View File

@ -1,8 +1,8 @@
import { FormattedMessage } from "react-intl";
import { NostrEvent, NostrLink } from "@snort/system";
import { useEventFeed } from "@snort/system-react";
import { findTag } from "SnortUtils";
import { useEventFeed } from "Feed/EventFeed";
import PageSpinner from "Element/PageSpinner";
import Reveal from "Element/Event/Reveal";
import { MediaElement } from "Element/Embed/MediaElement";

3
packages/app/src/Element/Event/NoteQuote.tsx
View File

@ -1,5 +1,6 @@
import { useEventFeed } from "Feed/EventFeed";
import { NostrLink } from "@snort/system";
import { useEventFeed } from "@snort/system-react";
import Note from "Element/Event/Note";
import PageSpinner from "Element/PageSpinner";

57
packages/app/src/Element/Feed/Timeline.tsx
View File

@ -1,16 +1,13 @@
import "./Timeline.css";
import { FormattedMessage } from "react-intl";
import { useCallback, useMemo } from "react";
import { useInView } from "react-intersection-observer";
import { TaggedNostrEvent, EventKind, u256 } from "@snort/system";
import { TaggedNostrEvent, EventKind } from "@snort/system";
import Icon from "Icons/Icon";
import { dedupeByPubkey, findTag } from "SnortUtils";
import ProfileImage from "Element/User/ProfileImage";
import useTimelineFeed, { TimelineFeed, TimelineSubject } from "Feed/TimelineFeed";
import Note from "Element/Event/Note";
import useModeration from "Hooks/useModeration";
import { LiveStreams } from "Element/LiveStreams";
import { TimelineRenderer } from "./TimelineFragment";
export interface TimelineProps {
postsOnly: boolean;
@ -37,8 +34,6 @@ const Timeline = (props: TimelineProps) => {
const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
const { muted, isMuted } = useModeration();
const { ref, inView } = useInView();
const filterPosts = useCallback(
(nts: readonly TaggedNostrEvent[]) => {
const a = [...nts.filter(a => a.kind !== EventKind.LiveEvent)];
@ -56,12 +51,6 @@ const Timeline = (props: TimelineProps) => {
const latestFeed = useMemo(() => {
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 liveStreams = useMemo(() => {
return (feed.main ?? []).filter(a => a.kind === EventKind.LiveEvent && findTag(a, "status") === "live");
}, [feed]);
@ -80,42 +69,12 @@ const Timeline = (props: TimelineProps) => {
return (
<>
<LiveStreams evs={liveStreams} />
{latestFeed.length > 0 && (
<>
<div className="card latest-notes" onClick={() => onShowLatest()} ref={ref}>
{latestAuthors.slice(0, 3).map(p => {
return <ProfileImage pubkey={p} showUsername={false} link={""} showProfileCard={false} />;
})}
<FormattedMessage
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
values={{ n: latestFeed.length }}
/>
<Icon name="arrowUp" />
</div>
{!inView && (
<div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
{latestAuthors.slice(0, 3).map(p => {
return <ProfileImage pubkey={p} showUsername={false} link={""} showProfileCard={false} />;
})}
<FormattedMessage
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
values={{ n: latestFeed.length }}
/>
<Icon name="arrowUp" />
</div>
)}
</>
)}
{mainFeed.map(e => (
<Note
key={e.id}
searchedValue={props.subject.discriminator}
data={e}
related={relatedFeed(e.id)}
ignoreModeration={props.ignoreModeration}
depth={0}
/>
))}
<TimelineRenderer
frags={[{ events: mainFeed }]}
related={feed.related ?? []}
latest={latestAuthors}
showLatest={t => onShowLatest(t)}
/>
{(props.loadMore === undefined || props.loadMore === true) && (
<div className="flex items-center">
<button type="button" onClick={() => feed.loadMore()}>

70
packages/app/src/Element/Feed/TimelineFollows.tsx
View File

@ -1,21 +1,17 @@
import "./Timeline.css";
import { ReactNode, useCallback, useContext, useMemo, useState, useSyncExternalStore } from "react";
import { FormattedMessage } from "react-intl";
import { TaggedNostrEvent, EventKind, u256, NostrEvent, NostrLink } from "@snort/system";
import { EventKind, NostrEvent, NostrLink } from "@snort/system";
import { unixNow } from "@snort/shared";
import { SnortContext } from "@snort/system-react";
import { useInView } from "react-intersection-observer";
import { SnortContext, useReactions } from "@snort/system-react";
import { dedupeByPubkey, findTag, orderDescending } from "SnortUtils";
import Note from "Element/Event/Note";
import useModeration from "Hooks/useModeration";
import { FollowsFeed } from "Cache";
import { LiveStreams } from "Element/LiveStreams";
import { useReactions } from "Feed/Reactions";
import AsyncButton from "../AsyncButton";
import useLogin from "Hooks/useLogin";
import ProfileImage from "Element/User/ProfileImage";
import Icon from "Icons/Icon";
import { TimelineRenderer } from "./TimelineFragment";
export interface TimelineFollowsProps {
postsOnly: boolean;
@ -37,11 +33,12 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
const reactions = useReactions(
"follows-feed-reactions",
feed.map(a => NostrLink.fromEvent(a)),
undefined,
true,
);
const system = useContext(SnortContext);
const login = useLogin();
const { muted, isMuted } = useModeration();
const { ref, inView } = useInView();
const sortedFeed = useMemo(() => orderDescending(feed), [feed]);
@ -63,13 +60,6 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
return filterPosts((sortedFeed ?? []).filter(a => a.created_at > latest));
}, [sortedFeed, latest]);
const relatedFeed = useCallback(
(id: u256) => {
return (reactions?.data ?? []).filter(a => findTag(a, "e") === id);
},
[reactions],
);
const liveStreams = useMemo(() => {
return (sortedFeed ?? []).filter(a => a.kind === EventKind.LiveEvent && findTag(a, "status") === "live");
}, [sortedFeed]);
@ -88,44 +78,18 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
return (
<>
{(props.liveStreams ?? true) && <LiveStreams evs={liveStreams} />}
{latestFeed.length > 0 && (
<>
<div className="card latest-notes" onClick={() => onShowLatest()} ref={ref}>
{latestAuthors.slice(0, 3).map(p => {
return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
})}
<FormattedMessage
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
values={{ n: latestFeed.length }}
/>
<Icon name="arrowUp" />
</div>
{!inView && (
<div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
{latestAuthors.slice(0, 3).map(p => {
return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
})}
<FormattedMessage
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
values={{ n: latestFeed.length }}
/>
<Icon name="arrowUp" />
</div>
)}
</>
)}
{mainFeed.map(
a =>
props.noteRenderer?.(a) ?? (
<Note
data={a as TaggedNostrEvent}
related={relatedFeed(a.id)}
key={a.id}
depth={0}
onClick={props.noteOnClick}
/>
),
)}
<TimelineRenderer
frags={[
{
events: mainFeed,
},
]}
related={reactions.data ?? []}
latest={latestAuthors}
showLatest={t => onShowLatest(t)}
noteOnClick={props.noteOnClick}
noteRenderer={props.noteRenderer}
/>
<div className="flex items-center p">
<AsyncButton
onClick={async () => {

81
packages/app/src/Element/Feed/TimelineFragment.tsx Normal file
View File

@ -0,0 +1,81 @@
import { TaggedNostrEvent } from "@snort/system";
import Note from "Element/Event/Note";
import ProfileImage from "Element/User/ProfileImage";
import Icon from "Icons/Icon";
import { findTag } from "SnortUtils";
import { ReactNode, useCallback } from "react";
import { useInView } from "react-intersection-observer";
import { FormattedMessage } from "react-intl";
export interface TimelineFragment {
events: Array<TaggedNostrEvent>;
title?: ReactNode;
}
export interface TimelineFragmentProps {
frags: Array<TimelineFragment>;
related: Array<TaggedNostrEvent>;
/**
* List of pubkeys who have posted recently
*/
latest: Array<string>;
showLatest: (toTop: boolean) => void;
noteRenderer?: (ev: TaggedNostrEvent) => ReactNode;
noteOnClick?: (ev: TaggedNostrEvent) => void;
}
export function TimelineRenderer(props: TimelineFragmentProps) {
const { ref, inView } = useInView();
const relatedFeed = useCallback(
(id: string) => {
return props.related.filter(a => findTag(a, "e") === id);
},
[props.related],
);
return (
<>
{props.latest.length > 0 && (
<>
<div className="card latest-notes" onClick={() => props.showLatest(false)} ref={ref}>
{props.latest.slice(0, 3).map(p => {
return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
})}
<FormattedMessage
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
values={{ n: props.latest.length }}
/>
<Icon name="arrowUp" />
</div>
{!inView && (
<div
className="card latest-notes latest-notes-fixed pointer fade-in"
onClick={() => props.showLatest(true)}>
{props.latest.slice(0, 3).map(p => {
return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
})}
<FormattedMessage
defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
values={{ n: props.latest.length }}
/>
<Icon name="arrowUp" />
</div>
)}
</>
)}
{props.frags.map(f => {
return (
<>
{f.title}
{f.events.map(
e =>
props.noteRenderer?.(e) ?? (
<Note data={e} related={relatedFeed(e.id)} key={e.id} depth={0} onClick={props.noteOnClick} />
),
)}
</>
);
})}
</>
);
}

4
packages/app/src/Element/TrendingPosts.tsx
View File

@ -1,16 +1,16 @@
import { useEffect, useState } from "react";
import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
import { useReactions } from "@snort/system-react";
import PageSpinner from "Element/PageSpinner";
import Note from "Element/Event/Note";
import NostrBandApi from "External/NostrBand";
import { useReactions } from "Feed/Reactions";
import { ErrorOrOffline } from "Element/ErrorOrOffline";
export default function TrendingNotes() {
const [posts, setPosts] = useState<Array<NostrEvent>>();
const [error, setError] = useState<Error>();
const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? []);
const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
async function loadTrendingNotes() {
const api = new NostrBandApi();

4
packages/app/src/Feed/ThreadFeed.ts
View File

@ -1,8 +1,6 @@
import { useEffect, useMemo, useState } from "react";
import { EventKind, NostrLink, RequestBuilder, NoteCollection, EventExt } from "@snort/system";
import { useRequestBuilder } from "@snort/system-react";
import { useReactions } from "./Reactions";
import { useReactions, useRequestBuilder } from "@snort/system-react";
export default function useThreadFeed(link: NostrLink) {
const [root, setRoot] = useState<NostrLink>();

3
packages/app/src/Feed/TimelineFeed.ts
View File

@ -1,12 +1,11 @@
import { useCallback, useMemo } from "react";
import { EventKind, NostrLink, NoteCollection, RequestBuilder } from "@snort/system";
import { useRequestBuilder } from "@snort/system-react";
import { useReactions, useRequestBuilder } from "@snort/system-react";
import { unixNow } from "@snort/shared";
import useTimelineWindow from "Hooks/useTimelineWindow";
import useLogin from "Hooks/useLogin";
import { SearchRelays } from "Const";
import { useReactions } from "./Reactions";
export interface TimelineFeedOptions {
method: "TIME_RANGE" | "LIMIT_UNTIL";

7
packages/app/src/Pages/ListFeedPage.tsx
View File

@ -1,11 +1,12 @@
import { dedupe, unwrap } from "@snort/shared";
import { EventKind, parseNostrLink } from "@snort/system";
import { useEventFeed } from "@snort/system-react";
import { FormattedMessage } from "react-intl";
import { useParams } from "react-router-dom";
import { Hour } from "Const";
import Timeline from "Element/Feed/Timeline";
import PageSpinner from "Element/PageSpinner";
import { useEventFeed } from "Feed/EventFeed";
import { FormattedMessage } from "react-intl";
import { useParams } from "react-router-dom";
export function ListFeedPage() {
const { id } = useParams();

3
packages/app/src/Pages/MessagesPage.tsx
View File

@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useNavigate, useParams } from "react-router-dom";
import { NostrLink, TLVEntryType, UserMetadata, decodeTLV } from "@snort/system";
import { useUserProfile, useUserSearch } from "@snort/system-react";
import { useEventFeed, useUserProfile, useUserSearch } from "@snort/system-react";
import UnreadCount from "Element/UnreadCount";
import ProfileImage from "Element/User/ProfileImage";
@ -21,7 +21,6 @@ import Text from "Element/Text";
import { Chat, ChatType, createChatLink, useChatSystem } from "chat";
import Modal from "Element/Modal";
import ProfilePreview from "Element/User/ProfilePreview";
import { useEventFeed } from "Feed/EventFeed";
import { LoginSession, LoginStore } from "Login";
import { Nip28ChatSystem } from "chat/nip28";
import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";

3
packages/app/src/Pages/Notifications.tsx
View File

@ -2,7 +2,7 @@ import "./Notifications.css";
import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import { EventExt, EventKind, NostrEvent, NostrLink, NostrPrefix, TaggedNostrEvent, parseZap } from "@snort/system";
import { unixNow, unwrap } from "@snort/shared";
import { useUserProfile } from "@snort/system-react";
import { useEventFeed, useUserProfile } from "@snort/system-react";
import { useInView } from "react-intersection-observer";
import { FormattedMessage, useIntl } from "react-intl";
import { useNavigate } from "react-router-dom";
@ -15,7 +15,6 @@ import { dedupe, findTag, orderAscending, orderDescending, getDisplayName } from
import Icon from "Icons/Icon";
import ProfileImage from "Element/User/ProfileImage";
import useModeration from "Hooks/useModeration";
import { useEventFeed } from "Feed/EventFeed";
import Text from "Element/Text";
import { formatShort } from "Number";
import { LiveEvent } from "Element/LiveEvent";

2
packages/system-react/src/index.ts
View File

@ -5,3 +5,5 @@ export * from "./useSystemState";
export * from "./useUserProfile";
export * from "./useUserSearch";
export * from "./useEventReactions";
export * from "./useReactions";
export * from "./useEventFeed";

2
packages/app/src/Feed/EventFeed.ts → packages/system-react/src/useEventFeed.ts
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { RequestBuilder, ReplaceableNoteStore, NostrLink, NoteCollection } from "@snort/system";
import { useRequestBuilder } from "@snort/system-react";
import { useRequestBuilder } from "./useRequestBuilder";
export function useEventFeed(link: NostrLink) {
const sub = useMemo(() => {

23
packages/app/src/Feed/Reactions.ts → packages/system-react/src/useReactions.ts
View File

@ -1,13 +1,16 @@
import { RequestBuilder, EventKind, NoteCollection, NostrLink } from "@snort/system";
import { useRequestBuilder } from "@snort/system-react";
import useLogin from "Hooks/useLogin";
import { useMemo } from "react";
import { RequestBuilder, EventKind, NoteCollection, NostrLink } from "@snort/system";
import { useRequestBuilder } from "./useRequestBuilder";
export function useReactions(subId: string, ids: Array<NostrLink>, others?: (rb: RequestBuilder) => void) {
const { preferences: pref } = useLogin();
export function useReactions(
subId: string,
ids: Array<NostrLink>,
others?: (rb: RequestBuilder) => void,
leaveOpen?: boolean,
) {
const sub = useMemo(() => {
const rb = new RequestBuilder(subId);
rb.withOptions({ leaveOpen });
if (ids.length > 0) {
const grouped = ids.reduce(
@ -20,13 +23,7 @@ export function useReactions(subId: string, ids: Array<NostrLink>, others?: (rb:
);
for (const [, v] of Object.entries(grouped)) {
rb.withFilter()
.kinds(
pref.enableReactions
? [EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt]
: [EventKind.ZapReceipt, EventKind.Repost],
)
.replyToLink(v);
rb.withFilter().kinds([EventKind.Reaction, EventKind.Repost, EventKind.ZapReceipt]).replyToLink(v);
}
}
others?.(rb);