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/main.tsx | 431 +++++++++++++++++++++++++++++++--------------
 1 file changed, 298 insertions(+), 133 deletions(-)

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

diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 1366c162..b1ddef4c 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -1,12 +1,35 @@
 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, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, ListingType, SiteResponse, GetPostsResponse, CreatePostLikeResponse, Post, GetPostsForm } from '../interfaces';
+import {
+  UserOperation,
+  CommunityUser,
+  GetFollowedCommunitiesResponse,
+  ListCommunitiesForm,
+  ListCommunitiesResponse,
+  Community,
+  SortType,
+  GetSiteResponse,
+  ListingType,
+  SiteResponse,
+  GetPostsResponse,
+  CreatePostLikeResponse,
+  Post,
+  GetPostsForm,
+} from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { SiteForm } from './site-form';
-import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum, postRefetchSeconds } from '../utils';
+import {
+  msgOp,
+  repoUrl,
+  mdToHtml,
+  fetchLimit,
+  routeSortTypeToEnum,
+  routeListingTypeToEnum,
+  postRefetchSeconds,
+} from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
@@ -23,7 +46,6 @@ interface MainState {
 }
 
 export class Main extends Component<any, MainState> {
-
   private subscription: Subscription;
   private postFetcher: any;
   private emptyState: MainState = {
@@ -52,24 +74,24 @@ export class Main extends Component<any, MainState> {
     type_: this.getListingTypeFromProps(this.props),
     sort: this.getSortTypeFromProps(this.props),
     page: this.getPageFromProps(this.props),
-  }
+  };
 
   getListingTypeFromProps(props: any): ListingType {
-    return (props.match.params.type) ? 
-      routeListingTypeToEnum(props.match.params.type) : 
-      UserService.Instance.user ? 
-      ListingType.Subscribed : 
-      ListingType.All;
+    return props.match.params.type
+      ? routeListingTypeToEnum(props.match.params.type)
+      : UserService.Instance.user
+      ? ListingType.Subscribed
+      : ListingType.All;
   }
 
   getSortTypeFromProps(props: any): SortType {
-    return (props.match.params.sort) ? 
-      routeSortTypeToEnum(props.match.params.sort) : 
-      SortType.Hot;
+    return props.match.params.sort
+      ? routeSortTypeToEnum(props.match.params.sort)
+      : SortType.Hot;
   }
 
   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;
   }
 
   constructor(props: any, context: any) {
@@ -79,12 +101,19 @@ export class Main extends Component<any, MainState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
 
     this.subscription = WebSocketService.Instance.subject
-    .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-    .subscribe(
-      (msg) => this.parseMessage(msg),
-        (err) => console.error(err),
+      .pipe(
+        retryWhen(errors =>
+          errors.pipe(
+            delay(3000),
+            take(10)
+          )
+        )
+      )
+      .subscribe(
+        msg => this.parseMessage(msg),
+        err => console.error(err),
         () => console.log('complete')
-    );
+      );
 
     WebSocketService.Instance.getSite();
 
@@ -94,8 +123,8 @@ export class Main extends Component<any, MainState> {
 
     let listCommunitiesForm: ListCommunitiesForm = {
       sort: SortType[SortType.Hot],
-      limit: 6
-    }
+      limit: 6,
+    };
 
     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 
@@ -109,7 +138,10 @@ export class Main extends Component<any, MainState> {
 
   // Necessary for back button for some reason
   componentWillReceiveProps(nextProps: any) {
-    if (nextProps.history.action == 'POP' || nextProps.history.action == 'PUSH') {
+    if (
+      nextProps.history.action == 'POP' ||
+      nextProps.history.action == 'PUSH'
+    ) {
       this.state.type_ = this.getListingTypeFromProps(nextProps);
       this.state.sort = this.getSortTypeFromProps(nextProps);
       this.state.page = this.getPageFromProps(nextProps);
@@ -122,39 +154,47 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-md-8">
-            {this.posts()}
-          </div>
-          <div class="col-12 col-md-4">
-            {this.my_sidebar()}
-          </div>
+          <div class="col-12 col-md-8">{this.posts()}</div>
+          <div class="col-12 col-md-4">{this.my_sidebar()}</div>
         </div>
       </div>
-    )
+    );
   }
-    
+
   my_sidebar() {
-    return(
+    return (
       <div>
-        {!this.state.loading &&
+        {!this.state.loading && (
           <div>
             <div class="card border-secondary mb-3">
               <div class="card-body">
                 {this.trendingCommunities()}
-                {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
-                  <div>
-                    <h5>
-                      <T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T>
-                    </h5> 
-                    <ul class="list-inline"> 
-                      {this.state.subscribedCommunities.map(community =>
-                        <li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
-                      )}
-                    </ul>
-                  </div>
-                }
-                <Link class="btn btn-sm btn-secondary btn-block" 
-                  to="/create_community">
+                {UserService.Instance.user &&
+                  this.state.subscribedCommunities.length > 0 && (
+                    <div>
+                      <h5>
+                        <T i18nKey="subscribed_to_communities">
+                          #
+                          <Link class="text-white" to="/communities">
+                            #
+                          </Link>
+                        </T>
+                      </h5>
+                      <ul class="list-inline">
+                        {this.state.subscribedCommunities.map(community => (
+                          <li class="list-inline-item">
+                            <Link to={`/c/${community.community_name}`}>
+                              {community.community_name}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                <Link
+                  class="btn btn-sm btn-secondary btn-block"
+                  to="/create_community"
+                >
                   <T i18nKey="create_a_community">#</T>
                 </Link>
               </div>
@@ -162,44 +202,54 @@ export class Main extends Component<any, MainState> {
             {this.sidebar()}
             {this.landing()}
           </div>
-        }
+        )}
       </div>
-    )
+    );
   }
 
   trendingCommunities() {
     return (
       <div>
         <h5>
-          <T i18nKey="trending_communities">#<Link class="text-white" to="/communities">#</Link></T>
+          <T i18nKey="trending_communities">
+            #
+            <Link class="text-white" to="/communities">
+              #
+            </Link>
+          </T>
         </h5>
-        <ul class="list-inline"> 
-          {this.state.trendingCommunities.map(community =>
-            <li class="list-inline-item"><Link to={`/c/${community.name}`}>{community.name}</Link></li>
-          )}
+        <ul class="list-inline">
+          {this.state.trendingCommunities.map(community => (
+            <li class="list-inline-item">
+              <Link to={`/c/${community.name}`}>{community.name}</Link>
+            </li>
+          ))}
         </ul>
       </div>
-    )
+    );
   }
 
   sidebar() {
     return (
       <div>
-        {!this.state.showEditSite ?
-          this.siteInfo() :
+        {!this.state.showEditSite ? (
+          this.siteInfo()
+        ) : (
           <SiteForm
-            site={this.state.site.site} 
-            onCancel={this.handleEditCancel} 
+            site={this.state.site.site}
+            onCancel={this.handleEditCancel}
           />
-        }
+        )}
       </div>
-    )
+    );
   }
 
   updateUrl() {
     let typeStr = ListingType[this.state.type_].toLowerCase();
     let sortStr = SortType[this.state.sort].toLowerCase();
-    this.props.history.push(`/home/type/${typeStr}/sort/${sortStr}/page/${this.state.page}`);
+    this.props.history.push(
+      `/home/type/${typeStr}/sort/${sortStr}/page/${this.state.page}`
+    );
   }
 
   siteInfo() {
@@ -208,30 +258,66 @@ export class Main extends Component<any, MainState> {
         <div class="card border-secondary mb-3">
           <div class="card-body">
             <h5 class="mb-0">{`${this.state.site.site.name}`}</h5>
-            {this.canAdmin && 
-              <ul class="list-inline mb-1 text-muted small font-weight-bold"> 
+            {this.canAdmin && (
+              <ul class="list-inline mb-1 text-muted small font-weight-bold">
                 <li className="list-inline-item">
-                  <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>
+                  <span
+                    class="pointer"
+                    onClick={linkEvent(this, this.handleEditClick)}
+                  >
                     <T i18nKey="edit">#</T>
                   </span>
                 </li>
               </ul>
-            }
+            )}
             <ul class="my-2 list-inline">
               <li className="list-inline-item badge badge-secondary">
-                <T i18nKey="number_online" interpolation={{count: this.state.site.online}}>#</T>
+                <T
+                  i18nKey="number_online"
+                  interpolation={{ count: this.state.site.online }}
+                >
+                  #
+                </T>
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T i18nKey="number_of_users" interpolation={{count: this.state.site.site.number_of_users}}>#</T>
+                <T
+                  i18nKey="number_of_users"
+                  interpolation={{
+                    count: this.state.site.site.number_of_users,
+                  }}
+                >
+                  #
+                </T>
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T i18nKey="number_of_communities" interpolation={{count: this.state.site.site.number_of_communities}}>#</T>
+                <T
+                  i18nKey="number_of_communities"
+                  interpolation={{
+                    count: this.state.site.site.number_of_communities,
+                  }}
+                >
+                  #
+                </T>
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T i18nKey="number_of_posts" interpolation={{count: this.state.site.site.number_of_posts}}>#</T>
+                <T
+                  i18nKey="number_of_posts"
+                  interpolation={{
+                    count: this.state.site.site.number_of_posts,
+                  }}
+                >
+                  #
+                </T>
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T i18nKey="number_of_comments" interpolation={{count: this.state.site.site.number_of_comments}}>#</T>
+                <T
+                  i18nKey="number_of_comments"
+                  interpolation={{
+                    count: this.state.site.site.number_of_comments,
+                  }}
+                >
+                  #
+                </T>
               </li>
               <li className="list-inline-item">
                 <Link className="badge badge-secondary" to="/modlog">
@@ -239,25 +325,37 @@ export class Main extends Component<any, MainState> {
                 </Link>
               </li>
             </ul>
-            <ul class="mt-1 list-inline small mb-0"> 
+            <ul class="mt-1 list-inline small mb-0">
               <li class="list-inline-item">
-                <T i18nKey="admins" class="d-inline">#</T>:
+                <T i18nKey="admins" class="d-inline">
+                  #
+                </T>
+                :
+              </li>
+              {this.state.site.admins.map(admin => (
+                <li class="list-inline-item">
+                  <Link class="text-info" to={`/u/${admin.name}`}>
+                    {admin.name}
+                  </Link>
                 </li>
-                {this.state.site.admins.map(admin =>
-                  <li class="list-inline-item"><Link class="text-info" to={`/u/${admin.name}`}>{admin.name}</Link></li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        {this.state.site.site.description && (
+          <div class="card border-secondary mb-3">
+            <div class="card-body">
+              <div
+                className="md-div"
+                dangerouslySetInnerHTML={mdToHtml(
+                  this.state.site.site.description
                 )}
-              </ul>
+              />
             </div>
           </div>
-          {this.state.site.site.description && 
-            <div class="card border-secondary mb-3">
-              <div class="card-body">
-                <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} />
-              </div>
-            </div>
-          }
-        </div>
-    )
+        )}
+      </div>
+    );
   }
 
   landing() {
@@ -265,43 +363,73 @@ export class Main extends Component<any, MainState> {
       <div class="card border-secondary">
         <div class="card-body">
           <h5>
-            <T i18nKey="powered_by" class="d-inline">#</T>
-            <svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg>
-            <a href={repoUrl}>Lemmy<sup>beta</sup></a>
+            <T i18nKey="powered_by" class="d-inline">
+              #
+            </T>
+            <svg class="icon mx-2">
+              <use xlinkHref="#icon-mouse">#</use>
+            </svg>
+            <a href={repoUrl}>
+              Lemmy<sup>beta</sup>
+            </a>
           </h5>
           <p class="mb-0">
-            <T i18nKey="landing_0">#<a href="https://en.wikipedia.org/wiki/Social_network_aggregation">#</a><a href="https://en.wikipedia.org/wiki/Fediverse">#</a><br></br><code>#</code><br></br><b>#</b><br></br><a href={repoUrl}>#</a><br></br><a href="https://www.rust-lang.org">#</a><a href="https://actix.rs/">#</a><a href="https://infernojs.org">#</a><a href="https://www.typescriptlang.org/">#</a>
-          </T>
-        </p>
+            <T i18nKey="landing_0">
+              #
+              <a href="https://en.wikipedia.org/wiki/Social_network_aggregation">
+                #
+              </a>
+              <a href="https://en.wikipedia.org/wiki/Fediverse">#</a>
+              <br></br>
+              <code>#</code>
+              <br></br>
+              <b>#</b>
+              <br></br>
+              <a href={repoUrl}>#</a>
+              <br></br>
+              <a href="https://www.rust-lang.org">#</a>
+              <a href="https://actix.rs/">#</a>
+              <a href="https://infernojs.org">#</a>
+              <a href="https://www.typescriptlang.org/">#</a>
+            </T>
+          </p>
+        </div>
       </div>
-    </div>
-    )
+    );
   }
 
   posts() {
     return (
       <div>
-        {this.state.loading ? 
-        <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
-        <div>
-          {this.selects()}
-          <PostListings posts={this.state.posts} showCommunity />
-          {this.paginator()}
-        </div>
-        }
+        {this.state.loading ? (
+          <h5>
+            <svg class="icon icon-spinner spin">
+              <use xlinkHref="#icon-spinner"></use>
+            </svg>
+          </h5>
+        ) : (
+          <div>
+            {this.selects()}
+            <PostListings posts={this.state.posts} showCommunity />
+            {this.paginator()}
+          </div>
+        )}
       </div>
-    )
+    );
   }
 
   selects() {
     return (
       <div className="mb-3">
         <div class="btn-group btn-group-toggle">
-          <label className={`btn btn-sm btn-secondary 
+          <label
+            className={`btn btn-sm btn-secondary 
             ${this.state.type_ == ListingType.Subscribed && 'active'}
             ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
-            `}>
-            <input type="radio" 
+            `}
+          >
+            <input
+              type="radio"
               value={ListingType.Subscribed}
               checked={this.state.type_ == ListingType.Subscribed}
               onChange={linkEvent(this, this.handleTypeChange)}
@@ -309,43 +437,82 @@ export class Main extends Component<any, MainState> {
             />
             {i18n.t('subscribed')}
           </label>
-          <label className={`pointer btn btn-sm btn-secondary ${this.state.type_ == ListingType.All && 'active'}`}>
-            <input type="radio" 
+          <label
+            className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
+              ListingType.All && 'active'}`}
+          >
+            <input
+              type="radio"
               value={ListingType.All}
               checked={this.state.type_ == ListingType.All}
               onChange={linkEvent(this, this.handleTypeChange)}
-            /> 
+            />
             {i18n.t('all')}
           </label>
         </div>
-        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="ml-2 custom-select custom-select-sm w-auto">
-          <option disabled><T i18nKey="sort_type">#</T></option>
-          <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
-          <option value={SortType.New}><T i18nKey="new">#</T></option>
+        <select
+          value={this.state.sort}
+          onChange={linkEvent(this, this.handleSortChange)}
+          class="ml-2 custom-select custom-select-sm w-auto"
+        >
+          <option disabled>
+            <T i18nKey="sort_type">#</T>
+          </option>
+          <option value={SortType.Hot}>
+            <T i18nKey="hot">#</T>
+          </option>
+          <option value={SortType.New}>
+            <T i18nKey="new">#</T>
+          </option>
           <option disabled>─────</option>
-          <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
-          <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
-          <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
-          <option value={SortType.TopYear}><T i18nKey="year">#</T></option>
-          <option value={SortType.TopAll}><T i18nKey="all">#</T></option>
+          <option value={SortType.TopDay}>
+            <T i18nKey="top_day">#</T>
+          </option>
+          <option value={SortType.TopWeek}>
+            <T i18nKey="week">#</T>
+          </option>
+          <option value={SortType.TopMonth}>
+            <T i18nKey="month">#</T>
+          </option>
+          <option value={SortType.TopYear}>
+            <T i18nKey="year">#</T>
+          </option>
+          <option value={SortType.TopAll}>
+            <T i18nKey="all">#</T>
+          </option>
         </select>
       </div>
-    )
+    );
   }
 
   paginator() {
     return (
       <div class="my-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>
     );
   }
 
   get canAdmin(): boolean {
-    return UserService.Instance.user && this.state.site.admins.map(a => a.id).includes(UserService.Instance.user.id);
+    return (
+      UserService.Instance.user &&
+      this.state.site.admins
+        .map(a => a.id)
+        .includes(UserService.Instance.user.id)
+    );
   }
 
   handleEditClick(i: Main) {
@@ -358,22 +525,22 @@ export class Main extends Component<any, MainState> {
     this.setState(this.state);
   }
 
-  nextPage(i: Main) { 
+  nextPage(i: Main) {
     i.state.page++;
     i.state.loading = true;
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
-    window.scrollTo(0,0);
+    window.scrollTo(0, 0);
   }
 
-  prevPage(i: Main) { 
+  prevPage(i: Main) {
     i.state.page--;
     i.state.loading = true;
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
-    window.scrollTo(0,0);
+    window.scrollTo(0, 0);
   }
 
   handleSortChange(i: Main, event: any) {
@@ -383,7 +550,7 @@ export class Main extends Component<any, MainState> {
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
-    window.scrollTo(0,0);
+    window.scrollTo(0, 0);
   }
 
   handleTypeChange(i: Main, event: any) {
@@ -393,7 +560,7 @@ export class Main extends Component<any, MainState> {
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
-    window.scrollTo(0,0);
+    window.scrollTo(0, 0);
   }
 
   keepFetchingPosts() {
@@ -406,8 +573,8 @@ export class Main extends Component<any, MainState> {
       page: this.state.page,
       limit: fetchLimit,
       sort: SortType[this.state.sort],
-      type_: ListingType[this.state.type_]
-    }
+      type_: ListingType[this.state.type_],
+    };
     WebSocketService.Instance.getPosts(getPostsForm);
   }
 
@@ -430,7 +597,7 @@ export class Main extends Component<any, MainState> {
 
       // This means it hasn't been set up yet
       if (!res.site) {
-        this.context.router.history.push("/setup");
+        this.context.router.history.push('/setup');
       }
       this.state.site.admins = res.admins;
       this.state.site.site = res.site;
@@ -438,7 +605,6 @@ export class Main extends Component<any, MainState> {
       this.state.site.online = res.online;
       this.setState(this.state);
       document.title = `${WebSocketService.Instance.site.name}`;
-
     } else if (op == UserOperation.EditSite) {
       let res: SiteResponse = msg;
       this.state.site.site = res.site;
@@ -460,4 +626,3 @@ export class Main extends Component<any, MainState> {
     }
   }
 }
-
-- 
cgit v1.2.3