Sort buffers when inserting, not when rendering

This allows all state.buffers users to iterate over the list in the
correct order.

components/app.js

@@ -64,6 +64,24 @@ function debounce(f, delay) {
 	};
 }
 
+function compareBuffers(a, b) {
+	if (a.type == BufferType.SERVER) {
+		return -1;
+	}
+	if (b.type == BufferType.SERVER) {
+		return 1;
+	}
+
+	if (a.name > b.name) {
+		return -1;
+	}
+	if (a.name < b.name) {
+		return 1;
+	}
+
+	return 0;
+}
+
 export default class App extends Component {
 	client = null;
 	state = {
@@ -178,8 +196,8 @@ export default class App extends Component {
 				type = BufferType.NICK;
 			}
 
-			var buffers = new Map(state.buffers);
+			var bufferList = Array.from(state.buffers.values());
-			buffers.set(name, {
+			bufferList.push({
 				name,
 				type,
 				serverInfo: null, // if server
@@ -190,6 +208,8 @@ export default class App extends Component {
 				messages: [],
 				unread: Unread.NONE,
 			});
+			bufferList = bufferList.sort(compareBuffers);
+			var buffers = new Map(bufferList.map((buf) => [buf.name, buf]));
 			return { buffers };
 		});
 	}

components/buffer-list.js

@@ -26,28 +26,11 @@ function BufferItem(props) {
 	`;
 }
 
-function compareBuffers(a, b) {
-	if (a.type == BufferType.SERVER) {
-		return -1;
-	}
-	if (b.type == BufferType.SERVER) {
-		return 1;
-	}
-
-	if (a.name > b.name) {
-		return -1;
-	}
-	if (a.name < b.name) {
-		return 1;
-	}
-
-	return 0;
-}
 
 export default function BufferList(props) {
 	return html`
 		<ul>
-			${Array.from(props.buffers.values()).sort(compareBuffers).map(buf => html`
+			${Array.from(props.buffers.values()).map((buf) => html`
 				<${BufferItem} key=${buf.name} buffer=${buf} onClick=${() => props.onBufferClick(buf.name)} active=${props.activeBuffer == buf.name}/>
 			`)}
 		</ul>