Adding support for an /all route

- Fixes #85

ui/src/components/home.tsx

@@ -1,12 +1,20 @@
 import { Component } from 'inferno';
 import { Main } from './main';
+import { ListingType } from '../interfaces';
 
 export class Home extends Component<any, any> {
 
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
   render() {
     return (
-      <Main />
+      <Main type={this.listType()}/>
     )
   }
 
+  listType(): ListingType { 
+    return (this.props.match.path == '/all') ? ListingType.All : ListingType.Subscribed;
+  }
 }

ui/src/components/main.tsx

@@ -2,22 +2,27 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, GetRepliesResponse, GetRepliesForm } from '../interfaces';
+import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, GetRepliesResponse, GetRepliesForm, ListingType } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { msgOp, repoUrl, mdToHtml } from '../utils';
 
-interface State {
+
+interface MainProps {
+  type: ListingType;
+}
+
+interface MainState {
   subscribedCommunities: Array<CommunityUser>;
   trendingCommunities: Array<Community>;
   site: GetSiteResponse;
   loading: boolean;
 }
 
-export class Main extends Component<any, State> {
+export class Main extends Component<MainProps, MainState> {
 
   private subscription: Subscription;
-  private emptyState: State = {
+  private emptyState: MainState = {
     subscribedCommunities: [],
     trendingCommunities: [],
     site: {
@@ -83,7 +88,7 @@ export class Main extends Component<any, State> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-md-8">
-            <PostListings />
+            <PostListings type={this.props.type} />
           </div>
           <div class="col-12 col-md-4">
             {this.state.loading ? 

ui/src/components/navbar.tsx

@@ -71,7 +71,7 @@ export class Navbar extends Component<any, NavbarState> {
               {
               <li className="nav-item">
                 <Link class="nav-link" to="/inbox">🖂 
-                  {this.state.unreadCount> 0 && <span class="badge badge-light">{this.state.unreadCount}</span>}
+                  {this.state.unreadCount> 0 && <span class="ml-1 badge badge-light">{this.state.unreadCount}</span>}
                 </Link>
               </li>
             }

ui/src/components/post-listings.tsx

@@ -8,6 +8,7 @@ import { PostListing } from './post-listing';
 import { msgOp, fetchLimit } from '../utils';
 
 interface PostListingsProps {
+  type?: ListingType;
   communityId?: number;
 }
 
@@ -27,19 +28,19 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
     moderators: [],
     posts: [],
     sortType: SortType.Hot,
-    type_: this.props.communityId 
+    type_: (this.props.type !== undefined) ? this.props.type : 
-    ? ListingType.Community 
+      this.props.communityId 
-    : UserService.Instance.user
+        ? ListingType.Community 
-    ? ListingType.Subscribed 
+        : UserService.Instance.user
-    : ListingType.All,
+          ? ListingType.Subscribed 
-    page: 1,
+          : ListingType.All,
-    loading: true
+          page: 1,
+          loading: true
   }
 
   constructor(props: any, context: any) {
     super(props, context);
 
-
     this.state = this.emptyState;
 
     this.subscription = WebSocketService.Instance.subject
@@ -147,6 +148,11 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
   handleTypeChange(i: PostListings, event: any) {
     i.state.type_ = Number(event.target.value);
     i.state.page = 1;
+    if (i.state.type_ == ListingType.All) {
+      i.context.router.history.push('/all');
+    } else {
+      i.context.router.history.push('/');
+    }
     i.setState(i.state);
     i.refetch();
   }

ui/src/index.tsx

@@ -37,6 +37,7 @@ class Index extends Component<any, any> {
         <Navbar />
         <div class="mt-3 p-0">
           <Switch>
+            <Route exact path="/all" component={Home} />
             <Route exact path="/" component={Home} />
             <Route path={`/login`} component={Login} />
             <Route path={`/create_post`} component={CreatePost} />