1 import { setIsoData } from "@utils/app";
2 import { isBrowser } from "@utils/browser";
3 import { RouteDataResponse } from "@utils/types";
4 import { Component } from "inferno";
6 GetFederatedInstancesResponse,
9 } from "lemmy-js-client";
10 import { relTags } from "../../config";
11 import { InitialFetchRequest } from "../../interfaces";
12 import { FirstLoadService, I18NextService } from "../../services";
13 import { HttpService, RequestState } from "../../services/HttpService";
14 import { HtmlTags } from "../common/html-tags";
15 import { Spinner } from "../common/icon";
17 type InstancesData = RouteDataResponse<{
18 federatedInstancesResponse: GetFederatedInstancesResponse;
21 interface InstancesState {
22 instancesRes: RequestState<GetFederatedInstancesResponse>;
23 siteRes: GetSiteResponse;
24 isIsomorphic: boolean;
27 export class Instances extends Component<any, InstancesState> {
28 private isoData = setIsoData<InstancesData>(this.context);
29 state: InstancesState = {
30 instancesRes: { state: "empty" },
31 siteRes: this.isoData.site_res,
35 constructor(props: any, context: any) {
36 super(props, context);
38 // Only fetch the data if coming from another route
39 if (!isBrowser() || FirstLoadService.isFirstLoad) {
42 instancesRes: this.isoData.routeData.federatedInstancesResponse,
48 async componentDidMount() {
49 if (!this.state.isIsomorphic) {
50 await this.fetchInstances();
54 async fetchInstances() {
56 instancesRes: { state: "loading" },
60 instancesRes: await HttpService.client.getFederatedInstances({}),
64 static async fetchInitialData({
66 }: InitialFetchRequest): Promise<InstancesData> {
68 federatedInstancesResponse: await client.getFederatedInstances({}),
72 get documentTitle(): string {
73 return `${I18NextService.i18n.t("instances")} - ${
74 this.state.siteRes.site_view.site.name
79 switch (this.state.instancesRes.state) {
87 const instances = this.state.instancesRes.data.federated_instances;
90 <div className="col-md-6">
91 <h5>{I18NextService.i18n.t("linked_instances")}</h5>
92 {this.itemList(instances.linked)}
94 {instances.allowed && instances.allowed.length > 0 && (
95 <div className="col-md-6">
96 <h5>{I18NextService.i18n.t("allowed_instances")}</h5>
97 {this.itemList(instances.allowed)}
100 {instances.blocked && instances.blocked.length > 0 && (
101 <div className="col-md-6">
102 <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
103 {this.itemList(instances.blocked)}
116 <div className="home-instances container-lg">
118 title={this.documentTitle}
119 path={this.context.router.route.match.url}
121 {this.renderInstances()}
126 itemList(items: Instance[]) {
127 return items.length > 0 ? (
128 <div className="table-responsive">
129 <table id="instances_table" className="table table-sm table-hover">
130 <thead className="pointer">
132 <th>{I18NextService.i18n.t("name")}</th>
133 <th>{I18NextService.i18n.t("software")}</th>
134 <th>{I18NextService.i18n.t("version")}</th>
141 <a href={`https://${i.domain}`} rel={relTags}>
145 <td>{i.software}</td>
153 <div>{I18NextService.i18n.t("none_found")}</div>