End of chapter 20

.idea/workspace.xml

@@ -2,6 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/components/layout/Alert.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/users/Search.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/Search.js" afterDir="false" />
     </list>
@@ -57,7 +59,7 @@
     <property name="nodejs_package_manager_path" value="npm" />
     <property name="prettierjs.PrettierConfiguration.NodeInterpreter" value="project" />
     <property name="prettierjs.PrettierConfiguration.Package" value="$USER_HOME$/.nvm/versions/node/v8.11.3/lib/node_modules/prettier" />
-    <property name="settings.editor.selected.configurable" value="settings.javascript.linters.eslint" />
+    <property name="settings.editor.selected.configurable" value="editing.templates" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
@@ -102,7 +104,7 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1569429914875</updated>
-      <workItem from="1569429916226" duration="13704000" />
+      <workItem from="1569429916226" duration="15366000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -153,7 +155,14 @@
       <option name="project" value="LOCAL" />
       <updated>1569580419974</updated>
     </task>
-    <option name="localTasksCounter" value="8" />
+    <task id="LOCAL-00008" summary="End of chapter 19">
+      <created>1569580705626</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1569580705626</updated>
+    </task>
+    <option name="localTasksCounter" value="9" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">

src/App.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Navbar from "./components/layout/Navbar";
 import Users from "./components/users/Users";
 import Search from "./components/users/Search";
+import Alert from './components/layout/Alert';
 import axios from "axios";
 import "./App.css";
 
@@ -11,7 +12,8 @@ class App extends Component {
     super(props);
     this.state = {
         users: [],
-        loading: false
+        loading: false,
+      alert:null
       }
   }
 
@@ -38,6 +40,14 @@ class App extends Component {
     this.setState({ users: [], loading: false });
   };
 
+  // Show an alert
+
+  setAlert = (msg, type) => {
+    this.setState({alert:{msg, type}});
+
+    setTimeout(() => this.setState({alert:null}), 5000);
+  };
+
   render() {
     const {users, loading} = this.state;
     return (
@@ -45,7 +55,13 @@ class App extends Component {
         <Navbar title="Github Finder" icon="fab fa-github" />
 
         <div className="container">
-          <Search searchUsers={this.searchUsers} clearUsers={this.clearUsers} showClear={users.length > 0}/>
+          <Alert alert={this.state.alert}/>
+          <Search searchUsers={this.searchUsers}
+                  clearUsers={this.clearUsers}
+                  showClear={users.length > 0}
+                  setAlert={this.setAlert}
+
+          />
           <Users loading={loading} users={users} />
         </div>
       </div>

src/components/layout/Alert.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = ({alert}) => {
+  return (
+    alert !== null && (
+      <div className={`alert alert-${alert.type}`}>
+    <i className='fas fa-info-circle'/> {alert.msg}
+      </div>
+
+    )
+
+  );
+};
+
+Alert.propTypes = {
+
+};
+
+export default Alert;

src/components/users/Search.js

@@ -18,8 +18,13 @@ class Search extends Component {
 
   onSubmit = e => {
     e.preventDefault();
-    this.props.searchUsers(this.state.text);
-    this.setState({text:''});
+    if (this.state.text === '') {
+      this.props.setAlert('Please enter something', 'light');
+    } else {
+      this.props.searchUsers(this.state.text);
+      this.setState({text:''});
+
+    }
   };
 
   render() {
@@ -43,7 +48,8 @@ class Search extends Component {
 Search.propTypes = {
   searchUsers:PropTypes.func.isRequired,
   clearUsers: PropTypes.func.isRequired,
-  showClear: PropTypes.bool.isRequired
+  showClear: PropTypes.bool.isRequired,
+  setAlert: PropTypes.func.isRequired
 };
 
 export default Search;