component classes v2

[lemmy-ui.git] / src / shared / components / post / metadata-card.tsx

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index 128742b14fb200819cf892bfe5ad3a312a7283bd..e6a864af6afb62620b39ac2b5757cbb50424301e 100644 (file)
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -1,5 +1,6 @@
 import { Component, linkEvent } from "inferno";
 import { Post } from "lemmy-js-client";
+import * as sanitizeHtml from "sanitize-html";
 import { i18n } from "../../i18next";
 import { relTags } from "../../utils";
 import { Icon } from "../common/icon";
@@ -16,84 +17,69 @@ export class MetadataCard extends Component<
   MetadataCardProps,
   MetadataCardState
 > {
-  private emptyState: MetadataCardState = {
+  state: MetadataCardState = {
     expanded: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = this.emptyState;
   }
 
   render() {
-    let post = this.props.post;
+    const post = this.props.post;
     return (
       <>
-        {!this.state.expanded &&
-          post.embed_title.match({
-            some: embedTitle =>
-              post.url.match({
-                some: url => (
-                  <div className="card border-secondary mt-3 mb-2">
-                    <div className="row">
-                      <div className="col-12">
-                        <div className="card-body">
-                          {post.name !== embedTitle && (
-                            <>
-                              <h5 className="card-title d-inline">
-                                <a
-                                  className="text-body"
-                                  href={url}
-                                  rel={relTags}
-                                >
-                                  {embedTitle}
-                                </a>
-                              </h5>
-                              <span className="d-inline-block ml-2 mb-2 small text-muted">
-                                <a
-                                  className="text-muted font-italic"
-                                  href={url}
-                                  rel={relTags}
-                                >
-                                  {new URL(url).hostname}
-                                  <Icon icon="external-link" classes="ml-1" />
-                                </a>
-                              </span>
-                            </>
-                          )}
-                          {post.embed_description.match({
-                            some: desc => (
-                              <div
-                                className="card-text small text-muted md-div"
-                                dangerouslySetInnerHTML={{
-                                  __html: desc,
-                                }}
-                              />
-                            ),
-                            none: <></>,
-                          })}
-                          {post.embed_video_url.isSome() && (
-                            <button
-                              className="mt-2 btn btn-secondary text-monospace"
-                              onClick={linkEvent(this, this.handleIframeExpand)}
-                            >
-                              {i18n.t("expand_here")}
-                            </button>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ),
-                none: <></>,
-              }),
-            none: <></>,
-          })}
-        {this.state.expanded &&
-          post.embed_video_url.match({
-            some: video_url => <iframe src={video_url}></iframe>,
-            none: <></>,
-          })}
+        {!this.state.expanded && 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 font-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),
+                      }}
+                    />
+                  )}
+                  {post.embed_video_url && (
+                    <button
+                      className="mt-2 btn btn-secondary text-monospace"
+                      onClick={linkEvent(this, this.handleIframeExpand)}
+                    >
+                      {i18n.t("expand_here")}
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        {this.state.expanded && post.embed_video_url && (
+          <iframe
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+          ></iframe>
+        )}
       </>
     );
   }