fix community link in thread view

src/components/note/index.tsx

@@ -11,7 +11,6 @@ import {
   IconButton,
   Link,
   LinkBox,
-  Text,
   useDisclosure,
 } from "@chakra-ui/react";
 import { NostrEvent } from "../../types/nostr-event";
@@ -41,11 +40,10 @@ import { getReferences } from "../../helpers/nostr/events";
 import Timestamp from "../timestamp";
 import OpenInDrawerButton from "../open-in-drawer-button";
 import { getSharableEventAddress } from "../../helpers/nip19";
-import { getCommunityName, getEventCommunityPointer } from "../../helpers/nostr/communities";
-import useReplaceableEvent from "../../hooks/use-replaceable-event";
 import { useBreakpointValue } from "../../providers/breakpoint-provider";
 import HoverLinkOverlay from "../hover-link-overlay";
 import { nip19 } from "nostr-tools";
+import NoteCommunityMetadata from "./note-community-metadata";
 
 export type NoteProps = Omit<CardProps, "children"> & {
   event: NostrEvent;
@@ -75,8 +73,6 @@ export const Note = React.memo(
 
     // find mostr external link
     const externalLink = useMemo(() => event.tags.find((t) => t[0] === "mostr" || t[0] === "proxy"), [event])?.[1];
-    const communityPointer = useMemo(() => getEventCommunityPointer(event), [event]);
-    const community = useReplaceableEvent(communityPointer ?? undefined);
 
     const showReactionsOnNewLine = useBreakpointValue({ base: true, md: false });
 
@@ -107,15 +103,7 @@ export const Note = React.memo(
                   <Timestamp timestamp={event.created_at} />
                 </Link>
               </Flex>
-              {community && (
-                <Text fontStyle="italic">
-                  Posted in{" "}
-                  <Link as={RouterLink} to={`/c/${getCommunityName(community)}/${community.pubkey}`} color="blue.500">
-                    {getCommunityName(community)}
-                  </Link>{" "}
-                  community
-                </Text>
-              )}
+              <NoteCommunityMetadata event={event} />
             </CardHeader>
             <CardBody p="0">
               <NoteContentWithWarning event={event} />

src/components/note/note-community-metadata.tsx

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { Link, Text, TextProps } from "@chakra-ui/react";
+
+import { NostrEvent } from "../../types/nostr-event";
+import { getEventCommunityPointer } from "../../helpers/nostr/communities";
+
+export default function NoteCommunityMetadata({
+  event,
+  ...props
+}: Omit<TextProps, "children"> & { event: NostrEvent }) {
+  const communityPointer = useMemo(() => getEventCommunityPointer(event), [event]);
+
+  if (!communityPointer) return null;
+
+  return (
+    <Text fontStyle="italic" {...props}>
+      Posted in{" "}
+      <Link as={RouterLink} to={`/c/${communityPointer.identifier}/${communityPointer.pubkey}`} color="blue.500">
+        {communityPointer.identifier}
+      </Link>{" "}
+      community
+    </Text>
+  );
+}

src/views/note/components/thread-post.tsx

@@ -33,6 +33,7 @@ import appSettings from "../../../services/settings/app-settings";
 import { useBreakpointValue } from "../../../providers/breakpoint-provider";
 import NoteReactions from "../../../components/note/components/note-reactions";
 import BookmarkButton from "../../../components/note/components/bookmark-button";
+import NoteCommunityMetadata from "../../../components/note/note-community-metadata";
 
 const LEVEL_COLORS = ["green", "blue", "red", "purple", "yellow", "cyan", "pink"];
 
@@ -100,9 +101,12 @@ export const ThreadPost = ({ post, initShowReplies, focusId, level = -1 }: Threa
     return isMuted && !alwaysShow ? (
       muteAlert
     ) : (
-      <TrustProvider trust={focusId === post.event.id ? true : undefined}>
-        <NoteContents event={post.event} pl="2" />
-      </TrustProvider>
+      <>
+        <NoteCommunityMetadata event={post.event} pl="2" />
+        <TrustProvider trust={focusId === post.event.id ? true : undefined}>
+          <NoteContents event={post.event} pl="2" />
+        </TrustProvider>
+      </>
     );
   };