From c6df5c800a832532f8b626b63f5bbf1b08267b30 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 18 Dec 2017 15:57:20 +0000
Subject: [PATCH] Addressbook: support passing a filter function and memoize
 the sort.

---
 src/components/AddressBook.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/AddressBook.tsx b/src/components/AddressBook.tsx
index 0a198b2..0af8c8f 100644
--- a/src/components/AddressBook.tsx
+++ b/src/components/AddressBook.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { pure } from 'recompose';
+import { createSelector } from 'reselect';
 
 import * as colors from 'material-ui/styles/colors';
 
@@ -57,14 +58,10 @@ const AddressBookItem = pure((_props: any) => {
   );
 });
 
-class AddressBook extends React.PureComponent {
-  props: {
-    entries: Array<ContactType>,
-    onItemClick: (contact: ContactType) => void,
-  };
-
-  render() {
-    let entries = this.props.entries.sort((_a, _b) => {
+const sortSelector = createSelector(
+  (entries: Array<ContactType>) => entries,
+  (entries) => {
+    return entries.sort((_a, _b) => {
       const a = _a.fn;
       const b = _b.fn;
 
@@ -76,6 +73,22 @@ class AddressBook extends React.PureComponent {
         return 0;
       }
     });
+  },
+);
+
+class AddressBook extends React.PureComponent {
+  props: {
+    entries: Array<ContactType>,
+    onItemClick: (contact: ContactType) => void,
+    filter?: (a: ContactType) => boolean,
+  };
+
+  render() {
+    const sortedEntries = sortSelector(this.props.entries);
+
+    const entries = (this.props.filter) ?
+      sortedEntries.filter(this.props.filter)
+      : sortedEntries;
 
     let itemList = entries.map((entry, idx, array) => {
       const uid = entry.uid;