Added support for parameters in presenters

public_html/index.html

@@ -36,6 +36,7 @@
 	<script type="text/javascript" src="/js/Presenters/MessagePresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/RegistrationPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/UserListPresenter.js"></script>
+	<script type="text/javascript" src="/js/Presenters/UserPresenter.js"></script>
 	<script type="text/javascript" src="/js/Router.js"></script>
 	<script type="text/javascript" src="/js/Bootstrap.js"></script>
 </body>

public_html/js/Auth.js

@@ -74,9 +74,9 @@ App.Auth = function(jQuery, api, appState) {
 	};
 
 	function updateAppState(response) {
-		appState.set('loggedIn', response.json.user && !!response.json.user.id);
 		appState.set('loginToken', response.json.token && response.json.token.name);
 		appState.set('loggedInUser', response.json.user);
+		appState.set('loggedIn', response.json.user && !!response.json.user.id);
 	}
 
 	return {

public_html/js/Bootstrap.js

@@ -1,6 +1,8 @@
 var App = App || {};
 
-App.Bootstrap = function(auth, router) {
+App.Bootstrap = function(auth, router, util) {
+
+	util.initPresenter(function() { return App.DI.get('topNavigationPresenter'); });
 
 	auth.tryLoginFromCookie()
 		.then(startRouting)

public_html/js/Presenters/LoginPresenter.js

@@ -10,22 +10,19 @@ App.Presenters.LoginPresenter = function(
 	router,
 	appState) {
 
-	topNavigationPresenter.select('login');
-
 	var $el = jQuery('#content');
 	var $messages;
 	var template;
 
+	function init() {
+		topNavigationPresenter.select('login');
 		util.loadTemplate('login-form').then(function(html) {
 			template = _.template(html);
-		init();
-	});
-
-	function init() {
 			if (appState.get('loggedIn'))
 				router.navigateToMainPage();
 			else
 				render();
+		});
 	}
 
 	function render() {
@@ -55,6 +52,7 @@ App.Presenters.LoginPresenter = function(
 	}
 
 	return {
+		init: init,
 		render: render,
 	};
 

public_html/js/Presenters/LogoutPresenter.js

@@ -8,13 +8,10 @@ App.Presenters.LogoutPresenter = function(
 	auth,
 	router) {
 
-	topNavigationPresenter.select('logout');
-
 	var $messages = jQuery('#content');
 
-	init();
-
 	function init() {
+		topNavigationPresenter.select('logout');
 		auth.logout().then(function() {
 			var $messageDiv = messagePresenter.showInfo($messages, 'Logged out. <a href="">Back to main page</a>');
 			$messageDiv.find('a').click(mainPageLinkClicked);
@@ -28,7 +25,9 @@ App.Presenters.LogoutPresenter = function(
 		router.navigateToMainPage();
 	}
 
-	return {};
+	return {
+		init: init
+	};
 
 };
 

public_html/js/Presenters/RegistrationPresenter.js

@@ -8,18 +8,15 @@ App.Presenters.RegistrationPresenter = function(
 	messagePresenter,
 	api) {
 
-	topNavigationPresenter.select('register');
-
 	var $el = jQuery('#content');
 	var template;
 
+	function init() {
+		topNavigationPresenter.select('register');
 		util.loadTemplate('registration-form').then(function(html) {
 			template = _.template(html);
-		init();
-	});
-
-	function init() {
 			render();
+		});
 	}
 
 	function render() {
@@ -84,6 +81,7 @@ App.Presenters.RegistrationPresenter = function(
 	};
 
 	return {
+		init: init,
 		render: render,
 	};
 

public_html/js/Presenters/TopNavigationPresenter.js

@@ -7,14 +7,12 @@ App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) {
 	var $el = jQuery('#top-navigation');
 	var template;
 
+	function init() {
 		util.loadTemplate('top-navigation').then(function(html) {
 			template = _.template(html);
-		init();
-	});
-
-	function init() {
 			render();
 			appState.startObserving('loggedIn', 'top-navigation', loginStateChanged);
+		});
 	}
 
 	function select(newSelectedElement) {
@@ -28,11 +26,15 @@ App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) {
 	}
 
 	function render() {
-		$el.html(template({loggedIn: appState.get('loggedIn')}));
+		$el.html(template({
+			loggedIn: appState.get('loggedIn'),
+			user: appState.get('loggedInUser'),
+		}));
 		$el.find('li.' + selectedElement).addClass('active');
 	};
 
 	return {
+		init: init,
 		render: render,
 		select: select,
 	};

public_html/js/Presenters/UserListPresenter.js

@@ -3,13 +3,10 @@ App.Presenters = App.Presenters || {};
 
 App.Presenters.UserListPresenter = function(jQuery, topNavigationPresenter, appState) {
 
-	topNavigationPresenter.select('users');
-
 	var $el = jQuery('#content');
 
-	init();
-
 	function init() {
+		topNavigationPresenter.select('users');
 		render();
 	}
 
@@ -18,6 +15,7 @@ App.Presenters.UserListPresenter = function(jQuery, topNavigationPresenter, appS
 	};
 
 	return {
+		init: init,
 		render: render
 	};
 

public_html/js/Presenters/UserPresenter.js

@@ -0,0 +1,26 @@
+var App = App || {};
+App.Presenters = App.Presenters || {};
+
+App.Presenters.UserPresenter = function(jQuery, topNavigationPresenter, appState) {
+
+	var $el = jQuery('#content');
+	var userName;
+
+	function init(args) {
+		userName = args.userName;
+		topNavigationPresenter.select(appState.get('loggedIn') && appState.get('loggedInUser').name == userName ? 'my-account' : 'users');
+		render();
+	}
+
+	function render() {
+		$el.html('Viewing user: ' + userName);
+	};
+
+	return {
+		init: init,
+		render: render
+	};
+
+};
+
+App.DI.register('userPresenter', App.Presenters.UserPresenter);

public_html/js/Router.js

@@ -1,6 +1,6 @@
 var App = App || {};
 
-App.Router = function(jQuery) {
+App.Router = function(jQuery, util) {
 
 	var root = '#/';
 
@@ -18,16 +18,12 @@ App.Router = function(jQuery) {
 		Path.listen();
 	};
 
-	function changePresenter(presenterGetter) {
-		jQuery('#content').empty();
-		var presenter = presenterGetter();
-	};
-
 	function injectRoutes() {
-		inject('#/login', function() { return new App.DI.get('loginPresenter'); });
+		inject('#/login', function() { return App.DI.get('loginPresenter'); });
-		inject('#/logout', function() { return new App.DI.get('logoutPresenter'); });
+		inject('#/logout', function() { return App.DI.get('logoutPresenter'); });
-		inject('#/register', function() { return new App.DI.get('registrationPresenter'); });
+		inject('#/register', function() { return App.DI.get('registrationPresenter'); });
 		inject('#/users', function() { return App.DI.get('userListPresenter'); });
+		inject('#/users/:userName', function() { return App.DI.get('userPresenter'); });
 		setRoot('#/users');
 	};
 
@@ -38,7 +34,7 @@ App.Router = function(jQuery) {
 
 	function inject(path, presenterGetter) {
 		Path.map(path).to(function() {
-			changePresenter(presenterGetter);
+			util.initContentPresenter(presenterGetter, this.params);
 		});
 	};
 

public_html/js/Util.js

@@ -28,6 +28,16 @@ App.Util = (function(jQuery) {
 		return null;
 	}
 
+	function initPresenter(presenterGetter, args) {
+		var presenter = presenterGetter();
+		presenter.init.call(presenter, args);
+	}
+
+	function initContentPresenter(presenterGetter, args) {
+		jQuery('#content').empty();
+		initPresenter(presenterGetter, args);
+	};
+
 	function loadTemplateWithAJAX(templateName) {
 		return new Promise(function(resolve, reject) {
 			var templatesDir = '/templates';
@@ -50,6 +60,8 @@ App.Util = (function(jQuery) {
 
 	return {
 		loadTemplate: loadTemplate,
+		initPresenter : initPresenter,
+		initContentPresenter: initContentPresenter,
 	};
 });
 

public_html/templates/top-navigation.tpl

@@ -11,6 +11,9 @@
 			<a href="#/register">Register</a>
 		</li>
 	<% } else { %>
+		<li class="my-account">
+			<a href="#/users/<%= user.name %>"><%= user.name %></a>
+		</li>
 		<li class="logout">
 			<a href="#/logout">Logout</a>
 		</li>