From 4e5561283392d2ab1545cabb4455a8ffc490f86b Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 18 Oct 2019 17:20:27 -0700
Subject: Running prettier on code.

- #305 , #309
---
 ui/src/components/communities.tsx | 191 ++++++++++++++++++++++++++------------
 1 file changed, 132 insertions(+), 59 deletions(-)

(limited to 'ui/src/components/communities.tsx')

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 49b982dc..7e4a0ef8 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -1,8 +1,16 @@
 import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
-import { Subscription } from "rxjs";
+import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces';
+import {
+  UserOperation,
+  Community,
+  ListCommunitiesResponse,
+  CommunityResponse,
+  FollowCommunityForm,
+  ListCommunitiesForm,
+  SortType,
+} from '../interfaces';
 import { WebSocketService } from '../services';
 import { msgOp } from '../utils';
 import { i18n } from '../i18next';
@@ -22,25 +30,31 @@ export class Communities extends Component<any, CommunitiesState> {
     communities: [],
     loading: true,
     page: this.getPageFromProps(this.props),
-  }
+  };
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
     this.subscription = WebSocketService.Instance.subject
-      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
+      .pipe(
+        retryWhen(errors =>
+          errors.pipe(
+            delay(3000),
+            take(10)
+          )
+        )
+      )
       .subscribe(
-        (msg) => this.parseMessage(msg),
-        (err) => console.error(err),
+        msg => this.parseMessage(msg),
+        err => console.error(err),
         () => console.log('complete')
       );
 
     this.refetch();
-
   }
 
   getPageFromProps(props: any): number {
-    return (props.match.params.page) ? Number(props.match.params.page) : 1;
+    return props.match.params.page ? Number(props.match.params.page) : 1;
   }
 
   componentWillUnmount() {
@@ -48,7 +62,9 @@ export class Communities extends Component<any, CommunitiesState> {
   }
 
   componentDidMount() {
-    document.title = `${i18n.t('communities')} - ${WebSocketService.Instance.site.name}`;
+    document.title = `${i18n.t('communities')} - ${
+      WebSocketService.Instance.site.name
+    }`;
   }
 
   // Necessary for back button for some reason
@@ -63,46 +79,92 @@ export class Communities extends Component<any, CommunitiesState> {
   render() {
     return (
       <div class="container">
-        {this.state.loading ? 
-        <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
-        <div>
-          <h5><T i18nKey="list_of_communities">#</T></h5>
-          <div class="table-responsive">
-            <table id="community_table" class="table table-sm table-hover">
-              <thead class="pointer">
-                <tr>
-                  <th><T i18nKey="name">#</T></th>
-                  <th class="d-none d-lg-table-cell"><T i18nKey="title">#</T></th>
-                  <th><T i18nKey="category">#</T></th>
-                  <th class="text-right"><T i18nKey="subscribers">#</T></th>
-                  <th class="text-right d-none d-lg-table-cell"><T i18nKey="posts">#</T></th>
-                  <th class="text-right d-none d-lg-table-cell"><T i18nKey="comments">#</T></th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {this.state.communities.map(community =>
+        {this.state.loading ? (
+          <h5 class="">
+            <svg class="icon icon-spinner spin">
+              <use xlinkHref="#icon-spinner"></use>
+            </svg>
+          </h5>
+        ) : (
+          <div>
+            <h5>
+              <T i18nKey="list_of_communities">#</T>
+            </h5>
+            <div class="table-responsive">
+              <table id="community_table" class="table table-sm table-hover">
+                <thead class="pointer">
                   <tr>
-                    <td><Link to={`/c/${community.name}`}>{community.name}</Link></td>
-                    <td class="d-none d-lg-table-cell">{community.title}</td>
-                    <td>{community.category_name}</td>
-                    <td class="text-right">{community.number_of_subscribers}</td>
-                    <td class="text-right d-none d-lg-table-cell">{community.number_of_posts}</td>
-                    <td class="text-right d-none d-lg-table-cell">{community.number_of_comments}</td>
-                    <td class="text-right">
-                      {community.subscribed ? 
-                      <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></span> : 
-                      <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></span>
-                      }
-                    </td>
+                    <th>
+                      <T i18nKey="name">#</T>
+                    </th>
+                    <th class="d-none d-lg-table-cell">
+                      <T i18nKey="title">#</T>
+                    </th>
+                    <th>
+                      <T i18nKey="category">#</T>
+                    </th>
+                    <th class="text-right">
+                      <T i18nKey="subscribers">#</T>
+                    </th>
+                    <th class="text-right d-none d-lg-table-cell">
+                      <T i18nKey="posts">#</T>
+                    </th>
+                    <th class="text-right d-none d-lg-table-cell">
+                      <T i18nKey="comments">#</T>
+                    </th>
+                    <th></th>
                   </tr>
-                )}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {this.state.communities.map(community => (
+                    <tr>
+                      <td>
+                        <Link to={`/c/${community.name}`}>
+                          {community.name}
+                        </Link>
+                      </td>
+                      <td class="d-none d-lg-table-cell">{community.title}</td>
+                      <td>{community.category_name}</td>
+                      <td class="text-right">
+                        {community.number_of_subscribers}
+                      </td>
+                      <td class="text-right d-none d-lg-table-cell">
+                        {community.number_of_posts}
+                      </td>
+                      <td class="text-right d-none d-lg-table-cell">
+                        {community.number_of_comments}
+                      </td>
+                      <td class="text-right">
+                        {community.subscribed ? (
+                          <span
+                            class="pointer btn-link"
+                            onClick={linkEvent(
+                              community.id,
+                              this.handleUnsubscribe
+                            )}
+                          >
+                            <T i18nKey="unsubscribe">#</T>
+                          </span>
+                        ) : (
+                          <span
+                            class="pointer btn-link"
+                            onClick={linkEvent(
+                              community.id,
+                              this.handleSubscribe
+                            )}
+                          >
+                            <T i18nKey="subscribe">#</T>
+                          </span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {this.paginator()}
           </div>
-          {this.paginator()}
-        </div>
-        }
+        )}
       </div>
     );
   }
@@ -110,10 +172,20 @@ export class Communities extends Component<any, CommunitiesState> {
   paginator() {
     return (
       <div class="mt-2">
-        {this.state.page > 1 && 
-          <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
-        }
-        <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button>
+        {this.state.page > 1 && (
+          <button
+            class="btn btn-sm btn-secondary mr-1"
+            onClick={linkEvent(this, this.prevPage)}
+          >
+            <T i18nKey="prev">#</T>
+          </button>
+        )}
+        <button
+          class="btn btn-sm btn-secondary"
+          onClick={linkEvent(this, this.nextPage)}
+        >
+          <T i18nKey="next">#</T>
+        </button>
       </div>
     );
   }
@@ -122,14 +194,14 @@ export class Communities extends Component<any, CommunitiesState> {
     this.props.history.push(`/communities/page/${this.state.page}`);
   }
 
-  nextPage(i: Communities) { 
+  nextPage(i: Communities) {
     i.state.page++;
     i.setState(i.state);
     i.updateUrl();
     i.refetch();
   }
 
-  prevPage(i: Communities) { 
+  prevPage(i: Communities) {
     i.state.page--;
     i.setState(i.state);
     i.updateUrl();
@@ -139,7 +211,7 @@ export class Communities extends Component<any, CommunitiesState> {
   handleUnsubscribe(communityId: number) {
     let form: FollowCommunityForm = {
       community_id: communityId,
-      follow: false
+      follow: false,
     };
     WebSocketService.Instance.followCommunity(form);
   }
@@ -147,7 +219,7 @@ export class Communities extends Component<any, CommunitiesState> {
   handleSubscribe(communityId: number) {
     let form: FollowCommunityForm = {
       community_id: communityId,
-      follow: true
+      follow: true,
     };
     WebSocketService.Instance.followCommunity(form);
   }
@@ -157,10 +229,9 @@ export class Communities extends Component<any, CommunitiesState> {
       sort: SortType[SortType.TopAll],
       limit: 100,
       page: this.state.page,
-    }
+    };
 
     WebSocketService.Instance.listCommunities(listCommunitiesForm);
-
   }
 
   parseMessage(msg: any) {
@@ -172,9 +243,11 @@ export class Communities extends Component<any, CommunitiesState> {
     } else if (op == UserOperation.ListCommunities) {
       let res: ListCommunitiesResponse = msg;
       this.state.communities = res.communities;
-      this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
+      this.state.communities.sort(
+        (a, b) => b.number_of_subscribers - a.number_of_subscribers
+      );
       this.state.loading = false;
-      window.scrollTo(0,0);
+      window.scrollTo(0, 0);
       this.setState(this.state);
       let table = document.querySelector('#community_table');
       Sortable.initTable(table);
@@ -184,6 +257,6 @@ export class Communities extends Component<any, CommunitiesState> {
       found.subscribed = res.community.subscribed;
       found.number_of_subscribers = res.community.number_of_subscribers;
       this.setState(this.state);
-    } 
+    }
   }
 }
-- 
cgit v1.2.3