Merge branch 'dev' into moderation

8 files changed, 87 insertions, 33 deletions

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index cf42238e..4d2512cc 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -2,7 +2,7 @@ import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces';
+import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces';
 import { WebSocketService } from '../services';
 import { msgOp } from '../utils';
 
@@ -30,7 +30,12 @@ export class Communities extends Component<any, CommunitiesState> {
         (err) => console.error(err),
         () => console.log('complete')
     );
-    WebSocketService.Instance.listCommunities();
+
+    let listCommunitiesForm: ListCommunitiesForm = {
+      sort: SortType[SortType.TopAll]
+    }
+
+    WebSocketService.Instance.listCommunities(listCommunitiesForm);
 
   }
 
@@ -45,7 +50,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   render() {
     return (
-      <div class="container-fluid">
+      <div class="container">
         {this.state.loading ? 
         <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
         <div>
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index b5b222c6..056c29dc 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -155,6 +155,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     if (msg.error) {
       alert(msg.error);
       this.state.loading = false;
+      this.setState(this.state);
       return;
     } else if (op == UserOperation.ListCategories){
       let res: ListCategoriesResponse = msg;
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 2443369e..2d2339f5 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -97,13 +97,13 @@ export class Login extends Component<any, State> {
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">Username</label>
           <div class="col-sm-10">
-            <input type="text" class="form-control" value={this.state.registerForm.username} onInput={linkEvent(this, this.handleRegisterUsernameChange)} required minLength={3} />
+            <input type="text" class="form-control" value={this.state.registerForm.username} onInput={linkEvent(this, this.handleRegisterUsernameChange)} required minLength={3} pattern="[a-zA-Z0-9_]+" />
           </div>
         </div>
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">Email</label>
           <div class="col-sm-10">
-            <input type="email" class="form-control" value={this.state.registerForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} />
+            <input type="email" class="form-control" placeholder="Optional" value={this.state.registerForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} />
           </div>
         </div>
         <div class="form-group row">
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 477eec65..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 } from '../utils';
+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() {
@@ -46,26 +55,26 @@ export class Main extends Component<any, State> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-md-9">
+          <div class="col-12 col-md-8">
             <PostListings />
           </div>
-          <div class="col-12 col-md-3">
-            <h4>A Landing message</h4>
-            {UserService.Instance.loggedIn &&
+          <div class="col-12 col-md-4">
+            {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 class="mt-3"><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
-                <div>
-                  <hr />
-                  <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>
-                }
-              </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()
+              }
+            </div>
             }
           </div>
         </div>
@@ -73,6 +82,34 @@ 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>
+        <h4>Welcome to 
+          <svg class="icon mx-2"><use xlinkHref="#icon-mouse"></use></svg>
+          <a href={repoUrl}>Lemmy<sup>Beta</sup></a>
+        </h4>
+        <p>Lemmy is a <a href="https://en.wikipedia.org/wiki/Link_aggregation">link aggregator</a> / reddit alternative, intended to work in the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>.</p>
+        <p>Its self-hostable, has live-updating comment threads, and is tiny (<code>~80kB</code>). Federation into the ActivityPub network is on the roadmap.</p>
+        <p>This is a <b>very early beta version</b>, and a lot of features are currently broken or missing.</p>
+        <p>Suggest new features or report bugs <a href={repoUrl}>here.</a></p>
+        <p>Made with <a href="https://www.rust-lang.org">Rust</a>, <a href="https://actix.rs/">Actix</a>, <a href="https://www.infernojs.org">Inferno</a>, <a href="https://www.typescriptlang.org/">Typescript</a>.</p>
+      </div>
+    )
+  }
 
   parseMessage(msg: any) {
     console.log(msg);
@@ -85,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);
     }
   }
 }
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index ca0c5a2a..5c51b699 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -25,7 +25,7 @@ export class Navbar extends Component<any, NavbarState> {
 
     // Subscribe to user changes
     UserService.Instance.sub.subscribe(user => {
-      let loggedIn: boolean = user !== null;
+      let loggedIn: boolean = user !== undefined;
       this.setState({isLoggedIn: loggedIn});
     });
   }
@@ -40,7 +40,7 @@ export class Navbar extends Component<any, NavbarState> {
   // TODO toggle css collapse
   navbar() {
     return (
-      <nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow">
+      <nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3">
         <a title={version} class="navbar-brand" href="#">
           <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg>
           Lemmy
@@ -74,7 +74,7 @@ export class Navbar extends Component<any, NavbarState> {
                 <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a>
               </div>
             </li> : 
-              <Link class="nav-link" to="/login">Login</Link>
+            <Link class="nav-link" to="/login">Login / Sign up</Link>
             }
           </ul>
         </div>
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 9845a1b1..67a3f42e 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -1,7 +1,7 @@
 import { Component, linkEvent } from 'inferno';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces';
+import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType } from '../interfaces';
 import { WebSocketService } from '../services';
 import { msgOp } from '../utils';
 import * as autosize from 'autosize';
@@ -56,7 +56,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         () => console.log('complete')
       );
 
-    WebSocketService.Instance.listCommunities();
+      let listCommunitiesForm: ListCommunitiesForm = {
+        sort: SortType[SortType.TopAll]
+      }
+
+      WebSocketService.Instance.listCommunities(listCommunitiesForm);
   }
 
   componentDidMount() {
@@ -151,7 +155,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   parseMessage(msg: any) {
     let op: UserOperation = msgOp(msg);
     if (msg.error) {
+      alert(msg.error);
       this.state.loading = false;
+      this.setState(this.state);
       return;
     } else if (op == UserOperation.ListCommunities) {
       let res: ListCommunitiesResponse = msg;
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index f36893f6..5ca3f770 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -101,17 +101,17 @@ export class Post extends Component<any, PostState> {
   sortRadios() {
     return (
       <div class="btn-group btn-group-toggle mb-3">
-        <label className={`btn btn-sm btn-secondary ${this.state.commentSort === CommentSortType.Hot && 'active'}`}>Hot
+        <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Hot && 'active'}`}>Hot
           <input type="radio" value={CommentSortType.Hot}
           checked={this.state.commentSort === CommentSortType.Hot} 
           onChange={linkEvent(this, this.handleCommentSortChange)}  />
         </label>
-        <label className={`btn btn-sm btn-secondary ${this.state.commentSort === CommentSortType.Top && 'active'}`}>Top
+        <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Top && 'active'}`}>Top
           <input type="radio" value={CommentSortType.Top}
           checked={this.state.commentSort === CommentSortType.Top} 
           onChange={linkEvent(this, this.handleCommentSortChange)}  />
         </label>
-        <label className={`btn btn-sm btn-secondary ${this.state.commentSort === CommentSortType.New && 'active'}`}>New
+        <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.New && 'active'}`}>New
           <input type="radio" value={CommentSortType.New}
           checked={this.state.commentSort === CommentSortType.New} 
           onChange={linkEvent(this, this.handleCommentSortChange)}  />
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 6fd2bb5c..68fc458b 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -56,7 +56,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               }
             </ul>
           }
-        <ul class="list-inline">
+        <ul class="mt-1 list-inline">
           <li className="list-inline-item"><Link className="badge badge-light" to="/communities">{community.category_name}</Link></li>
           <li className="list-inline-item badge badge-light">{community.number_of_subscribers} Subscribers</li>
           <li className="list-inline-item badge badge-light">{community.number_of_posts} Posts</li>