1 import { setIsoData } from "@utils/app";
2 import { RouteDataResponse } from "@utils/types";
3 import { Component } from "inferno";
5 GetFederatedInstancesResponse,
8 } from "lemmy-js-client";
9 import { relTags } from "../../config";
10 import { InitialFetchRequest } from "../../interfaces";
11 import { FirstLoadService, I18NextService } from "../../services";
12 import { HttpService, RequestState } from "../../services/HttpService";
13 import { HtmlTags } from "../common/html-tags";
14 import { Spinner } from "../common/icon";
16 type InstancesData = RouteDataResponse<{
17 federatedInstancesResponse: GetFederatedInstancesResponse;
20 interface InstancesState {
21 instancesRes: RequestState<GetFederatedInstancesResponse>;
22 siteRes: GetSiteResponse;
23 isIsomorphic: boolean;
26 export class Instances extends Component<any, InstancesState> {
27 private isoData = setIsoData<InstancesData>(this.context);
28 state: InstancesState = {
29 instancesRes: { state: "empty" },
30 siteRes: this.isoData.site_res,
34 constructor(props: any, context: any) {
35 super(props, context);
37 // Only fetch the data if coming from another route
38 if (FirstLoadService.isFirstLoad) {
41 instancesRes: this.isoData.routeData.federatedInstancesResponse,
47 async componentDidMount() {
48 if (!this.state.isIsomorphic) {
49 await this.fetchInstances();
53 async fetchInstances() {
55 instancesRes: { state: "loading" },
59 instancesRes: await HttpService.client.getFederatedInstances({}),
63 static async fetchInitialData({
65 }: InitialFetchRequest): Promise<InstancesData> {
67 federatedInstancesResponse: await client.getFederatedInstances({}),
71 get documentTitle(): string {
72 return `${I18NextService.i18n.t("instances")} - ${
73 this.state.siteRes.site_view.site.name
78 switch (this.state.instancesRes.state) {
86 const instances = this.state.instancesRes.data.federated_instances;
89 <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
91 <div className="col-md-6">
92 <h2 className="h5 mb-3">
93 {I18NextService.i18n.t("linked_instances")}
95 {this.itemList(instances.linked)}
99 {instances.allowed && instances.allowed.length > 0 && (
100 <div className="col-md-6">
101 <h2 className="h5 mb-3">
102 {I18NextService.i18n.t("allowed_instances")}
104 {this.itemList(instances.allowed)}
107 {instances.blocked && instances.blocked.length > 0 && (
108 <div className="col-md-6">
109 <h2 className="h5 mb-3">
110 {I18NextService.i18n.t("blocked_instances")}
112 {this.itemList(instances.blocked)}
126 <div className="home-instances container-lg">
128 title={this.documentTitle}
129 path={this.context.router.route.match.url}
131 {this.renderInstances()}
136 itemList(items: Instance[]) {
137 return items.length > 0 ? (
138 <div className="table-responsive">
139 <table id="instances_table" className="table table-sm table-hover">
140 <thead className="pointer">
142 <th>{I18NextService.i18n.t("name")}</th>
143 <th>{I18NextService.i18n.t("software")}</th>
144 <th>{I18NextService.i18n.t("version")}</th>
151 <a href={`https://${i.domain}`} rel={relTags}>
155 <td>{i.software}</td>
163 <div>{I18NextService.i18n.t("none_found")}</div>