Make nick links clickable

components/app.js

@@ -48,6 +48,7 @@ export default class App extends Component {
 		this.handleConnectSubmit = this.handleConnectSubmit.bind(this);
 		this.handleBufferListClick = this.handleBufferListClick.bind(this);
 		this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
+		this.handleNickClick = this.handleNickClick.bind(this);
 
 		if (window.localStorage && localStorage.getItem("autoconnect")) {
 			var connectParams = JSON.parse(localStorage.getItem("autoconnect"));
@@ -310,11 +311,23 @@ export default class App extends Component {
 		this.connect(connectParams);
 	}
 
+	handleNickClick(nick) {
+		this.open(nick);
+	}
+
 	isChannel(name) {
 		// TODO: use the ISUPPORT token if available
 		return irc.STD_CHANNEL_TYPES.indexOf(name[0]) >= 0;
 	}
 
+	open(target) {
+		if (this.isChannel(target)) {
+			this.client.send({ command: "JOIN", params: [target] });
+		}
+		this.createBuffer(target);
+		this.switchBuffer(target);
+	}
+
 	close(target) {
 		if (target == SERVER_BUFFER) {
 			this.client.close();
@@ -342,6 +355,14 @@ export default class App extends Component {
 			}
 			this.client.close();
 			break;
+		case "query":
+			var nick = args[0];
+			if (!nick) {
+				console.error("Missing nickname");
+				return;
+			}
+			this.open(nick);
+			break;
 		case "close":
 			var target = this.state.activeBuffer;
 			if (!target || target == SERVER_BUFFER) {
@@ -444,7 +465,7 @@ export default class App extends Component {
 			${topbar}
 			<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer}>
 				<section id="buffer" ref=${this.buffer}>
-					<${Buffer} buffer=${activeBuffer}/>
+					<${Buffer} buffer=${activeBuffer} onNickClick=${this.handleNickClick}/>
 				</section>
 			</>
 			<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit}/>

components/buffer.js

@@ -13,7 +13,7 @@ function djb2(s) {
 function Nick(props) {
 	function handleClick(event) {
 		event.preventDefault();
-		// TODO
+		props.onClick();
 	}
 
 	var colorIndex = djb2(props.nick) % 16 + 1;
@@ -25,6 +25,12 @@ function Nick(props) {
 function LogLine(props) {
 	var msg = props.message;
 
+	function createNick(nick) {
+		return html`
+			<${Nick} nick=${nick} onClick=${() => props.onNickClick(nick)}/>
+		`;
+	}
+
 	var date = new Date(msg.tags["time"]);
 	var timestamp = date.toLocaleTimeString(undefined, {
 		timeStyle: "short",
@@ -46,32 +52,32 @@ function LogLine(props) {
 			var action = text.slice(actionPrefix.length, -1);
 
 			lineClass = "me-tell";
-			content = html`* <${Nick} nick=${msg.prefix.name}/> ${linkify(action)}`;
+			content = html`* ${createNick(msg.prefix.name)} ${linkify(action)}`;
 		} else {
 			lineClass = "talk";
-			content = html`${"<"}<${Nick} nick=${msg.prefix.name}/>${">"} ${linkify(text)}`;
+			content = html`${"<"}${createNick(msg.prefix.name)}${">"} ${linkify(text)}`;
 		}
 		break;
 	case "JOIN":
 		content = html`
-			<${Nick} nick=${msg.prefix.name}/> has joined
+			${createNick(msg.prefix.name)} has joined
 		`;
 		break;
 	case "PART":
 		content = html`
-			<${Nick} nick=${msg.prefix.name}/> has left
+			${createNick(msg.prefix.name)} has left
 		`;
 		break;
 	case "NICK":
 		var newNick = msg.params[0];
 		content = html`
-			<${Nick} nick=${msg.prefix.name}/> is now known as <${Nick} nick=${newNick}/>
+			${createNick(msg.prefix.name)} is now known as <${Nick} nick=${newNick}/>
 		`;
 		break;
 	case "TOPIC":
 		var topic = msg.params[1];
 		content = html`
-			<${Nick} nick=${msg.prefix.name}/> changed the topic to: ${linkify(topic)}
+			${createNick(msg.prefix.name)} changed the topic to: ${linkify(topic)}
 		`;
 		break;
 	default:
@@ -91,7 +97,7 @@ export default function Buffer(props) {
 	return html`
 		<div class="logline-list">
 			${props.buffer.messages.map((msg) => html`
-				<${LogLine} message=${msg}/>
+				<${LogLine} message=${msg} onNickClick=${props.onNickClick}/>
 			`)}
 		</div>
 	`;