show relay recommendations better in timeline

This commit is contained in:
hzrd149 2023-09-18 10:00:41 -05:00
parent 30e4114a9c
commit f805429d25
2 changed files with 31 additions and 5 deletions
src/components/timeline-page/generic-note-timeline

@ -10,11 +10,10 @@ import { NostrEvent } from "../../../types/nostr-event";
import { STREAM_KIND } from "../../../helpers/nostr/stream";
import StreamNote from "./stream-note";
import { ErrorBoundary } from "../../error-boundary";
import RelayCard from "../../../views/relays/components/relay-card";
import { safeRelayUrl } from "../../../helpers/url";
import EmbeddedArticle from "../../embed-event/event-types/embedded-article";
import { isReply } from "../../../helpers/nostr/events";
import ReplyNote from "./reply-note";
import RelayRecommendation from "./relay-recommendation";
function RenderEvent({ event }: { event: NostrEvent }) {
let content: ReactNode | null = null;
@ -31,9 +30,8 @@ function RenderEvent({ event }: { event: NostrEvent }) {
case STREAM_KIND:
content = <StreamNote event={event} />;
break;
case 2:
const safeUrl = safeRelayUrl(event.content);
content = safeUrl ? <RelayCard url={safeUrl} /> : null;
case Kind.RecommendRelay:
content = <RelayRecommendation event={event} />;
break;
default:
content = <Text>Unknown event kind: {event.kind}</Text>;

@ -0,0 +1,28 @@
import { useRef } from "react";
import { Flex, Text } from "@chakra-ui/react";
import { NostrEvent } from "../../../types/nostr-event";
import { UserAvatar } from "../../user-avatar";
import { UserLink } from "../../user-link";
import RelayCard from "../../../views/relays/components/relay-card";
import { safeRelayUrl } from "../../../helpers/url";
import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
export default function RelayRecommendation({ event }: { event: NostrEvent }) {
const safeUrl = safeRelayUrl(event.content);
// if there is a parent intersection observer, register this card
const ref = useRef<HTMLDivElement | null>(null);
useRegisterIntersectionEntity(ref, event.id);
return (
<Flex gap="2" direction="column" ref={ref}>
<Flex gap="2">
<UserAvatar pubkey={event.pubkey} size="xs" alignItems="center" />
<UserLink pubkey={event.pubkey} />
<Text>Recommended relay:</Text>
</Flex>
{safeUrl ? <RelayCard url={safeUrl} /> : event.content}
</Flex>
);
}