From c9cc26cf8438c3b5b1ac88fe2206ffff121ea0d2 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 8 Dec 2017 12:34:48 +0000
Subject: [PATCH] Pim Main keep tabs in state.

---
 src/PimMain.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/PimMain.tsx b/src/PimMain.tsx
index 9c87e47..8488883 100644
--- a/src/PimMain.tsx
+++ b/src/PimMain.tsx
@@ -10,6 +10,9 @@ import { EventType, ContactType } from './pim-types';
 
 import { routeResolver } from './App';
 
+const addressBookTitle = 'Address Book';
+const calendarTitle = 'Calendar';
+
 class Pim extends React.Component {
   props: {
     contacts: Array<ContactType>,
@@ -17,8 +20,13 @@ class Pim extends React.Component {
     history?: any,
   };
 
+  state: {
+    tab?: string;
+  };
+
   constructor(props: any) {
     super(props);
+    this.state = {};
     this.eventClicked = this.eventClicked.bind(this);
     this.contactClicked = this.contactClicked.bind(this);
   }
@@ -40,11 +48,20 @@ class Pim extends React.Component {
   render() {
 
     return (
-      <Tabs>
-        <Tab label="Address Book">
+      <Tabs
+        value={this.state.tab}
+        onChange={(value) => this.setState({tab: value})}
+      >
+        <Tab
+          value={addressBookTitle}
+          label={addressBookTitle}
+        >
           <AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
         </Tab>
-        <Tab label="Calendar">
+        <Tab
+          value={calendarTitle}
+          label={calendarTitle}
+        >
           <Calendar entries={this.props.events} onItemClick={this.eventClicked} />
         </Tab>
       </Tabs>