Merge filter container with library component and get rid of 'active' state of filter component

src/components/filter/filter.jsx

@@ -8,7 +8,6 @@ const styles = require('./filter.css');
 
 const FilterComponent = props => {
     const {
-        active,
         onChange,
         placeholderText,
         filterQuery
@@ -17,7 +16,7 @@ const FilterComponent = props => {
         <div
             className={classNames({
                 [styles.filter]: true,
-                [styles.isActive]: active
+                [styles.isActive]: filterQuery.length > 0
             })}
         >
             <img
@@ -43,13 +42,11 @@ const FilterComponent = props => {
 };
 
 FilterComponent.propTypes = {
-    active: PropTypes.bool,
     filterQuery: PropTypes.string,
     onChange: PropTypes.func,
     placeholderText: PropTypes.string
 };
 FilterComponent.defaultProps = {
-    active: false,
     placeholderText: 'what are you looking for?'
 };
 module.exports = FilterComponent;

src/components/library/library.jsx

@@ -10,8 +10,14 @@ const styles = require('./library.css');
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
-        bindAll(this, ['handleSelect']);
-        this.state = {selectedItem: null};
+        bindAll(this, [
+            'handleSelect',
+            'handleFilterChange'
+        ]);
+        this.state = {
+            selectedItem: null,
+            filterQuery: ''
+        };
     }
     handleSelect (id) {
         if (this.state.selectedItem === id) {
@@ -25,12 +31,19 @@ class LibraryComponent extends React.Component {
         }
         this.setState({selectedItem: id});
     }
+    handleFilterChange (event) {
+        this.setState({
+            filterQuery: event.target.value
+        });
+    }
     render () {
         if (!this.props.visible) return null;
         return (
             <ModalComponent
                 contentLabel={this.props.title}
+                filterQuery={this.state.filterQuery}
                 visible={this.props.visible}
+                onFilterChange={this.handleFilterChange}
                 onRequestClose={this.props.onRequestClose}
             >
                 <div className={styles.libraryScrollGrid}>

src/components/modal/modal.jsx

@@ -5,7 +5,7 @@ const ReactModal = require('react-modal');
 
 const Box = require('../box/box.jsx');
 const CloseButton = require('../close-button/close-button.jsx');
-const Filter = require('../../containers/filter.jsx');
+const Filter = require('../filter/filter.jsx');
 
 const styles = require('./modal.css');
 
@@ -24,7 +24,10 @@ class ModalComponent extends React.Component {
                 >
                     <div className={styles.header}>
                         <div className={classNames(styles.headerItem, styles.headerItemFilter)}>
-                            <Filter />
+                            <Filter
+                                filterQuery={this.props.filterQuery}
+                                onChange={this.props.onFilterChange}
+                            />
                         </div>
                         <div
                             className={classNames(
@@ -56,6 +59,8 @@ class ModalComponent extends React.Component {
 ModalComponent.propTypes = {
     children: PropTypes.node,
     contentLabel: PropTypes.string.isRequired,
+    filterQuery: PropTypes.string,
+    onFilterChange: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool.isRequired
 };

src/containers/filter.jsx

-const bindAll = require('lodash.bindall');
-const React = require('react');
-
-const FilterComponent = require('../components/filter/filter.jsx');
-
-class Filter extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleOnChange'
-        ]);
-        this.state = {
-            active: false,
-            filterQuery: ''
-        };
-    }
-    handleOnChange (event) {
-        this.setState({
-            filterQuery: event.target.value
-        });
-
-        if (event.target.value){
-            this.setState({active: true});
-        } else {
-            this.setState({active: false});
-        }
-    }
-    render () {
-        return (
-            <FilterComponent
-                active={this.state.active}
-                filterQuery={this.state.filterQuery}
-                onChange={this.handleOnChange}
-            />
-        );
-    }
-}
-
-module.exports = Filter;