Addressbook: add a searchable address book that lets us filter the list

src/Journal/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tabs, Tab } from 'material-ui/Tabs';
 
-import AddressBook from '../components/AddressBook';
+import SearchableAddressBook from '../components/SearchableAddressBook';
 import Contact from '../components/Contact';
 import Calendar from '../components/Calendar';
 import Event from '../components/Event';
@@ -29,7 +29,7 @@ interface PropsType {
 interface PropsTypeInner extends PropsType {
 }
 
-const JournalAddressBook = journalView(AddressBook, Contact);
+const JournalAddressBook = journalView(SearchableAddressBook, Contact);
 const PersistCalendar = historyPersistor('Calendar')(Calendar);
 const JournalCalendar = journalView(PersistCalendar, Event);
 

src/Pim/PimMain.tsx

@@ -9,7 +9,7 @@ import { Location, History } from 'history';
 
 import Container from '../widgets/Container';
 
-import AddressBook from '../components/AddressBook';
+import SearchableAddressBook from '../components/SearchableAddressBook';
 import Calendar from '../components/Calendar';
 
 import { EventType, ContactType } from '../pim-types';
@@ -92,7 +92,7 @@ class PimMain extends React.PureComponent {
             label={addressBookTitle}
           >
             <Container>
-              <AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
+              <SearchableAddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
             </Container>
           </Tab>
           <Tab

src/components/SearchableAddressBook.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import TextField from 'material-ui/TextField';
+
+import IconButton from 'material-ui/IconButton';
+import IconClear from 'material-ui/svg-icons/content/clear';
+
+import { ContactType } from '../pim-types';
+
+import AddressBook from '../components/AddressBook';
+
+import { getPalette } from '../App';
+
+class SearchableAddressBook extends React.PureComponent {
+  props: {
+    entries: Array<ContactType>,
+    onItemClick: (contact: ContactType) => void,
+  };
+
+  state: {
+    searchQuery: string;
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.state = {searchQuery: ''};
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  handleInputChange(event: React.ChangeEvent<any>) {
+    const name = event.target.name;
+    const value = event.target.value;
+    this.setState({
+      [name]: value
+    });
+  }
+
+  render() {
+    const {
+      entries,
+      ...rest,
+    } = this.props;
+
+    const reg = new RegExp(this.state.searchQuery, 'i');
+
+    return (
+      <React.Fragment>
+        <TextField
+          name="searchQuery"
+          value={this.state.searchQuery}
+          style={{fontSize: '120%', marginLeft: 20}}
+          hintText="Find Contacts"
+          hintStyle={{color: getPalette('accent1Color')}}
+          onChange={this.handleInputChange}
+        />
+        {this.state.searchQuery &&
+          <IconButton onClick={() => this.setState({'searchQuery': ''})}>
+            <IconClear />
+          </IconButton>
+        }
+        <AddressBook entries={entries} filter={(ent: ContactType) => ent.fn.match(reg)} {...rest} />
+      </React.Fragment>
+    );
+  }
+}
+
+export default SearchableAddressBook;