Fix instance listing (#107)

src/shared/components/instances.tsx

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