Improve the look of the contact page.

master
Tom Hacohen 7 years ago
parent 1987ea126d
commit 7067824ccd

@ -19,39 +19,59 @@ class Contact extends React.Component {
}
const contact = this.props.contact;
const uid = contact.comp.getFirstPropertyValue('uid');
const name = contact.comp.getFirstPropertyValue('fn');
const name = contact.fn;
const phoneNumbers = contact.comp.getAllProperties('tel').map((prop, idx) => {
const json = prop.toJSON();
const values = prop.getValues().map((val) => (
<ListItem
key={idx}
leftIcon={<CommunicationCall />}
rightIcon={<CommunicationChatBubble />}
href={'tel:' + val}
primaryText={val}
secondaryText={json[1].type}
/>
));
return values;
});
let lists = [];
const emails = contact.comp.getAllProperties('email').map((prop, idx) => {
const json = prop.toJSON();
const values = prop.getValues().map((val) => (
<ListItem
key={idx}
leftIcon={<CommunicationEmail color={indigo500} />}
href={'mailto:' + val}
primaryText={val}
secondaryText={json[1].type}
/>
));
return values;
});
function getAllType(
propName: string,
props: any,
valueToHref?: (value: string) => string,
primaryTransform?: (value: string) => string,
secondaryTransform?: (value: string) => string) {
return contact.comp.getAllProperties(propName).map((prop, idx) => {
const json = prop.toJSON();
const values = prop.getValues().map((val) => (
<ListItem
key={idx}
href={valueToHref ? valueToHref(val) : undefined}
primaryText={primaryTransform ? primaryTransform(val) : val}
secondaryText={json[1].type}
{...props}
/>
));
return values;
});
}
lists.push(getAllType(
'tel',
{
leftIcon: <CommunicationCall />,
rightIcon: <CommunicationChatBubble />
},
(x) => ('tel:' + x),
));
const skips = ['tel', 'email', 'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
lists.push(getAllType(
'email',
{
leftIcon: <CommunicationEmail color={indigo500} />,
},
(x) => ('mailto:' + x),
));
lists.push(getAllType(
'impp',
{
insetChildren: true,
},
(x) => x,
(x) => (x.substring(x.indexOf(':') + 1)),
));
const skips = ['tel', 'email', 'impp', 'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
const theRest = contact.comp.getAllProperties().filter((prop) => (
skips.indexOf(prop.name) === -1
)).map((prop, idx) => {
@ -87,9 +107,11 @@ class Contact extends React.Component {
return (
<div>
<h3>{name}</h3>
<span>{uid}</span>
{listIfNotEmpty(phoneNumbers)}
{listIfNotEmpty(emails)}
{lists.map((list, idx) => (
<React.Fragment key={idx}>
{listIfNotEmpty(list)}
</React.Fragment>
))}
<List>
{theRest}
</List>

Loading…
Cancel
Save