1 import { Component } from "inferno";
3 GetFederatedInstancesResponse,
6 } from "lemmy-js-client";
7 import { i18n } from "../../i18next";
8 import { InitialFetchRequest } from "../../interfaces";
9 import { FirstLoadService } from "../../services/FirstLoadService";
10 import { HttpService, RequestState } from "../../services/HttpService";
11 import { RouteDataResponse, relTags, setIsoData } from "../../utils";
12 import { HtmlTags } from "../common/html-tags";
13 import { Spinner } from "../common/icon";
15 type InstancesData = RouteDataResponse<{
16 federatedInstancesResponse: GetFederatedInstancesResponse;
19 interface InstancesState {
20 instancesRes: RequestState<GetFederatedInstancesResponse>;
21 siteRes: GetSiteResponse;
22 isIsomorphic: boolean;
25 export class Instances extends Component<any, InstancesState> {
26 private isoData = setIsoData<InstancesData>(this.context);
27 state: InstancesState = {
28 instancesRes: { state: "empty" },
29 siteRes: this.isoData.site_res,
33 constructor(props: any, context: any) {
34 super(props, context);
36 // Only fetch the data if coming from another route
37 if (FirstLoadService.isFirstLoad) {
40 instancesRes: this.isoData.routeData.federatedInstancesResponse,
46 async componentDidMount() {
47 if (!this.state.isIsomorphic) {
48 await this.fetchInstances();
52 async fetchInstances() {
54 instancesRes: { state: "loading" },
58 instancesRes: await HttpService.client.getFederatedInstances({}),
62 static async fetchInitialData({
64 }: InitialFetchRequest): Promise<InstancesData> {
66 federatedInstancesResponse: await client.getFederatedInstances({}),
70 get documentTitle(): string {
71 return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
75 switch (this.state.instancesRes.state) {
83 const instances = this.state.instancesRes.data.federated_instances;
86 <div className="col-md-6">
87 <h5>{i18n.t("linked_instances")}</h5>
88 {this.itemList(instances.linked)}
90 {instances.allowed && instances.allowed.length > 0 && (
91 <div className="col-md-6">
92 <h5>{i18n.t("allowed_instances")}</h5>
93 {this.itemList(instances.allowed)}
96 {instances.blocked && instances.blocked.length > 0 && (
97 <div className="col-md-6">
98 <h5>{i18n.t("blocked_instances")}</h5>
99 {this.itemList(instances.blocked)}
112 <div className="container-lg">
114 title={this.documentTitle}
115 path={this.context.router.route.match.url}
117 {this.renderInstances()}
122 itemList(items: Instance[]) {
123 return items.length > 0 ? (
124 <div className="table-responsive">
125 <table id="instances_table" className="table table-sm table-hover">
126 <thead className="pointer">
128 <th>{i18n.t("name")}</th>
129 <th>{i18n.t("software")}</th>
130 <th>{i18n.t("version")}</th>
137 <a href={`https://${i.domain}`} rel={relTags}>
141 <td>{i.software}</td>
149 <div>{i18n.t("none_found")}</div>