Merge pull request #72 from comicrelief/GP-892_edco_lookup

fix: Display manual entry fields on edit

package.json

@@ -17,6 +17,7 @@
     "react-currency-formatter": "0",
     "react-dom": "15",
     "react-dropzone": "4",
+    "react-fontawesome": "1",
     "react-geolocated": "2",
     "react-refetch": "1",
     "react-scripts": "1",

src/components/SchoolsLookUp/SchoolsLookUp.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import { AsyncTypeahead } from 'react-bootstrap-typeahead';
+import Icon from 'react-fontawesome';
+import { AsyncTypeahead, Menu, MenuItem } from 'react-bootstrap-typeahead';
 import './SchoolsLookUp.scss';
 
 const SHOW_EDCO_LOOKUP = 'SHOW_EDCO_LOOKUP';
@@ -17,8 +18,11 @@ class SchoolsLookUp extends Component {
   static renderMenuItemChildren(option) {
     return (
       <div key={option.id}>
-        <span>{option.name}, </span>
-        <span>{option.post_code}</span>
+        <span>{option.name}</span>
+        {option.post_code ?
+          <span>, {option.post_code}</span>:
+          null
+        }
       </div>
     );
   }
@@ -33,32 +37,60 @@ class SchoolsLookUp extends Component {
     let lookup;
     if (selectedEstablishment && selectedEstablishment.id) {
       lookup = HIDE_LOOKUP;
-    } else if (establishmentNameValue) {
+    } else if (establishmentNameValue || this.hasError(props)) {
       lookup = SHOW_MANUAL_LOOKUP;
     } else {
       lookup = SHOW_EDCO_LOOKUP;
     }
     this.state = {
       options: [],
+      query: '',
+      isSearching: false,
       lookup,
     };
-    this.renderMenuItemChildren = SchoolsLookUp.renderMenuItemChildren;
+
     this.handleChange = this.handleChange.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.handleLookup = this.handleLookup.bind(this);
     this.handleManual = this.handleManual.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
+    this.renderMenu = this.renderMenu.bind(this);
     this.renderSingleInput = this.renderSingleInput.bind(this);
     this.renderEstablishmentDetails = this.renderEstablishmentDetails.bind(this);
   }
 
+  /**
+   * Component lifecycle event triggered whenever props change
+   * @param {object} props
+   */
+  componentWillReceiveProps(nextProps) {
+    if (this.hasError(nextProps)) {
+      this.handleLookup(SHOW_MANUAL_LOOKUP);
+    }
+  }
+
+  /**
+   * Check whether any field has error or all are valid
+   * @param {object} props
+   * @return {boolean}
+   */
+  hasError(props) {
+    const { establishmentNameErrorMessage, address1ErrorMessage, address2ErrorMessage,
+      address3ErrorMessage, townErrorMessage, postcodeErrorMessage } = props;
+    const hasError = establishmentNameErrorMessage || address1ErrorMessage || address2ErrorMessage ||
+      address3ErrorMessage || townErrorMessage || postcodeErrorMessage;
+    return Boolean(hasError);
+  }
+
   /**
    * Handle click event.
    * @param {string} lookup
    * @param {object} event
    */
   handleLookup(lookup, event) {
-    event.preventDefault();
+    if (event) {
+      event.preventDefault();
+    }
     this.setState({ lookup });
   }
 
@@ -70,10 +102,11 @@ class SchoolsLookUp extends Component {
     if (!query) {
       return;
     }
+    this.setState({ isSearching: true });
     axios.get(this.props.data + query)
       .then((response) => {
         const options = response.data.data.schools;
-        this.setState({ options });
+        this.setState({ query, options, isSearching: false });
       });
   }
 
@@ -82,7 +115,7 @@ class SchoolsLookUp extends Component {
    * @param data
    */
   handleChange(data) {
-    if (!data || !data[0]) {
+    if (!data || !data[0] || data[0].id === 0) {
       return;
     }
     const {
@@ -262,6 +295,45 @@ class SchoolsLookUp extends Component {
     );
   }
 
+  /**
+   * Render whole menu
+   * Render default option and search results
+   * Render nothing in case searching is still in progress
+   * @param  {object} results
+   * @param  {object} menuProps
+   * @return {XML}
+   */
+  renderMenu(results, menuProps) {
+    // do not show results until search is complete
+    if (menuProps.emptyLabel === 'Searching...' || this.state.isSearching === true ||
+        (results.length === 0 && this.state.query &&
+        this.state.query.toUpperCase() !== menuProps.text.toUpperCase())
+    ) {
+      return <div />;
+    }
+
+    // if there are search results, add default option
+    if (results.length > 0) {
+      results.unshift(
+        {
+          name: 'Please select a school from the list below',
+          id: 0,
+        },
+      );
+    }
+    return (
+      <Menu {...menuProps}>
+        {
+          results.map((result, index) => (
+            <MenuItem key={index} option={result} position={index}>
+              {SchoolsLookUp.renderMenuItemChildren(result)}
+            </MenuItem>
+          ))
+        }
+      </Menu>
+    );
+  }
+
   /**
    * Render Component.
    * @return {XML}
@@ -270,9 +342,9 @@ class SchoolsLookUp extends Component {
     const {
       establishmentNameValue, address1Value, address2Value, address3Value, townValue, postcodeValue,
       establishmentNameIdentifier, address1Identifier, address2Identifier, address3Identifier,
-      townIdentifier, postcodeIdentifier, min, selectedEstablishment,
+      townIdentifier, postcodeIdentifier, min, selectedEstablishment, disabled,
     } = this.props;
-    const { lookup, options } = this.state;
+    const { lookup, options, isSearching } = this.state;
     const orEnterManuallyCopy = 'Or enter details manually';
 
     return (
@@ -291,22 +363,31 @@ class SchoolsLookUp extends Component {
               },
               true,
             )}
-            <button className="btn" onClick={this.handleLookup.bind(this, SHOW_EDCO_LOOKUP)}>
+            <button className="btn" onClick={this.handleLookup.bind(this, SHOW_MANUAL_LOOKUP)}>
               Edit
             </button>
           </div>:
-          <AsyncTypeahead
-            type="text"
-            minLength={min}
-            bsSize="large"
-            onSearch={this.handleSearch}
-            onChange={this.handleChange}
-            className="schoolsLookUpForm"
-            labelKey={option => `${option.name} ${option.post_code}`}
-            placeholder="Search"
-            renderMenuItemChildren={this.renderMenuItemChildren}
-            options={options}
-          />
+          <div>
+            {/* Disable cashing as it ignores a lot of results */}
+            <AsyncTypeahead
+              type="text"
+              minLength={min}
+              bsSize="large"
+              onSearch={this.handleSearch}
+              onChange={this.handleChange}
+              className="schoolsLookUpForm"
+              labelKey={option => `${option.id !== 0 ? `${option.name} ${option.post_code}` : ''}`}
+              placeholder="Search"
+              renderMenu={this.renderMenu}
+              options={options}
+              useCache={false}
+              disabled={disabled}
+            />
+            {isSearching ?
+              <Icon name="spinner" spin />:
+              null
+            }
+          </div>
         }
         {lookup === SHOW_EDCO_LOOKUP ?
           <button className="btn" onClick={this.handleLookup.bind(this, SHOW_MANUAL_LOOKUP)}>
@@ -364,6 +445,7 @@ SchoolsLookUp.defaultProps = {
   postcodeIdentifier: 'postcode',
   postcodeErrorMessage: '',
   postcodeRequired: true,
+  disabled: false,
   validateField: () => {},
 };
 
@@ -409,6 +491,7 @@ SchoolsLookUp.propTypes = {
   postcodeIdentifier: PropTypes.string,
   postcodeErrorMessage: PropTypes.string,
   validateField: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default SchoolsLookUp;

src/components/SchoolsLookUp/package.json

@@ -5,9 +5,10 @@
   "private": true,
   "main": "./SchoolsLookUp.js",
   "dependencies": {
-    "react": "15",
     "axios": "0",
+    "prop-types": "15",
+    "react": "15",
     "react-bootstrap-typeahead": "^2.0.0-alpha.4",
-    "prop-types": "15"
+    "react-fontawesome": "1"
   }
 }