[Minor]: Change route: '/groups/:id' -> '/groups/:name', '/users/:id'…

… -> '/users/:username'.
sontdhust · Aug 29, 2016 · 44a4f2c · 44a4f2c
1 parent b5ca518
commit 44a4f2c
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -106,7 +106,7 @@ $ CLOUDINARY_KEY=<i>ApiKey</i> CLOUDINARY_SECRET=<i>ApiSecret</i> meteor --setti
 - [x] Remove 'restart' button
 - [x] Remove fixtures
 - [x] Clear message text input after sending
-- [ ] Change route: `/groups/:id` -> `/groups/:name`, `/users/:id` -> `/users/:name`
+- [x] Change route: `/groups/:id` -> `/groups/:name`, `/users/:id` -> `/users/:username`
 - [x] Group name: format validation and unique
 - [ ] Show result when approve/vote finished (Notification)
 - [ ] Separate events

diff --git a/imports/api/groups/server/publications.js b/imports/api/groups/server/publications.js
@@ -15,7 +15,7 @@ Meteor.publish('groups.findAll', (name, page) => {
   return Groups.find(selector, { fields: Groups.publicFields.findAll, sort: { createdAt: -1 }, limit: GROUPS_PER_PAGE });
 });
 
-Meteor.publish('groups.findOne', id => {
-  check(id, String);
-  return Groups.find({ _id: id }, { fields: Groups.publicFields.findOne });
+Meteor.publish('groups.findOneByName', name => {
+  check(name, String);
+  return Groups.find({ name: name }, { fields: Groups.publicFields.findOne });
 });
diff --git a/imports/api/users/server/publications.js b/imports/api/users/server/publications.js
@@ -6,3 +6,7 @@ Meteor.publish('users.findOne', id => {
   check(id, String);
   return Meteor.users.find({ _id: id }, { fields: { username: 1, brief: 1, activities: 1 } });
 });
+Meteor.publish('users.findOneByUsername', username => {
+  check(username, String);
+  return Meteor.users.find({ username: username }, { fields: { username: 1, brief: 1, activities: 1 } });
+});
diff --git a/imports/startup/client/routes.jsx b/imports/startup/client/routes.jsx
@@ -14,9 +14,9 @@ export const renderRoutes = () => (
     <Route path="" component={AppContainer}>
       <Route path="/" component={LobbyContainer}/>
       <Route component={Auth}>
-        <Route path="/groups/:id" component={GroupContainer}/>
+        <Route path="/groups/:name" component={GroupContainer}/>
       </Route>
-      <Route path="/users/:id" component={UserContainer}/>
+      <Route path="/users/:username" component={UserContainer}/>
       <Route path="/login" component={Login}/>
       <Route path="/signup" component={Signup}/>
       <Route path="/rules" component={Rules}/>

diff --git a/imports/ui/components/group_row.jsx b/imports/ui/components/group_row.jsx
@@ -19,16 +19,16 @@ export default class GroupRow extends React.Component {
     return (
       <tr>
         <td>
-          <a href={`/groups/${group._id}`}><b>{group.name}</b></a>
+          <a href={`/groups/${group.name}`}><b>{group.name}</b></a>
           <br/>
-          <small>Owner: <a href={`/users/${group.getOwner()._id}`}>{group.getOwner().username}</a></small>
+          <small>Owner: <a href={`/users/${group.getOwner().username}`}>{group.getOwner().username}</a></small>
         </td>
         <MediumAndSmallDevice>
           <td>
             <ul className="list-inline">
               {group.getPlayers().map(p =>
                 <li key={p.user._id}>
-                  <a href={`/users/${p.user._id}`}>
+                  <a href={`/users/${p.user.username}`}>
                     <img src={p.user.getAvatarSrc()} className="avatar" alt="Avatar" data-container="body" data-toggle="tooltip" title={p.user.username}/>
                   </a>
                 </li>
@@ -58,7 +58,7 @@ export default class GroupRow extends React.Component {
           }
         </td>
         <td>
-          <a href={`/groups/${group._id}`} className="btn btn-sm btn-dark"><i className="fa fa-group"></i> Go to</a>
+          <a href={`/groups/${group.name}`} className="btn btn-sm btn-dark"><i className="fa fa-group"></i> Go to</a>
           {
             !!Meteor.userId() && (joinedThisGroup || situation.slot != false) && !isPlaying ?
               !joinedThisGroup && !isPlaying ?
@@ -80,12 +80,12 @@ export default class GroupRow extends React.Component {
 
   joinGroup() {
     const { router } = this.context;
-    const groupId = this.props.group._id;
-    join.call({ groupId: groupId }, err => {
+    const { group } = this.props;
+    join.call({ groupId: group._id }, err => {
       if (err) {
         alert(err.reason);
       } else {
-        router.push(`/groups/${groupId}`);
+        router.push(`/groups/${group.name}`);
       }
     });
   }

diff --git a/imports/ui/components/messages_content.jsx b/imports/ui/components/messages_content.jsx
@@ -20,7 +20,7 @@ export default class MessagesContent extends React.Component {
             const otherPlayer = Meteor.userId() != m.senderId;
             return (
               <li key={i} className="media event">
-                <a href={`/users/${m.senderId}`} className={`pull-${otherPlayer ? 'left' : 'right'} border-${group.hasPlayer(m.senderId) ? otherPlayer ? 'blue' : 'green' : 'dark'} profile_thumb`}>
+                <a href={`/users/${sender.username}`} className={`pull-${otherPlayer ? 'left' : 'right'} border-${group.hasPlayer(m.senderId) ? otherPlayer ? 'blue' : 'green' : 'dark'} profile_thumb`}>
                   <img src={sender.getAvatarSrc()} className={`img-responsive fa fa-user ${group.hasPlayer(m.senderId) ? otherPlayer ? 'blue' : 'green' : 'dark'}`}/>
                 </a>
                 <div className="media-body">

diff --git a/imports/ui/containers/group_container.jsx b/imports/ui/containers/group_container.jsx
@@ -3,9 +3,9 @@ import { Groups } from '../../api/groups/groups.jsx';
 import { createContainer } from 'meteor/react-meteor-data';
 import GroupPage from '../pages/group_page.jsx';
 
-export default createContainer(({ params: { id } }) => {
-  const group = Groups.findOne(id);
-  const loaded = Meteor.subscribe('groups.findOne', id).ready() && Meteor.subscribe('users.findAll').ready();
+export default createContainer(({ params: { name } }) => {
+  const group = Groups.findOne({ name: name });
+  const loaded = Meteor.subscribe('groups.findOneByName', name).ready() && Meteor.subscribe('users.findAll').ready();
   return {
     _user: Meteor.user(), // NOTE: Additional prop: make page automatically re-render even if user logged out
     group: group,

diff --git a/imports/ui/containers/user_container.jsx b/imports/ui/containers/user_container.jsx
@@ -2,11 +2,11 @@ import { Meteor } from 'meteor/meteor';
 import { createContainer } from 'meteor/react-meteor-data';
 import UserPage from '../pages/user_page.jsx';
 
-export default createContainer(({ params: { id } }) => {
-  const loaded = Meteor.subscribe('users.findOne', id).ready();
+export default createContainer(({ params: { username } }) => {
+  const loaded = Meteor.subscribe('users.findOneByUsername', username).ready();
   return {
     _user: Meteor.user(), // NOTE: Additional prop: make page automatically re-render even if user logged out
-    user: Meteor.users.findOne(id),
+    user: Meteor.users.findOne({ username: username }),
     loaded: loaded,
   };
 }, UserPage);
diff --git a/imports/ui/layouts/navbar.jsx b/imports/ui/layouts/navbar.jsx
@@ -25,7 +25,7 @@ export default class Navbar extends React.Component {
                       <img src={user.getAvatarSrc()} alt=""/>{user.username}
                     </a>
                     <ul className="dropdown-menu dropdown-usermenu pull-right">
-                      <li><a href={`/users/${user._id}`}>Profile</a></li>
+                      <li><a href={`/users/${user.username}`}>Profile</a></li>
                       <li><a onClick={this.logout}><i className="fa fa-sign-out pull-right"></i> Log Out</a></li>
                     </ul>
                   </li> :

diff --git a/imports/ui/pages/lobby.jsx b/imports/ui/pages/lobby.jsx
@@ -66,7 +66,7 @@ export default class Lobby extends React.Component {
       if (err) {
         this.setState({ error: err.reason });
       } else {
-        router.push(`/groups/${groupId}`);
+        router.push(`/groups/${name}`);
       }
     });
   }