Styling, sidebar message.

server/src/websocket_server/server.rs

@@ -391,25 +391,25 @@ impl Handler<StandardMessage> for ChatServer {
     let json: Value = serde_json::from_str(&msg.msg)
       .expect("Couldn't parse message");
 
-    let data: &Value = &json["data"];
+    let data = &json["data"].to_string();
     let op = &json["op"].as_str().unwrap();
     let user_operation: UserOperation = UserOperation::from_str(&op).unwrap();
 
     let res: String = match user_operation {
       UserOperation::Login => {
-        let login: Login = serde_json::from_str(&data.to_string()).unwrap();
+        let login: Login = serde_json::from_str(data).unwrap();
         login.perform(self, msg.id)
       },
       UserOperation::Register => {
-        let register: Register = serde_json::from_str(&data.to_string()).unwrap();
+        let register: Register = serde_json::from_str(data).unwrap();
         register.perform(self, msg.id)
       },
       UserOperation::CreateCommunity => {
-        let create_community: CreateCommunity = serde_json::from_str(&data.to_string()).unwrap();
+        let create_community: CreateCommunity = serde_json::from_str(data).unwrap();
         create_community.perform(self, msg.id)
       },
       UserOperation::ListCommunities => {
-        let list_communities: ListCommunities = serde_json::from_str(&data.to_string()).unwrap();
+        let list_communities: ListCommunities = serde_json::from_str(data).unwrap();
         list_communities.perform(self, msg.id)
       },
       UserOperation::ListCategories => {
@@ -417,55 +417,55 @@ impl Handler<StandardMessage> for ChatServer {
         list_categories.perform(self, msg.id)
       },
       UserOperation::CreatePost => {
-        let create_post: CreatePost = serde_json::from_str(&data.to_string()).unwrap();
+        let create_post: CreatePost = serde_json::from_str(data).unwrap();
         create_post.perform(self, msg.id)
       },
       UserOperation::GetPost => {
-        let get_post: GetPost = serde_json::from_str(&data.to_string()).unwrap();
+        let get_post: GetPost = serde_json::from_str(data).unwrap();
         get_post.perform(self, msg.id)
       },
       UserOperation::GetCommunity => {
-        let get_community: GetCommunity = serde_json::from_str(&data.to_string()).unwrap();
+        let get_community: GetCommunity = serde_json::from_str(data).unwrap();
         get_community.perform(self, msg.id)
       },
       UserOperation::CreateComment => {
-        let create_comment: CreateComment = serde_json::from_str(&data.to_string()).unwrap();
+        let create_comment: CreateComment = serde_json::from_str(data).unwrap();
         create_comment.perform(self, msg.id)
       },
       UserOperation::EditComment => {
-        let edit_comment: EditComment = serde_json::from_str(&data.to_string()).unwrap();
+        let edit_comment: EditComment = serde_json::from_str(data).unwrap();
         edit_comment.perform(self, msg.id)
       },
       UserOperation::CreateCommentLike => {
-        let create_comment_like: CreateCommentLike = serde_json::from_str(&data.to_string()).unwrap();
+        let create_comment_like: CreateCommentLike = serde_json::from_str(data).unwrap();
         create_comment_like.perform(self, msg.id)
       },
       UserOperation::GetPosts => {
-        let get_posts: GetPosts = serde_json::from_str(&data.to_string()).unwrap();
+        let get_posts: GetPosts = serde_json::from_str(data).unwrap();
         get_posts.perform(self, msg.id)
       },
       UserOperation::CreatePostLike => {
-        let create_post_like: CreatePostLike = serde_json::from_str(&data.to_string()).unwrap();
+        let create_post_like: CreatePostLike = serde_json::from_str(data).unwrap();
         create_post_like.perform(self, msg.id)
       },
       UserOperation::EditPost => {
-        let edit_post: EditPost = serde_json::from_str(&data.to_string()).unwrap();
+        let edit_post: EditPost = serde_json::from_str(data).unwrap();
         edit_post.perform(self, msg.id)
       },
       UserOperation::EditCommunity => {
-        let edit_community: EditCommunity = serde_json::from_str(&data.to_string()).unwrap();
+        let edit_community: EditCommunity = serde_json::from_str(data).unwrap();
         edit_community.perform(self, msg.id)
       },
       UserOperation::FollowCommunity => {
-        let follow_community: FollowCommunity = serde_json::from_str(&data.to_string()).unwrap();
+        let follow_community: FollowCommunity = serde_json::from_str(data).unwrap();
         follow_community.perform(self, msg.id)
       },
       UserOperation::GetFollowedCommunities => {
-        let followed_communities: GetFollowedCommunities = serde_json::from_str(&data.to_string()).unwrap();
+        let followed_communities: GetFollowedCommunities = serde_json::from_str(data).unwrap();
         followed_communities.perform(self, msg.id)
       },
       UserOperation::GetUserDetails => {
-        let get_user_details: GetUserDetails = serde_json::from_str(&data.to_string()).unwrap();
+        let get_user_details: GetUserDetails = serde_json::from_str(data).unwrap();
         get_user_details.perform(self, msg.id)
       },
       // _ => {

ui/src/components/communities.tsx

@@ -45,7 +45,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>

ui/src/components/main.tsx

@@ -5,7 +5,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
 import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } 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>;
@@ -46,17 +46,15 @@ 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">
+          <div class="col-12 col-md-4">
-            <h4>A Landing message</h4>
+            {UserService.Instance.loggedIn ?
-            {UserService.Instance.loggedIn &&
               <div>
                 {this.state.loading ? 
-                <h4 class="mt-3"><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
+                <h4><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 =>
@@ -65,7 +63,8 @@ export class Main extends Component<any, State> {
                   </ul>
                 </div>
                 }
-              </div>
+              </div> :
+            this.landing()
             }
           </div>
         </div>
@@ -73,6 +72,21 @@ export class Main extends Component<any, State> {
     )
   }
 
+  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);

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-sm 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>

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)}  />

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>

ui/src/main.css

@@ -66,3 +66,12 @@ body {
   0% { transform: rotate(0deg); }
   100% {  transform: rotate(359deg); }
 }
+
+.dropdown-menu {
+  z-index: 2000;
+}
+
+.navbar-bg {
+  background-color: #222;
+}
+

ui/src/services/UserService.ts

@@ -25,10 +25,10 @@ export class UserService {
   }
 
   public logout() {
-    this.user = null;
+    this.user = undefined;
     Cookies.remove("jwt");
     console.log("Logged out.");
-    this.sub.next(null);
+    this.sub.next(undefined);
   }
 
   public get loggedIn(): boolean {