add-server: Make adding server dynamic [WIP].

app/renderer/js/main.js

@@ -120,8 +120,7 @@ class ServerManagerView {
 		this.toggleSidebar(showSidebar);
 	}
 
-	initTabs() {
-		const servers = DomainUtil.getDomains();
+	initTabs(servers = DomainUtil.getDomains()) {
 		if (servers.length > 0) {
 			for (let i = 0; i < servers.length; i++) {
 				this.initServer(servers[i], i);
@@ -137,6 +136,45 @@ class ServerManagerView {
 		}
 	}
 
+  /*
+    This function does a bit of updating our internal props
+    to make sure everything works as expected, the thing that are
+    done here is if there are any FunctionlTabs we need to move them
+    after the tabs so the tabs have correct id's.
+  */
+	addServer(server) {
+		const functionalTabsData = [];
+		this.tabs.forEach((tab, index) => {
+			if (tab instanceof FunctionalTab) {
+				functionalTabsData.push({
+					index,
+					tab
+				});
+
+				this.tabs.splice(index, 1);
+			}
+		});
+
+		const index = this.tabs.length;
+		this.initServer(server, index);
+		this.tabs[index].webview.init();
+		this.activateTab(index);
+
+    // restore back function tabs
+		functionalTabsData.forEach(data => {
+			this.tabs.push(data.tab);
+			for (const tabName in this.functionalTabs) {
+				const value = this.functionalTabs[tabName];
+				if (value === data.index) {
+					const newIndex = this.tabs.length - 1;
+					const webview = document.querySelector(`webview[data-tab-id="${data.index}"]`);
+					webview.setAttribute('data-tab-id', newIndex);
+					this.functionalTabs[tabName] = newIndex;
+				}
+			}
+		});
+	}
+
 	initServer(server, index) {
 		const tabIndex = this.getTabIndex();
 		this.tabs.push(new ServerTab({
@@ -563,6 +601,13 @@ window.onload = () => {
 	const serverManagerView = new ServerManagerView();
 	const reconnectUtil = new ReconnectUtil(serverManagerView);
 	serverManagerView.init();
+
+	window.serverManagerView = serverManagerView;
+	window.FunctionalTab = FunctionalTab;
+	ipcRenderer.on('add-server', (event, server) => {
+		serverManagerView.addServer(server);
+	});
+
 	window.addEventListener('online', () => {
 		reconnectUtil.pollInternetAndReload();
 	});

app/renderer/js/pages/preference/new-server-form.js

@@ -2,6 +2,7 @@
 
 const BaseComponent = require(__dirname + '/../../components/base.js');
 const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+const { ipcRenderer } = require('electron');
 const shell = require('electron').shell;
 
 class NewServerForm extends BaseComponent {
@@ -50,12 +51,11 @@ class NewServerForm extends BaseComponent {
 		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0];
 	}
 
-	submitFormHandler() {
+	async submitFormHandler() {
 		this.$saveServerButton.children[0].innerHTML = 'Connecting...';
-		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
-			DomainUtil.addDomain(serverConf).then(() => {
-				this.props.onChange(this.props.index);
-			});
+		DomainUtil.checkDomain(this.$newServerUrl.value).then(async serverConf => {
+			const server = await DomainUtil.addDomain(serverConf);
+			ipcRenderer.send('forward-message', 'add-server', server);
 		}, errorMessage => {
 			this.$saveServerButton.children[0].innerHTML = 'Connect';
 			alert(errorMessage);

app/renderer/js/pages/preference/servers-section.js

@@ -37,8 +37,7 @@ class ServersSection extends BaseSection {
 
 	initNewServerForm() {
 		new NewServerForm({
-			$root: this.$newServerContainer,
-			onChange: this.reloadApp
+			$root: this.$newServerContainer
 		}).init();
 	}
 }

app/renderer/js/utils/domain-util.js

@@ -65,13 +65,13 @@ class DomainUtil {
 					server.icon = localIconUrl;
 					this.db.push('/domains[]', server, true);
 					this.reloadDB();
-					resolve();
+					resolve(server);
 				});
 			} else {
 				server.icon = defaultIconUrl;
 				this.db.push('/domains[]', server, true);
 				this.reloadDB();
-				resolve();
+				resolve(server);
 			}
 		});
 	}