From 2547fb9ae74dd9e53a90cd0c9093c6ef77e819f1 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sun, 12 Jul 2020 17:22:27 +0300
Subject: [PATCH] Contact: show a contact's photo if available.

---
 src/components/Contact.tsx       |  6 ++++--
 src/components/PimItemHeader.tsx | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
index ca8212c..db08b27 100644
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -15,7 +15,7 @@ import CopyIcon from '../icons/Copy';
 import PimItemHeader from './PimItemHeader';
 
 import { ContactType } from '../pim-types';
-import { IconButton } from '@material-ui/core';
+import { IconButton, Avatar } from '@material-ui/core';
 
 class Contact extends React.PureComponent {
   public props: {
@@ -162,9 +162,11 @@ class Contact extends React.PureComponent {
       }
     }
 
+    const contactImageSrc = contact.comp.getFirstProperty('photo')?.getFirstValue();
+
     return (
       <div>
-        <PimItemHeader text={name}>
+        <PimItemHeader text={name} rightItem={contactImageSrc && (<Avatar style={{ width: '3em', height: '3em' }} src={contactImageSrc} />)}>
           {lastModified && (
             <span style={{ fontSize: '90%' }}>{lastModified}</span>
           )}
diff --git a/src/components/PimItemHeader.tsx b/src/components/PimItemHeader.tsx
index 9eb2cc9..f33fbed 100644
--- a/src/components/PimItemHeader.tsx
+++ b/src/components/PimItemHeader.tsx
@@ -6,7 +6,7 @@ import Color from 'color';
 
 import { Theme, withTheme } from '@material-ui/core/styles';
 
-export default withTheme((props: {text: string, backgroundColor?: string, children?: any, theme: Theme}) => {
+export default withTheme((props: {text: string, backgroundColor?: string, children?: any, rightItem?: React.ReactNode, theme: Theme}) => {
   const backgroundColor = props.backgroundColor ?? props.theme.palette.secondary.main;
   const foregroundColor = props.theme.palette.getContrastText(Color(backgroundColor).rgb().string());
   const style = {
@@ -14,6 +14,8 @@ export default withTheme((props: {text: string, backgroundColor?: string, childr
       backgroundColor,
       color: foregroundColor,
       padding: 15,
+      display: 'flex',
+      justifyContent: 'space-between',
     },
     headerText: {
       marginTop: 10,
@@ -23,8 +25,11 @@ export default withTheme((props: {text: string, backgroundColor?: string, childr
 
   return (
     <div style={style.header}>
-      <h2 style={style.headerText}>{props.text}</h2>
-      {props.children}
+      <div>
+        <h2 style={style.headerText}>{props.text}</h2>
+        {props.children}
+      </div>
+      {props.rightItem}
     </div>
   );
 });