SearchableAddressBook: change to be a function component.

src/components/SearchableAddressBook.tsx

@@ -13,57 +13,37 @@ import { ContactType } from "../pim-types";
 
 import AddressBook from "../components/AddressBook";
 
-class SearchableAddressBook extends React.PureComponent {
+interface PropsType {
-  public props: {
+  entries: ContactType[];
-    entries: ContactType[];
+  onItemClick: (contact: ContactType) => void;
-    onItemClick: (contact: ContactType) => void;
-  };
-
-  public state: {
-    searchQuery: string;
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.state = { searchQuery: "" };
-    this.handleInputChange = this.handleInputChange.bind(this);
-  }
-
-  public handleInputChange(event: React.ChangeEvent<any>) {
-    const name = event.target.name;
-    const value = event.target.value;
-    this.setState({
-      [name]: value,
-    });
-  }
-
-  public 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 }}
-          placeholder="Find Contacts"
-          onChange={this.handleInputChange}
-        />
-        {this.state.searchQuery &&
-          <IconButton onClick={() => this.setState({ searchQuery: "" })}>
-            <IconClear />
-          </IconButton>
-        }
-        <IconSearch />
-        <AddressBook entries={entries} filter={(ent: ContactType) => ent.fn?.match(reg)} {...rest} />
-      </React.Fragment>
-    );
-  }
 }
 
-export default SearchableAddressBook;
+export default function SearchableAddressBook(props: PropsType) {
+  const [searchQuery, setSearchQuery] = React.useState("");
+
+  const {
+    entries,
+    ...rest
+  } = props;
+
+  const reg = new RegExp(searchQuery, "i");
+
+  return (
+    <React.Fragment>
+      <TextField
+        name="searchQuery"
+        value={searchQuery}
+        style={{ fontSize: "120%", marginLeft: 20 }}
+        placeholder="Find Contacts"
+        onChange={(event) => setSearchQuery(event.target.value)}
+      />
+      {searchQuery &&
+        <IconButton onClick={() => setSearchQuery("")}>
+          <IconClear />
+        </IconButton>
+      }
+      <IconSearch />
+      <AddressBook entries={entries} filter={(ent: ContactType) => ent.fn?.match(reg)} {...rest} />
+    </React.Fragment>
+  );
+}