Address book: make a component out of the list item.

src/components/AddressBook.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { pure } from 'recompose';
+
 import * as colors from 'material-ui/styles/colors';
 
 import { Avatar } from '../widgets/Avatar';
@@ -7,27 +9,7 @@ import { List, ListItem } from '../widgets/List';
 
 import { ContactType } from '../pim-types';
 
-class AddressBook extends React.PureComponent {
-  props: {
-    entries: Array<ContactType>,
-    onItemClick: (contact: ContactType) => void,
-  };
-
-  render() {
-    let entries = this.props.entries.sort((_a, _b) => {
-      const a = _a.fn;
-      const b = _b.fn;
-
-      if (a < b) {
-        return -1;
-      } else if (a > b) {
-        return 1;
-      } else {
-        return 0;
-      }
-    });
-
-    function getContactColor(contact: ContactType) {
+function getContactColor(contact: ContactType) {
   const colorOptions = [
     colors.red500,
     colors.pink500,
@@ -54,21 +36,55 @@ class AddressBook extends React.PureComponent {
   }
 
   return colorOptions[sum % colorOptions.length];
-    }
+}
 
-    let itemList = entries.map((entry, idx, array) => {
-      const uid = entry.uid;
+const AddressBookItem = pure((_props: any) => {
+  const {
+    entry,
+    onClick,
+  } = _props;
   const name = entry.fn;
 
   return (
     <ListItem
-          key={uid}
       leftIcon={
         <Avatar style={{backgroundColor: getContactColor(entry)}}>
           {name[0].toUpperCase()}
         </Avatar>}
       primaryText={name}
-          onClick={(e: any) => this.props.onItemClick(entry)}
+      onClick={() => onClick(entry)}
+    />
+  );
+});
+
+class AddressBook extends React.PureComponent {
+  props: {
+    entries: Array<ContactType>,
+    onItemClick: (contact: ContactType) => void,
+  };
+
+  render() {
+    let entries = this.props.entries.sort((_a, _b) => {
+      const a = _a.fn;
+      const b = _b.fn;
+
+      if (a < b) {
+        return -1;
+      } else if (a > b) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    let itemList = entries.map((entry, idx, array) => {
+      const uid = entry.uid;
+
+      return (
+        <AddressBookItem
+          key={uid}
+          entry={entry}
+          onClick={this.props.onItemClick}
         />
       );
     });