Fix instance listing (#107)

src/shared/components/instances.tsx

@@ -64,40 +64,49 @@ export class Instances extends Component<any, any> {
       <div>
         <h2>{header}</h2>
         <div class="row">
-          {instances.map(i => (
+          {instances.map(instance => {
-            <div class="card col-6">
+            let domain = instance.domain;
-              <header>
+            let users_active_month =
-                <div class="row">
+              instance.site_info.site_view.counts.users_active_month;
-                  <h4 class="col">{i.domain}</h4>
+            let description = instance.site_info.site_view.site.description;
-                  <h4 class="col text-right">
+            let icon = instance.site_info.site_view.site.icon;
-                    <i>
+            let require_application =
-                      {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
+              instance.site_info.site_view.site.require_application;
-                      {i18n.t("month")}
+            return (
-                    </i>
+              <div class="card col-6">
-                  </h4>
+                <header>
+                  <div class="row">
+                    <h4 class="col">{domain}</h4>
+                    <h4 class="col text-right">
+                      <i>
+                        {numToSI(users_active_month)} {i18n.t("users")} /{" "}
+                        {i18n.t("month")}
+                      </i>
+                    </h4>
+                  </div>
+                </header>
+                <div class="is-center">
+                  <img
+                    class="join-banner"
+                    src={icon || "/static/assets/images/lemmy.svg"}
+                  />
                 </div>
-              </header>
+                <br />
-              <div class="is-center">
+                <p class="join-desc">{description}</p>
-                <img
+                <footer>
-                  class="join-banner"
+                  {require_application ? (
-                  src={i.icon || "/static/assets/images/lemmy.svg"}
+                    <a class="button primary" href={`https://${domain}`}>
-                />
+                      {i18n.t("apply_to_join")}
+                    </a>
+                  ) : (
+                    <a class="button primary" href={`https://${domain}`}>
+                      {i18n.t("join")}
+                    </a>
+                  )}
+                </footer>
               </div>
-              <br />
+            );
-              <p class="join-desc">{i.description}</p>
+          })}
-              <footer>
-                {i.require_application ? (
-                  <a class="button primary" href={`https://${i.domain}`}>
-                    {i18n.t("apply_to_join")}
-                  </a>
-                ) : (
-                  <a class="button primary" href={`https://${i.domain}`}>
-                    {i18n.t("join")}
-                  </a>
-                )}
-              </footer>
-            </div>
-          ))}
         </div>
       </div>
     );