Refactor connection logic

Aiming to be flatter, with less deep nesting. Still more to go here.

public/src/app.js

@@ -13,11 +13,58 @@ var socket,
 
 (function () {
 	var showWelcomeMessage = false;
+	var reconnecting = false;
 
-	app.loadConfig = function() {
+	function onSocketConnect(data) {
-		$.ajax({
+		if (reconnecting) {
-			url: RELATIVE_PATH + '/api/config',
+			var reconnectEl = $('#reconnect');
-			success: function (data) {
+
+			reconnectEl.tooltip('destroy');
+			reconnectEl.html('<i class="fa fa-check"></i>');
+			reconnecting = false;
+
+			// Rejoin room that was left when we disconnected
+			var	url_parts = document.location.pathname.slice(RELATIVE_PATH.length).split('/').slice(1);
+			var room;
+
+			switch(url_parts[0]) {
+				case 'user':
+					room = 'user/' + ajaxify.variables.get('theirid');
+				break;
+				case 'topic':
+					room = 'topic_' + url_parts[1];
+				break;
+				case 'category':
+					room = 'category_' + url_parts[1];
+				break;
+				case 'recent':	// intentional fall-through
+				case 'unread':
+					room = 'recent_posts';
+				break;
+				case 'admin':
+					room = 'admin';
+				break;
+				default:
+					room = 'global';
+				break;
+			}
+
+			app.enterRoom(room, true);
+
+			socket.emit('meta.reconnected');
+			$(window).trigger('action:reconnected');
+
+			setTimeout(function() {
+				reconnectEl.removeClass('active').addClass("hide");
+			}, 3000);
+		}
+
+		socket.emit('meta.updateHeader', {
+			fields: ['username', 'picture', 'userslug']
+		}, app.updateHeader);
+	}
+
+	function onConfigLoad(data) {
 		config = data;
 
 		exposeConfigToTemplates();
@@ -39,9 +86,7 @@ var socket,
 			}
 
 			socket = io.connect('', ioParams);
-
+			reconnecting = false;
-					var reconnecting = false,
-						reconnectEl, reconnectTimer;
 
 			socket.on('event:connect', function (data) {
 				app.username = data.username;
@@ -63,51 +108,7 @@ var socket,
 				app.alert(data);
 			});
 
-					socket.on('connect', function (data) {
+			socket.on('connect', onSocketConnect);
-						if (reconnecting) {
-							reconnectEl.tooltip('destroy');
-							reconnectEl.html('<i class="fa fa-check"></i>');
-							reconnecting = false;
-
-							// Rejoin room that was left when we disconnected
-							var	url_parts = document.location.pathname.slice(RELATIVE_PATH.length).split('/').slice(1),
-								room;
-							switch(url_parts[0]) {
-								case 'user':
-									room = 'user/' + ajaxify.variables.get('theirid');
-									break;
-								case 'topic':
-									room = 'topic_' + url_parts[1];
-									break;
-								case 'category':
-									room = 'category_' + url_parts[1];
-									break;
-								case 'recent':	// intentional fall-through
-								case 'unread':
-									room = 'recent_posts';
-									break;
-								case 'admin':
-									room = 'admin';
-									break;
-
-								default:
-									room = 'global';
-									break;
-							}
-							app.enterRoom(room, true);
-
-							socket.emit('meta.reconnected');
-							$(window).trigger('action:reconnected');
-
-							setTimeout(function() {
-								reconnectEl.removeClass('active').addClass("hide");
-							}, 3000);
-						}
-
-						socket.emit('meta.updateHeader', {
-							fields: ['username', 'picture', 'userslug']
-						}, app.updateHeader);
-					});
 
 			socket.on('event:disconnect', function() {
 				$(window).trigger('action:disconnected');
@@ -121,8 +122,8 @@ var socket,
 					return;
 				}
 
-						reconnectEl = reconnectEl || $('#reconnect');
 				reconnecting = true;
+				var reconnectEl = $('#reconnect');
 
 				if (!reconnectEl.hasClass('active')) {
 					reconnectEl.html('<i class="fa fa-spinner fa-spin"></i>');
@@ -156,7 +157,12 @@ var socket,
 				};
 			}
 		}
-			},
+	}
+
+	app.loadConfig = function() {
+		$.ajax({
+			url: RELATIVE_PATH + '/api/config',
+			success: onConfigLoad,
 			async: false
 		});
 	};