From: Jay Sitter <jay@jaysitter.com>
Date: Tue, 27 Jun 2023 00:12:21 +0000 (-0400)
Subject: fix: Show metadata preview card on all post pages
X-Git-Url: http://these/git/%24%7Bsubmission.url%7D?a=commitdiff_plain;h=5c964440daf3c8001e00e11b19396b05d17df8c3;p=lemmy-ui.git

fix: Show metadata preview card on all post pages
---

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index a1ddca7..1269c0b 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -8,60 +8,54 @@ interface MetadataCardProps {
   post: Post;
 }
 
-interface MetadataCardState {
-  expanded: boolean;
-}
-
-export class MetadataCard extends Component<
-  MetadataCardProps,
-  MetadataCardState
-> {
+export class MetadataCard extends Component<MetadataCardProps> {
   constructor(props: any, context: any) {
     super(props, context);
   }
 
   render() {
     const post = this.props.post;
-    return (
-      <>
-        {post.embed_title && post.url && (
-          <div className="post-metadata-card card border-secondary mt-3 mb-2">
-            <div className="row">
-              <div className="col-12">
-                <div className="card-body">
-                  {post.name !== post.embed_title && (
-                    <>
-                      <h5 className="card-title d-inline">
-                        <a className="text-body" href={post.url} rel={relTags}>
-                          {post.embed_title}
-                        </a>
-                      </h5>
-                      <span className="d-inline-block ms-2 mb-2 small text-muted">
-                        <a
-                          className="text-muted fst-italic"
-                          href={post.url}
-                          rel={relTags}
-                        >
-                          {new URL(post.url).hostname}
-                          <Icon icon="external-link" classes="ms-1" />
-                        </a>
-                      </span>
-                    </>
-                  )}
-                  {post.embed_description && (
-                    <div
-                      className="card-text small text-muted md-div"
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeHtml(post.embed_description),
-                      }}
-                    />
-                  )}
-                </div>
+
+    if (post.embed_title && post.url) {
+      return (
+        <div className="post-metadata-card card border-secondary mt-3 mb-2">
+          <div className="row">
+            <div className="col-12">
+              <div className="card-body">
+                {post.name !== post.embed_title && (
+                  <>
+                    <h5 className="card-title d-inline">
+                      <a className="text-body" href={post.url} rel={relTags}>
+                        {post.embed_title}
+                      </a>
+                    </h5>
+                    <span className="d-inline-block ms-2 mb-2 small text-muted">
+                      <a
+                        className="text-muted fst-italic"
+                        href={post.url}
+                        rel={relTags}
+                      >
+                        {new URL(post.url).hostname}
+                        <Icon icon="external-link" classes="ms-1" />
+                      </a>
+                    </span>
+                  </>
+                )}
+                {post.embed_description && (
+                  <div
+                    className="card-text small text-muted md-div"
+                    dangerouslySetInnerHTML={{
+                      __html: sanitizeHtml(post.embed_description),
+                    }}
+                  />
+                )}
               </div>
             </div>
           </div>
-        )}
-      </>
-    );
+        </div>
+      );
+    } else {
+      return <></>;
+    }
   }
 }
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index f898e83..2b761c5 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -105,6 +105,9 @@ interface PostListingProps {
   allLanguages: Language[];
   siteLanguages: number[];
   showCommunity?: boolean;
+  /**
+   * Controls whether to show both the body *and* the metadata preview card
+   */
   showBody?: boolean;
   hideImage?: boolean;
   enableDownvotes?: boolean;
@@ -200,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <>
             {this.listing()}
             {this.state.imageExpanded && !this.props.hideImage && this.img}
-            {post.url && this.state.showBody && post.embed_title && (
+            {this.showBody && post.url && post.embed_title && (
               <MetadataCard post={post} />
             )}
             {this.showBody && this.body()}
@@ -483,10 +486,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </h5>
 
           {/**
-           * If there is a URL, or if the post has a body and we were told not to
-           * show the body, show the MetadataCard/body toggle.
+           * If there is a URL, an embed title, and we were not told to show the
+           * body by the parent component, show the MetadataCard/body toggle.
            */}
-          {(post.url || (post.body && !this.props.showBody)) && (
+          {!this.props.showBody && post.url && post.embed_title && (
             <button
               className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
               data-tippy-content={post.body && mdNoImages.render(post.body)}