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 (
{this.props.children}
);
- } else if(this.props.count === 0) {
+ } else if(this.props.count === 0 && !search) {
return (
-
{getLangText('We could not find any works related to you...')}
-
{getLangText('To register one, click')} {getLangText('here')}!
+
+ {getLangText('We could not find any works related to you...')}
+
+
+ {getLangText('To register one, click')}
+ {getLangText('here')}!
+
+
+ );
+ } else if(this.props.count === 0 && search) {
+ return (
+
+
+ {getLangText('We could not find any works related to you...')}
+
+
+ {getLangText('You\'re filtering by the search keyword: \'%s\' ', search)}
+
+
+
+
);
} 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({