src/shared/components/post/metadata-card.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Post } from "lemmy-js-client";
   3 import { i18n } from "../../i18next";
   4 import { relTags } from "../../utils";
   5 import { Icon } from "../common/icon";
   6
   7 interface MetadataCardProps {
   8   post: Post;
   9 }
  10
  11 interface MetadataCardState {
  12   expanded: boolean;
  13 }
  14
  15 export class MetadataCard extends Component<
  16   MetadataCardProps,
  17   MetadataCardState
  18 > {
  19   private emptyState: MetadataCardState = {
  20     expanded: false,
  21   };
  22
  23   constructor(props: any, context: any) {
  24     super(props, context);
  25     this.state = this.emptyState;
  26   }
  27
  28   render() {
  29     let post = this.props.post;
  30     return (
  31       <>
  32         {!this.state.expanded &&
  33           post.embed_title.match({
  34             some: embedTitle =>
  35               post.url.match({
  36                 some: url => (
  37                   <div class="card border-secondary mt-3 mb-2">
  38                     <div class="row">
  39                       <div class="col-12">
  40                         <div class="card-body">
  41                           {post.name !== embedTitle && [
  42                             <h5 class="card-title d-inline">
  43                               <a class="text-body" href={url} rel={relTags}>
  44                                 {embedTitle}
  45                               </a>
  46                             </h5>,
  47                             <span class="d-inline-block ml-2 mb-2 small text-muted">
  48                               <a
  49                                 class="text-muted font-italic"
  50                                 href={url}
  51                                 rel={relTags}
  52                               >
  53                                 {new URL(url).hostname}
  54                                 <Icon icon="external-link" classes="ml-1" />
  55                               </a>
  56                             </span>,
  57                           ]}
  58                           {post.embed_description.match({
  59                             some: desc => (
  60                               <div
  61                                 className="card-text small text-muted md-div"
  62                                 dangerouslySetInnerHTML={{
  63                                   __html: desc,
  64                                 }}
  65                               />
  66                             ),
  67                             none: <></>,
  68                           })}
  69                           {post.embed_html.isSome() && (
  70                             <button
  71                               class="mt-2 btn btn-secondary text-monospace"
  72                               onClick={linkEvent(this, this.handleIframeExpand)}
  73                               data-tippy-content={i18n.t("expand_here")}
  74                             >
  75                               {this.state.expanded ? "-" : "+"}
  76                             </button>
  77                           )}
  78                         </div>
  79                       </div>
  80                     </div>
  81                   </div>
  82                 ),
  83                 none: <></>,
  84               }),
  85             none: <></>,
  86           })}
  87         {this.state.expanded &&
  88           post.embed_html.match({
  89             some: html => (
  90               <div
  91                 class="mt-3 mb-2"
  92                 dangerouslySetInnerHTML={{ __html: html }}
  93               />
  94             ),
  95             none: <></>,
  96           })}
  97       </>
  98     );
  99   }
 100
 101   handleIframeExpand(i: MetadataCard) {
 102     i.state.expanded = !i.state.expanded;
 103     i.setState(i.state);
 104   }
 105 }