From b4ed4e5ec56ae37bb2951a9de19763aa9ceb1bd2 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Mon, 1 Feb 2021 13:08:45 -0500
Subject: [PATCH] Updating federated instances page.

---
 package.json                        |  2 +-
 src/shared/components/footer.tsx    | 12 +++---
 src/shared/components/instances.tsx | 64 +++++++++++++++++++----------
 src/shared/components/main.tsx      |  2 +-
 yarn.lock                           |  8 ++--
 5 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index dbf0eea..8569ddb 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "eslint": "^7.18.0",
     "eslint-plugin-jane": "^9.0.6",
     "husky": "^4.3.8",
-    "lemmy-js-client": "0.9.1",
+    "lemmy-js-client": "0.9.4-rc.1",
     "lint-staged": "^10.5.3",
     "mini-css-extract-plugin": "^1.3.4",
     "node-fetch": "^2.6.1",
diff --git a/src/shared/components/footer.tsx b/src/shared/components/footer.tsx
index c83e2ad..0d79ff6 100644
--- a/src/shared/components/footer.tsx
+++ b/src/shared/components/footer.tsx
@@ -28,11 +28,13 @@ export class Footer extends Component<FooterProps, FooterState> {
                 {i18n.t('modlog')}
               </Link>
             </li>
-            <li class="nav-item">
-              <Link className="nav-link" to="/instances">
-                {i18n.t('instances')}
-              </Link>
-            </li>
+            {this.props.site.federated_instances && (
+              <li class="nav-item">
+                <Link className="nav-link" to="/instances">
+                  {i18n.t('instances')}
+                </Link>
+              </li>
+            )}
             <li class="nav-item">
               <a className="nav-link" href={docsUrl}>
                 {i18n.t('docs')}
diff --git a/src/shared/components/instances.tsx b/src/shared/components/instances.tsx
index 85a3c45..31a4cff 100644
--- a/src/shared/components/instances.tsx
+++ b/src/shared/components/instances.tsx
@@ -24,30 +24,50 @@ export class Instances extends Component<any, InstancesState> {
   }
 
   render() {
+    let federated_instances = this.state.siteRes?.federated_instances;
     return (
-      <div class="container">
-        <HtmlTags
-          title={this.documentTitle}
-          path={this.context.router.route.match.url}
-        />
-        <div>
-          <h5>{i18n.t('linked_instances')}</h5>
-          {this.state.siteRes &&
-          this.state.siteRes.federated_instances.length ? (
-            <ul>
-              {this.state.siteRes.federated_instances.map(i => (
-                <li>
-                  <a href={`https://${i}`} target="_blank" rel="noopener">
-                    {i}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div>{i18n.t('none_found')}</div>
-          )}
+      federated_instances && (
+        <div class="container">
+          <HtmlTags
+            title={this.documentTitle}
+            path={this.context.router.route.match.url}
+          />
+          <div class="row">
+            <div class="col-md-6">
+              <h5>{i18n.t('linked_instances')}</h5>
+              {this.itemList(federated_instances.linked)}
+            </div>
+            {federated_instances.allowed.length > 0 && (
+              <div class="col-md-6">
+                <h5>{i18n.t('allowed_instances')}</h5>
+                {this.itemList(federated_instances.allowed)}
+              </div>
+            )}
+            {federated_instances.blocked.length > 0 && (
+              <div class="col-md-6">
+                <h5>{i18n.t('blocked_instances')}</h5>
+                {this.itemList(federated_instances.blocked)}
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )
+    );
+  }
+
+  itemList(items: string[]) {
+    return items.length > 0 ? (
+      <ul>
+        {items.map(i => (
+          <li>
+            <a href={`https://${i}`} target="_blank" rel="noopener">
+              {i}
+            </a>
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <div>{i18n.t('none_found')}</div>
     );
   }
 }
diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index 9e522f8..212a850 100644
--- a/src/shared/components/main.tsx
+++ b/src/shared/components/main.tsx
@@ -639,7 +639,7 @@ export class Main extends Component<any, MainState> {
   get showLocal(): boolean {
     return (
       this.isoData.site_res.federated_instances !== null &&
-      this.isoData.site_res.federated_instances.length > 0
+      this.isoData.site_res.federated_instances.linked.length > 0
     );
   }
 
diff --git a/yarn.lock b/yarn.lock
index efdd156..6d2d4c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5629,10 +5629,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.9.1.tgz#2f87666eba74e980d05421042661fb57b673e6b6"
-  integrity sha512-Oo/sirk3l/JIN0yQVBCRwGhV3LcXk8WGf2g+42VPsatc4P9Ii/Vrgf9/Eo1M3kEV1aqTJXjTq5+ywaKJB5PUJw==
+lemmy-js-client@0.9.4-rc.1:
+  version "0.9.4-rc.1"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.9.4-rc.1.tgz#3898a61adc72e8741f3db02f8f595e33dcf37b97"
+  integrity sha512-Z3EnaBe6xglv+5l5mjfPoEpd7FpoP67IPLKBOE8nItQ4CKyE20Sc9gjIc2yUjf/zOmf97XnHvTeZo86Jm458Rg==
 
 levn@^0.4.1:
   version "0.4.1"
-- 
2.44.1