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 this.props.nick !== nextProps.nick;
+	}
+
+	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=${handleClick}>${props.nick}</a>
+				<a href=${url} class="nick" onClick=${this.handleClick}>${this.props.nick}</a>
 			</li>
 		`;
+	}
 }
 
-export default function MemberList(props) {
+export default class MemberList extends Component {
+	shouldComponentUpdate(nextProps) {
+		return this.props.members !== nextProps.members;
+	}
+
+	render() {
 		return html`
 			<ul>
-			${Array.from(props.members.entries()).sort().map(([nick, membership]) => html`
+				${Array.from(this.props.members.entries()).sort().map(([nick, membership]) => html`
-				<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => props.onNickClick(nick)}/>
+					<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => this.props.onNickClick(nick)}/>
 				`)}
 			</ul>
 		`;
+	}
 }