components: SearchBar refactor

- upgrade react-searchkit 1.0.0-alpha.3
- removed buttonColor, never used, and in case we use it, it has no effect since its overridden by the .ui.input.action.ils-searchbar styles
- subtitle to SearchError as child
- simplified search message when empty results
- Decoupled QueryBuildHelper to a stand alone component connected to RSK state
- fix bug in PatronResultList, when we had empty results, there were displayed two empty results message boxes
- remove RSK override
- configure with props React Search Kit Search bar
- SearchBarILS our simplified not connected to RSK searchbar
- fixed issue with configuration on BucketAggregations
- SearchBarILS replacing individual searchbars
- fixed missing identifiers for all <Identifiers>
- fixed empty results in series literature mobile was disconnected from RSK
- depends on inveniosoftware/react-searchkit#141
- closes inveniosoftware#226

package.json

@@ -39,7 +39,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scroll": "^1.7.16",
-    "react-searchkit": "^1.0.0-alpha.4",
+    "react-searchkit": "^1.0.0-alpha.5",
     "react-show-more": "^2.0.0",
     "react-tagcloud": "^2.0.0",
     "redux": "^4.0.5",
@@ -95,7 +95,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.1",
     "react-scroll": "^1.7.16",
-    "react-searchkit": "^1.0.0-alpha.4",
+    "react-searchkit": "^1.0.0-alpha.5",
     "react-show-more": "^2.0.0",
     "react-tagcloud": "^2.0.0",
     "redux": "^4.0.5",

src/lib/components/SearchBar/QueryBuildHelper.js

@@ -1,18 +1,23 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List, Grid } from 'semantic-ui-react';
+import { withState } from 'react-searchkit';
 
-export class QueryBuildHelper extends Component {
+class _QueryBuildHelper extends Component {
   addToQuery = field => {
-    const { currentQueryString, updateQueryString } = this.props;
+    const { currentQueryState, updateQueryState } = this.props;
+    const { queryString } = currentQueryState;
+
     const defaultVal = field.defaultValue ? field.defaultValue : '*';
     const newCriteriaString = `${field.field}:${defaultVal}`;
-    const previousQueryString = currentQueryString;
+    const previousQueryString = queryString;
 
     if (previousQueryString === '') {
-      updateQueryString(newCriteriaString);
+      updateQueryState({ queryString: newCriteriaString });
     } else {
-      updateQueryString(`${previousQueryString} AND ${newCriteriaString}`);
+      updateQueryState({
+        queryString: `${previousQueryString} AND ${newCriteriaString}`,
+      });
     }
   };
 
@@ -46,6 +51,7 @@ export class QueryBuildHelper extends Component {
 
   render() {
     const { fields } = this.props;
+
     return (
       <Grid>
         <Grid.Row columns={1}>
@@ -58,10 +64,10 @@ export class QueryBuildHelper extends Component {
   }
 }
 
-QueryBuildHelper.propTypes = {
+_QueryBuildHelper.propTypes = {
   fields: PropTypes.array.isRequired,
-  currentQueryString: PropTypes.string.isRequired,
-  updateQueryString: PropTypes.func.isRequired,
+  updateQueryState: PropTypes.func.isRequired,
+  currentQueryState: PropTypes.object.isRequired,
 };
 
-QueryBuildHelper.defaultProps = {};
+export const QueryBuildHelper = withState(_QueryBuildHelper);

src/lib/components/SearchBar/SearchBarILS.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Input } from 'semantic-ui-react';
+
+export class SearchBarILS extends Component {
+  state = { currentValue: '' };
+
+  componentDidMount() {
+    if (this.focusInput) {
+      this.focusInput.focus();
+    }
+  }
+
+  onKeyPressHandler = (event, input) => {
+    if (event.key === 'Enter') {
+      const { onSearchHandler } = this.props;
+      const { currentValue } = this.state;
+      onSearchHandler(currentValue);
+    }
+  };
+
+  onPasteHandler = event => {
+    const { onSearchHandler } = this.props;
+    const queryString = (event.clipboardData || window.clipboardData).getData(
+      'text'
+    );
+    onSearchHandler(queryString);
+  };
+
+  render() {
+    const {
+      className: parentClass,
+      onKeyPressHandler: parentKeyPressHandler,
+      onSearchHandler,
+      onPasteHandler,
+      placeholder,
+      ...rest
+    } = this.props;
+    const { currentValue } = this.state;
+    return (
+      <Input
+        action={{
+          icon: 'search',
+          onClick: () => onSearchHandler(currentValue),
+        }}
+        onChange={(event, { value }) => {
+          this.setState({ currentValue: value });
+        }}
+        onKeyPress={parentKeyPressHandler || this.onKeyPressHandler}
+        onPaste={onPasteHandler || this.onPasteHandler}
+        fluid
+        size="big"
+        placeholder={placeholder}
+        className={`${parentClass} ils-searchbar`}
+        ref={input => {
+          this.focusInput = input;
+        }}
+        {...rest}
+      />
+    );
+  }
+}
+
+SearchBarILS.propTypes = {
+  onKeyPressHandler: PropTypes.func,
+  onPasteHandler: PropTypes.func,
+  onSearchHandler: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+};
+
+SearchBarILS.defaultProps = {
+  onKeyPressHandler: null,
+  onPasteHandler: null,
+  placeholder: '',
+  className: '',
+};