From 3883cbad1ceb00c21790b930fd226bc96b086ebf Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Thu, 7 Dec 2017 22:59:04 +0000
Subject: [PATCH] Show a very basic event page when an event is clicked.

---
 src/Calendar.tsx        | 22 ++++++++--------------
 src/Event.tsx           | 23 +++++++++++++++++++++++
 src/JournalCalendar.tsx | 37 ++++++++++++++++++++++++++++++-------
 src/Pim.tsx             | 10 ++++++++++
 src/PimMain.tsx         |  7 +++++--
 5 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 src/Event.tsx

diff --git a/src/Calendar.tsx b/src/Calendar.tsx
index 3f86884..3e55e45 100644
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -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}); }}
diff --git a/src/Event.tsx b/src/Event.tsx
new file mode 100644
index 0000000..6ce88df
--- /dev/null
+++ b/src/Event.tsx
@@ -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;
diff --git a/src/JournalCalendar.tsx b/src/JournalCalendar.tsx
index 7a762f4..f183e50 100644
--- a/src/JournalCalendar.tsx
+++ b/src/JournalCalendar.tsx
@@ -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);
diff --git a/src/Pim.tsx b/src/Pim.tsx
index 578e229..56517b3 100644
--- a/src/Pim.tsx
+++ b/src/Pim.tsx
@@ -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>
     );
   }
diff --git a/src/PimMain.tsx b/src/PimMain.tsx
index 9155799..37d72c4 100644
--- a/src/PimMain.tsx
+++ b/src/PimMain.tsx
@@ -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) {