Adding trending communities.

- Fixes #29
- Communities fetching now has sort and limit.

1 files changed, 42 insertions, 14 deletions

diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 8faf858a..55066d00 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -2,13 +2,14 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces';
+import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { msgOp, repoUrl } from '../utils';
 
 interface State {
   subscribedCommunities: Array<CommunityUser>;
+  trendingCommunities: Array<Community>;
   loading: boolean;
 }
 
@@ -17,6 +18,7 @@ export class Main extends Component<any, State> {
   private subscription: Subscription;
   private emptyState: State = {
     subscribedCommunities: [],
+    trendingCommunities: [],
     loading: true
   }
 
@@ -36,6 +38,13 @@ export class Main extends Component<any, State> {
     if (UserService.Instance.loggedIn) {
       WebSocketService.Instance.getFollowedCommunities();
     }
+
+    let listCommunitiesForm: ListCommunitiesForm = {
+      sort: SortType[SortType.New],
+      limit: 8
+    }
+
+    WebSocketService.Instance.listCommunities(listCommunitiesForm);
   }
 
   componentWillUnmount() {
@@ -50,21 +59,22 @@ export class Main extends Component<any, State> {
             <PostListings />
           </div>
           <div class="col-12 col-md-4">
-            {UserService.Instance.loggedIn ?
+            {this.state.loading ? 
+            <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
+            <div>
+              {this.trendingCommunities()}
+              {UserService.Instance.loggedIn ?
               <div>
-                {this.state.loading ? 
-                <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
-                <div>
-                  <h4>Subscribed forums</h4>
-                  <ul class="list-unstyled"> 
-                    {this.state.subscribedCommunities.map(community =>
-                      <li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
-                    )}
-                  </ul>
-                </div>
-                }
+                <h4>Subscribed forums</h4>
+                <ul class="list-inline"> 
+                  {this.state.subscribedCommunities.map(community =>
+                    <li class="list-inline-item"><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
+                  )}
+                </ul>
               </div> :
-            this.landing()
+                this.landing()
+              }
+            </div>
             }
           </div>
         </div>
@@ -72,6 +82,19 @@ export class Main extends Component<any, State> {
     )
   }
 
+  trendingCommunities() {
+    return (
+      <div>
+        <h4>Trending forums</h4> 
+        <ul class="list-inline"> 
+          {this.state.trendingCommunities.map(community =>
+            <li class="list-inline-item"><Link to={`/community/${community.id}`}>{community.name}</Link></li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+
   landing() {
     return (
       <div>
@@ -99,6 +122,11 @@ export class Main extends Component<any, State> {
       this.state.subscribedCommunities = res.communities;
       this.state.loading = false;
       this.setState(this.state);
+    } else if (op == UserOperation.ListCommunities) {
+      let res: ListCommunitiesResponse = msg;
+      this.state.trendingCommunities = res.communities;
+      this.state.loading = false;
+      this.setState(this.state);
     }
   }
 }