fix: Display message if there are no items on search

src/webui/src/components/NoItems/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classes from './noItems.scss';
+
+const NoItems = (props) => {
+    return (
+      <div className={classes.noItems}>
+        <h2>{props.text}</h2>
+      </div>
+    );
+};
+
+NoItems.propTypes = {
+  text: PropTypes.string.isRequired
+};
+
+export default NoItems;

src/webui/src/components/NoItems/noItems.scss

@@ -0,0 +1,3 @@
+.noItems {
+  margin: 5em 0;
+}

src/webui/src/components/PackageList/index.js

@@ -4,13 +4,15 @@ import isEmpty from 'lodash/isEmpty';
 
 import Package from '../Package';
 import Help from '../Help';
+import NoItems from '../NoItems';
 
 import classes from './packageList.scss';
 
 export default class PackageList extends React.Component {
 
   static propTypes = {
-    packages: PropTypes.array
+    packages: PropTypes.array,
+    help: PropTypes.bool
   }
 
   render() {
@@ -18,7 +20,7 @@ export default class PackageList extends React.Component {
       <div>
         <div className={classes.pkgContainer}>
           {this.renderTitle()}
-          {this.isTherePackages() ? this.renderList(): this.renderHelp()}
+          {this.isTherePackages() ? this.renderList(): this.renderOptions()}
         </div>
       </div>
     );
@@ -38,7 +40,22 @@ export default class PackageList extends React.Component {
     ));
   }
 
+  renderOptions() {
+    if (this.isTherePackages() === false && this.props.help) {
+      return this.renderHelp();
+    } else {
+      return this.renderNoItems();
+    }
+  }
+
+  renderNoItems() {
+   return <NoItems text={'No items were found with that query'}/>;
+  }
+
   renderHelp() {
+    if (this.props.help === false) {
+      return;
+    }
     return <Help/>;
   }
 

src/webui/src/modules/home/index.js

@@ -19,6 +19,7 @@ export default class Home extends React.Component {
 
   state = {
     loading: true,
+    fistTime: true,
     query: ''
   }
 
@@ -74,6 +75,7 @@ export default class Home extends React.Component {
      if (this.state.query === query) {
        this.setState({
          packages: this.req.data,
+         fistTime: false,
          loading: false
        });
      }
@@ -106,7 +108,7 @@ export default class Home extends React.Component {
   }
 
   renderSearchBar() {
-    if (this.isTherePackages()) {
+    if (this.isTherePackages() && this.state.fistTime) {
       return;
     }
     return <Search handleSearchInput={ this.handleSearchInput } />;
@@ -117,7 +119,7 @@ export default class Home extends React.Component {
   }
 
   renderPackageList() {
-    return <PackageList packages={this.state.packages} />;
+    return <PackageList help={this.state.fistTime} packages={this.state.packages} />;
   }
 
 }