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 this.state.siteRes.site_view.match({
  25       some: siteView => `${i18n.t("instances")} - ${siteView.site.name}`,
  26       none: "",
  27     });
  28   }
  29
  30   render() {
  31     return this.state.siteRes.federated_instances.match({
  32       some: federated_instances => (
  33         <div className="container-lg">
  34           <HtmlTags
  35             title={this.documentTitle}
  36             path={this.context.router.route.match.url}
  37             description={None}
  38             image={None}
  39           />
  40           <div className="row">
  41             <div className="col-md-6">
  42               <h5>{i18n.t("linked_instances")}</h5>
  43               {this.itemList(federated_instances.linked)}
  44             </div>
  45             {federated_instances.allowed.match({
  46               some: allowed =>
  47                 allowed.length > 0 && (
  48                   <div className="col-md-6">
  49                     <h5>{i18n.t("allowed_instances")}</h5>
  50                     {this.itemList(allowed)}
  51                   </div>
  52                 ),
  53               none: <></>,
  54             })}
  55             {federated_instances.blocked.match({
  56               some: blocked =>
  57                 blocked.length > 0 && (
  58                   <div className="col-md-6">
  59                     <h5>{i18n.t("blocked_instances")}</h5>
  60                     {this.itemList(blocked)}
  61                   </div>
  62                 ),
  63               none: <></>,
  64             })}
  65           </div>
  66         </div>
  67       ),
  68       none: <></>,
  69     });
  70   }
  71
  72   itemList(items: string[]) {
  73     let noneFound = <div>{i18n.t("none_found")}</div>;
  74     return items.length > 0 ? (
  75       <ul>
  76         {items.map(i => (
  77           <li key={i}>
  78             <a href={`https://${i}`} rel={relTags}>
  79               {i}
  80             </a>
  81           </li>
  82         ))}
  83       </ul>
  84     ) : (
  85       noneFound
  86     );
  87   }
  88 }