From ea40181805a05e7dfba7e3cfa6816f7f78d949a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 13 Oct 2015 17:28:10 +0200
Subject: [PATCH] add 'clear search' dialog to AccordionList and implement
 functionality in SearchBar

---
 .../ascribe_accordion_list/accordion_list.js  | 38 ++++++++++++++++---
 js/components/piece_list.js                   |  1 +
 js/components/search_bar.js                   | 14 +++++++
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js
index fe300702..c488a3d8 100644
--- a/js/components/ascribe_accordion_list/accordion_list.js
+++ b/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">{getLangText('To register one, click')} <a href="register_piece">{getLangText('here')}</a>!</p>
+                    <p className="text-center">
+                        {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 {
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 908c2821..05557418 100644
--- a/js/components/piece_list.js
+++ b/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}>
diff --git a/js/components/search_bar.js b/js/components/search_bar.js
index ba6f4ea1..d5b5cefe 100644
--- a/js/components/search_bar.js
+++ b/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} />