Refactor Header component to function (#1241)

packages/venia-concept/src/components/Header/header.js

@@ -1,79 +1,77 @@
-import React, { Component, Suspense } from 'react';
-import PropTypes from 'prop-types';
+import React, { Suspense } from 'react';
+import { bool, func, shape, string } from 'prop-types';
+import MenuIcon from 'react-feather/dist/icons/menu';
+import SearchIcon from 'react-feather/dist/icons/search';
 
-import classify from 'src/classify';
-import { Link, resourceUrl, Route } from 'src/drivers';
 import Icon from 'src/components/Icon';
-import SearchIcon from 'react-feather/dist/icons/search';
-import MenuIcon from 'react-feather/dist/icons/menu';
+import Logo from 'src/components/Logo';
+import { Link, resourceUrl, Route } from 'src/drivers';
+
 import CartTrigger from './cartTrigger';
 import NavTrigger from './navTrigger';
 import SearchTrigger from './searchTrigger';
 
-const SearchBar = React.lazy(() => import('src/components/SearchBar'));
-
+import { mergeClasses } from 'src/classify';
 import defaultClasses from './header.css';
-import Logo from '../Logo';
-
-class Header extends Component {
-    static propTypes = {
-        classes: PropTypes.shape({
-            logo: PropTypes.string,
-            primaryActions: PropTypes.string,
-            root: PropTypes.string,
-            open: PropTypes.string,
-            closed: PropTypes.string,
-            secondaryActions: PropTypes.string,
-            toolbar: PropTypes.string
-        }),
-        searchOpen: PropTypes.bool,
-        toggleSearch: PropTypes.func.isRequired
-    };
 
-    get searchIcon() {
-        return <Icon src={SearchIcon} />;
-    }
+const SearchBar = React.lazy(() => import('src/components/SearchBar'));
 
-    render() {
-        const { searchOpen, classes, toggleSearch } = this.props;
+const Header = props => {
+    // Props.
+    const { searchOpen, toggleSearch } = props;
 
-        const rootClass = searchOpen ? classes.open : classes.closed;
+    // Members.
+    const classes = mergeClasses(defaultClasses, props.classes);
+    const rootClass = searchOpen ? classes.open : classes.closed;
+    const searchIcon = <Icon src={SearchIcon} />;
 
-        return (
-            <header className={rootClass}>
-                <div className={classes.toolbar}>
-                    <Link to={resourceUrl('/')}>
-                        <Logo classes={{ logo: classes.logo }} />
-                    </Link>
-                    <div className={classes.primaryActions}>
-                        <NavTrigger>
-                            <Icon src={MenuIcon} />
-                        </NavTrigger>
-                    </div>
-                    <div className={classes.secondaryActions}>
-                        <SearchTrigger
-                            searchOpen={searchOpen}
-                            toggleSearch={toggleSearch}
-                        >
-                            {this.searchIcon}
-                        </SearchTrigger>
-                        <CartTrigger />
-                    </div>
+    return (
+        <header className={rootClass}>
+            <div className={classes.toolbar}>
+                <Link to={resourceUrl('/')}>
+                    <Logo classes={{ logo: classes.logo }} />
+                </Link>
+                <div className={classes.primaryActions}>
+                    <NavTrigger>
+                        <Icon src={MenuIcon} />
+                    </NavTrigger>
+                </div>
+                <div className={classes.secondaryActions}>
+                    <SearchTrigger
+                        searchOpen={searchOpen}
+                        toggleSearch={toggleSearch}
+                    >
+                        {searchIcon}
+                    </SearchTrigger>
+                    <CartTrigger />
                 </div>
-                <Suspense fallback={this.searchIcon}>
-                    <Route
-                        render={({ history, location }) => (
-                            <SearchBar
-                                isOpen={searchOpen}
-                                history={history}
-                                location={location}
-                            />
-                        )}
-                    />
-                </Suspense>
-            </header>
-        );
-    }
-}
+            </div>
+            <Suspense fallback={searchIcon}>
+                <Route
+                    render={({ history, location }) => (
+                        <SearchBar
+                            isOpen={searchOpen}
+                            history={history}
+                            location={location}
+                        />
+                    )}
+                />
+            </Suspense>
+        </header>
+    );
+};
+
+Header.propTypes = {
+    classes: shape({
+        closed: string,
+        logo: string,
+        open: string,
+        primaryActions: string,
+        secondaryActions: string,
+        toolbar: string
+    }),
+    searchOpen: bool,
+    toggleSearch: func.isRequired
+};
 
-export default classify(defaultClasses)(Header);
+export default Header;