Add UI to edit/delete a network

components/app.js

@@ -187,7 +187,8 @@ export default class App extends Component {
 		this.handleBufferScrollTop = this.handleBufferScrollTop.bind(this);
 		this.handleDialogDismiss = this.handleDialogDismiss.bind(this);
 		this.handleAddNetworkClick = this.handleAddNetworkClick.bind(this);
-		this.handleAddNetworkSubmit = this.handleAddNetworkSubmit.bind(this);
+		this.handleNetworkSubmit = this.handleNetworkSubmit.bind(this);
+		this.handleNetworkRemove = this.handleNetworkRemove.bind(this);
 		this.dismissError = this.dismissError.bind(this);
 
 		this.saveReceipts = debounce(this.saveReceipts.bind(this), 500);
@@ -984,20 +985,55 @@ export default class App extends Component {
 	}
 
 	handleAddNetworkClick() {
-		this.setState({ dialog: "add-network" });
+		this.setState({ dialog: "network", networkDialog: null });
 	}
 
-	handleAddNetworkSubmit(attrs) {
+	handleManageNetworkClick(netID) {
+		var network = this.state.networks.get(netID);
+		var bouncerNetID = network.isupport.get("BOUNCER_NETID");
+		var bouncerNetwork = this.state.bouncerNetworks.get(bouncerNetID);
+		this.setState({
+			dialog: "network",
+			networkDialog: {
+				id: bouncerNetID,
+				params: bouncerNetwork,
+			},
+		});
+	}
+
+	handleNetworkSubmit(attrs) {
 		var client = this.clients.values().next().value;
+
+		if (this.state.networkDialog && this.state.networkDialog.id) {
+			if (Object.keys(attrs).length == 0) {
+				this.setState({ dialog: null });
+				return;
+			}
+
+			client.send({
+				command: "BOUNCER",
+				params: ["CHANGENETWORK", this.state.networkDialog.id, irc.formatTags(attrs)],
+			});
+		} else {
+			attrs = { ...attrs, tls: "1" };
+			client.send({
+				command: "BOUNCER",
+				params: ["ADDNETWORK", irc.formatTags(attrs)],
+			});
+		}
+
+		this.setState({ dialog: null, networkDialog: null });
+	}
+
+	handleNetworkRemove() {
+		var client = this.clients.values().next().value;
+
 		client.send({
 			command: "BOUNCER",
-			params: ["ADDNETWORK", irc.formatTags({
+			params: ["DELNETWORK", this.state.networkDialog.id],
-				...attrs,
-				name: attrs.host,
-				tls: 1,
-			})],
 		});
-		this.setState({ dialog: null });
+
+		this.setState({ dialog: null, networkDialog: null });
 	}
 
 	componentDidMount() {
@@ -1045,6 +1081,7 @@ export default class App extends Component {
 						onClose=${() => this.close(activeBuffer)}
 						onJoin=${() => this.handleJoinClick(activeBuffer.network)}
 						onAddNetwork=${this.handleAddNetworkClick}
+						onManageNetwork=${() => this.handleManageNetworkClick(activeBuffer.network)}
 					/>
 				</section>
 			`;
@@ -1067,10 +1104,15 @@ export default class App extends Component {
 
 		var dialog = null;
 		switch (this.state.dialog) {
-		case "add-network":
+		case "network":
+			var title = this.state.networkDialog ? "Edit network" : "Add network";
 			dialog = html`
-				<${Dialog} title="Add network" onDismiss=${this.handleDialogDismiss}>
+				<${Dialog} title=${title} onDismiss=${this.handleDialogDismiss}>
-					<${NetworkForm} onSubmit=${this.handleAddNetworkSubmit}/>
+					<${NetworkForm}
+						onSubmit=${this.handleNetworkSubmit}
+						onRemove=${this.handleNetworkRemove}
+						params=${this.state.networkDialog ? this.state.networkDialog.params : null}
+					/>
 				</>
 			`;
 			break;

components/buffer-header.js

@@ -20,7 +20,7 @@ function NickStatus(props) {
 }
 
 export default function BufferHeader(props) {
-	function handlePartClick(event) {
+	function handleCloseClick(event) {
 		event.preventDefault();
 		props.onClose();
 	}
@@ -32,6 +32,10 @@ export default function BufferHeader(props) {
 		event.preventDefault();
 		props.onAddNetwork();
 	}
+	function handleManageNetworkClick(event) {
+		event.preventDefault();
+		props.onManageNetwork();
+	}
 
 	var description = null;
 	if (props.buffer.serverInfo) {
@@ -72,27 +76,40 @@ export default function BufferHeader(props) {
 	}
 
 	var actions = null;
-	var closeText = "Close";
 	switch (props.buffer.type) {
 	case BufferType.SERVER:
-		if (props.isBouncer && !props.network.isupport.get("BOUNCER_NETID")) {
+		if (props.isBouncer) {
-			actions = html`<a href="#" onClick=${handleAddNetworkClick}>Add network</a>`;
+			if (props.network.isupport.get("BOUNCER_NETID")) {
+				actions = html`
+					<a href="#" onClick=${handleJoinClick}>Join</a>
+					${" "}
+					<a href="#" onClick=${handleManageNetworkClick}>Manage network</a>
+				`;
+			} else {
+				actions = html`
+					<a href="#" onClick=${handleAddNetworkClick}>Add network</a>
+					${" "}
+					<a href="#" onClick=${handleCloseClick}>Disconnect</a>
+				`;
+			}
 		} else {
-			actions = html`<a href="#" onClick=${handleJoinClick}>Join</a>`;
+			actions = html`
+				<a href="#" onClick=${handleJoinClick}>Join</a>
+				${" "}
+				<a href="#" onClick=${handleCloseClick}>Disconnect</a>
+			`;
 		}
-		closeText = "Disconnect";
 		break;
 	case BufferType.CHANNEL:
-		closeText = "Part";
+		actions = html`<a href="#" onClick=${handleCloseClick}>Part</a>`;
+		break;
+	case BufferType.NICK:
+		actions = html`<a href="#" onClick=${handleCloseClick}>Close</a>`;
 		break;
 	}
 
 	return html`
 		<span class="description">${description}</span>
-		<span class="actions">
+		<span class="actions">${actions}</span>
-			${actions}
-			${" "}
-			<a href="#" onClick=${handlePartClick}>${closeText}</a>
-		</span>
 	`;
 }

components/network-form.js

@@ -1,20 +1,40 @@
 import { html, Component } from "../lib/index.js";
 
+const defaultParams = {
+	name: "",
+	host: "",
+	port: 6697,
+	nickname: "",
+	username: "",
+	realname: "",
+	pass: "",
+};
+
 export default class NetworkForm extends Component {
+	prevParams = null;
 	state = {
-		host: "",
+		...defaultParams,
-		port: 6697,
+		isNew: true,
-		nickname: "",
-		username: "",
-		realname: "",
-		pass: "",
 	};
 
 	constructor(props) {
 		super(props);
 
+		this.prevParams = { ...defaultParams };
+
 		this.handleChange = this.handleChange.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
+
+		this.state.isNew = !props.params;
+
+		if (props.params) {
+			Object.keys(defaultParams).forEach((k) => {
+				if (props.params[k] !== undefined) {
+					this.state[k] = props.params[k];
+					this.prevParams[k] = props.params[k];
+				}
+			});
+		}
 	}
 
 	handleChange(event) {
@@ -26,19 +46,27 @@ export default class NetworkForm extends Component {
 	handleSubmit(event) {
 		event.preventDefault();
 
-		var params = {
+		var params = {};
-			host: this.state.host,
+		Object.keys(defaultParams).forEach((k) => {
-			port: this.state.port,
+			if (this.prevParams[k] == this.state[k]) {
-			nickname: this.state.nickname,
+				return;
-			username: this.state.username,
+			}
-			realname: this.state.realname,
+			params[k] = this.state[k];
-			pass: this.state.pass,
+		});
-		};
 
 		this.props.onSubmit(params);
 	}
 
 	render() {
+		var removeNetwork = null;
+		if (!this.state.isNew) {
+			removeNetwork = html`
+				<button type="button" onClick=${() => this.props.onRemove()}>
+					Remove network
+				</button>
+			`;
+		}
+
 		return html`
 			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
 				<label>
@@ -58,6 +86,12 @@ export default class NetworkForm extends Component {
 					</label>
 					<br/><br/>
 
+					<label>
+						Network name:<br/>
+						<input type="text" name="name" value=${this.state.name}/>
+					</label>
+					<br/><br/>
+
 					<label>
 						Nickname:<br/>
 						<input type="username" name="nickname" value=${this.state.nickname}/>
@@ -84,7 +118,11 @@ export default class NetworkForm extends Component {
 				</details>
 
 				<br/>
-				<button>Add network</button>
+				${removeNetwork}
+				${" "}
+				<button>
+					${this.state.isNew ? "Add network" : "Save network"}
+				</button>
 			</form>
 		`;
 	}