Merge JournalAddressbook and JournalCalendar.

src/Journal/JournalAddressBook.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { Route, Switch, withRouter } from 'react-router';
-
-import * as EteSync from '../api/EteSync';
-
-import { routeResolver } from '../App';
-
-import { History } from 'history';
-
-import AddressBook from '../components/AddressBook';
-import Contact from '../components/Contact';
-
-import { ContactType } from '../pim-types';
-
-function objValues(obj: any) {
-  return Object.keys(obj).map((x) => obj[x]);
-}
-
-class JournalAddressBook extends React.PureComponent {
-  props: {
-    journal: EteSync.Journal,
-    entries: {[key: string]: ContactType},
-    history?: History,
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.contactClicked = this.contactClicked.bind(this);
-  }
-
-  contactClicked(contact: ContactType) {
-    const uid = contact.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 (
-      <Switch>
-        <Route
-          path={routeResolver.getRoute('journals._id')}
-          exact={true}
-          render={() => (
-            <AddressBook entries={objValues(items)} onItemClick={this.contactClicked} />
-            )
-          }
-        />
-        <Route
-          path={routeResolver.getRoute('journals._id.items._id')}
-          exact={true}
-          render={({match}) => {
-
-            return (
-              <Contact contact={items[match.params.itemUid]} />
-            );
-          }}
-        />
-      </Switch>
-    );
-  }
-}
-
-export default withRouter(JournalAddressBook);

src/Journal/JournalCalendar.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { Route, Switch, withRouter } from 'react-router';
-
-import { History } from 'history';
-
-import { routeResolver } from '../App';
-
-import { historyPersistor } from '../persist-state-history';
-
-import Calendar from '../components/Calendar';
-import Event from '../components/Event';
-
-import { EventType } from '../pim-types';
-
-import * as EteSync from '../api/EteSync';
-
-function objValues(obj: any) {
-  return Object.keys(obj).map((x) => obj[x]);
-}
-
-const PersistCalendar = historyPersistor('Calendar')(Calendar);
-
-class JournalCalendar extends React.PureComponent {
-  props: {
-    journal: EteSync.Journal,
-    entries: {[key: string]: EventType},
-    history?: History,
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.eventClicked = this.eventClicked.bind(this);
-  }
-
-  eventClicked(event: EventType) {
-    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 (
-      <Switch>
-        <Route
-          path={routeResolver.getRoute('journals._id')}
-          exact={true}
-          render={() => (
-              <PersistCalendar entries={objValues(items)} onItemClick={this.eventClicked} />
-            )
-          }
-        />
-        <Route
-          path={routeResolver.getRoute('journals._id.items._id')}
-          exact={true}
-          render={({match}) => (
-            <Event event={items[match.params.itemUid]} />
-          )}
-        />
-      </Switch>
-    );
-  }
-}
-
-export default withRouter(JournalCalendar);

src/Journal/index.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { Tabs, Tab } from 'material-ui/Tabs';
 
+import AddressBook from '../components/AddressBook';
+import Contact from '../components/Contact';
+import Calendar from '../components/Calendar';
+import Event from '../components/Event';
+
 import Container from '../widgets/Container';
 
 import SecondaryHeader from '../components/SecondaryHeader';
 
 import JournalEntries from '../components/JournalEntries';
-import JournalAddressBook from './JournalAddressBook';
-import JournalCalendar from './JournalCalendar';
+import journalView from './journalView';
 
 import { syncEntriesToItemMap, syncEntriesToCalendarItemMap } from '../journal-processors';
 
@@ -15,6 +19,8 @@ import { SyncInfo } from '../SyncGate';
 
 import { match } from 'react-router';
 
+import { historyPersistor } from '../persist-state-history';
+
 interface PropsType {
   syncInfo: SyncInfo;
   match: match<any>;
@@ -23,6 +29,10 @@ interface PropsType {
 interface PropsTypeInner extends PropsType {
 }
 
+const JournalAddressBook = journalView(AddressBook, Contact);
+const PersistCalendar = historyPersistor('Calendar')(Calendar);
+const JournalCalendar = journalView(PersistCalendar, Event);
+
 class Journal extends React.PureComponent {
   static defaultProps = {
     prevUid: null,

src/Journal/journalView.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Route, Switch, withRouter } from 'react-router';
+
+import * as EteSync from '../api/EteSync';
+
+import { routeResolver } from '../App';
+
+import { History } from 'history';
+
+function objValues(obj: any) {
+  return Object.keys(obj).map((x) => obj[x]);
+}
+
+export function journalView(JournalList: any, JournalItem: any) {
+  return withRouter(class extends React.PureComponent {
+    props: {
+      journal: EteSync.Journal,
+      entries: {[key: string]: any},
+      history?: History,
+    };
+
+    constructor(props: any) {
+      super(props);
+      this.itemClicked = this.itemClicked.bind(this);
+    }
+
+    itemClicked(contact: any) {
+      const uid = contact.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 (
+        <Switch>
+          <Route
+            path={routeResolver.getRoute('journals._id')}
+            exact={true}
+            render={() => (
+              <JournalList entries={objValues(items)} onItemClick={this.itemClicked} />
+              )
+            }
+          />
+          <Route
+            path={routeResolver.getRoute('journals._id.items._id')}
+            exact={true}
+            render={({match}) => {
+
+              return (
+                <JournalItem item={items[match.params.itemUid]} />
+              );
+            }}
+          />
+        </Switch>
+      );
+    }
+  });
+}
+
+export default journalView;

src/Pim/index.tsx

@@ -168,7 +168,7 @@ class Pim extends React.PureComponent {
                   }
                 />
               </div>
-              <Contact contact={addressBookItems[match.params.contactUid]} />
+              <Contact item={addressBookItems[match.params.contactUid]} />
             </Container>
           )}
         />
@@ -212,7 +212,7 @@ class Pim extends React.PureComponent {
                   }
                 />
               </div>
-              <Event event={calendarItems[match.params.eventUid]} />
+              <Event item={calendarItems[match.params.eventUid]} />
             </Container>
           )}
         />

src/components/Contact.tsx

@@ -15,15 +15,15 @@ import { ContactType } from '../pim-types';
 
 class Contact extends React.PureComponent {
   props: {
-    contact?: ContactType,
+    item?: ContactType,
   };
 
   render() {
-    if (this.props.contact === undefined) {
+    if (this.props.item === undefined) {
       throw Error('Contact should be defined!');
     }
 
-    const contact = this.props.contact;
+    const contact = this.props.item;
     const name = contact.fn;
 
     const revProp = contact.comp.getFirstProperty('rev');

src/components/Event.tsx

@@ -37,11 +37,11 @@ function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
 
 class Event extends React.PureComponent {
   props: {
-    event?: EventType,
+    item?: EventType,
   };
 
   render() {
-    if (this.props.event === undefined) {
+    if (this.props.item === undefined) {
       throw Error('Event should be defined!');
     }
 
@@ -53,15 +53,15 @@ class Event extends React.PureComponent {
 
     return (
       <React.Fragment>
-        <PimItemHeader text={this.props.event.summary} backgroundColor={this.props.event.color}>
-          <div>{formatDateRange(this.props.event.startDate, this.props.event.endDate)}</div>
+        <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
+          <div>{formatDateRange(this.props.item.startDate, this.props.item.endDate)}</div>
           <br/>
-          <div><u>{this.props.event.location}</u></div>
+          <div><u>{this.props.item.location}</u></div>
         </PimItemHeader>
         <div style={style.content}>
-          <div>{this.props.event.description}</div>
-          {(this.props.event.attendees.length > 0) && (
-            <div>Attendees: {this.props.event.attendees.map((x) => (x.getFirstValue())).join(', ')}</div>)}
+          <div>{this.props.item.description}</div>
+          {(this.props.item.attendees.length > 0) && (
+            <div>Attendees: {this.props.item.attendees.map((x) => (x.getFirstValue())).join(', ')}</div>)}
         </div>
       </React.Fragment>
     );