Adding /f/ and /u/ in links now.

- Fixes #102

15 files changed, 51 insertions, 32 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index fabacb28..0c0fd821 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 23206807..38344007 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 2d5aa3e7..66071a3f 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 f521d518..ba542582 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 fb264ab2..04ef6d3b 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 50fd47c2..02d813f3 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 0687ffbc..6911ca40 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 55df617a..f644b163 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 fb8f5755..88d270e1 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 40462eb6..198c8e8e 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 0d9715c4..7bea5f90 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 1131428b..1d1f8e63 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 4b3cd611..446705f1 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 05987fe3..68d1b412 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 dc06df28..2389ab84 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));