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 { 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   private emptyState: InstancesState = {
  14     siteRes: this.isoData.site_res,
  15   };
  16
  17   constructor(props: any, context: any) {
  18     super(props, context);
  19     this.state = this.emptyState;
  20   }
  21
  22   get documentTitle(): string {
  23     return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
  24   }
  25
  26   render() {
  27     let federated_instances = this.state.siteRes?.federated_instances;
  28     return (
  29       federated_instances && (
  30         <div class="container">
  31           <HtmlTags
  32             title={this.documentTitle}
  33             path={this.context.router.route.match.url}
  34           />
  35           <div class="row">
  36             <div class="col-md-6">
  37               <h5>{i18n.t("linked_instances")}</h5>
  38               {this.itemList(federated_instances.linked)}
  39             </div>
  40             {federated_instances.allowed?.length > 0 && (
  41               <div class="col-md-6">
  42                 <h5>{i18n.t("allowed_instances")}</h5>
  43                 {this.itemList(federated_instances.allowed)}
  44               </div>
  45             )}
  46             {federated_instances.blocked?.length > 0 && (
  47               <div class="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   itemList(items: string[]) {
  59     return items.length > 0 ? (
  60       <ul>
  61         {items.map(i => (
  62           <li>
  63             <a href={`https://${i}`} rel="noopener">
  64               {i}
  65             </a>
  66           </li>
  67         ))}
  68       </ul>
  69     ) : (
  70       <div>{i18n.t("none_found")}</div>
  71     );
  72   }
  73 }