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

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) => {
+    const { onSearchHandler } = this.props;
+    if (event.key === 'Enter') {
+      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: '',
+};

src/lib/components/SearchBar/SearchBarILS.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { SearchBarILS as SearchBar } from './SearchBarILS';
+
+const mockedOnSearchHandler = jest.fn();
+
+describe('SearchBar tests', () => {
+  let component;
+  afterEach(() => {
+    mockedOnSearchHandler.mockClear();
+    component.unmount();
+  });
+
+  it('should match snapshot', () => {
+    component = mount(
+      <SearchBar onSearchHandler={() => {}} placeholder="Search" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should call onSearchHandler only on `enter` key press', () => {
+    component = mount(
+      <SearchBar placeholder="Search" onSearchHandler={mockedOnSearchHandler} />
+    );
+
+    const input = component.find('Input').find('input');
+    input.simulate('keypress', { key: 'Enter' });
+    expect(mockedOnSearchHandler).toHaveBeenCalled();
+
+    mockedOnSearchHandler.mockClear();
+
+    input.simulate('keypress', { key: 'Backspace' });
+    expect(mockedOnSearchHandler).not.toHaveBeenCalled();
+  });
+
+  it('should call executeSearch on button click', () => {
+    component = mount(
+      <SearchBar onSearchHandler={mockedOnSearchHandler} placeholder="Search" />
+    );
+    const input = component
+      .find('Input')
+      .find('Icon')
+      .find('i');
+    input.simulate('click');
+    expect(mockedOnSearchHandler).toHaveBeenCalled();
+  });
+});