dont pass related to notes
This commit is contained in:
parent
26a3e95086
commit
e905b4134d
@ -1,7 +1,7 @@
|
|||||||
import "./LongFormText.css";
|
import "./LongFormText.css";
|
||||||
|
|
||||||
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||||
import { useEventReactions } from "@snort/system-react";
|
import {useEventReactions, useReactions} from "@snort/system-react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React, { CSSProperties, useCallback, useRef, useState } from "react";
|
import React, { CSSProperties, useCallback, useRef, useState } from "react";
|
||||||
import { FormattedMessage, FormattedNumber } from "react-intl";
|
import { FormattedMessage, FormattedNumber } from "react-intl";
|
||||||
@ -18,7 +18,6 @@ import NoteTime from "./NoteTime";
|
|||||||
interface LongFormTextProps {
|
interface LongFormTextProps {
|
||||||
ev: TaggedNostrEvent;
|
ev: TaggedNostrEvent;
|
||||||
isPreview: boolean;
|
isPreview: boolean;
|
||||||
related: ReadonlyArray<TaggedNostrEvent>;
|
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
truncate?: boolean;
|
truncate?: boolean;
|
||||||
}
|
}
|
||||||
@ -33,7 +32,13 @@ export function LongFormText(props: LongFormTextProps) {
|
|||||||
const [reading, setReading] = useState(false);
|
const [reading, setReading] = useState(false);
|
||||||
const [showMore, setShowMore] = useState(false);
|
const [showMore, setShowMore] = useState(false);
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
const { reactions, reposts, zaps } = useEventReactions(NostrLink.fromEvent(props.ev), props.related);
|
const related = useReactions(
|
||||||
|
NostrLink.fromEvent(props.ev).id + "related",
|
||||||
|
[NostrLink.fromEvent(props.ev)],
|
||||||
|
undefined,
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
const { reactions, reposts, zaps } = useEventReactions(NostrLink.fromEvent(props.ev), related.data ?? []);
|
||||||
|
|
||||||
function previewText() {
|
function previewText() {
|
||||||
return (
|
return (
|
||||||
|
@ -18,7 +18,6 @@ import { NoteInner } from "./NoteInner";
|
|||||||
export interface NoteProps {
|
export interface NoteProps {
|
||||||
data: TaggedNostrEvent;
|
data: TaggedNostrEvent;
|
||||||
className?: string;
|
className?: string;
|
||||||
related: readonly TaggedNostrEvent[];
|
|
||||||
highlight?: boolean;
|
highlight?: boolean;
|
||||||
ignoreModeration?: boolean;
|
ignoreModeration?: boolean;
|
||||||
onClick?: (e: TaggedNostrEvent) => void;
|
onClick?: (e: TaggedNostrEvent) => void;
|
||||||
@ -78,7 +77,6 @@ export default memo(function Note(props: NoteProps) {
|
|||||||
content = (
|
content = (
|
||||||
<LongFormText
|
<LongFormText
|
||||||
ev={ev}
|
ev={ev}
|
||||||
related={props.related}
|
|
||||||
isPreview={props.options?.longFormPreview ?? false}
|
isPreview={props.options?.longFormPreview ?? false}
|
||||||
onClick={() => props.onClick?.(ev)}
|
onClick={() => props.onClick?.(ev)}
|
||||||
truncate={props.options?.truncate}
|
truncate={props.options?.truncate}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { normalizeReaction } from "@snort/shared";
|
import { normalizeReaction } from "@snort/shared";
|
||||||
import { countLeadingZeros, NostrLink, ParsedZap, TaggedNostrEvent } from "@snort/system";
|
import { countLeadingZeros, NostrLink, ParsedZap, TaggedNostrEvent } from "@snort/system";
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useEventReactions, useReactions, useUserProfile } from "@snort/system-react";
|
||||||
import { Menu, MenuItem } from "@szhsin/react-menu";
|
import { Menu, MenuItem } from "@szhsin/react-menu";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React, { forwardRef, useEffect, useState } from "react";
|
import React, { forwardRef, useEffect, useState } from "react";
|
||||||
@ -37,15 +37,18 @@ const barrierZapper = async <T,>(then: () => Promise<T>): Promise<T> => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export interface NoteFooterProps {
|
export interface NoteFooterProps {
|
||||||
reposts: TaggedNostrEvent[];
|
|
||||||
zaps: ParsedZap[];
|
|
||||||
positive: TaggedNostrEvent[];
|
|
||||||
replies?: number;
|
replies?: number;
|
||||||
ev: TaggedNostrEvent;
|
ev: TaggedNostrEvent;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function NoteFooter(props: NoteFooterProps) {
|
export default function NoteFooter(props: NoteFooterProps) {
|
||||||
const { ev, positive, reposts, zaps } = props;
|
const { ev } = props;
|
||||||
|
const link = NostrLink.fromEvent(ev);
|
||||||
|
|
||||||
|
const related = useReactions(link.id + "related", [link], undefined, true);
|
||||||
|
const { reactions, zaps, reposts } = useEventReactions(link, related.data ?? []);
|
||||||
|
const { positive } = reactions;
|
||||||
|
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const {
|
const {
|
||||||
publicKey,
|
publicKey,
|
||||||
@ -119,7 +122,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
name: getDisplayName(author, ev.pubkey),
|
name: getDisplayName(author, ev.pubkey),
|
||||||
zap: {
|
zap: {
|
||||||
pubkey: ev.pubkey,
|
pubkey: ev.pubkey,
|
||||||
event: NostrLink.fromEvent(ev),
|
event: link,
|
||||||
},
|
},
|
||||||
} as ZapTarget,
|
} as ZapTarget,
|
||||||
];
|
];
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { EventExt, EventKind, HexKey, NostrLink, NostrPrefix, TaggedNostrEvent } from "@snort/system";
|
import { EventExt, EventKind, HexKey, NostrLink, NostrPrefix, TaggedNostrEvent } from "@snort/system";
|
||||||
import { useEventReactions } from "@snort/system-react";
|
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React, { ReactNode, useMemo, useState } from "react";
|
import React, { ReactNode, useMemo, useState } from "react";
|
||||||
import { useInView } from "react-intersection-observer";
|
import { useInView } from "react-intersection-observer";
|
||||||
@ -40,7 +39,6 @@ export function NoteInner(props: NoteProps) {
|
|||||||
|
|
||||||
const { isEventMuted } = useModeration();
|
const { isEventMuted } = useModeration();
|
||||||
const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
|
const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
|
||||||
const { reactions, reposts, deletions, zaps } = useEventReactions(NostrLink.fromEvent(ev), related);
|
|
||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const { pinned, bookmarked } = useLogin();
|
const { pinned, bookmarked } = useLogin();
|
||||||
const { publisher, system } = useEventPublisher();
|
const { publisher, system } = useEventPublisher();
|
||||||
@ -49,8 +47,6 @@ export function NoteInner(props: NoteProps) {
|
|||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const [showMore, setShowMore] = useState(false);
|
const [showMore, setShowMore] = useState(false);
|
||||||
|
|
||||||
const totalReactions = reactions.positive.length + reactions.negative.length + reposts.length + zaps.length;
|
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
showHeader: true,
|
showHeader: true,
|
||||||
showTime: true,
|
showTime: true,
|
||||||
@ -135,13 +131,6 @@ export function NoteInner(props: NoteProps) {
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
const transformBody = () => {
|
const transformBody = () => {
|
||||||
if (deletions?.length > 0) {
|
|
||||||
return (
|
|
||||||
<b className="error">
|
|
||||||
<FormattedMessage {...messages.Deleted} />
|
|
||||||
</b>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!login.appData.item.showContentWarningPosts) {
|
if (!login.appData.item.showContentWarningPosts) {
|
||||||
const contentWarning = ev.tags.find(a => a[0] === "content-warning");
|
const contentWarning = ev.tags.find(a => a[0] === "content-warning");
|
||||||
if (contentWarning) {
|
if (contentWarning) {
|
||||||
@ -323,7 +312,7 @@ export function NoteInner(props: NoteProps) {
|
|||||||
function pollOptions() {
|
function pollOptions() {
|
||||||
if (ev.kind !== EventKind.Polls) return;
|
if (ev.kind !== EventKind.Polls) return;
|
||||||
|
|
||||||
return <Poll ev={ev} zaps={zaps} />;
|
return <Poll ev={ev} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function content() {
|
function content() {
|
||||||
@ -373,29 +362,9 @@ export function NoteInner(props: NoteProps) {
|
|||||||
{transformBody()}
|
{transformBody()}
|
||||||
{translation()}
|
{translation()}
|
||||||
{pollOptions()}
|
{pollOptions()}
|
||||||
{options.showReactionsLink && (
|
|
||||||
<span className="reactions-link cursor-pointer" onClick={() => setShowReactions(true)}>
|
|
||||||
<FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{options.showFooter && (
|
{options.showFooter && <NoteFooter ev={ev} replies={props.threadChains?.get(chainKey(ev))?.length} />}
|
||||||
<NoteFooter
|
<ReactionsModal show={showReactions} setShow={setShowReactions} event={ev} />
|
||||||
ev={ev}
|
|
||||||
positive={reactions.positive}
|
|
||||||
reposts={reposts}
|
|
||||||
zaps={zaps}
|
|
||||||
replies={props.threadChains?.get(chainKey(ev))?.length}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<ReactionsModal
|
|
||||||
show={showReactions}
|
|
||||||
setShow={setShowReactions}
|
|
||||||
positive={reactions.positive}
|
|
||||||
negative={reactions.negative}
|
|
||||||
reposts={reposts}
|
|
||||||
zaps={zaps}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import "./Reactions.css";
|
import "./Reactions.css";
|
||||||
|
|
||||||
import { ParsedZap, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
|
import { NostrLink, ParsedZap, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
|
||||||
|
import { useEventReactions, useReactions } from "@snort/system-react";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
|
|
||||||
@ -13,19 +14,22 @@ import { formatShort } from "@/Utils/Number";
|
|||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
|
|
||||||
interface ReactionsProps {
|
interface ReactionsModalProps {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
setShow(b: boolean): void;
|
setShow(b: boolean): void;
|
||||||
positive: TaggedNostrEvent[];
|
event: TaggedNostrEvent;
|
||||||
negative: TaggedNostrEvent[];
|
|
||||||
reposts: TaggedNostrEvent[];
|
|
||||||
zaps: ParsedZap[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: ReactionsProps) => {
|
const ReactionsModal = ({ show, setShow, event }: ReactionsModalProps) => {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const onClose = () => setShow(false);
|
const onClose = () => setShow(false);
|
||||||
|
|
||||||
|
const link = NostrLink.fromEvent(event);
|
||||||
|
|
||||||
|
const related = useReactions(link.id + "related", [link], undefined, true);
|
||||||
|
const { reactions, zaps, reposts } = useEventReactions(link, related.data ?? []);
|
||||||
|
const { positive, negative } = reactions;
|
||||||
|
|
||||||
const sortEvents = events =>
|
const sortEvents = events =>
|
||||||
events.sort(
|
events.sort(
|
||||||
(a, b) => socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey),
|
(a, b) => socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey),
|
||||||
@ -109,4 +113,4 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
|
|||||||
) : null;
|
) : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Reactions;
|
export default ReactionsModal;
|
||||||
|
@ -11,7 +11,7 @@ import Collapsed from "@/Components/Collapsed";
|
|||||||
import Note from "@/Components/Event/Note";
|
import Note from "@/Components/Event/Note";
|
||||||
import NoteGhost from "@/Components/Event/NoteGhost";
|
import NoteGhost from "@/Components/Event/NoteGhost";
|
||||||
import { chainKey, ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
|
import { chainKey, ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
|
||||||
import { getAllLinkReactions, getLinkReactions } from "@/Utils";
|
import { getAllLinkReactions } from "@/Utils";
|
||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
|
|
||||||
@ -50,7 +50,6 @@ const Subthread = ({ active, notes, related, chains, onNavigate }: SubthreadProp
|
|||||||
className={`thread-note ${isLastSubthread && replies.length === 0 ? "is-last-note" : ""}`}
|
className={`thread-note ${isLastSubthread && replies.length === 0 ? "is-last-note" : ""}`}
|
||||||
data={a}
|
data={a}
|
||||||
key={a.id}
|
key={a.id}
|
||||||
related={related}
|
|
||||||
onClick={onNavigate}
|
onClick={onNavigate}
|
||||||
threadChains={chains}
|
threadChains={chains}
|
||||||
/>
|
/>
|
||||||
@ -98,7 +97,6 @@ const ThreadNote = ({ active, note, isLast, isLastSubthread, related, chains, on
|
|||||||
className={classNames("thread-note", { "is-last-note": isLastVisibleNote })}
|
className={classNames("thread-note", { "is-last-note": isLastVisibleNote })}
|
||||||
data={note}
|
data={note}
|
||||||
key={note.id}
|
key={note.id}
|
||||||
related={related}
|
|
||||||
onClick={onNavigate}
|
onClick={onNavigate}
|
||||||
threadChains={chains}
|
threadChains={chains}
|
||||||
/>
|
/>
|
||||||
@ -207,7 +205,6 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
|
|||||||
highlight={active === r.id}
|
highlight={active === r.id}
|
||||||
data={r}
|
data={r}
|
||||||
key={r.id}
|
key={r.id}
|
||||||
related={related}
|
|
||||||
onClick={onNavigate}
|
onClick={onNavigate}
|
||||||
threadChains={chains}
|
threadChains={chains}
|
||||||
/>
|
/>
|
||||||
@ -262,7 +259,6 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
|
|||||||
className={className}
|
className={className}
|
||||||
key={note.id}
|
key={note.id}
|
||||||
data={note}
|
data={note}
|
||||||
related={getLinkReactions(thread.reactions, NostrLink.fromEvent(note))}
|
|
||||||
options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight, isRoot: true }}
|
options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight, isRoot: true }}
|
||||||
onClick={navigateThread}
|
onClick={navigateThread}
|
||||||
threadChains={thread.chains}
|
threadChains={thread.chains}
|
||||||
|
@ -24,12 +24,6 @@ const options = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function TimelineFragment(props: TimelineFragProps) {
|
export function TimelineFragment(props: TimelineFragProps) {
|
||||||
const relatedFeed = useCallback(
|
|
||||||
(id: string) => {
|
|
||||||
return props.related.filter(a => findTag(a, "e") === id);
|
|
||||||
},
|
|
||||||
[props.related],
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.frag.title}
|
{props.frag.title}
|
||||||
@ -38,7 +32,6 @@ export function TimelineFragment(props: TimelineFragProps) {
|
|||||||
props.noteRenderer?.(e) ?? (
|
props.noteRenderer?.(e) ?? (
|
||||||
<Note
|
<Note
|
||||||
data={e}
|
data={e}
|
||||||
related={relatedFeed(e.id)}
|
|
||||||
key={e.id}
|
key={e.id}
|
||||||
depth={0}
|
depth={0}
|
||||||
onClick={props.noteOnClick}
|
onClick={props.noteOnClick}
|
||||||
|
@ -242,7 +242,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
|
|||||||
<Note
|
<Note
|
||||||
key={`pinned-${n.id}`}
|
key={`pinned-${n.id}`}
|
||||||
data={n}
|
data={n}
|
||||||
related={getLinkReactions(pinned, NostrLink.fromEvent(n))}
|
|
||||||
options={{ showTime: false, showPinned: true, canUnpin: id === loginPubKey }}
|
options={{ showTime: false, showPinned: true, canUnpin: id === loginPubKey }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user