From 360a6ad826fd5b1977679b2f3e5bfc7c1aa02231 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 15 Dec 2017 16:57:29 +0000
Subject: [PATCH] Create our own dedicated avatar widget.

---
 src/AddressBook.tsx | 26 +++++---------------------
 src/Avatar.tsx      | 25 +++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 src/Avatar.tsx

diff --git a/src/AddressBook.tsx b/src/AddressBook.tsx
index 01181da..c2f6295 100644
--- a/src/AddressBook.tsx
+++ b/src/AddressBook.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import * as colors from 'material-ui/styles/colors';
 
+import { Avatar } from './Avatar';
 import { List, ListItem } from './List';
 
 import { ContactType } from './pim-types';
@@ -59,26 +60,6 @@ class AddressBook extends React.PureComponent {
       const uid = entry.uid;
       const name = entry.fn;
 
-      let itemProps: any = {
-        leftAvatar: (
-          <div
-            style={{
-              backgroundColor: getContactColor(entry),
-              color: 'white',
-              display: 'inline-flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              borderRadius: '50%',
-              height: 40,
-              width: 40,
-              marginRight: 15,
-            }}
-          >
-          {name[0].toUpperCase()}
-          </div>
-        ),
-      };
-
       return (
         <ListItem
           key={uid}
@@ -87,7 +68,10 @@ class AddressBook extends React.PureComponent {
             this.props.onItemClick(entry);
           }}
         >
-          {itemProps.leftAvatar} {name}
+        <Avatar style={{backgroundColor: getContactColor(entry)}}>
+          {name[0].toUpperCase()}
+        </Avatar>
+        {name}
         </ListItem>
       );
     });
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
new file mode 100644
index 0000000..f42612f
--- /dev/null
+++ b/src/Avatar.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { pure } from 'recompose';
+
+export const Avatar = pure((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => {
+  const size = (props.size) ? props.size : 40;
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'grey',
+        color: 'white',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '50%',
+        height: size,
+        width: size,
+        marginRight: 15,
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+});