Split off the pim view and implement viewing contacts.

master
Tom Hacohen 7 years ago
parent 8e2a465120
commit 25402639b6

@ -41,8 +41,12 @@ export function getPalette(part: string): string {
export const routeResolver = new RouteResolver({ export const routeResolver = new RouteResolver({
home: '', home: '',
pim: { pim: {
contacts: 'contacts/:contactUid', contacts: {
events: 'events/:contactUid', _id: ':contactUid',
},
events: {
_id: ':eventUid',
},
}, },
journals: { journals: {
_id: { _id: {

@ -1,10 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import { Tabs, Tab } from 'material-ui/Tabs'; import { Route, Switch } from 'react-router';
import * as EteSync from './api/EteSync'; import * as EteSync from './api/EteSync';
import AddressBook from './AddressBook'; import Contact from './Contact';
import Calendar from './Calendar'; import PimMain from './PimMain';
import { routeResolver } from './App';
import { JournalsData, EntriesType, CredentialsData } from './store'; import { JournalsData, EntriesType, CredentialsData } from './store';
@ -20,16 +22,6 @@ class Pim extends React.Component {
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.eventClicked = this.eventClicked.bind(this);
this.contactClicked = this.contactClicked.bind(this);
}
eventClicked(contact: any) {
// FIXME
}
contactClicked(contact: any) {
// FIXME
} }
render() { render() {
@ -73,14 +65,26 @@ class Pim extends React.Component {
let calendarItems = syncEntriesToCalendarItemMap(syncEntriesCalendar); let calendarItems = syncEntriesToCalendarItemMap(syncEntriesCalendar);
return ( return (
<Tabs> <Switch>
<Tab label="Address Book"> <Route
<AddressBook entries={Array.from(addressBookItems.values())} onItemClick={this.contactClicked} /> path={routeResolver.getRoute('pim')}
</Tab> exact={true}
<Tab label="Calendar"> render={({history}) => (
<Calendar entries={Array.from(calendarItems.values())} onItemClick={this.eventClicked} /> <PimMain
</Tab> contacts={Array.from(addressBookItems.values())}
</Tabs> events={Array.from(calendarItems.values())}
history={history}
/>
)}
/>
<Route
path={routeResolver.getRoute('pim.contacts._id')}
exact={true}
render={({match}) => (
<Contact contact={addressBookItems.get(match.params.contactUid)} />
)}
/>
</Switch>
); );
} }
} }

@ -0,0 +1,50 @@
import * as React from 'react';
import { Tabs, Tab } from 'material-ui/Tabs';
import * as ICAL from 'ical.js';
import AddressBook from './AddressBook';
import Calendar from './Calendar';
import { routeResolver } from './App';
class Pim extends React.Component {
props: {
contacts: Array<ICAL.Component>,
events: Array<ICAL.Component>,
history?: any,
};
constructor(props: any) {
super(props);
this.eventClicked = this.eventClicked.bind(this);
this.contactClicked = this.contactClicked.bind(this);
}
eventClicked(contact: any) {
// FIXME
}
contactClicked(contact: ICAL.Component) {
const uid = contact.getFirstPropertyValue('uid');
this.props.history.push(
routeResolver.getRoute('pim.contacts._id', { contactUid: uid }));
}
render() {
return (
<Tabs>
<Tab label="Address Book">
<AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
</Tab>
<Tab label="Calendar">
<Calendar entries={this.props.events} onItemClick={this.eventClicked} />
</Tab>
</Tabs>
);
}
}
export default Pim;
Loading…
Cancel
Save