add 'clear search' dialog to AccordionList and implement functionality in SearchBar

js/components/ascribe_accordion_list/accordion_list.js

@@ -9,21 +9,49 @@ let AccordionList = React.createClass({
         className: React.PropTypes.string,
         children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
         loadingElement: React.PropTypes.element,
-        count: React.PropTypes.number
+        count: React.PropTypes.number,
+        itemList: React.PropTypes.arrayOf(React.PropTypes.object),
+        search: React.PropTypes.string,
+        searchFor: React.PropTypes.func
     },
-    
+
+    clearSearch() {
+        this.props.searchFor('');
+    },
+
     render() {
+        const { search } = this.props;
+
         if(this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className={this.props.className}>
                     {this.props.children}
                 </div>
             );
-        } else if(this.props.count === 0) {
+        } else if(this.props.count === 0 && !search) {
             return (
                 <div className="ascribe-accordion-list-placeholder">
-                    <p className="text-center">{getLangText('We could not find any works related to you...')}</p>
+                    <p className="text-center">
-                    <p className="text-center">{getLangText('To register one, click')} <a href="register_piece">{getLangText('here')}</a>!</p>
+                        {getLangText('We could not find any works related to you...')}
+                    </p>
+                    <p className="text-center">
+                        {getLangText('To register one, click')}
+                        <a href="register_piece">{getLangText('here')}</a>!
+                    </p>
+                </div>
+            );
+        } else if(this.props.count === 0 && search) {
+            return (
+                <div className="ascribe-accordion-list-placeholder">
+                    <p className="text-center">
+                        {getLangText('We could not find any works related to you...')}
+                    </p>
+                    <p className="text-center">
+                        {getLangText('You\'re filtering by the search keyword: \'%s\' ', search)}
+                    </p>
+                    <p className="text-center">
+                        <button className="btn btn-sm btn-default" onClick={this.clearSearch}>{getLangText('Clear search')}</button>
+                    </p>
                 </div>
             );
         } else {

js/components/piece_list.js

@@ -178,6 +178,7 @@ let PieceList = React.createClass({
                     orderBy={this.state.orderBy}
                     orderAsc={this.state.orderAsc}
                     search={this.state.search}
+                    searchFor={this.searchFor}
                     page={this.state.page}
                     pageSize={this.state.pageSize}
                     loadingElement={loadingElement}>

js/components/search_bar.js

@@ -68,6 +68,19 @@ const SearchBar = React.createClass({
         }
     },
 
+    componentWillReceiveProps(nextProps) {
+        /**
+         * This enables the `PieceListStore` to override the state
+         * of that component in case someone is changing the `searchQuery` on
+         * another component.
+         *
+         * Like how it's being done in the 'Clear search' dialog.
+         */
+        if(this.props.searchQuery !== nextProps.searchQuery) {
+            this.setState({ searchQuery: nextProps.searchQuery });
+        }
+    },
+
     startTimer(searchQuery) {
         const { timer } = this.state;
         const { threshold } = this.props;
@@ -114,6 +127,7 @@ const SearchBar = React.createClass({
             <span className={className}>
                 <Input
                     type='text'
+                    value={this.state.searchQuery}
                     placeholder={getLangText('Search%s', '...')}
                     onChange={this.handleChange}
                     addonAfter={searchIcon} />