src/shared/components/home/instances.tsx

   1 import { Component } from "inferno";
   2 import {
   3   GetFederatedInstancesResponse,
   4   GetSiteResponse,
   5   Instance,
   6   UserOperation,
   7   wsJsonToRes,
   8   wsUserOp,
   9 } from "lemmy-js-client";
  10 import { Subscription } from "rxjs";
  11 import { i18n } from "../../i18next";
  12 import { InitialFetchRequest } from "../../interfaces";
  13 import { WebSocketService } from "../../services";
  14 import {
  15   isBrowser,
  16   relTags,
  17   setIsoData,
  18   toast,
  19   wsClient,
  20   wsSubscribe,
  21 } from "../../utils";
  22 import { HtmlTags } from "../common/html-tags";
  23
  24 interface InstancesState {
  25   siteRes: GetSiteResponse;
  26   instancesRes?: GetFederatedInstancesResponse;
  27   loading: boolean;
  28 }
  29
  30 export class Instances extends Component<any, InstancesState> {
  31   private isoData = setIsoData(this.context);
  32   state: InstancesState = {
  33     siteRes: this.isoData.site_res,
  34     loading: true,
  35   };
  36   private subscription?: Subscription;
  37
  38   constructor(props: any, context: any) {
  39     super(props, context);
  40
  41     this.parseMessage = this.parseMessage.bind(this);
  42     this.subscription = wsSubscribe(this.parseMessage);
  43
  44     // Only fetch the data if coming from another route
  45     if (this.isoData.path == this.context.router.route.match.url) {
  46       this.state = {
  47         ...this.state,
  48         instancesRes: this.isoData
  49           .routeData[0] as GetFederatedInstancesResponse,
  50         loading: false,
  51       };
  52     } else {
  53       WebSocketService.Instance.send(wsClient.getFederatedInstances({}));
  54     }
  55   }
  56
  57   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
  58     const promises: Promise<any>[] = [];
  59
  60     promises.push(req.client.getFederatedInstances({}));
  61
  62     return promises;
  63   }
  64
  65   get documentTitle(): string {
  66     return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
  67   }
  68
  69   componentWillUnmount() {
  70     if (isBrowser()) {
  71       this.subscription?.unsubscribe();
  72     }
  73   }
  74
  75   render() {
  76     const federated_instances = this.state.instancesRes?.federated_instances;
  77     return federated_instances ? (
  78       <div className="container-lg">
  79         <HtmlTags
  80           title={this.documentTitle}
  81           path={this.context.router.route.match.url}
  82         />
  83         <div className="row">
  84           <div className="col-md-6">
  85             <h5>{i18n.t("linked_instances")}</h5>
  86             {this.itemList(federated_instances.linked)}
  87           </div>
  88           {federated_instances.allowed &&
  89             federated_instances.allowed.length > 0 && (
  90               <div className="col-md-6">
  91                 <h5>{i18n.t("allowed_instances")}</h5>
  92                 {this.itemList(federated_instances.allowed)}
  93               </div>
  94             )}
  95           {federated_instances.blocked &&
  96             federated_instances.blocked.length > 0 && (
  97               <div className="col-md-6">
  98                 <h5>{i18n.t("blocked_instances")}</h5>
  99                 {this.itemList(federated_instances.blocked)}
 100               </div>
 101             )}
 102         </div>
 103       </div>
 104     ) : (
 105       <></>
 106     );
 107   }
 108
 109   itemList(items: Instance[]) {
 110     return items.length > 0 ? (
 111       <div className="table-responsive">
 112         <table id="instances_table" className="table table-sm table-hover">
 113           <thead className="pointer">
 114             <tr>
 115               <th>{i18n.t("name")}</th>
 116               <th>{i18n.t("software")}</th>
 117               <th>{i18n.t("version")}</th>
 118             </tr>
 119           </thead>
 120           <tbody>
 121             {items.map(i => (
 122               <tr key={i.domain}>
 123                 <td>
 124                   <a href={`https://${i.domain}`} rel={relTags}>
 125                     {i.domain}
 126                   </a>
 127                 </td>
 128                 <td>{i.software}</td>
 129                 <td>{i.version}</td>
 130               </tr>
 131             ))}
 132           </tbody>
 133         </table>
 134       </div>
 135     ) : (
 136       <div>{i18n.t("none_found")}</div>
 137     );
 138   }
 139   parseMessage(msg: any) {
 140     const op = wsUserOp(msg);
 141     console.log(msg);
 142     if (msg.error) {
 143       toast(i18n.t(msg.error), "danger");
 144       this.context.router.history.push("/");
 145       this.setState({ loading: false });
 146       return;
 147     } else if (op == UserOperation.GetFederatedInstances) {
 148       const data = wsJsonToRes<GetFederatedInstancesResponse>(msg);
 149       this.setState({ loading: false, instancesRes: data });
 150     }
 151   }
 152 }