Reworking some UI. Adding proper trending communities with hot rank.

- Breaking out subscribed and all into radios. Fixes #142

8 files changed, 46 insertions, 33 deletions

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 03e124f1..190f8e3d 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -66,17 +66,17 @@ export class Communities extends Component<any, CommunitiesState> {
         {this.state.loading ? 
         <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
         <div>
-          <h5>Communities</h5>
+          <h5>List of communities</h5>
           <div class="table-responsive">
             <table id="community_table" class="table table-sm table-hover">
               <thead class="pointer">
                 <tr>
                   <th>Name</th>
-                  <th>Title</th>
+                  <th class="d-none d-lg-table-cell">Title</th>
                   <th>Category</th>
-                  <th class="text-right d-none d-md-table-cell">Subscribers</th>
-                  <th class="text-right d-none d-md-table-cell">Posts</th>
-                  <th class="text-right d-none d-md-table-cell">Comments</th>
+                  <th class="text-right">Subscribers</th>
+                  <th class="text-right d-none d-lg-table-cell">Posts</th>
+                  <th class="text-right d-none d-lg-table-cell">Comments</th>
                   <th></th>
                 </tr>
               </thead>
@@ -84,11 +84,11 @@ export class Communities extends Component<any, CommunitiesState> {
                 {this.state.communities.map(community =>
                   <tr>
                     <td><Link to={`/c/${community.name}`}>{community.name}</Link></td>
-                    <td>{community.title}</td>
+                    <td class="d-none d-lg-table-cell">{community.title}</td>
                     <td>{community.category_name}</td>
-                    <td class="text-right d-none d-md-table-cell">{community.number_of_subscribers}</td>
-                    <td class="text-right d-none d-md-table-cell">{community.number_of_posts}</td>
-                    <td class="text-right d-none d-md-table-cell">{community.number_of_comments}</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)}>Unsubscribe</span> : 
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index fa8ae43b..93cdbd92 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -124,7 +124,7 @@ export class Community extends Component<any, State> {
   selects() {
     return (
       <div className="mb-2">
-        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto">
+        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto">
           <option disabled>Sort Type</option>
           <option value={SortType.Hot}>Hot</option>
           <option value={SortType.New}>New</option>
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 48a9d366..659a4a20 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -80,12 +80,12 @@ export class Inbox extends Component<any, InboxState> {
   selects() {
     return (
       <div className="mb-2">
-        <select value={this.state.unreadType} onChange={linkEvent(this, this.handleUnreadTypeChange)} class="custom-select w-auto">
+        <select value={this.state.unreadType} onChange={linkEvent(this, this.handleUnreadTypeChange)} class="custom-select custom-select-sm w-auto">
           <option disabled>Type</option>
           <option value={UnreadType.Unread}>Unread</option>
           <option value={UnreadType.All}>All</option>
         </select>
-        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto ml-2">
+        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
           <option disabled>Sort Type</option>
           <option value={SortType.New}>New</option>
           <option value={SortType.TopDay}>Top Day</option>
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 5c0b8dd1..b2ad70a1 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -95,7 +95,7 @@ export class Login extends Component<any, State> {
             </div>
           </div>
         </form>
-        Forgot your password or deleted your account? Reset your password. TODO
+        {/* Forgot your password or deleted your account? Reset your password. TODO */}
       </div>
     );
   }
@@ -161,7 +161,6 @@ export class Login extends Component<any, State> {
     event.preventDefault();
     i.state.registerLoading = true;
     i.setState(i.state);
-    event.preventDefault();
 
     let endTimer = new Date().getTime();
     let elapsed = endTimer - i.state.registerForm.spam_timeri;
@@ -209,14 +208,14 @@ export class Login extends Component<any, State> {
       return;
     } else {
       if (op == UserOperation.Login) {
-        this.state.loginLoading = false;
-        this.state.registerLoading = false;
+        this.state = this.emptyState;
+        this.setState(this.state);
         let res: LoginResponse = msg;
         UserService.Instance.login(res);
         this.props.history.push('/');
       } else if (op == UserOperation.Register) {
-        this.state.loginLoading = false;
-        this.state.registerLoading = false;
+        this.state = this.emptyState;
+        this.setState(this.state);
         let res: LoginResponse = msg;
         UserService.Instance.login(res);
         this.props.history.push('/communities');
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 44025fef..cd679ecb 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -87,7 +87,7 @@ export class Main extends Component<any, MainState> {
     }
 
     let listCommunitiesForm: ListCommunitiesForm = {
-      sort: SortType[SortType.New],
+      sort: SortType[SortType.Hot],
       limit: 6
     }
 
@@ -247,7 +247,29 @@ export class Main extends Component<any, MainState> {
   selects() {
     return (
       <div className="mb-2">
-        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto">
+        <div class="btn-group btn-group-toggle">
+          <label className={`btn btn-sm btn-secondary 
+            ${this.state.type_ == ListingType.Subscribed && 'active'}
+            ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
+            `}>
+            <input type="radio" 
+              value={ListingType.Subscribed}
+              checked={this.state.type_ == ListingType.Subscribed}
+              onChange={linkEvent(this, this.handleTypeChange)}
+              disabled={UserService.Instance.user == undefined}
+            />
+            Subscribed
+          </label>
+          <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)}
+            /> 
+            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>Sort Type</option>
           <option value={SortType.Hot}>Hot</option>
           <option value={SortType.New}>New</option>
@@ -258,14 +280,6 @@ export class Main extends Component<any, MainState> {
           <option value={SortType.TopYear}>Year</option>
           <option value={SortType.TopAll}>All</option>
         </select>
-        { UserService.Instance.user &&
-          <select value={this.state.type_} onChange={linkEvent(this, this.handleTypeChange)} class="ml-2 custom-select w-auto">
-            <option disabled>Type</option>
-            <option value={ListingType.All}>All</option>
-            <option value={ListingType.Subscribed}>Subscribed</option>
-          </select>
-
-        }
       </div>
     )
   }
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index a4b389e7..f066f6ed 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -97,13 +97,13 @@ export class Search extends Component<any, SearchState> {
   selects() {
     return (
       <div className="mb-2">
-        <select value={this.state.type_} onChange={linkEvent(this, this.handleTypeChange)} class="custom-select w-auto">
+        <select value={this.state.type_} onChange={linkEvent(this, this.handleTypeChange)} class="custom-select custom-select-sm w-auto">
           <option disabled>Type</option>
           <option value={SearchType.Both}>Both</option>
           <option value={SearchType.Comments}>Comments</option>
           <option value={SearchType.Posts}>Posts</option>
         </select>
-        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto ml-2">
+        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
           <option disabled>Sort Type</option>
           <option value={SortType.New}>New</option>
           <option value={SortType.TopDay}>Top Day</option>
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index b55bf41c..92ad5335 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -141,14 +141,14 @@ export class User extends Component<any, UserState> {
   selects() {
     return (
       <div className="mb-2">
-        <select value={this.state.view} onChange={linkEvent(this, this.handleViewChange)} class="custom-select w-auto">
+        <select value={this.state.view} onChange={linkEvent(this, this.handleViewChange)} class="custom-select custom-select-sm w-auto">
           <option disabled>View</option>
           <option value={View.Overview}>Overview</option>
           <option value={View.Comments}>Comments</option>
           <option value={View.Posts}>Posts</option>
           <option value={View.Saved}>Saved</option>
         </select>
-        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto ml-2">
+        <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
           <option disabled>Sort Type</option>
           <option value={SortType.New}>New</option>
           <option value={SortType.TopDay}>Top Day</option>
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 76605d8b..b744ac7d 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -36,7 +36,7 @@ class Index extends Component<any, any> {
     return (
       <HashRouter>
         <Navbar />
-        <div class="mt-3 p-0">
+        <div class="mt-1 p-0">
           <Switch>
             <Route path={`/home/type/:type/sort/:sort/page/:page`} component={Main} />
             <Route exact path={`/`} component={Main} />