Merge branch 'main' into fix/fix-badges-spacing-componentize

[lemmy-ui.git] / src / shared / components / home / instances.tsx

diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index bec472cf1ea9d6aca77ed7bd3f6685f5788cc272..0d6748a799390cd85c904d751bec8b650051a086 100644 (file)
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@@ -1,14 +1,15 @@
+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";
 
@@ -59,16 +60,18 @@ export class Instances extends Component<any, InstancesState> {
     });
   }
 
-  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() {
@@ -82,24 +85,35 @@ export class Instances extends Component<any, InstancesState> {
       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>
+          </>
         ) : (
           <></>
         );
@@ -109,7 +123,7 @@ export class Instances extends Component<any, InstancesState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="home-instances container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -125,9 +139,9 @@ export class Instances extends Component<any, InstancesState> {
         <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>
@@ -146,7 +160,7 @@ export class Instances extends Component<any, InstancesState> {
         </table>
       </div>
     ) : (
-      <div>{i18n.t("none_found")}</div>
+      <div>{I18NextService.i18n.t("none_found")}</div>
     );
   }
 }