From 4b76cccce44da59ca1da64d28e35f7d128ca606e Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Thu, 25 Apr 2019 14:52:18 -0700
Subject: [PATCH] Adding /f/ and /u/ in links now.

- Fixes #102
---
 server/src/actions/community.rs        |  8 ++++++
 server/src/actions/user.rs             |  4 +++
 server/src/websocket_server/server.rs  | 35 ++++++++++++++++++--------
 ui/src/components/comment-node.tsx     |  2 +-
 ui/src/components/communities.tsx      |  2 +-
 ui/src/components/community-form.tsx   |  4 +--
 ui/src/components/community.tsx        | 11 ++++++--
 ui/src/components/create-community.tsx |  5 ++--
 ui/src/components/inbox.tsx            |  2 +-
 ui/src/components/main.tsx             |  6 ++---
 ui/src/components/modlog.tsx           | 20 +++++++--------
 ui/src/components/navbar.tsx           |  2 +-
 ui/src/components/post-listing.tsx     |  4 +--
 ui/src/components/sidebar.tsx          |  4 +--
 ui/src/components/user.tsx             |  8 ++++--
 ui/src/index.tsx                       |  3 ++-
 ui/src/interfaces.ts                   |  5 ++--
 ui/src/services/WebSocketService.ts    |  5 ++++
 18 files changed, 87 insertions(+), 43 deletions(-)

diff --git a/server/src/actions/community.rs b/server/src/actions/community.rs
index 7a69c8076..42c95c7d7 100644
--- a/server/src/actions/community.rs
+++ b/server/src/actions/community.rs
@@ -59,6 +59,14 @@ impl Crud<CommunityForm> for Community {
   }
 }
 
+impl Community {
+  pub fn read_from_name(conn: &PgConnection, community_name: String) -> Result<Self, Error> {
+    use schema::community::dsl::*;
+    community.filter(name.eq(community_name))
+      .first::<Self>(conn)
+  }
+}
+
 #[derive(Identifiable, Queryable, Associations, PartialEq, Debug)]
 #[belongs_to(Community)]
 #[table_name = "community_moderator"]
diff --git a/server/src/actions/user.rs b/server/src/actions/user.rs
index ea6f36e6f..58cfd89d7 100644
--- a/server/src/actions/user.rs
+++ b/server/src/actions/user.rs
@@ -67,6 +67,10 @@ impl User_ {
     Self::create(&conn, &edited_user)
 
   }
+  pub fn read_from_name(conn: &PgConnection, from_user_name: String) -> Result<Self, Error> {
+    user_.filter(name.eq(from_user_name))
+      .first::<Self>(conn)
+  }
 }
 
 #[derive(Debug, Serialize, Deserialize)]
diff --git a/server/src/websocket_server/server.rs b/server/src/websocket_server/server.rs
index dee427262..dbd1be8d5 100644
--- a/server/src/websocket_server/server.rs
+++ b/server/src/websocket_server/server.rs
@@ -188,7 +188,8 @@ pub struct GetPostsResponse {
 
 #[derive(Serialize, Deserialize)]
 pub struct GetCommunity {
-  id: i32,
+  id: Option<i32>,
+  name: Option<String>,
   auth: Option<String>
 }
 
@@ -311,7 +312,8 @@ pub struct GetFollowedCommunitiesResponse {
 
 #[derive(Serialize, Deserialize)]
 pub struct GetUserDetails {
-  user_id: i32,
+  user_id: Option<i32>,
+  username: Option<String>,
   sort: String,
   page: Option<i64>,
   limit: Option<i64>,
@@ -1176,14 +1178,19 @@ impl Perform for GetCommunity {
       None => None
     };
 
-    let community_view = match CommunityView::read(&conn, self.id, user_id) {
+    let community_id = match self.id {
+      Some(id) => id,
+      None => Community::read_from_name(&conn, self.name.to_owned().unwrap_or("main".to_string()))?.id
+    };
+
+    let community_view = match CommunityView::read(&conn, community_id, user_id) {
       Ok(community) => community,
       Err(_e) => {
         return Err(self.error("Couldn't find Community"))?
       }
     };
 
-    let moderators = match CommunityModeratorView::for_community(&conn, self.id) {
+    let moderators = match CommunityModeratorView::for_community(&conn, community_id) {
       Ok(moderators) => moderators,
       Err(_e) => {
         return Err(self.error("Couldn't find Community"))?
@@ -2042,7 +2049,13 @@ impl Perform for GetUserDetails {
     //TODO add save
     let sort = SortType::from_str(&self.sort)?;
 
-    let user_view = UserView::read(&conn, self.user_id)?;
+    let user_details_id = match self.user_id {
+      Some(id) => id,
+      None => User_::read_from_name(&conn, self.username.to_owned().unwrap_or("admin".to_string()))?.id
+    };
+
+    let user_view = UserView::read(&conn, user_details_id)?;
+
     // If its saved only, you don't care what creator it was
     let posts = if self.saved_only {
       PostView::list(&conn, 
@@ -2051,7 +2064,7 @@ impl Perform for GetUserDetails {
                      self.community_id, 
                      None, 
                      None,
-                     Some(self.user_id), 
+                     Some(user_details_id), 
                      self.saved_only, 
                      false, 
                      self.page, 
@@ -2061,7 +2074,7 @@ impl Perform for GetUserDetails {
                      PostListingType::All, 
                      &sort, 
                      self.community_id, 
-                     Some(self.user_id), 
+                     Some(user_details_id), 
                      None, 
                      None, 
                      self.saved_only, 
@@ -2075,7 +2088,7 @@ impl Perform for GetUserDetails {
                         None, 
                         None, 
                         None, 
-                        Some(self.user_id), 
+                        Some(user_details_id), 
                         self.saved_only, 
                         self.page, 
                         self.limit)?
@@ -2083,7 +2096,7 @@ impl Perform for GetUserDetails {
       CommentView::list(&conn, 
                         &sort, 
                         None, 
-                        Some(self.user_id), 
+                        Some(user_details_id), 
                         None, 
                         None, 
                         self.saved_only, 
@@ -2091,8 +2104,8 @@ impl Perform for GetUserDetails {
                         self.limit)?
     };
 
-    let follows = CommunityFollowerView::for_user(&conn, self.user_id)?;
-    let moderates = CommunityModeratorView::for_user(&conn, self.user_id)?;
+    let follows = CommunityFollowerView::for_user(&conn, user_details_id)?;
+    let moderates = CommunityModeratorView::for_user(&conn, user_details_id)?;
 
     // Return the jwt
     Ok(
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index fabacb28d..0c0fd8214 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -69,7 +69,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         <div id={`comment-${node.comment.id}`} className={`details ml-4 ${this.isCommentNew ? 'mark' : ''}`}>
           <ul class="list-inline mb-0 text-muted small">
             <li className="list-inline-item">
-              <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
+              <Link className="text-info" to={`/u/${node.comment.creator_name}`}>{node.comment.creator_name}</Link>
             </li>
             {this.isMod && 
               <li className="list-inline-item badge badge-secondary">mod</li>
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 232068073..383440079 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -73,7 +73,7 @@ export class Communities extends Component<any, CommunitiesState> {
               <tbody>
                 {this.state.communities.map(community =>
                   <tr>
-                    <td><Link to={`/community/${community.id}`}>{community.name}</Link></td>
+                    <td><Link to={`/f/${community.name}`}>{community.name}</Link></td>
                     <td>{community.title}</td>
                     <td>{community.category_name}</td>
                     <td class="text-right d-none d-md-table-cell">{community.number_of_subscribers}</td>
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index 2d5aa3e7d..66071a3fa 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -11,7 +11,7 @@ import { Community } from '../interfaces';
 interface CommunityFormProps {
   community?: Community; // If a community is given, that means this is an edit
   onCancel?(): any;
-  onCreate?(id: number): any;
+  onCreate?(community: Community): any;
   onEdit?(community: Community): any;
 }
 
@@ -167,7 +167,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     } else if (op == UserOperation.CreateCommunity) {
       let res: CommunityResponse = msg;
       this.state.loading = false;
-      this.props.onCreate(res.community.id);
+      this.props.onCreate(res.community);
     } 
 
     // TODO is this necessary?
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index f521d518d..ba542582e 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -10,6 +10,7 @@ import { msgOp } from '../utils';
 interface State {
   community: CommunityI;
   communityId: number;
+  communityName: string;
   moderators: Array<CommunityUser>;
   admins: Array<UserView>;
   loading: boolean;
@@ -36,6 +37,7 @@ export class Community extends Component<any, State> {
     moderators: [],
     admins: [],
     communityId: Number(this.props.match.params.id),
+    communityName: this.props.match.params.name,
     loading: true
   }
 
@@ -52,7 +54,12 @@ export class Community extends Component<any, State> {
         () => console.log('complete')
     );
 
-    WebSocketService.Instance.getCommunity(this.state.communityId);
+    if (this.state.communityId) {
+      WebSocketService.Instance.getCommunity(this.state.communityId);
+    } else if (this.state.communityName) {
+      WebSocketService.Instance.getCommunityByName(this.state.communityName);
+    }
+
   }
 
   componentWillUnmount() {
@@ -71,7 +78,7 @@ export class Community extends Component<any, State> {
               <small className="ml-2 text-muted font-italic">removed</small>
             }
           </h5>
-            <PostListings communityId={this.state.communityId} />
+          {this.state.community && <PostListings communityId={this.state.community.id} />}
           </div>
           <div class="col-12 col-md-3">
             <Sidebar 
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index fb264ab2c..04ef6d3bd 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -1,5 +1,6 @@
 import { Component } from 'inferno';
 import { CommunityForm } from './community-form';
+import { Community } from '../interfaces';
 
 export class CreateCommunity extends Component<any, any> {
 
@@ -25,8 +26,8 @@ export class CreateCommunity extends Component<any, any> {
     )
   }
 
-  handleCommunityCreate(id: number) {
-    this.props.history.push(`/community/${id}`);
+  handleCommunityCreate(community: Community) {
+    this.props.history.push(`/f/${community.name}`);
   }
 }
 
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 50fd47c21..02d813f3e 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -58,7 +58,7 @@ export class Inbox extends Component<any, InboxState> {
       <div class="container">
         <div class="row">
           <div class="col-12">
-            <h5>Inbox for <Link to={`/user/${user.id}`}>{user.username}</Link></h5>
+            <h5>Inbox for <Link to={`/u/${user.username}`}>{user.username}</Link></h5>
             {this.selects()}
             {this.replies()}
             {this.paginator()}
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 0687ffbc4..6911ca40b 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -96,7 +96,7 @@ export class Main extends Component<MainProps, MainState> {
                   <h5>Subscribed forums</h5>
                   <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>
+                      <li class="list-inline-item"><Link to={`/f/${community.community_name}`}>{community.community_name}</Link></li>
                     )}
                   </ul>
                 </div>
@@ -116,7 +116,7 @@ export class Main extends Component<MainProps, MainState> {
         <h5>Trending <Link class="text-white" to="/communities">forums</Link></h5> 
         <ul class="list-inline"> 
           {this.state.trendingCommunities.map(community =>
-            <li class="list-inline-item"><Link to={`/community/${community.id}`}>{community.name}</Link></li>
+            <li class="list-inline-item"><Link to={`/f/${community.name}`}>{community.name}</Link></li>
           )}
         </ul>
       </div>
@@ -158,7 +158,7 @@ export class Main extends Component<MainProps, MainState> {
         <ul class="my-1 list-inline small"> 
           <li class="list-inline-item">admins: </li>
           {this.state.site.admins.map(admin =>
-            <li class="list-inline-item"><Link class="text-info" to={`/user/${admin.id}`}>{admin.name}</Link></li>
+            <li class="list-inline-item"><Link class="text-info" to={`/u/${admin.name}`}>{admin.name}</Link></li>
           )}
         </ul>
         {this.state.site.site.description && 
diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx
index 55df617a7..f644b163b 100644
--- a/ui/src/components/modlog.tsx
+++ b/ui/src/components/modlog.tsx
@@ -84,7 +84,7 @@ export class Modlog extends Component<any, ModlogState> {
         {this.state.combined.map(i =>
           <tr>
             <td><MomentTime data={i.data} /></td>
-            <td><Link to={`/user/${i.data.mod_user_id}`}>{i.data.mod_user_name}</Link></td>
+            <td><Link to={`/u/${i.data.mod_user_name}`}>{i.data.mod_user_name}</Link></td>
             <td>
               {i.type_ == 'removed_posts' && 
                 <>
@@ -103,14 +103,14 @@ export class Modlog extends Component<any, ModlogState> {
                 <>
                   {(i.data as ModRemoveComment).removed? 'Removed' : 'Restored'} 
                   <span> Comment <Link to={`/post/${(i.data as ModRemoveComment).post_id}/comment/${(i.data as ModRemoveComment).comment_id}`}>{(i.data as ModRemoveComment).comment_content}</Link></span>
-                  <span> by <Link to={`/user/${(i.data as ModRemoveComment).comment_user_id}`}>{(i.data as ModRemoveComment).comment_user_name}</Link></span>
+                  <span> by <Link to={`/u/${(i.data as ModRemoveComment).comment_user_name}`}>{(i.data as ModRemoveComment).comment_user_name}</Link></span>
                   <div>{(i.data as ModRemoveComment).reason && ` reason: ${(i.data as ModRemoveComment).reason}`}</div>
                 </>
               }
               {i.type_ == 'removed_communities' && 
                 <>
                   {(i.data as ModRemoveCommunity).removed ? 'Removed' : 'Restored'} 
-                  <span> Community <Link to={`/community/${(i.data as ModRemoveCommunity).community_id}`}>{(i.data as ModRemoveCommunity).community_name}</Link></span>
+                  <span> Community <Link to={`/f/${(i.data as ModRemoveCommunity).community_name}`}>{(i.data as ModRemoveCommunity).community_name}</Link></span>
                   <div>{(i.data as ModRemoveCommunity).reason && ` reason: ${(i.data as ModRemoveCommunity).reason}`}</div>
                   <div>{(i.data as ModRemoveCommunity).expires && ` expires: ${moment.utc((i.data as ModRemoveCommunity).expires).fromNow()}`}</div>
                 </>
@@ -118,9 +118,9 @@ export class Modlog extends Component<any, ModlogState> {
               {i.type_ == 'banned_from_community' && 
                 <>
                   <span>{(i.data as ModBanFromCommunity).banned ? 'Banned ' : 'Unbanned '} </span>
-                  <span><Link to={`/user/${(i.data as ModBanFromCommunity).other_user_id}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span>
+                  <span><Link to={`/u/${(i.data as ModBanFromCommunity).other_user_name}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span>
                   <span> from the community </span>
-                  <span><Link to={`/community/${(i.data as ModBanFromCommunity).community_id}`}>{(i.data as ModBanFromCommunity).community_name}</Link></span>
+                  <span><Link to={`/f/${(i.data as ModBanFromCommunity).community_name}`}>{(i.data as ModBanFromCommunity).community_name}</Link></span>
                   <div>{(i.data as ModBanFromCommunity).reason && ` reason: ${(i.data as ModBanFromCommunity).reason}`}</div>
                   <div>{(i.data as ModBanFromCommunity).expires && ` expires: ${moment.utc((i.data as ModBanFromCommunity).expires).fromNow()}`}</div>
                 </>
@@ -128,15 +128,15 @@ export class Modlog extends Component<any, ModlogState> {
               {i.type_ == 'added_to_community' && 
                 <>
                   <span>{(i.data as ModAddCommunity).removed ? 'Removed ' : 'Appointed '} </span>
-                  <span><Link to={`/user/${(i.data as ModAddCommunity).other_user_id}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span>
+                  <span><Link to={`/u/${(i.data as ModAddCommunity).other_user_name}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span>
                   <span> as a mod to the community </span>
-                  <span><Link to={`/community/${(i.data as ModAddCommunity).community_id}`}>{(i.data as ModAddCommunity).community_name}</Link></span>
+                  <span><Link to={`/f/${(i.data as ModAddCommunity).community_name}`}>{(i.data as ModAddCommunity).community_name}</Link></span>
                 </>
               }
               {i.type_ == 'banned' && 
                 <>
                   <span>{(i.data as ModBan).banned ? 'Banned ' : 'Unbanned '} </span>
-                  <span><Link to={`/user/${(i.data as ModBan).other_user_id}`}>{(i.data as ModBan).other_user_name}</Link></span>
+                  <span><Link to={`/u/${(i.data as ModBan).other_user_name}`}>{(i.data as ModBan).other_user_name}</Link></span>
                   <div>{(i.data as ModBan).reason && ` reason: ${(i.data as ModBan).reason}`}</div>
                   <div>{(i.data as ModBan).expires && ` expires: ${moment.utc((i.data as ModBan).expires).fromNow()}`}</div>
                 </>
@@ -144,7 +144,7 @@ export class Modlog extends Component<any, ModlogState> {
               {i.type_ == 'added' && 
                 <>
                   <span>{(i.data as ModAdd).removed ? 'Removed ' : 'Appointed '} </span>
-                  <span><Link to={`/user/${(i.data as ModAdd).other_user_id}`}>{(i.data as ModAdd).other_user_name}</Link></span>
+                  <span><Link to={`/u/${(i.data as ModAdd).other_user_name}`}>{(i.data as ModAdd).other_user_name}</Link></span>
                   <span> as an admin </span>
                 </>
               }
@@ -165,7 +165,7 @@ export class Modlog extends Component<any, ModlogState> {
         <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
         <div>
           <h5>
-            {this.state.communityName && <Link className="text-white" to={`/community/${this.state.communityId}`}>/f/{this.state.communityName} </Link>}
+            {this.state.communityName && <Link className="text-white" to={`/f/${this.state.communityName}`}>/f/{this.state.communityName} </Link>}
             <span>Modlog</span>
           </h5>
           <div class="table-responsive">
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index fb8f57557..88d270e17 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -129,7 +129,7 @@ export class Navbar extends Component<any, NavbarState> {
   handleOverviewClick(i: Navbar) {
     i.state.expandUserDropdown = false;
     i.setState(i.state);
-    let userPage = `/user/${UserService.Instance.user.id}`;
+    let userPage = `/u/${UserService.Instance.user.username}`;
     i.context.router.history.push(userPage);
   }
 
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 40462eb66..198c8e8eb 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -103,7 +103,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <ul class="list-inline mb-0 text-muted small">
             <li className="list-inline-item">
               <span>by </span>
-              <Link className="text-info" to={`/user/${post.creator_id}`}>{post.creator_name}</Link>
+              <Link className="text-info" to={`/u/${post.creator_name}`}>{post.creator_name}</Link>
               {this.isMod && 
                 <span className="mx-1 badge badge-secondary">mod</span>
               }
@@ -113,7 +113,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.props.showCommunity && 
                 <span>
                   <span> to </span>
-                  <Link to={`/community/${post.community_id}`}>{post.community_name}</Link>
+                  <Link to={`/f/${post.community_name}`}>{post.community_name}</Link>
                 </span>
               }
             </li>
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 0d9715c4d..7bea5f904 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -57,7 +57,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           <small className="ml-2 text-muted font-italic">removed</small>
         }
       </h5>
-      <Link className="text-muted" to={`/community/${community.id}`}>/f/{community.name}</Link>
+      <Link className="text-muted" to={`/f/${community.name}`}>/f/{community.name}</Link>
       <ul class="list-inline mb-1 text-muted small font-weight-bold"> 
         {this.canMod && 
           <>
@@ -107,7 +107,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
       <ul class="list-inline small"> 
         <li class="list-inline-item">mods: </li>
         {this.props.moderators.map(mod =>
-          <li class="list-inline-item"><Link class="text-info" to={`/user/${mod.user_id}`}>{mod.user_name}</Link></li>
+          <li class="list-inline-item"><Link class="text-info" to={`/u/${mod.user_name}`}>{mod.user_name}</Link></li>
         )}
       </ul>
       <div>
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 1131428b3..1d1f8e638 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -16,6 +16,7 @@ enum View {
 interface UserState {
   user: UserView;
   user_id: number;
+  username: string;
   follows: Array<CommunityUser>;
   moderates: Array<CommunityUser>;
   comments: Array<Comment>;
@@ -41,6 +42,7 @@ export class User extends Component<any, UserState> {
       comment_score: null,
     },
     user_id: null,
+    username: null,
     follows: [],
     moderates: [],
     comments: [],
@@ -56,6 +58,7 @@ export class User extends Component<any, UserState> {
     this.state = this.emptyState;
 
     this.state.user_id = Number(this.props.match.params.id);
+    this.state.username = this.props.match.params.username;
 
     this.subscription = WebSocketService.Instance.subject
     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
@@ -206,7 +209,7 @@ export class User extends Component<any, UserState> {
             <h5>Moderates</h5>
             <ul class="list-unstyled"> 
               {this.state.moderates.map(community =>
-                <li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
+                <li><Link to={`/f/${community.community_name}`}>{community.community_name}</Link></li>
               )}
             </ul>
           </div>
@@ -224,7 +227,7 @@ export class User extends Component<any, UserState> {
             <h5>Subscribed</h5>
             <ul class="list-unstyled"> 
               {this.state.follows.map(community =>
-                <li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
+                <li><Link to={`/f/${community.community_name}`}>{community.community_name}</Link></li>
               )}
             </ul>
           </div>
@@ -259,6 +262,7 @@ export class User extends Component<any, UserState> {
   refetch() {
     let form: GetUserDetailsForm = {
       user_id: this.state.user_id,
+      username: this.state.username,
       sort: SortType[this.state.sort],
       saved_only: this.state.view == View.Saved,
       page: this.state.page,
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 4b3cd6111..446705f15 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -48,8 +48,9 @@ class Index extends Component<any, any> {
             <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={`/f/:name`} component={Community} />
             <Route path={`/user/:id`} component={User} />
+            <Route path={`/u/:username`} component={User} />
             <Route path={`/inbox`} component={Inbox} />
             <Route path={`/modlog/community/:community_id`} component={Modlog} />
             <Route path={`/modlog`} component={Modlog} />
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 05987fe3a..68d1b4122 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -141,8 +141,9 @@ export interface GetFollowedCommunitiesResponse {
 }
 
 export interface GetUserDetailsForm {
-  user_id: number;
-  sort: string; // TODO figure this one out
+  user_id?: number;
+  username?: string;
+  sort: string;
   page?: number;
   limit?: number;
   community_id?: number;
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index dc06df286..2389ab842 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -81,6 +81,11 @@ export class WebSocketService {
     this.subject.next(this.wsSendWrapper(UserOperation.GetCommunity, data));
   }
 
+  public getCommunityByName(name: string) {
+    let data = {name: name, auth: UserService.Instance.auth };
+    this.subject.next(this.wsSendWrapper(UserOperation.GetCommunity, data));
+  }
+
   public createComment(commentForm: CommentForm) {
     this.setAuth(commentForm);
     this.subject.next(this.wsSendWrapper(UserOperation.CreateComment, commentForm));