src/shared/components/home/instances.tsx

   1 import { None } from "@sniptt/monads";
   2 import { Component } from "inferno";
   3 import { GetSiteResponse } from "lemmy-js-client";
   4 import { i18n } from "../../i18next";
   5 import { relTags, setIsoData } from "../../utils";
   6 import { HtmlTags } from "../common/html-tags";
   7
   8 interface InstancesState {
   9   siteRes: GetSiteResponse;
  10 }
  11
  12 export class Instances extends Component<any, InstancesState> {
  13   private isoData = setIsoData(this.context);
  14   private emptyState: InstancesState = {
  15     siteRes: this.isoData.site_res,
  16   };
  17
  18   constructor(props: any, context: any) {
  19     super(props, context);
  20     this.state = this.emptyState;
  21   }
  22
  23   get documentTitle(): string {
  24     return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
  25   }
  26
  27   render() {
  28     return this.state.siteRes.federated_instances.match({
  29       some: federated_instances => (
  30         <div className="container-lg">
  31           <HtmlTags
  32             title={this.documentTitle}
  33             path={this.context.router.route.match.url}
  34             description={None}
  35             image={None}
  36           />
  37           <div className="row">
  38             <div className="col-md-6">
  39               <h5>{i18n.t("linked_instances")}</h5>
  40               {this.itemList(federated_instances.linked)}
  41             </div>
  42             {federated_instances.allowed.match({
  43               some: allowed =>
  44                 allowed.length > 0 && (
  45                   <div className="col-md-6">
  46                     <h5>{i18n.t("allowed_instances")}</h5>
  47                     {this.itemList(allowed)}
  48                   </div>
  49                 ),
  50               none: <></>,
  51             })}
  52             {federated_instances.blocked.match({
  53               some: blocked =>
  54                 blocked.length > 0 && (
  55                   <div className="col-md-6">
  56                     <h5>{i18n.t("blocked_instances")}</h5>
  57                     {this.itemList(blocked)}
  58                   </div>
  59                 ),
  60               none: <></>,
  61             })}
  62           </div>
  63         </div>
  64       ),
  65       none: <></>,
  66     });
  67   }
  68
  69   itemList(items: string[]) {
  70     let noneFound = <div>{i18n.t("none_found")}</div>;
  71     return items.length > 0 ? (
  72       <ul>
  73         {items.map(i => (
  74           <li key={i}>
  75             <a href={`https://${i}`} rel={relTags}>
  76               {i}
  77             </a>
  78           </li>
  79         ))}
  80       </ul>
  81     ) : (
  82       noneFound
  83     );
  84   }
  85 }