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 className="card border-secondary mt-3 mb-2">
  38                     <div className="row">
  39                       <div className="col-12">
  40                         <div className="card-body">
  41                           {post.name !== embedTitle && (
  42                             <>
  43                               <h5 className="card-title d-inline">
  44                                 <a
  45                                   className="text-body"
  46                                   href={url}
  47                                   rel={relTags}
  48                                 >
  49                                   {embedTitle}
  50                                 </a>
  51                               </h5>
  52                               <span className="d-inline-block ml-2 mb-2 small text-muted">
  53                                 <a
  54                                   className="text-muted font-italic"
  55                                   href={url}
  56                                   rel={relTags}
  57                                 >
  58                                   {new URL(url).hostname}
  59                                   <Icon icon="external-link" classes="ml-1" />
  60                                 </a>
  61                               </span>
  62                             </>
  63                           )}
  64                           {post.embed_description.match({
  65                             some: desc => (
  66                               <div
  67                                 className="card-text small text-muted md-div"
  68                                 dangerouslySetInnerHTML={{
  69                                   __html: desc,
  70                                 }}
  71                               />
  72                             ),
  73                             none: <></>,
  74                           })}
  75                           {post.embed_html.isSome() && (
  76                             <button
  77                               className="mt-2 btn btn-secondary text-monospace"
  78                               onClick={linkEvent(this, this.handleIframeExpand)}
  79                               data-tippy-content={i18n.t("expand_here")}
  80                             >
  81                               {this.state.expanded ? "-" : "+"}
  82                             </button>
  83                           )}
  84                         </div>
  85                       </div>
  86                     </div>
  87                   </div>
  88                 ),
  89                 none: <></>,
  90               }),
  91             none: <></>,
  92           })}
  93         {this.state.expanded &&
  94           post.embed_html.match({
  95             some: html => (
  96               <div
  97                 className="mt-3 mb-2"
  98                 dangerouslySetInnerHTML={{ __html: html }}
  99               />
 100             ),
 101             none: <></>,
 102           })}
 103       </>
 104     );
 105   }
 106
 107   handleIframeExpand(i: MetadataCard) {
 108     i.setState({ expanded: !i.state.expanded });
 109   }
 110 }