From a77e9077bfa90d8cb7013e0b6059d5fd671cad00 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sat, 16 Dec 2017 19:46:38 +0000
Subject: [PATCH] Address book: make a component out of the list item.

---
 src/components/AddressBook.tsx | 90 ++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/components/AddressBook.tsx b/src/components/AddressBook.tsx
index 8f3e097..0a198b2 100644
--- a/src/components/AddressBook.tsx
+++ b/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,6 +9,54 @@ import { List, ListItem } from '../widgets/List';
 
 import { ContactType } from '../pim-types';
 
+function getContactColor(contact: ContactType) {
+  const colorOptions = [
+    colors.red500,
+    colors.pink500,
+    colors.purple500,
+    colors.deepPurple500,
+    colors.indigo500,
+    colors.blue500,
+    colors.lightBlue500,
+    colors.cyan500,
+    colors.teal500,
+    colors.green500,
+    colors.lightGreen500,
+    colors.lime500,
+    colors.yellow500,
+    colors.amber500,
+    colors.orange500,
+    colors.deepOrange500,
+  ];
+
+  let sum = 0;
+  const uid = contact.uid;
+  for (let i = 0 ; i < uid.length ; i++) {
+    sum += uid.charCodeAt(i);
+  }
+
+  return colorOptions[sum % colorOptions.length];
+}
+
+const AddressBookItem = pure((_props: any) => {
+  const {
+    entry,
+    onClick,
+  } = _props;
+  const name = entry.fn;
+
+  return (
+    <ListItem
+      leftIcon={
+        <Avatar style={{backgroundColor: getContactColor(entry)}}>
+          {name[0].toUpperCase()}
+        </Avatar>}
+      primaryText={name}
+      onClick={() => onClick(entry)}
+    />
+  );
+});
+
 class AddressBook extends React.PureComponent {
   props: {
     entries: Array<ContactType>,
@@ -27,48 +77,14 @@ class AddressBook extends React.PureComponent {
       }
     });
 
-    function getContactColor(contact: ContactType) {
-      const colorOptions = [
-        colors.red500,
-        colors.pink500,
-        colors.purple500,
-        colors.deepPurple500,
-        colors.indigo500,
-        colors.blue500,
-        colors.lightBlue500,
-        colors.cyan500,
-        colors.teal500,
-        colors.green500,
-        colors.lightGreen500,
-        colors.lime500,
-        colors.yellow500,
-        colors.amber500,
-        colors.orange500,
-        colors.deepOrange500,
-      ];
-
-      let sum = 0;
-      const uid = contact.uid;
-      for (let i = 0 ; i < uid.length ; i++) {
-        sum += uid.charCodeAt(i);
-      }
-
-      return colorOptions[sum % colorOptions.length];
-    }
-
     let itemList = entries.map((entry, idx, array) => {
       const uid = entry.uid;
-      const name = entry.fn;
 
       return (
-        <ListItem
+        <AddressBookItem
           key={uid}
-          leftIcon={
-            <Avatar style={{backgroundColor: getContactColor(entry)}}>
-              {name[0].toUpperCase()}
-            </Avatar>}
-          primaryText={name}
-          onClick={(e: any) => this.props.onItemClick(entry)}
+          entry={entry}
+          onClick={this.props.onItemClick}
         />
       );
     });