Updating federated instances page.

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",

src/shared/components/footer.tsx

@@ -28,11 +28,13 @@ export class Footer extends Component<FooterProps, FooterState> {
                 {i18n.t('modlog')}
               </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')}

src/shared/components/instances.tsx

@@ -24,18 +24,41 @@ export class Instances extends Component<any, InstancesState> {
   }
 
   render() {
+    let federated_instances = this.state.siteRes?.federated_instances;
     return (
+      federated_instances && (
         <div class="container">
           <HtmlTags
             title={this.documentTitle}
             path={this.context.router.route.match.url}
           />
-        <div>
+          <div class="row">
+            <div class="col-md-6">
               <h5>{i18n.t('linked_instances')}</h5>
-          {this.state.siteRes &&
+              {this.itemList(federated_instances.linked)}
-          this.state.siteRes.federated_instances.length ? (
+            </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>
+      )
+    );
+  }
+
+  itemList(items: string[]) {
+    return items.length > 0 ? (
       <ul>
-              {this.state.siteRes.federated_instances.map(i => (
+        {items.map(i => (
           <li>
             <a href={`https://${i}`} target="_blank" rel="noopener">
               {i}
@@ -45,9 +68,6 @@ export class Instances extends Component<any, InstancesState> {
       </ul>
     ) : (
       <div>{i18n.t('none_found')}</div>
-          )}
-        </div>
-      </div>
     );
   }
 }

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
     );
   }
 

yarn.lock

@@ -5629,10 +5629,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.9.1:
+lemmy-js-client@0.9.4-rc.1:
-  version "0.9.1"
+  version "0.9.4-rc.1"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.9.1.tgz#2f87666eba74e980d05421042661fb57b673e6b6"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.9.4-rc.1.tgz#3898a61adc72e8741f3db02f8f595e33dcf37b97"
-  integrity sha512-Oo/sirk3l/JIN0yQVBCRwGhV3LcXk8WGf2g+42VPsatc4P9Ii/Vrgf9/Eo1M3kEV1aqTJXjTq5+ywaKJB5PUJw==
+  integrity sha512-Z3EnaBe6xglv+5l5mjfPoEpd7FpoP67IPLKBOE8nItQ4CKyE20Sc9gjIc2yUjf/zOmf97XnHvTeZo86Jm458Rg==
 
 levn@^0.4.1:
   version "0.4.1"