+import { setIsoData } from "@utils/app";
+import { RouteDataResponse } from "@utils/types";
import { Component } from "inferno";
import {
GetFederatedInstancesResponse,
GetSiteResponse,
Instance,
} from "lemmy-js-client";
-import { i18n } from "../../i18next";
+import { relTags } from "../../config";
import { InitialFetchRequest } from "../../interfaces";
-import { FirstLoadService } from "../../services/FirstLoadService";
+import { FirstLoadService, I18NextService } from "../../services";
import { HttpService, RequestState } from "../../services/HttpService";
-import { RouteDataResponse, relTags, setIsoData } from "../../utils";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
});
}
- static async fetchInitialData(
- req: InitialFetchRequest
- ): Promise<InstancesData> {
+ static async fetchInitialData({
+ client,
+ }: InitialFetchRequest): Promise<InstancesData> {
return {
- federatedInstancesResponse: await req.client.getFederatedInstances({}),
+ federatedInstancesResponse: await client.getFederatedInstances({}),
};
}
get documentTitle(): string {
- return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
+ return `${I18NextService.i18n.t("instances")} - ${
+ this.state.siteRes.site_view.site.name
+ }`;
}
renderInstances() {
case "success": {
const instances = this.state.instancesRes.data.federated_instances;
return instances ? (
- <div className="row">
- <div className="col-md-6">
- <h5>{i18n.t("linked_instances")}</h5>
- {this.itemList(instances.linked)}
- </div>
- {instances.allowed && instances.allowed.length > 0 && (
- <div className="col-md-6">
- <h5>{i18n.t("allowed_instances")}</h5>
- {this.itemList(instances.allowed)}
- </div>
- )}
- {instances.blocked && instances.blocked.length > 0 && (
+ <>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
+ <div className="row">
<div className="col-md-6">
- <h5>{i18n.t("blocked_instances")}</h5>
- {this.itemList(instances.blocked)}
+ <h2 className="h5 mb-3">
+ {I18NextService.i18n.t("linked_instances")}
+ </h2>
+ {this.itemList(instances.linked)}
</div>
- )}
- </div>
+ </div>
+ <div className="row">
+ {instances.allowed && instances.allowed.length > 0 && (
+ <div className="col-md-6">
+ <h2 className="h5 mb-3">
+ {I18NextService.i18n.t("allowed_instances")}
+ </h2>
+ {this.itemList(instances.allowed)}
+ </div>
+ )}
+ {instances.blocked && instances.blocked.length > 0 && (
+ <div className="col-md-6">
+ <h2 className="h5 mb-3">
+ {I18NextService.i18n.t("blocked_instances")}
+ </h2>
+ {this.itemList(instances.blocked)}
+ </div>
+ )}
+ </div>
+ </>
) : (
<></>
);
render() {
return (
- <div className="container-lg">
+ <div className="home-instances container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
<table id="instances_table" className="table table-sm table-hover">
<thead className="pointer">
<tr>
- <th>{i18n.t("name")}</th>
- <th>{i18n.t("software")}</th>
- <th>{i18n.t("version")}</th>
+ <th>{I18NextService.i18n.t("name")}</th>
+ <th>{I18NextService.i18n.t("software")}</th>
+ <th>{I18NextService.i18n.t("version")}</th>
</tr>
</thead>
<tbody>
</table>
</div>
) : (
- <div>{i18n.t("none_found")}</div>
+ <div>{I18NextService.i18n.t("none_found")}</div>
);
}
}