client/routing: move routing to controllers

client/css/main.css

@@ -119,6 +119,7 @@ nav.text-nav ul li.active a {
 }
 
 .messages {
+    margin: 0 auto;
     width: 30em;
     max-width: 100%;
 }

client/js/controllers/auth_controller.js

@@ -23,6 +23,16 @@ class AuthController {
         }
     }
 
+    registerRoutes() {
+        page(/\/password-reset\/([^:]+):([^:]+)$/,
+            (ctx, next) => {
+                this.passwordResetFinishRoute(ctx.params[0], ctx.params[1]);
+            });
+        page('/password-reset', (ctx, next) => { this.passwordResetRoute(); });
+        page('/login', (ctx, next) => { this.loginRoute(); });
+        page('/logout', (ctx, next) => { this.logoutRoute(); });
+    }
+
     loginRoute() {
         topNavController.activate('login');
         this.loginView.render({

client/js/controllers/comments_controller.js

@@ -1,8 +1,13 @@
 'use strict';
 
+const page = require('page');
 const topNavController = require('../controllers/top_nav_controller.js');
 
 class CommentsController {
+    registerRoutes() {
+        page('/comments', (ctx, next) => { this.listCommentsRoute(); });
+    }
+
     listCommentsRoute() {
         topNavController.activate('comments');
     }

client/js/controllers/help_controller.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const page = require('page');
 const topNavController = require('../controllers/top_nav_controller.js');
 const HelpView = require('../views/help_view.js');
 
@@ -8,6 +9,13 @@ class HelpController {
         this.helpView = new HelpView();
     }
 
+    registerRoutes() {
+        page('/help', () => { this.showHelpRoute(); });
+        page(
+            '/help/:section',
+            (ctx, next) => { this.showHelpRoute(ctx.params.section); });
+    }
+
     showHelpRoute(section) {
         topNavController.activate('help');
         this.helpView.render(section);

client/js/controllers/history_controller.js

@@ -1,8 +1,13 @@
 'use strict';
 
+const page = require('page');
 const topNavController = require('../controllers/top_nav_controller.js');
 
 class HistoryController {
+    registerRoutes() {
+        page('/history', (ctx, next) => { this.showHistoryRoute(); });
+    }
+
     listHistoryRoute() {
         topNavController.activate('');
     }

client/js/controllers/home_controller.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const page = require('page');
 const topNavController = require('../controllers/top_nav_controller.js');
 const HomeView = require('../views/home_view.js');
 
@@ -8,6 +9,11 @@ class HomeController {
         this.homeView = new HomeView();
     }
 
+    registerRoutes() {
+        page('/', (ctx, next) => { this.indexRoute(); });
+        page('*', (ctx, next) => { this.notFoundRoute(); });
+    }
+
     indexRoute() {
         topNavController.activate('home');
         this.homeView.render();

client/js/controllers/posts_controller.js

@@ -1,8 +1,20 @@
 'use strict';
 
+const page = require('page');
 const topNavController = require('../controllers/top_nav_controller.js');
 
 class PostsController {
+    registerRoutes() {
+        page('/upload', (ctx, next) => { this.uploadPostsRoute(); });
+        page('/posts', (ctx, next) => { this.listPostsRoute(); });
+        page(
+            '/post/:id',
+            (ctx, next) => { this.showPostRoute(ctx.params.id); });
+        page(
+            '/post/:id/edit',
+            (ctx, next) => { this.editPostRoute(ctx.params.id); });
+    }
+
     uploadPostsRoute() {
         topNavController.activate('upload');
     }

client/js/controllers/tags_controller.js

@@ -1,8 +1,13 @@
 'use strict';
 
+const page = require('page');
 const topNavController = require('../controllers/top_nav_controller.js');
 
 class TagsController {
+    registerRoutes() {
+        page('/tags', (ctx, next) => { this.listTagsRoute(); });
+    }
+
     listTagsRoute() {
         topNavController.activate('tags');
     }

client/js/controllers/top_nav_controller.js

@@ -43,7 +43,7 @@ class TopNavController {
     }
 
     updateVisibility() {
-        this.items['account'].url =  '/user/' + api.userName;
+        this.items.account.url =  '/user/' + api.userName;
 
         const b = Object.keys(this.items);
         for (let key of b) {

client/js/controllers/users_controller.js

@@ -5,10 +5,23 @@ const page = require('page');
 const api = require('../api.js');
 const topNavController = require('../controllers/top_nav_controller.js');
 const RegistrationView = require('../views/registration_view.js');
+const UserView = require('../views/user_view.js');
 
 class UsersController {
     constructor() {
         this.registrationView = new RegistrationView();
+        this.userView = new UserView();
+    }
+
+    registerRoutes() {
+        page('/register', () => { this.createUserRoute(); });
+        page('/users', () => { this.listUsersRoute(); });
+        page(
+            '/user/:name',
+            (ctx, next) => { this.showUserRoute(ctx.params.name); });
+        page(
+            '/user/:name/edit',
+            (ctx, next) => { this.editUserRoute(ctx.params.name); });
     }
 
     listUsersRoute() {
@@ -28,7 +41,6 @@ class UsersController {
             'password': password,
             'email': email
         };
-        // TODO: reduce callback hell
         return new Promise((resolve, reject) => {
             api.post('/users/', data).then(() => {
                 api.login(name, password).then(() => {
@@ -45,12 +57,18 @@ class UsersController {
         });
     }
 
-    showUserRoute(user) {
-        if (api.isLoggedIn() && user == api.userName) {
+    showUserRoute(name) {
+        if (api.isLoggedIn() && name == api.userName) {
             topNavController.activate('account');
         } else {
             topNavController.activate('users');
         }
+        this.userView.empty();
+        api.get('/user/' + name).then(response => {
+            this.userView.render({user: response.user});
+        }).catch(response => {
+            this.userView.notifyError(response.description);
+        });
     }
 
     editUserRoute(user) {

client/js/main.js

@@ -2,63 +2,19 @@
 
 require('./util/handlebars-helpers.js');
 
-// ----------------------
-// - import controllers -
-// ----------------------
-const homeController = require('./controllers/home_controller.js');
-const postsController = require('./controllers/posts_controller.js');
-const usersController = require('./controllers/users_controller.js');
-const helpController = require('./controllers/help_controller.js');
-const authController = require('./controllers/auth_controller.js');
-const commentsController = require('./controllers/comments_controller.js');
-const historyController = require('./controllers/history_controller.js');
-const tagsController = require('./controllers/tags_controller.js');
+let controllers = [];
+controllers.push(require('./controllers/posts_controller.js'));
+controllers.push(require('./controllers/users_controller.js'));
+controllers.push(require('./controllers/help_controller.js'));
+controllers.push(require('./controllers/auth_controller.js'));
+controllers.push(require('./controllers/comments_controller.js'));
+controllers.push(require('./controllers/history_controller.js'));
+controllers.push(require('./controllers/tags_controller.js'));
+
+controllers.push(require('./controllers/home_controller.js'));
 
-// -----------------
-// - setup routing -
-// -----------------
 const page = require('page');
-
-page('/', () => { homeController.indexRoute(); });
-
-page('/upload', () => { postsController.uploadPostsRoute(); });
-page('/posts', () => { postsController.listPostsRoute(); });
-page('/post/:id', id => { postsController.showPostRoute(id); });
-page('/post/:id/edit', id => { postsController.editPostRoute(id); });
-
-page('/register', () => { usersController.createUserRoute(); });
-page('/users', () => { usersController.listUsersRoute(); });
-
-page(
-    '/user/:name',
-    (ctx, next) => {
-        usersController.showUserRoute(ctx.params.name);
-    });
-
-page(
-    '/user/:name/edit',
-    (ctx, next) => {
-        usersController.editUserRoute(ctx.params.name);
-    });
-
-page('/history', () => { historyController.showHistoryRoute(); });
-page('/tags', () => { tagsController.listTagsRoute(); });
-page('/comments', () => { commentsController.listCommentsRoute(); });
-page(/\/password-reset\/([^:]+):([^:]+)$/,
-    (ctx, next) => {
-        authController.passwordResetFinishRoute(ctx.params[0], ctx.params[1]);
-    });
-page('/password-reset', () => { authController.passwordResetRoute(); });
-page('/login', () => { authController.loginRoute(); });
-page('/logout', () => { authController.logoutRoute(); });
-
-page(
-    '/help/:section',
-    (ctx, next) => {
-        helpController.showHelpRoute(ctx.params.section);
-    });
-page('/help', () => { helpController.showHelpRoute(); });
-
-page('*', () => { homeController.notFoundRoute(); });
-
+for (let controller of controllers) {
+    controller.registerRoutes();
+}
 page();

client/js/views/base_view.js

@@ -70,6 +70,10 @@ class BaseView {
         }
     }
 
+    empty() {
+        this.showView('<div class="messages"></div>');
+    }
+
     showView(html) {
         this.contentHolder.innerHTML = html;
     }

client/js/views/help_view.js

@@ -25,7 +25,7 @@ class HelpView extends BaseView {
         }
 
         const content = this.sectionTemplates[section]({
-            'name': config.name,
+            name: config.name,
         });
 
         this.showView(this.template({'content': content}));