Add shouldComponentUpdate to member list

components/member-list.js

@@ -1,25 +1,43 @@
 import { html, Component } from "/lib/index.js";
 
-function MemberItem(props) {
+class MemberItem extends Component {
-	function handleClick(event) {
+	constructor(props) {
-		event.preventDefault();
+		super(props);
-		props.onClick();
+
+		this.handleClick = this.handleClick.bind(this);
 	}
 
-	var url = "irc:///" + encodeURIComponent(props.nick) + ",isnick";
+	shouldComponentUpdate(nextProps) {
-	return html`
+		return this.props.nick !== nextProps.nick;
-		<li>
+	}
-			<a href=${url} class="nick" onClick=${handleClick}>${props.nick}</a>
+
-		</li>
+	handleClick(event) {
-	`;
+		event.preventDefault();
+		this.props.onClick();
+	}
+
+	render() {
+		var url = "irc:///" + encodeURIComponent(this.props.nick) + ",isnick";
+		return html`
+			<li>
+				<a href=${url} class="nick" onClick=${this.handleClick}>${this.props.nick}</a>
+			</li>
+		`;
+	}
 }
 
-export default function MemberList(props) {
+export default class MemberList extends Component {
-	return html`
+	shouldComponentUpdate(nextProps) {
-		<ul>
+		return this.props.members !== nextProps.members;
-			${Array.from(props.members.entries()).sort().map(([nick, membership]) => html`
+	}
-				<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => props.onNickClick(nick)}/>
+
-			`)}
+	render() {
-		</ul>
+		return html`
-	`;
+			<ul>
+				${Array.from(this.props.members.entries()).sort().map(([nick, membership]) => html`
+					<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => this.props.onNickClick(nick)}/>
+				`)}
+			</ul>
+		`;
+	}
 }