From 5f29fa12c28c8f62eaab2ef81ff5b1d01cd1f256 Mon Sep 17 00:00:00 2001 From: rr- Date: Wed, 6 Apr 2016 21:49:26 +0200 Subject: [PATCH] client/routing: move routing to controllers --- client/css/main.css | 1 + client/js/controllers/auth_controller.js | 10 +++ client/js/controllers/comments_controller.js | 5 ++ client/js/controllers/help_controller.js | 8 +++ client/js/controllers/history_controller.js | 5 ++ client/js/controllers/home_controller.js | 6 ++ client/js/controllers/posts_controller.js | 12 ++++ client/js/controllers/tags_controller.js | 5 ++ client/js/controllers/top_nav_controller.js | 2 +- client/js/controllers/users_controller.js | 24 ++++++- client/js/main.js | 70 ++++---------------- client/js/views/base_view.js | 4 ++ client/js/views/help_view.js | 2 +- 13 files changed, 92 insertions(+), 62 deletions(-) diff --git a/client/css/main.css b/client/css/main.css index 06ff5f5..4e00500 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -119,6 +119,7 @@ nav.text-nav ul li.active a { } .messages { + margin: 0 auto; width: 30em; max-width: 100%; } diff --git a/client/js/controllers/auth_controller.js b/client/js/controllers/auth_controller.js index 1a4565d..04cfec5 100644 --- a/client/js/controllers/auth_controller.js +++ b/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({ diff --git a/client/js/controllers/comments_controller.js b/client/js/controllers/comments_controller.js index ff934df..1b20fca 100644 --- a/client/js/controllers/comments_controller.js +++ b/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'); } diff --git a/client/js/controllers/help_controller.js b/client/js/controllers/help_controller.js index 86788f6..9ee980d 100644 --- a/client/js/controllers/help_controller.js +++ b/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); diff --git a/client/js/controllers/history_controller.js b/client/js/controllers/history_controller.js index 4ecad22..8c0915e 100644 --- a/client/js/controllers/history_controller.js +++ b/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(''); } diff --git a/client/js/controllers/home_controller.js b/client/js/controllers/home_controller.js index 1eede35..1384e15 100644 --- a/client/js/controllers/home_controller.js +++ b/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(); diff --git a/client/js/controllers/posts_controller.js b/client/js/controllers/posts_controller.js index 08cd2d2..f55cdef 100644 --- a/client/js/controllers/posts_controller.js +++ b/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'); } diff --git a/client/js/controllers/tags_controller.js b/client/js/controllers/tags_controller.js index f16123b..6058847 100644 --- a/client/js/controllers/tags_controller.js +++ b/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'); } diff --git a/client/js/controllers/top_nav_controller.js b/client/js/controllers/top_nav_controller.js index b248f44..a6da22f 100644 --- a/client/js/controllers/top_nav_controller.js +++ b/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) { diff --git a/client/js/controllers/users_controller.js b/client/js/controllers/users_controller.js index 5bd78f8..9390e2a 100644 --- a/client/js/controllers/users_controller.js +++ 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) { diff --git a/client/js/main.js b/client/js/main.js index c221d3d..b3706db 100644 --- a/client/js/main.js +++ b/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(); diff --git a/client/js/views/base_view.js b/client/js/views/base_view.js index 426181a..c805d8a 100644 --- a/client/js/views/base_view.js +++ b/client/js/views/base_view.js @@ -70,6 +70,10 @@ class BaseView { } } + empty() { + this.showView('
'); + } + showView(html) { this.contentHolder.innerHTML = html; } diff --git a/client/js/views/help_view.js b/client/js/views/help_view.js index eaf6c14..52adfd0 100644 --- a/client/js/views/help_view.js +++ b/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}));