Feature/highlight business name (#21)

* Add highlighting of businessName to ResultsTable

- Add prop businessName to be passed in to ResultsTable
- Add highlighting of businessName, using a <span> with a background colour

* Add try catch for creating the Regex

* Fix businessName prop to only update on a search

- Rather than the highlighting live updating as the user types, it will just do the highlighting when the search button is pressed

* Fix bug where highlighting is removed

- When changing between Match/Range/UBRN, the highlighting would dissapear

src/components/ResultsTable.js

@@ -7,7 +7,18 @@ import ChildRefTable from '../components/ChildRefTable';
 import { employmentBands, legalStatusBands, tradingStatusBands, turnoverBands } from '../utils/convertBands';
 import { downloadCSV, downloadJSON } from '../utils/export';
 
-const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, convertBands }) => {
+const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, convertBands, businessName }) => {
+  // https://stackoverflow.com/questions/29652862/highlight-text-using-reactjs
+  function getHighlightedText(text, higlight) {
+    // Split text on higlight term, include term itself into parts, ignore case
+    try {
+      const parts = text.split(new RegExp(`(${higlight})`, 'gi'));
+      return (<span key={text}>{parts.map(part => part.toLowerCase() === higlight.toLowerCase() ? <span key={`${text}-span`} style={{ backgroundColor: '#FFFF00' }}>{part}</span> : part)}</span>);
+    } catch (e) {
+      // Catch the invalid regular expressions
+      return (<span>{text}</span>);
+    }
+  }
   return (
     <div id="react-table">
       <ReactTable
@@ -24,6 +35,9 @@ const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, co
             Header: 'Business Name',
             id: 'businessName',
             accessor: d => d.businessName,
+            Cell: row => (
+              (businessName !== '') ? getHighlightedText(row.value, businessName) : row.value
+            ),
           },
           {
             Header: 'PostCode',
@@ -88,12 +102,14 @@ const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, co
 ResultsTable.defaultProps = {
   defaultPageSize: 10,
   convertBands: true,
+  businessName: '',
 };
 
 ResultsTable.propTypes = {
   results: PropTypes.array.isRequired,
   showFilter: PropTypes.bool.isRequired,
   showPagination: PropTypes.bool.isRequired,
+  businessName: PropTypes.string,
   defaultPageSize: PropTypes.number,
   convertBands: PropTypes.bool,
 };

src/components/SearchHOC.js

@@ -22,6 +22,7 @@ export default function withSearch(Form, settings, actions, constants) {
         showFilter: false,
         convertBands: true,
         scroll: false,
+        businessName: '',
       };
       this.changeQuery = this.changeQuery.bind(this);
       this.onSubmit = this.onSubmit.bind(this);
@@ -32,7 +33,10 @@ export default function withSearch(Form, settings, actions, constants) {
     }
     componentDidMount() {
       // Reload the data from the store
-      this.setState({ formValues: this.props.data.query });
+      this.setState({
+        formValues: this.props.data.query,
+        businessName: this.props.data.query.BusinessName,
+      });
     }
     componentWillReceiveProps(nextProps) {
       // The Redux action for the api request will set the errorMessage in the
@@ -63,7 +67,7 @@ export default function withSearch(Form, settings, actions, constants) {
     onSubmit(e) {
       e.preventDefault();
       if (this.state.formValues !== {}) {
-        this.setState({ showFilter: false });
+        this.setState({ showFilter: false, businessName: this.state.formValues.BusinessName });
         this.props.dispatch(actions.search(this.state.formValues));
       } else {
         // Possibly swap this action with a redux way of doing it?
@@ -150,6 +154,7 @@ export default function withSearch(Form, settings, actions, constants) {
               <br />
               {this.props.data.results.length !== 0 &&
                 <ResultsTable
+                  businessName={this.state.businessName}
                   convertBands={this.state.convertBands}
                   results={this.props.data.results}
                   showFilter={this.state.showFilter}