From f284468aa6597a09d87e8b8b89c2535b63437e1e Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Mon, 13 Jul 2020 11:09:16 +0200
Subject: [PATCH] Add shouldComponentUpdate to member list

---
 components/member-list.js | 54 ++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 18 deletions(-)

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