Show a very basic event page when an event is clicked.

master
Tom Hacohen 7 years ago
parent 9b96e37e44
commit 3883cbad1c

@ -7,27 +7,18 @@ import * as ICAL from 'ical.js';
BigCalendar.momentLocalizer(moment);
class EventWrapper {
event: ICAL.Event;
constructor(event: ICAL.Event) {
this.event = event;
}
get summary() {
return this.event.summary;
}
class EventWrapper extends ICAL.Event {
get title() {
return this.summary;
}
get start() {
return this.event.startDate.toJSDate();
return this.startDate.toJSDate();
}
get end() {
return this.event.endDate.toJSDate();
return this.endDate.toJSDate();
}
}
@ -38,7 +29,7 @@ class Calendar extends React.Component {
props: {
entries: Array<ICAL.Component>,
onItemClick: (contact: ICAL.Component) => void,
onItemClick: (contact: ICAL.Event) => void,
};
constructor(props: any) {
@ -48,7 +39,7 @@ class Calendar extends React.Component {
render() {
let entries = this.props.entries.map((value) => (
new EventWrapper(new ICAL.Event(value))
new EventWrapper(value)
)).sort((a, b) => {
if (a.summary < b.summary) {
return -1;
@ -63,6 +54,9 @@ class Calendar extends React.Component {
<div style={{width: '100%', height: 500}}>
<BigCalendar
events={entries}
onSelectEvent={(event: any) => {
this.props.onItemClick(event);
}}
{...{culture: 'en-GB'}}
date={this.state.currentDate}
onNavigate={(currentDate: Date) => { this.setState({currentDate}); }}

@ -0,0 +1,23 @@
import * as React from 'react';
import * as ICAL from 'ical.js';
class Event extends React.Component {
props: {
event?: ICAL.Event,
};
render() {
if (this.props.event === undefined) {
throw Error('Event should be defined!');
}
return (
<div>
<h3>{this.props.event.summary}</h3>
</div>
);
}
}
export default Event;

@ -1,7 +1,10 @@
import * as React from 'react';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Route, Switch, withRouter } from 'react-router';
import { routeResolver } from './App';
import Calendar from './Calendar';
import Event from './Event';
import * as ICAL from 'ical.js';
@ -19,19 +22,39 @@ class JournalCalendar extends React.Component {
this.eventClicked = this.eventClicked.bind(this);
}
eventClicked(contact: ICAL.Component) {
// FIXME: do something
eventClicked(event: ICAL.Event) {
const uid = event.uid;
this.props.history.push(
routeResolver.getRoute('journals._id.items._id', { journalUid: this.props.journal.uid, itemUid: uid }));
}
render() {
let items = this.props.entries;
return (
<div style={{width: '100%', height: 500}}>
<Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
</div>
<Switch>
<Route
path={routeResolver.getRoute('journals._id')}
exact={true}
render={() => (
<Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
)
}
/>
<Route
path={routeResolver.getRoute('journals._id.items._id')}
exact={true}
render={({match}) => {
return (
<Event event={new ICAL.Event(items.get(match.params.itemUid))} />
);
}}
/>
</Switch>
);
}
}
export default JournalCalendar;
export default withRouter(JournalCalendar);

@ -1,9 +1,12 @@
import * as React from 'react';
import { Route, Switch } from 'react-router';
import * as ICAL from 'ical.js';
import * as EteSync from './api/EteSync';
import Contact from './Contact';
import Event from './Event';
import PimMain from './PimMain';
import { routeResolver } from './App';
@ -84,6 +87,13 @@ class Pim extends React.Component {
<Contact contact={addressBookItems.get(match.params.contactUid)} />
)}
/>
<Route
path={routeResolver.getRoute('pim.events._id')}
exact={true}
render={({match}) => (
<Event event={new ICAL.Event(calendarItems.get(match.params.eventUid))} />
)}
/>
</Switch>
);
}

@ -21,8 +21,11 @@ class Pim extends React.Component {
this.contactClicked = this.contactClicked.bind(this);
}
eventClicked(contact: any) {
// FIXME
eventClicked(event: ICAL.Event) {
const uid = event.uid;
this.props.history.push(
routeResolver.getRoute('pim.events._id', { eventUid: uid }));
}
contactClicked(contact: ICAL.Component) {

Loading…
Cancel
Save