src/shared/components/home/instances.tsx

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