issue-43: MiniSearchUI can now be integrated with "external" results and components

[brandon-bogan]

MiniSearchUI can now take optional props for results to render. These props, in one way or another, are propagated on to SearchResultsCount and SearchResults, and so these components were also updated as part of this new feature.

MiniSearchUI also takes props for functions to call when the user enters a query and/or clicks search, so that the results being passed in can be updated accordingly.

[klk1010]

Indicate this is optional: onSearch?: null | (q: string) => void;

The difference between
A: onSearch: null | (q: string) => void; and
B: onSearch?: null | (q: string) => void;

In example A, you are specifying that the user must explicitly pass a prop named onSearch and it may have the value of null or it could be a function like (q: string) => void. Omitting a function is not the same as null. If onSearch was not passed as a prop, it would be undefined.

Same goes for updateQuery, response, and errror.

[brandon-bogan]

Done. Made onSearch, updateQuery, response, and error optional props. I also removed the null option for onSearch and updateQuery and removed these props from the default props, since these should either be valid functions or not exist at all as props.

[klk1010]

Unlike MiniSearchUIProps, MiniSearchUIDefaultProps is explicitly defined in your component. defaultProps are based on your specifications on lines 60-66 and are not based on what the parent passes through as a prop. Keeping that in mind, onSearch, updateQuery, response, and error, can only be null here.

[brandon-bogan]

Done. Made all defaultProps null, removed onSearch and updateQuery from defaultProps.

[klk1010]

As a defaultProp, response in this instance can only be null.

[klk1010]

This should be made optional for backwards compatibility.
response?: QueryResponse | null;

[brandon-bogan]

Done.

[klk1010]

This should be made optional for backwards compatibility.
offset?: number;

[brandon-bogan]

Done.

[klk1010]

Make offset optional for backwards compatibility.

[brandon-bogan]

Changed to:
const offset = this.props.response && this.props.offset ? this.props.offset : searcher.state.resultsOffset;

Is this what you meant?

[klk1010]

Here's an example of a more functional approach. It follows immutable principles so you never modify props. It also cleans up the main render by moving the logic out into a new function.

renderMessage = () => {
  const { response, error } = this.props;
  const { searcher } = this.context;
  const derivedResponse = response ? response : searcher.state.response | null;

  let message;
  let countMessage;

  if (response) {
    const { totalHits: count } = response;
    if (count === 0 || typeof count !== 'number') {
      countMessage = 'No results found';
    } else if (count === 1) {
      countMessage = '1 result found';
    } else {
      countMessage = `${count} results found`;
    }
    return (
      <span>
        {countMessage}
        <span style={{ fontWeight: 'normal' }}>
          {' '}
          (in {response.totalTime}ms)
        </span>
      </span>
    );
  } else if (error) {
    return `Error: ${error}`;
  } else if (searcher.state.error) {
      // got an error...
    return `Error: ${searcher.state.error}`;
  } else {
    // Not yet searched...
    return ''; 
  }
}

render() {
  return (
    <div className="attivio-globalmastnavbar-results">
      {this.renderMessage()}
    </div>
  );
}

[brandon-bogan]

Done. Note that I wrote the 3rd line of renderMessage slightly different to avoid a lint error but otherwise incorporated your code suggestion above.

[klk1010]

Address feedback.