Add a contact page.

master
Tom Hacohen 7 years ago
parent 2a6220e6d4
commit fddf39244d

@ -51,7 +51,7 @@ export const routeResolver = new RouteResolver({
items: {
_base: 'items',
_id: {
_base: ':entryUid',
_base: ':itemUid',
},
},
entries: {

@ -1,9 +1,15 @@
import * as React from 'react';
import { Route, Switch } from 'react-router';
import { List, ListItem } from 'material-ui/List';
import { Link } from 'react-router-dom';
import * as ICAL from 'ical.js';
import * as EteSync from './api/EteSync';
import { routeResolver } from './App';
import { JournalViewContact } from './JournalViewContact';
export class JournalViewAddressBook extends React.Component {
static defaultProps = {
prevUid: null,
@ -47,18 +53,43 @@ export class JournalViewAddressBook extends React.Component {
}
});
let itemList = entries.map((entry, idx) => {
let itemList = entries.map((entry) => {
const uid = entry.getFirstPropertyValue('uid');
const name = entry.getFirstPropertyValue('fn');
return (
<li key={idx}>{name}</li>
<Link
key={uid}
to={routeResolver.getRoute('journals._id.items._id', { journalUid: this.props.journal.uid, itemUid: uid })}
>
<ListItem primaryText={name} />
</Link>
);
});
return (
<div>
<ul>
<Switch>
<Route
path={routeResolver.getRoute('journals._id.items')}
exact={true}
render={() => (
<List>
{itemList}
</ul>
</List>
)
}
/>
<Route
path={routeResolver.getRoute('journals._id.items._id')}
exact={true}
render={({match}) => {
return (
<JournalViewContact contact={items.get(match.params.itemUid)} />
);
}}
/>
</Switch>
</div>
);
}

@ -0,0 +1,86 @@
import * as React from 'react';
import { List, ListItem } from 'material-ui/List';
import Divider from 'material-ui/Divider';
import CommunicationCall from 'material-ui/svg-icons/communication/call';
import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bubble';
import CommunicationEmail from 'material-ui/svg-icons/communication/email';
import { indigo500 } from 'material-ui/styles/colors';
import * as ICAL from 'ical.js';
export class JournalViewContact extends React.Component {
props: {
contact?: ICAL.Component,
};
render() {
if (this.props.contact === undefined) {
return (<div>Loading</div>);
}
const contact = this.props.contact;
const uid = contact.getFirstPropertyValue('uid');
const name = contact.getFirstPropertyValue('fn');
const phoneNumbers = contact.getAllProperties('tel').map((prop, idx) => {
const json = prop.toJSON();
const values = prop.getValues().map((val) => (
<ListItem
key={idx}
leftIcon={<CommunicationCall />}
rightIcon={<CommunicationChatBubble />}
primaryText={val}
secondaryText={json[1].type}
/>
));
return values;
});
const emails = contact.getAllProperties('email').map((prop, idx) => {
const json = prop.toJSON();
const values = prop.getValues().map((val) => (
<ListItem
key={idx}
leftIcon={<CommunicationEmail color={indigo500} />}
primaryText={val}
secondaryText={json[1].type}
/>
));
return values;
});
const skips = ['tel', 'email', 'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
const theRest = contact.getAllProperties().filter((prop) => (
skips.indexOf(prop.name) === -1
)).map((prop, idx) => {
const values = prop.getValues().map((_val) => {
const val = (_val instanceof String) ? _val : _val.toString();
return (
<ListItem
key={idx}
insetChildren={true}
primaryText={(window as any).me = val}
secondaryText={prop.name}
/>
);
});
return values;
});
return (
<div>
<h3>{name} <small>{uid}</small></h3>
<List>
{phoneNumbers}
</List>
<Divider inset={true} />
<List>
{emails}
</List>
<Divider inset={true} />
<List>
{theRest}
</List>
</div>
);
}
}

10
src/ical.js.d.ts vendored

@ -8,6 +8,8 @@ declare module 'ical.js' {
getFirstSubcomponent(name?: string): Component | null;
getFirstPropertyValue(name?: string): string;
getAllProperties(name?: string): Array<Property>;
}
class Event {
@ -17,4 +19,12 @@ declare module 'ical.js' {
constructor(component?: Component | null,
options?: {strictExceptions: boolean, exepctions: Array<Component|Event>});
}
class Property {
name: string;
type: string;
getValues(): Array<any>;
toJSON(): any;
}
}

Loading…
Cancel
Save