1 import { Component } from "inferno";
3 GetFederatedInstancesResponse,
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";
23 import { HtmlTags } from "../common/html-tags";
25 interface InstancesData {
26 federatedInstancesResponse: GetFederatedInstancesResponse;
29 interface InstancesState {
30 siteRes: GetSiteResponse;
31 instancesRes?: GetFederatedInstancesResponse;
35 export class Instances extends Component<any, InstancesState> {
36 private isoData = setIsoData<InstancesData>(this.context);
37 state: InstancesState = {
38 siteRes: this.isoData.site_res,
41 private subscription?: Subscription;
43 constructor(props: any, context: any) {
44 super(props, context);
46 this.parseMessage = this.parseMessage.bind(this);
47 this.subscription = wsSubscribe(this.parseMessage);
49 // Only fetch the data if coming from another route
50 if (this.isoData.path == this.context.router.route.match.url) {
53 instancesRes: this.isoData.routeData.federatedInstancesResponse,
57 WebSocketService.Instance.send(wsClient.getFederatedInstances({}));
61 static fetchInitialData({
63 }: InitialFetchRequest): WithPromiseKeys<InstancesData> {
65 federatedInstancesResponse: client.getFederatedInstances(
67 ) as Promise<GetFederatedInstancesResponse>,
71 get documentTitle(): string {
72 return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
75 componentWillUnmount() {
77 this.subscription?.unsubscribe();
82 let federated_instances = this.state.instancesRes?.federated_instances;
83 return federated_instances ? (
84 <div className="container-lg">
86 title={this.documentTitle}
87 path={this.context.router.route.match.url}
90 <div className="col-md-6">
91 <h5>{i18n.t("linked_instances")}</h5>
92 {this.itemList(federated_instances.linked)}
94 {federated_instances.allowed &&
95 federated_instances.allowed.length > 0 && (
96 <div className="col-md-6">
97 <h5>{i18n.t("allowed_instances")}</h5>
98 {this.itemList(federated_instances.allowed)}
101 {federated_instances.blocked &&
102 federated_instances.blocked.length > 0 && (
103 <div className="col-md-6">
104 <h5>{i18n.t("blocked_instances")}</h5>
105 {this.itemList(federated_instances.blocked)}
115 itemList(items: Instance[]) {
116 return items.length > 0 ? (
117 <div className="table-responsive">
118 <table id="instances_table" className="table table-sm table-hover">
119 <thead className="pointer">
121 <th>{i18n.t("name")}</th>
122 <th>{i18n.t("software")}</th>
123 <th>{i18n.t("version")}</th>
130 <a href={`https://${i.domain}`} rel={relTags}>
134 <td>{i.software}</td>
142 <div>{i18n.t("none_found")}</div>
145 parseMessage(msg: any) {
146 let op = wsUserOp(msg);
149 toast(i18n.t(msg.error), "danger");
150 this.context.router.history.push("/");
151 this.setState({ loading: false });
153 } else if (op == UserOperation.GetFederatedInstances) {
154 let data = wsJsonToRes<GetFederatedInstancesResponse>(msg);
155 this.setState({ loading: false, instancesRes: data });