From 49bf16e7d451388d894f93a994f3bf18571f9594 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Sun, 7 Apr 2019 22:19:02 -0700
Subject: Adding user details / overview page.

- Fixes #19
---
 ui/package.json                        |   3 +
 ui/src/components/comment-form.tsx     |  93 +++++++++++
 ui/src/components/comment-node.tsx     | 148 +++++++++++++++++
 ui/src/components/comment-nodes.tsx    |  30 ++++
 ui/src/components/communities.tsx      |  12 +-
 ui/src/components/community-form.tsx   |  22 +--
 ui/src/components/community.tsx        |  12 +-
 ui/src/components/create-community.tsx |   4 +-
 ui/src/components/create-post.tsx      |   4 +-
 ui/src/components/home.tsx             |   1 -
 ui/src/components/login.tsx            |  20 +--
 ui/src/components/main.tsx             |  10 +-
 ui/src/components/moment-time.tsx      |   4 +-
 ui/src/components/navbar.tsx           |   7 +-
 ui/src/components/post-form.tsx        |  23 ++-
 ui/src/components/post-listing.tsx     |  21 ++-
 ui/src/components/post-listings.tsx    |  36 ++---
 ui/src/components/post.tsx             | 279 ++-------------------------------
 ui/src/components/sidebar.tsx          |  10 +-
 ui/src/components/user.tsx             | 264 +++++++++++++++++++++++++++++++
 ui/src/index.tsx                       |   6 +-
 ui/src/interfaces.ts                   |  41 ++++-
 ui/src/main.css                        |   9 ++
 ui/src/services/WebSocketService.ts    |   9 +-
 ui/src/utils.ts                        |   1 -
 ui/yarn.lock                           |  36 +++++
 26 files changed, 740 insertions(+), 365 deletions(-)
 create mode 100644 ui/src/components/comment-form.tsx
 create mode 100644 ui/src/components/comment-node.tsx
 create mode 100644 ui/src/components/comment-nodes.tsx
 create mode 100644 ui/src/components/user.tsx

(limited to 'ui')

diff --git a/ui/package.json b/ui/package.json
index 1b82db12..b5bb14ef 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,7 +15,10 @@
   },
   "engineStrict": true,
   "dependencies": {
+    "@types/autosize": "^3.0.6",
     "@types/js-cookie": "^2.2.1",
+    "@types/jwt-decode": "^2.2.1",
+    "@types/markdown-it": "^0.0.7",
     "autosize": "^4.0.2",
     "classcat": "^1.1.3",
     "dotenv": "^6.1.0",
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx
new file mode 100644
index 00000000..a87dd356
--- /dev/null
+++ b/ui/src/components/comment-form.tsx
@@ -0,0 +1,93 @@
+import { Component, linkEvent } from 'inferno';
+import { CommentNode as CommentNodeI, CommentForm as CommentFormI } from '../interfaces';
+import { WebSocketService } from '../services';
+import * as autosize from 'autosize';
+
+interface CommentFormProps {
+  postId?: number;
+  node?: CommentNodeI;
+  onReplyCancel?(): any;
+  edit?: boolean;
+}
+
+interface CommentFormState {
+  commentForm: CommentFormI;
+  buttonTitle: string;
+}
+
+export class CommentForm extends Component<CommentFormProps, CommentFormState> {
+
+  private emptyState: CommentFormState = {
+    commentForm: {
+      auth: null,
+      content: null,
+      post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId
+    },
+    buttonTitle: !this.props.node ? "Post" : this.props.edit ? "Edit" : "Reply"
+  }
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = this.emptyState;
+
+    if (this.props.node) {
+      if (this.props.edit) {
+        this.state.commentForm.edit_id = this.props.node.comment.id;
+        this.state.commentForm.parent_id = this.props.node.comment.parent_id;
+        this.state.commentForm.content = this.props.node.comment.content;
+      } else {
+        // A reply gets a new parent id
+        this.state.commentForm.parent_id = this.props.node.comment.id;
+      }
+    }  
+  }
+
+  componentDidMount() {
+    autosize(document.querySelectorAll('textarea'));
+  }
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
+          <div class="form-group row">
+            <div class="col-sm-12">
+              <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} placeholder="Comment here" required />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12">
+              <button type="submit" class="btn btn-sm btn-secondary mr-2">{this.state.buttonTitle}</button>
+              {this.props.node && <button type="button" class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}>Cancel</button>}
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+  handleCommentSubmit(i: CommentForm, event: any) {
+    if (i.props.edit) {
+      WebSocketService.Instance.editComment(i.state.commentForm);
+    } else {
+      WebSocketService.Instance.createComment(i.state.commentForm);
+    }
+
+    i.state.commentForm.content = undefined;
+    i.setState(i.state);
+    event.target.reset();
+    if (i.props.node) {
+      i.props.onReplyCancel();
+    }
+  }
+
+  handleCommentContentChange(i: CommentForm, event: any) {
+    i.state.commentForm.content = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleReplyCancel(i: CommentForm) {
+    i.props.onReplyCancel();
+  }
+}
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
new file mode 100644
index 00000000..55be7621
--- /dev/null
+++ b/ui/src/components/comment-node.tsx
@@ -0,0 +1,148 @@
+import { Component, linkEvent } from 'inferno';
+import { Link } from 'inferno-router';
+import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI } from '../interfaces';
+import { WebSocketService, UserService } from '../services';
+import { mdToHtml } from '../utils';
+import { MomentTime } from './moment-time';
+import { CommentForm } from './comment-form';
+import { CommentNodes } from './comment-nodes';
+
+interface CommentNodeState {
+  showReply: boolean;
+  showEdit: boolean;
+}
+
+interface CommentNodeProps {
+  node: CommentNodeI;
+  noIndent?: boolean;
+  viewOnly?: boolean;
+}
+
+export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
+
+  private emptyState: CommentNodeState = {
+    showReply: false,
+    showEdit: false
+  }
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = this.emptyState;
+    this.handleReplyCancel = this.handleReplyCancel.bind(this);
+    this.handleCommentLike = this.handleCommentLike.bind(this);
+    this.handleCommentDisLike = this.handleCommentDisLike.bind(this);
+  }
+
+  render() {
+    let node = this.props.node;
+    return (
+      <div id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
+        <div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
+          <div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>▲</div>
+          <div>{node.comment.score}</div>
+          <div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>▼</div>
+        </div>
+        <div className="details ml-4">
+          <ul class="list-inline mb-0 text-muted small">
+            <li className="list-inline-item">
+              <Link to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
+            </li>
+            <li className="list-inline-item">
+              <span>(
+                <span className="text-info">+{node.comment.upvotes}</span>
+                <span> | </span>
+                <span className="text-danger">-{node.comment.downvotes}</span>
+                <span>) </span>
+              </span>
+            </li>
+            <li className="list-inline-item">
+              <span><MomentTime data={node.comment} /></span>
+            </li>
+          </ul>
+          {this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} />}
+          {!this.state.showEdit &&
+            <div>
+              <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.content)} />
+              <ul class="list-inline mb-1 text-muted small font-weight-bold">
+                {!this.props.viewOnly && 
+                  <span class="mr-2">
+                    <li className="list-inline-item">
+                      <span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
+                    </li>
+                    {this.myComment && 
+                      <li className="list-inline-item">
+                        <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
+                      </li>
+                    }
+                    {this.myComment &&
+                      <li className="list-inline-item">
+                        <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span>
+                      </li>
+                    }
+                  </span>
+                }
+                <li className="list-inline-item">
+                  <Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`} target="_blank">link</Link>
+                </li>
+              </ul>
+            </div>
+          }
+        </div>
+        {this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} />}
+        {this.props.node.children && <CommentNodes nodes={this.props.node.children} />}
+      </div>
+    )
+  }
+
+  private get myComment(): boolean {
+    return UserService.Instance.loggedIn && this.props.node.comment.creator_id == UserService.Instance.user.id;
+  }
+
+  handleReplyClick(i: CommentNode) {
+    i.state.showReply = true;
+    i.setState(i.state);
+  }
+
+  handleEditClick(i: CommentNode) {
+    i.state.showEdit = true;
+    i.setState(i.state);
+  }
+
+  handleDeleteClick(i: CommentNode) {
+    let deleteForm: CommentFormI = {
+      content: "*deleted*",
+      edit_id: i.props.node.comment.id,
+      post_id: i.props.node.comment.post_id,
+      parent_id: i.props.node.comment.parent_id,
+      auth: null
+    };
+    WebSocketService.Instance.editComment(deleteForm);
+  }
+
+  handleReplyCancel() {
+    this.state.showReply = false;
+    this.state.showEdit = false;
+    this.setState(this.state);
+  }
+
+
+  handleCommentLike(i: CommentNodeI) {
+
+    let form: CommentLikeForm = {
+      comment_id: i.comment.id,
+      post_id: i.comment.post_id,
+      score: (i.comment.my_vote == 1) ? 0 : 1
+    };
+    WebSocketService.Instance.likeComment(form);
+  }
+
+  handleCommentDisLike(i: CommentNodeI) {
+    let form: CommentLikeForm = {
+      comment_id: i.comment.id,
+      post_id: i.comment.post_id,
+      score: (i.comment.my_vote == -1) ? 0 : -1
+    };
+    WebSocketService.Instance.likeComment(form);
+  }
+}
diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx
new file mode 100644
index 00000000..76d5c57e
--- /dev/null
+++ b/ui/src/components/comment-nodes.tsx
@@ -0,0 +1,30 @@
+import { Component } from 'inferno';
+import { CommentNode as CommentNodeI } from '../interfaces';
+import { CommentNode } from './comment-node';
+
+interface CommentNodesState {
+}
+
+interface CommentNodesProps {
+  nodes: Array<CommentNodeI>;
+  noIndent?: boolean;
+  viewOnly?: boolean;
+}
+
+export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div className="comments">
+        {this.props.nodes.map(node =>
+          <CommentNode node={node} noIndent={this.props.noIndent} viewOnly={this.props.viewOnly}/>
+        )}
+      </div>
+    )
+  }
+}
+
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index c3cde177..b81b11cd 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -2,9 +2,9 @@ import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces';
-import { WebSocketService, UserService } from '../services';
-import { msgOp, hotRank,mdToHtml } from '../utils';
+import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces';
+import { WebSocketService } from '../services';
+import { msgOp } from '../utils';
 
 declare const Sortable: any;
 
@@ -18,7 +18,7 @@ export class Communities extends Component<any, CommunitiesState> {
     communities: []
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
     this.subscription = WebSocketService.Instance.subject
@@ -32,6 +32,10 @@ export class Communities extends Component<any, CommunitiesState> {
 
   }
 
+  componentWillUnmount() {
+    this.subscription.unsubscribe();
+  }
+
   componentDidMount() {
     let table = document.querySelector('#community_table');
     Sortable.initTable(table);
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index 0cf67983..6250ef9c 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -2,16 +2,16 @@ import { Component, linkEvent } from 'inferno';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
 import { CommunityForm as CommunityFormI, UserOperation, Category, ListCategoriesResponse, CommunityResponse } from '../interfaces';
-import { WebSocketService, UserService } from '../services';
+import { WebSocketService } from '../services';
 import { msgOp } from '../utils';
 
 import { Community } from '../interfaces';
 
 interface CommunityFormProps {
   community?: Community; // If a community is given, that means this is an edit
-  onCancel?();
-  onCreate?(id: number);
-  onEdit?(community: Community);
+  onCancel?(): any;
+  onCreate?(id: number): any;
+  onEdit?(community: Community): any;
 }
 
 interface CommunityFormState {
@@ -31,7 +31,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     categories: []
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
@@ -104,7 +104,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     );
   }
 
-  handleCreateCommunitySubmit(i: CommunityForm, event) {
+  handleCreateCommunitySubmit(i: CommunityForm, event: any) {
     event.preventDefault();
     if (i.props.community) {
       WebSocketService.Instance.editCommunity(i.state.communityForm);
@@ -113,27 +113,27 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     }
   }
 
-  handleCommunityNameChange(i: CommunityForm, event) {
+  handleCommunityNameChange(i: CommunityForm, event: any) {
     i.state.communityForm.name = event.target.value;
     i.setState(i.state);
   }
 
-  handleCommunityTitleChange(i: CommunityForm, event) {
+  handleCommunityTitleChange(i: CommunityForm, event: any) {
     i.state.communityForm.title = event.target.value;
     i.setState(i.state);
   }
 
-  handleCommunityDescriptionChange(i: CommunityForm, event) {
+  handleCommunityDescriptionChange(i: CommunityForm, event: any) {
     i.state.communityForm.description = event.target.value;
     i.setState(i.state);
   }
 
-  handleCommunityCategoryChange(i: CommunityForm, event) {
+  handleCommunityCategoryChange(i: CommunityForm, event: any) {
     i.state.communityForm.category_id = Number(event.target.value);
     i.setState(i.state);
   }
 
-  handleCancel(i: CommunityForm, event) {
+  handleCancel(i: CommunityForm) {
     i.props.onCancel();
   }
 
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 0d6d353d..ed693c55 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -1,13 +1,11 @@
-import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
+import { Component } from 'inferno';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse, Post, GetPostsForm, ListingSortType, ListingType, GetPostsResponse, CreatePostLikeForm, CreatePostLikeResponse, CommunityUser} from '../interfaces';
-import { WebSocketService, UserService } from '../services';
-import { MomentTime } from './moment-time';
+import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse,  CommunityUser} from '../interfaces';
+import { WebSocketService } from '../services';
 import { PostListings } from './post-listings';
 import { Sidebar } from './sidebar';
-import { msgOp, mdToHtml } from '../utils';
+import { msgOp } from '../utils';
 
 interface State {
   community: CommunityI;
@@ -36,7 +34,7 @@ export class Community extends Component<any, State> {
     communityId: Number(this.props.match.params.id)
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index e98352a2..5f397411 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -1,9 +1,9 @@
-import { Component, linkEvent } from 'inferno';
+import { Component } from 'inferno';
 import { CommunityForm } from './community-form';
 
 export class CreateCommunity extends Component<any, any> {
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
     this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
   }
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index 784465a0..041ffd17 100644
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -1,9 +1,9 @@
-import { Component, linkEvent } from 'inferno';
+import { Component } from 'inferno';
 import { PostForm } from './post-form';
 
 export class CreatePost extends Component<any, any> {
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
     this.handlePostCreate = this.handlePostCreate.bind(this);
   }
diff --git a/ui/src/components/home.tsx b/ui/src/components/home.tsx
index 356534f7..8fced5be 100644
--- a/ui/src/components/home.tsx
+++ b/ui/src/components/home.tsx
@@ -1,5 +1,4 @@
 import { Component } from 'inferno';
-import { repoUrl } from '../utils';
 import { Main } from './main';
 
 export class Home extends Component<any, any> {
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 30b0aabc..0cb02616 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -25,7 +25,7 @@ let emptyState: State = {
 export class Login extends Component<any, State> {
   private subscription: Subscription;
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = emptyState;
@@ -122,42 +122,42 @@ export class Login extends Component<any, State> {
     );
   }
 
-  handleLoginSubmit(i: Login, event) {
+  handleLoginSubmit(i: Login, event: any) {
     event.preventDefault();
     WebSocketService.Instance.login(i.state.loginForm);
   }
 
-  handleLoginUsernameChange(i: Login, event) {
+  handleLoginUsernameChange(i: Login, event: any) {
     i.state.loginForm.username_or_email = event.target.value;
     i.setState(i.state);
   }
 
-  handleLoginPasswordChange(i: Login, event) {
+  handleLoginPasswordChange(i: Login, event: any) {
     i.state.loginForm.password = event.target.value;
     i.setState(i.state);
   }
 
-  handleRegisterSubmit(i: Login, event) {
+  handleRegisterSubmit(i: Login, event: any) {
     event.preventDefault();
     WebSocketService.Instance.register(i.state.registerForm);
   }
 
-  handleRegisterUsernameChange(i: Login, event) {
+  handleRegisterUsernameChange(i: Login, event: any) {
     i.state.registerForm.username = event.target.value;
     i.setState(i.state);
   }
 
-  handleRegisterEmailChange(i: Login, event) {
+  handleRegisterEmailChange(i: Login, event: any) {
     i.state.registerForm.email = event.target.value;
     i.setState(i.state);
   }
 
-  handleRegisterPasswordChange(i: Login, event) {
+  handleRegisterPasswordChange(i: Login, event: any) {
     i.state.registerForm.password = event.target.value;
     i.setState(i.state);
   }
 
-  handleRegisterPasswordVerifyChange(i: Login, event) {
+  handleRegisterPasswordVerifyChange(i: Login, event: any) {
     i.state.registerForm.password_verify = event.target.value;
     i.setState(i.state);
   }
@@ -170,7 +170,7 @@ export class Login extends Component<any, State> {
     } else {
       if (op == UserOperation.Register || op == UserOperation.Login) {
         let res: LoginResponse = msg;
-        UserService.Instance.login(msg);
+        UserService.Instance.login(res);
         this.props.history.push('/');
       }
     }
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index b7b0a562..aa3c3a8c 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -1,13 +1,11 @@
-import { Component, linkEvent } from 'inferno';
+import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse, Post, GetPostsForm, ListingSortType, ListingType, GetPostsResponse, CreatePostLikeForm, CreatePostLikeResponse, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces';
+import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { MomentTime } from './moment-time';
 import { PostListings } from './post-listings';
-import { Sidebar } from './sidebar';
-import { msgOp, mdToHtml } from '../utils';
+import { msgOp } from '../utils';
 
 interface State {
   subscribedCommunities: Array<CommunityUser>;
@@ -20,7 +18,7 @@ export class Main extends Component<any, State> {
     subscribedCommunities: []
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
diff --git a/ui/src/components/moment-time.tsx b/ui/src/components/moment-time.tsx
index e0886cbc..f07f04a3 100644
--- a/ui/src/components/moment-time.tsx
+++ b/ui/src/components/moment-time.tsx
@@ -1,4 +1,4 @@
-import { Component, linkEvent } from 'inferno';
+import { Component } from 'inferno';
 import * as moment from 'moment';
 
 interface MomentTimeProps {
@@ -10,7 +10,7 @@ interface MomentTimeProps {
 
 export class MomentTime extends Component<MomentTimeProps, any> {
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
   }
 
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 2032d49b..9754c935 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -5,7 +5,7 @@ import { UserService } from '../services';
 
 export class Navbar extends Component<any, any> {
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
     this.state = {isLoggedIn: UserService.Instance.loggedIn, expanded: false};
 
@@ -62,12 +62,11 @@ export class Navbar extends Component<any, any> {
     );
   }
 
-  handleLogoutClick(i: Navbar, event) {
+  handleLogoutClick() {
     UserService.Instance.logout();
-    // i.props.history.push('/');
   }
 
-  expandNavbar(i: Navbar, event) {
+  expandNavbar(i: Navbar) {
     i.state.expanded = !i.state.expanded;
     i.setState(i.state);
   }
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index a8621ced..1f23cae0 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -2,15 +2,14 @@ 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 { WebSocketService, UserService } from '../services';
+import { WebSocketService } from '../services';
 import { msgOp } from '../utils';
-import { MomentTime } from './moment-time';
 
 interface PostFormProps {
   post?: Post; // If a post is given, that means this is an edit
-  onCancel?();
-  onCreate?(id: number);
-  onEdit?(post: Post);
+  onCancel?(): any;
+  onCreate?(id: number): any;
+  onEdit?(post: Post): any;
 }
 
 interface PostFormState {
@@ -30,7 +29,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     communities: []
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
@@ -104,7 +103,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     );
   }
 
-  handlePostSubmit(i: PostForm, event) {
+  handlePostSubmit(i: PostForm, event: any) {
     event.preventDefault();
     if (i.props.post) {
       WebSocketService.Instance.editPost(i.state.postForm);
@@ -113,27 +112,27 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     }
   }
 
-  handlePostUrlChange(i: PostForm, event) {
+  handlePostUrlChange(i: PostForm, event: any) {
     i.state.postForm.url = event.target.value;
     i.setState(i.state);
   }
 
-  handlePostNameChange(i: PostForm, event) {
+  handlePostNameChange(i: PostForm, event: any) {
     i.state.postForm.name = event.target.value;
     i.setState(i.state);
   }
 
-  handlePostBodyChange(i: PostForm, event) {
+  handlePostBodyChange(i: PostForm, event: any) {
     i.state.postForm.body = event.target.value;
     i.setState(i.state);
   }
 
-  handlePostCommunityChange(i: PostForm, event) {
+  handlePostCommunityChange(i: PostForm, event: any) {
     i.state.postForm.community_id = Number(event.target.value);
     i.setState(i.state);
   }
 
-  handleCancel(i: PostForm, event) {
+  handleCancel(i: PostForm) {
     i.props.onCancel();
   }
 
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index c5052efb..f3145eff 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -1,9 +1,7 @@
 import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
-import { Subscription } from "rxjs";
-import { retryWhen, delay, take } from 'rxjs/operators';
 import { WebSocketService, UserService } from '../services';
-import { Post, CreatePostLikeResponse, CreatePostLikeForm, PostForm as PostFormI } from '../interfaces';
+import { Post, CreatePostLikeForm, PostForm as PostFormI } from '../interfaces';
 import { MomentTime } from './moment-time';
 import { PostForm } from './post-form';
 import { mdToHtml } from '../utils';
@@ -18,6 +16,7 @@ interface PostListingProps {
   editable?: boolean;
   showCommunity?: boolean;
   showBody?: boolean;
+  viewOnly?: boolean;
 }
 
 export class PostListing extends Component<PostListingProps, PostListingState> {
@@ -27,7 +26,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     iframeExpanded: false
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
@@ -52,7 +51,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     let post = this.props.post;
     return (
       <div class="listing">
-        <div className="float-left small text-center">
+        <div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
           <div className={`pointer upvote ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>▲</div>
           <div>{post.score}</div>
           <div className={`pointer downvote ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>▼</div>
@@ -123,7 +122,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return this.props.editable && UserService.Instance.loggedIn && this.props.post.creator_id == UserService.Instance.user.id;
   }
 
-  handlePostLike(i: PostListing, event) {
+  handlePostLike(i: PostListing) {
 
     let form: CreatePostLikeForm = {
       post_id: i.props.post.id,
@@ -132,7 +131,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     WebSocketService.Instance.likePost(form);
   }
 
-  handlePostDisLike(i: PostListing, event) {
+  handlePostDisLike(i: PostListing) {
     let form: CreatePostLikeForm = {
       post_id: i.props.post.id,
       score: (i.props.post.my_vote == -1) ? 0 : -1
@@ -140,7 +139,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     WebSocketService.Instance.likePost(form);
   }
 
-  handleEditClick(i: PostListing, event) {
+  handleEditClick(i: PostListing) {
     i.state.showEdit = true;
     i.setState(i.state);
   }
@@ -151,12 +150,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   // The actual editing is done in the recieve for post
-  handleEditPost(post: Post) {
+  handleEditPost() {
     this.state.showEdit = false;
     this.setState(this.state);
   }
 
-  handleDeleteClick(i: PostListing, event) {
+  handleDeleteClick(i: PostListing) {
     let deleteForm: PostFormI = {
       body: '',
       community_id: i.props.post.community_id,
@@ -168,7 +167,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     WebSocketService.Instance.editPost(deleteForm);
   }
 
-  handleIframeExpandClick(i: PostListing, event) {
+  handleIframeExpandClick(i: PostListing) {
     i.state.iframeExpanded = !i.state.iframeExpanded;
     i.setState(i.state);
   }
diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index 98fe8f21..bb36cabc 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -2,12 +2,10 @@ import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse, Post, GetPostsForm, ListingSortType, ListingType, GetPostsResponse, CreatePostLikeForm, CreatePostLikeResponse, CommunityUser} from '../interfaces';
+import { UserOperation, Community as CommunityI, Post, GetPostsForm, SortType, ListingType, GetPostsResponse, CreatePostLikeResponse, CommunityUser} from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { MomentTime } from './moment-time';
 import { PostListing } from './post-listing';
-import { Sidebar } from './sidebar';
-import { msgOp, mdToHtml } from '../utils';
+import { msgOp } from '../utils';
 
 
 interface PostListingsProps {
@@ -18,7 +16,7 @@ interface PostListingsState {
   community: CommunityI;
   moderators: Array<CommunityUser>;
   posts: Array<Post>;
-  sortType: ListingSortType;
+  sortType: SortType;
   type_: ListingType;
 }
 
@@ -41,7 +39,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
     },
     moderators: [],
     posts: [],
-    sortType: ListingSortType.Hot,
+    sortType: SortType.Hot,
     type_: this.props.communityId 
     ? ListingType.Community 
     : UserService.Instance.loggedIn
@@ -49,7 +47,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
     : ListingType.All
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
 
@@ -67,7 +65,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
       type_: ListingType[this.state.type_],
       community_id: this.props.communityId,
       limit: 10,
-      sort: ListingSortType[ListingSortType.Hot],
+      sort: SortType[SortType.Hot],
     }
     WebSocketService.Instance.getPosts(getPostsForm);
   }
@@ -94,14 +92,14 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
       <div className="mb-2">
         <select value={this.state.sortType} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto">
           <option disabled>Sort Type</option>
-          <option value={ListingSortType.Hot}>Hot</option>
-          <option value={ListingSortType.New}>New</option>
+          <option value={SortType.Hot}>Hot</option>
+          <option value={SortType.New}>New</option>
           <option disabled>──────────</option>
-          <option value={ListingSortType.TopDay}>Top Day</option>
-          <option value={ListingSortType.TopWeek}>Week</option>
-          <option value={ListingSortType.TopMonth}>Month</option>
-          <option value={ListingSortType.TopYear}>Year</option>
-          <option value={ListingSortType.TopAll}>All</option>
+          <option value={SortType.TopDay}>Top Day</option>
+          <option value={SortType.TopWeek}>Week</option>
+          <option value={SortType.TopMonth}>Month</option>
+          <option value={SortType.TopYear}>Year</option>
+          <option value={SortType.TopAll}>All</option>
         </select>
         {!this.props.communityId && 
           UserService.Instance.loggedIn &&
@@ -117,26 +115,26 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
 
   }
 
-  handleSortChange(i: PostListings, event) {
+  handleSortChange(i: PostListings, event: any) {
     i.state.sortType = Number(event.target.value);
     i.setState(i.state);
 
     let getPostsForm: GetPostsForm = {
       community_id: i.state.community.id,
       limit: 10,
-      sort: ListingSortType[i.state.sortType],
+      sort: SortType[i.state.sortType],
       type_: ListingType[ListingType.Community]
     }
     WebSocketService.Instance.getPosts(getPostsForm);
   }
 
-  handleTypeChange(i: PostListings, event) {
+  handleTypeChange(i: PostListings, event: any) {
     i.state.type_ = Number(event.target.value);
     i.setState(i.state);
 
     let getPostsForm: GetPostsForm = {
       limit: 10,
-      sort: ListingSortType[i.state.sortType],
+      sort: SortType[i.state.sortType],
       type_: ListingType[i.state.type_]
     }
     WebSocketService.Instance.getPosts(getPostsForm);
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index e7c66e94..e8308561 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -1,19 +1,15 @@
 import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse } from '../interfaces';
-import { WebSocketService, UserService } from '../services';
-import { msgOp, hotRank,mdToHtml } from '../utils';
-import { MomentTime } from './moment-time';
+import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment,  CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI } from '../interfaces';
+import { WebSocketService } from '../services';
+import { msgOp, hotRank } from '../utils';
 import { PostListing } from './post-listing';
 import { Sidebar } from './sidebar';
+import { CommentForm } from './comment-form';
+import { CommentNodes } from './comment-nodes';
 import * as autosize from 'autosize';
 
-interface CommentNodeI {
-  comment: Comment;
-  children?: Array<CommentNodeI>;
-};
 
 interface PostState {
   post: PostI;
@@ -21,7 +17,8 @@ interface PostState {
   commentSort: CommentSortType;
   community: Community;
   moderators: Array<CommunityUser>;
-  scrolled: boolean;
+  scrolled?: boolean;
+  scrolled_comment_id?: number;
 }
 
 export class Post extends Component<any, PostState> {
@@ -36,12 +33,15 @@ export class Post extends Component<any, PostState> {
     scrolled: false
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
 
     let postId = Number(this.props.match.params.id);
+    if (this.props.match.params.comment_id) {
+      this.state.scrolled_comment_id = this.props.match.params.comment_id;
+    }
 
     this.subscription = WebSocketService.Instance.subject
       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
@@ -62,11 +62,11 @@ export class Post extends Component<any, PostState> {
     autosize(document.querySelectorAll('textarea'));
   }
 
-  componentDidUpdate(lastProps: any, lastState: PostState, snapshot: any) {
-    if (!this.state.scrolled && lastState.comments.length > 0 && window.location.href.includes('#comment-')) {
-      let id = window.location.hash.split("#")[2];
-      var elmnt = document.getElementById(`${id}`);
+  componentDidUpdate(_lastProps: any, lastState: PostState, _snapshot: any) {
+    if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
+      var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
       elmnt.scrollIntoView(); 
+      elmnt.classList.add("mark");
       this.state.scrolled = true;
     }
   }
@@ -136,7 +136,7 @@ export class Post extends Component<any, PostState> {
     );
   }
   
-  handleCommentSortChange(i: Post, event) {
+  handleCommentSortChange(i: Post, event: any) {
     i.state.commentSort = Number(event.target.value);
     i.setState(i.state);
   }
@@ -250,252 +250,5 @@ export class Post extends Component<any, PostState> {
   }
 }
 
-interface CommentNodesState {
-}
-
-interface CommentNodesProps {
-  nodes: Array<CommentNodeI>;
-  noIndent?: boolean;
-}
-
-export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> {
-
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    return (
-      <div className="comments">
-        {this.props.nodes.map(node =>
-          <CommentNode node={node} noIndent={this.props.noIndent} />
-        )}
-      </div>
-    )
-  }
-}
-
-
-interface CommentNodeState {
-  showReply: boolean;
-  showEdit: boolean;
-}
-
-interface CommentNodeProps {
-  node: CommentNodeI;
-  noIndent?: boolean;
-}
-
-export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
-
-  private emptyState: CommentNodeState = {
-    showReply: false,
-    showEdit: false
-  }
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = this.emptyState;
-    this.handleReplyCancel = this.handleReplyCancel.bind(this);
-    this.handleCommentLike = this.handleCommentLike.bind(this);
-    this.handleCommentDisLike = this.handleCommentDisLike.bind(this);
-  }
-
-  render() {
-    let node = this.props.node;
-    return (
-      <div id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
-        <div className="float-left small text-center">
-          <div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>▲</div>
-          <div>{node.comment.score}</div>
-          <div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>▼</div>
-        </div>
-        <div className="details ml-4">
-          <ul class="list-inline mb-0 text-muted small">
-            <li className="list-inline-item">
-              <Link to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
-            </li>
-            <li className="list-inline-item">
-              <span>(
-                <span className="text-info">+{node.comment.upvotes}</span>
-                <span> | </span>
-                <span className="text-danger">-{node.comment.downvotes}</span>
-                <span>) </span>
-              </span>
-            </li>
-            <li className="list-inline-item">
-              <span><MomentTime data={node.comment} /></span>
-            </li>
-          </ul>
-          {this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} />}
-          {!this.state.showEdit &&
-            <div>
-              <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.content)} />
-              <ul class="list-inline mb-1 text-muted small font-weight-bold">
-                <li className="list-inline-item">
-                  <span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
-                </li>
-                {this.myComment && 
-                  <li className="list-inline-item">
-                    <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
-                  </li>
-                }
-                {this.myComment &&
-                  <li className="list-inline-item">
-                    <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span>
-                  </li>
-                }
-                <li className="list-inline-item">
-                  <Link className="text-muted" to={`/post/${node.comment.post_id}#comment-${node.comment.id}`}>link</Link>
-                </li>
-              </ul>
-            </div>
-          }
-        </div>
-        {this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} />}
-        {this.props.node.children && <CommentNodes nodes={this.props.node.children} />}
-      </div>
-    )
-  }
-
-  private get myComment(): boolean {
-    return UserService.Instance.loggedIn && this.props.node.comment.creator_id == UserService.Instance.user.id;
-  }
-
-  handleReplyClick(i: CommentNode, event) {
-    i.state.showReply = true;
-    i.setState(i.state);
-  }
-
-  handleEditClick(i: CommentNode, event) {
-    i.state.showEdit = true;
-    i.setState(i.state);
-  }
-
-  handleDeleteClick(i: CommentNode, event) {
-    let deleteForm: CommentFormI = {
-      content: "*deleted*",
-      edit_id: i.props.node.comment.id,
-      post_id: i.props.node.comment.post_id,
-      parent_id: i.props.node.comment.parent_id,
-      auth: null
-    };
-    WebSocketService.Instance.editComment(deleteForm);
-  }
-
-  handleReplyCancel(): any {
-    this.state.showReply = false;
-    this.state.showEdit = false;
-    this.setState(this.state);
-  }
-
-
-  handleCommentLike(i: CommentNodeI, event) {
-
-    let form: CommentLikeForm = {
-      comment_id: i.comment.id,
-      post_id: i.comment.post_id,
-      score: (i.comment.my_vote == 1) ? 0 : 1
-    };
-    WebSocketService.Instance.likeComment(form);
-  }
-
-  handleCommentDisLike(i: CommentNodeI, event) {
-    let form: CommentLikeForm = {
-      comment_id: i.comment.id,
-      post_id: i.comment.post_id,
-      score: (i.comment.my_vote == -1) ? 0 : -1
-    };
-    WebSocketService.Instance.likeComment(form);
-  }
-}
-
-interface CommentFormProps {
-  postId?: number;
-  node?: CommentNodeI;
-  onReplyCancel?();
-  edit?: boolean;
-}
-
-interface CommentFormState {
-  commentForm: CommentFormI;
-  buttonTitle: string;
-}
-
-export class CommentForm extends Component<CommentFormProps, CommentFormState> {
-
-  private emptyState: CommentFormState = {
-    commentForm: {
-      auth: null,
-      content: null,
-      post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId
-    },
-    buttonTitle: !this.props.node ? "Post" : this.props.edit ? "Edit" : "Reply"
-  }
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = this.emptyState;
 
-    if (this.props.node) {
-      if (this.props.edit) {
-        this.state.commentForm.edit_id = this.props.node.comment.id;
-        this.state.commentForm.parent_id = this.props.node.comment.parent_id;
-        this.state.commentForm.content = this.props.node.comment.content;
-      } else {
-        // A reply gets a new parent id
-        this.state.commentForm.parent_id = this.props.node.comment.id;
-      }
-    }  
-  }
 
-  componentDidMount() {
-    autosize(document.querySelectorAll('textarea'));
-  }
-
-  render() {
-    return (
-      <div>
-        <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
-          <div class="form-group row">
-            <div class="col-sm-12">
-              <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} placeholder="Comment here" required />
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-sm-12">
-              <button type="submit" class="btn btn-sm btn-secondary mr-2">{this.state.buttonTitle}</button>
-              {this.props.node && <button type="button" class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}>Cancel</button>}
-            </div>
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  handleCommentSubmit(i: CommentForm, event) {
-    if (i.props.edit) {
-      WebSocketService.Instance.editComment(i.state.commentForm);
-    } else {
-      WebSocketService.Instance.createComment(i.state.commentForm);
-    }
-
-    i.state.commentForm.content = undefined;
-    i.setState(i.state);
-    event.target.reset();
-    if (i.props.node) {
-      i.props.onReplyCancel();
-    }
-  }
-
-  handleCommentContentChange(i: CommentForm, event) {
-    i.state.commentForm.content = event.target.value;
-    i.setState(i.state);
-  }
-
-  handleReplyCancel(i: CommentForm, event) {
-    i.props.onReplyCancel();
-  }
-}
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index ad3eeccc..ffc44562 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -20,7 +20,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     showEdit: false
   }
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
     this.handleEditCommunity = this.handleEditCommunity.bind(this);
@@ -82,12 +82,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  handleEditClick(i: Sidebar, event) {
+  handleEditClick(i: Sidebar) {
     i.state.showEdit = true;
     i.setState(i.state);
   }
 
-  handleEditCommunity(community: Community) {
+  handleEditCommunity() {
     this.state.showEdit = false;
     this.setState(this.state);
   }
@@ -98,8 +98,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   // TODO no deleting communities yet
-  handleDeleteClick(i: Sidebar, event) {
-  }
+  // handleDeleteClick(i: Sidebar, event) {
+  // }
 
   handleUnsubscribe(communityId: number) {
     let form: FollowCommunityForm = {
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
new file mode 100644
index 00000000..4754111e
--- /dev/null
+++ b/ui/src/components/user.tsx
@@ -0,0 +1,264 @@
+import { Component, linkEvent } from 'inferno';
+import { Link } from 'inferno-router';
+import { Subscription } from "rxjs";
+import { retryWhen, delay, take } from 'rxjs/operators';
+import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView } from '../interfaces';
+import { WebSocketService } from '../services';
+import { msgOp } from '../utils';
+import { PostListing } from './post-listing';
+import { CommentNodes } from './comment-nodes';
+import { MomentTime } from './moment-time';
+
+enum View {
+  Overview, Comments, Posts, Saved
+}
+
+interface UserState {
+  user: UserView;
+  follows: Array<CommunityUser>;
+  moderates: Array<CommunityUser>;
+  comments: Array<Comment>;
+  posts: Array<Post>;
+  saved?: Array<Post>;
+  view: View;
+  sort: SortType;
+}
+
+export class User extends Component<any, UserState> {
+
+  private subscription: Subscription;
+  private emptyState: UserState = {
+    user: {
+      id: null,
+      name: null,
+      fedi_name: null,
+      published: null,
+      number_of_posts: null,
+      post_score: null,
+      number_of_comments: null,
+      comment_score: null,
+    },
+    follows: [],
+    moderates: [],
+    comments: [],
+    posts: [],
+    view: View.Overview,
+    sort: SortType.New
+  }
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = this.emptyState;
+
+    let userId = Number(this.props.match.params.id);
+
+    this.subscription = WebSocketService.Instance.subject
+    .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
+    .subscribe(
+      (msg) => this.parseMessage(msg),
+        (err) => console.error(err),
+        () => console.log('complete')
+    );
+
+    let form: GetUserDetailsForm = {
+      user_id: userId,
+      sort: SortType[this.state.sort],
+      limit: 999
+    };
+    WebSocketService.Instance.getUserDetails(form);
+  }
+
+  componentWillUnmount() {
+    this.subscription.unsubscribe();
+  }
+
+  render() {
+    return (
+      <div class="container">
+        <div class="row">
+          <div class="col-12 col-lg-9">
+            <h4>/u/{this.state.user.name}</h4>
+            {this.selects()}
+            {this.state.view == View.Overview &&
+              this.overview()
+            }
+            {this.state.view == View.Comments &&
+              this.comments()
+            }
+            {this.state.view == View.Posts &&
+              this.posts()
+            }
+          </div>
+          <div class="col-12 col-lg-3">
+            {this.userInfo()}
+            {this.moderates()}
+            {this.follows()}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  selects() {
+    return (
+      <div className="mb-2">
+        <select value={this.state.view} onChange={linkEvent(this, this.handleViewChange)} class="custom-select 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">
+          <option disabled>Sort Type</option>
+          <option value={SortType.New}>New</option>
+          <option value={SortType.TopDay}>Top Day</option>
+          <option value={SortType.TopWeek}>Week</option>
+          <option value={SortType.TopMonth}>Month</option>
+          <option value={SortType.TopYear}>Year</option>
+          <option value={SortType.TopAll}>All</option>
+        </select>
+      </div>
+    )
+
+  }
+
+  overview() {
+    let combined: Array<any> = [];
+    combined.push(...this.state.comments);
+    combined.push(...this.state.posts);
+
+    // Sort it
+    if (this.state.sort == SortType.New) {
+      combined.sort((a, b) => b.published.localeCompare(a.published));
+    } else {
+      combined.sort((a, b) => b.score - a.score);
+    }
+
+    return (
+      <div>
+        {combined.map(i =>
+          <div>
+            {i.community_id 
+              ? <PostListing post={i} showCommunity viewOnly />
+              : <CommentNodes nodes={[{comment: i}]} noIndent viewOnly />
+            }
+          </div>
+                     )
+        }
+      </div>
+    )
+  }
+
+  comments() {
+    return (
+      <div>
+        {this.state.comments.map(comment => 
+          <CommentNodes nodes={[{comment: comment}]} noIndent viewOnly />
+        )}
+      </div>
+    );
+  }
+
+  posts() {
+    return (
+      <div>
+        {this.state.posts.map(post => 
+          <PostListing post={post} showCommunity viewOnly />
+        )}
+      </div>
+    );
+  }
+
+  userInfo() {
+    let user = this.state.user;
+    return (
+      <div>
+        <h4>{user.name}</h4>
+        <div>Joined <MomentTime data={user} /></div>
+        <table class="table table-bordered table-sm mt-2">
+          <tr>
+            <td>{user.post_score} points</td>
+            <td>{user.number_of_posts} posts</td>
+          </tr>
+          <tr>
+            <td>{user.comment_score} points</td>
+            <td>{user.number_of_comments} comments</td>
+          </tr>
+        </table>
+        <hr />
+      </div>
+    )
+  }
+
+  moderates() {
+    return (
+      <div>
+        {this.state.moderates.length > 0 &&
+          <div>
+            <h4>Moderates</h4>
+            <ul class="list-unstyled"> 
+              {this.state.moderates.map(community =>
+                <li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
+              )}
+            </ul>
+          </div>
+        }
+      </div>
+    )
+  }
+
+  follows() {
+    return (
+      <div>
+        {this.state.follows.length > 0 &&
+          <div>
+            <hr />
+            <h4>Subscribed</h4>
+            <ul class="list-unstyled"> 
+              {this.state.follows.map(community =>
+                <li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
+              )}
+            </ul>
+          </div>
+        }
+      </div>
+    )
+  }
+
+  handleSortChange(i: User, event: any) {
+    i.state.sort = Number(event.target.value);
+    i.setState(i.state);
+
+    let form: GetUserDetailsForm = {
+      user_id: i.state.user.id,
+      sort: SortType[i.state.sort],
+      limit: 999
+    };
+    WebSocketService.Instance.getUserDetails(form);
+  }
+
+  handleViewChange(i: User, event: any) {
+    i.state.view = Number(event.target.value);
+    i.setState(i.state);
+  }
+
+  parseMessage(msg: any) {
+    console.log(msg);
+    let op: UserOperation = msgOp(msg);
+    if (msg.error) {
+      alert(msg.error);
+      return;
+    } else if (op == UserOperation.GetUserDetails) {
+      let res: UserDetailsResponse = msg;
+      this.state.user = res.user;
+      this.state.comments = res.comments;
+      this.state.follows = res.follows;
+      this.state.moderates = res.moderates;
+      this.state.posts = res.posts;
+      this.setState(this.state);
+    } 
+  }
+}
+
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index d374ec1e..45bae0f7 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -9,6 +9,7 @@ import { CreateCommunity } from './components/create-community';
 import { Post } from './components/post';
 import { Community } from './components/community';
 import { Communities } from './components/communities';
+import { User } from './components/user';
 
 import './main.css';
 
@@ -18,7 +19,7 @@ const container = document.getElementById('app');
 
 class Index extends Component<any, any> {
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
     WebSocketService.Instance;
     UserService.Instance;
@@ -35,8 +36,11 @@ class Index extends Component<any, any> {
             <Route path={`/create_post`} component={CreatePost} />
             <Route path={`/create_community`} component={CreateCommunity} />
             <Route path={`/communities`} component={Communities} />
+            <Route path={`/post/:id/comment/:comment_id`} component={Post} />
             <Route path={`/post/:id`} component={Post} />
             <Route path={`/community/:id`} component={Community} />
+            <Route path={`/user/:id/:heading`} component={User} />
+            <Route path={`/user/:id`} component={User} />
           </Switch>
           {this.symbols()}
         </div>
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 6d314c62..66088647 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -1,5 +1,5 @@
 export enum UserOperation {
-  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity, GetFollowedCommunities
+  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails
 }
 
 export interface User {
@@ -8,6 +8,17 @@ export interface User {
   username: string;
 }
 
+export interface UserView {
+  id: number;
+  name: string;
+  fedi_name: string;
+  published: string;
+  number_of_posts: number;
+  post_score: number;
+  number_of_comments: number;
+  comment_score: number;
+}
+
 export interface CommunityUser {
   id: number;
   user_id: number;
@@ -144,6 +155,11 @@ export interface CommentLikeForm {
   auth?: string;
 }
 
+export interface CommentNode {
+  comment: Comment;
+  children?: Array<CommentNode>;
+}
+
 export interface GetPostsForm {
   type_: string;
   sort: string;
@@ -184,6 +200,27 @@ export interface GetFollowedCommunitiesResponse {
   communities: Array<CommunityUser>;
 }
 
+export interface GetUserDetailsForm {
+  user_id: number;
+  sort: string; // TODO figure this one out
+  limit: number;
+  community_id?: number;
+  auth?: string;
+}
+
+
+
+export interface UserDetailsResponse {
+  op: string;
+  user: UserView;
+  follows: Array<CommunityUser>;
+  moderates: Array<CommunityUser>;
+  comments: Array<Comment>;
+  posts: Array<Post>;
+  saved?: Array<Post>;
+}
+
+
 export interface LoginForm {
   username_or_email: string;
   password: string;
@@ -210,7 +247,7 @@ export enum ListingType {
   All, Subscribed, Community
 }
 
-export enum ListingSortType {
+export enum SortType {
   Hot, New, TopDay, TopWeek, TopMonth, TopYear, TopAll
 }
 
diff --git a/ui/src/main.css b/ui/src/main.css
index ac58c993..1802eaa3 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -6,6 +6,11 @@ body {
   cursor: pointer;
 }
 
+.no-click {
+  pointer-events:none;
+  opacity: 0.65;
+}
+
 .upvote:hover {
  color: var(--info);
 }
@@ -24,6 +29,10 @@ body {
   background-color: var(--secondary);
 }
 
+.mark {
+  background-color: #322a00;
+}
+
 .md-div p {
   margin-bottom: 0px;
 }
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index 79f6750a..b5efd6a7 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -1,5 +1,5 @@
 import { wsUri } from '../env';
-import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm } from '../interfaces';
+import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm, GetUserDetailsForm } from '../interfaces';
 import { webSocket } from 'rxjs/webSocket';
 import { Subject } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
@@ -106,6 +106,11 @@ export class WebSocketService {
     this.subject.next(this.wsSendWrapper(UserOperation.EditPost, postForm));
   }
 
+  public getUserDetails(form: GetUserDetailsForm) {
+    this.setAuth(form, false);
+    this.subject.next(this.wsSendWrapper(UserOperation.GetUserDetails, form));
+  }
+
   private wsSendWrapper(op: UserOperation, data: any) {
     let send = { op: UserOperation[op], data: data };
     console.log(send);
@@ -122,7 +127,7 @@ export class WebSocketService {
 
 }
 
-window.onbeforeunload = (e => {
+window.onbeforeunload = (() => {
   WebSocketService.Instance.subject.unsubscribe();
   WebSocketService.Instance.subject = null;
 });
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 21122d0a..e01e4ce1 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -2,7 +2,6 @@ import { UserOperation, Comment } from './interfaces';
 import * as markdown_it from 'markdown-it';
 
 export let repoUrl = 'https://github.com/dessalines/lemmy';
-export let wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host + '/service/ws/';
 
 export function msgOp(msg: any): UserOperation {
   let opStr: string = msg.op;
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 49469788..5756a444 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -9,11 +9,47 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@types/autosize@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/autosize/-/autosize-3.0.6.tgz#9022e6a783ec5a4d5e570013701dbc0bfe7667fa"
+  integrity sha512-gpfmXswGISLSWNOOdF2PDK96SfkaZdNtNixWJbYH10xn3Hqdt4VyS1GmoutuwOshWyCLuJw2jGhF0zkK7PUhrg==
+  dependencies:
+    "@types/jquery" "*"
+
+"@types/jquery@*":
+  version "3.3.29"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.29.tgz#680a2219ce3c9250483722fccf5570d1e2d08abd"
+  integrity sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==
+  dependencies:
+    "@types/sizzle" "*"
+
 "@types/js-cookie@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.1.tgz#aa6f6d5e5aaf7d97959e9fa938ac2501cf1a76f4"
   integrity sha512-VIVurImEhQ95jxtjs8baVU5qCzVfwYfuMrpXwdRykJ5MCI5iY7/jB4cDSgwBVeYqeXrhT7GfJUwoDOmN0OMVCA==
 
+"@types/jwt-decode@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@types/jwt-decode/-/jwt-decode-2.2.1.tgz#afdf5c527fcfccbd4009b5fd02d1e18241f2d2f2"
+  integrity sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A==
+
+"@types/linkify-it@*":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-2.1.0.tgz#ea3dd64c4805597311790b61e872cbd1ed2cd806"
+  integrity sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==
+
+"@types/markdown-it@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-0.0.7.tgz#75070485a3d8ad11e7deb8287f4430be15bf4d39"
+  integrity sha512-WyL6pa76ollQFQNEaLVa41ZUUvDvPY+qAUmlsphnrpL6I9p1m868b26FyeoOmo7X3/Ta/S9WKXcEYXUSHnxoVQ==
+  dependencies:
+    "@types/linkify-it" "*"
+
+"@types/sizzle@*":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
+  integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-- 
cgit v1.2.3