Merge pull request #78 from comicrelief/GP-892-empty-results-fix

Show 'Please select...' only when there are results, and the not found message otherwise
comicrelief · Oct 29, 2017 · 0fa6e1a · 0fa6e1a
2 parents 398d1b3 + 3ab331b
commit 0fa6e1a
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/src/components/SchoolsLookUp/SchoolsLookUp.js b/src/components/SchoolsLookUp/SchoolsLookUp.js
@@ -332,17 +332,22 @@ class SchoolsLookUp extends Component {
     const MenuHeader = props => <li {...props} className={isDefaultOptionHighlighted ? 'default-selection' : ''} />;
     return (
       <Menu {...menuProps}>
-        <MenuHeader key="defaultSelection" onMouseLeave={this.handleDefaultOptionHoverOff}>
-          Please select a school from the list below
-        </MenuHeader>
-        {
-          results.map((result, index) => (
-            <div key={index} onMouseEnter={this.handleDefaultOptionHoverOff}>
-              <MenuItem option={result} position={index}>
-                {SchoolsLookUp.renderMenuItemChildren(result)}
-              </MenuItem>
-            </div>
-          ))
+        {results.length > 0 ?
+          <div>
+            <MenuHeader key="defaultSelection" onMouseLeave={this.handleDefaultOptionHoverOff}>
+              Please select a school from the list below
+            </MenuHeader>
+            {
+              results.map((result, index) => (
+                <div key={index} onMouseEnter={this.handleDefaultOptionHoverOff}>
+                  <MenuItem option={result} position={index}>
+                    {SchoolsLookUp.renderMenuItemChildren(result)}
+                  </MenuItem>
+                </div>
+              ))
+            }
+          </div>:
+          null
         }
       </Menu>
     );
@@ -384,17 +389,18 @@ class SchoolsLookUp extends Component {
             </button>
           </div>:
           <div className="schoolsLookUp-search">
-            {/* Disable cashing as it ignores a lot of results */}
+            {/* Disable caching as it ignores a lot of results */}
             <AsyncTypeahead
               type="text"
               minLength={min}
               bsSize="large"
+              emptyLabel="Sorry, that postcode isn't in our database of schools and nurseries. Please manually fill in the address below."
               onSearch={this.handleSearch}
               onChange={this.handleChange}
               onInputChange={this.handleInputChange}
               className="schoolsLookUpForm"
               labelKey={option => `${option.id !== 0 ? `${option.name} ${option.post_code}` : ''}`}
-              placeholder="Search"
+              placeholder="Type to start search (this may take a few seconds)"
               renderMenu={this.renderMenu}
               options={options}
               useCache={false}