End of chapter 19

.idea/workspace.xml

@@ -2,10 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.eslintrc.json" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/jsLinters/eslint.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/jsLinters/eslint.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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>
@@ -106,7 +103,7 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1569429914875</updated>
-      <workItem from="1569429916226" duration="12287000" />
+      <workItem from="1569429916226" duration="13411000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -143,7 +140,14 @@
       <option name="project" value="LOCAL" />
       <updated>1569577010198</updated>
     </task>
-    <option name="localTasksCounter" value="6" />
+    <task id="LOCAL-00006" summary="End of chapter 18">
+      <created>1569579204855</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1569579204855</updated>
+    </task>
+    <option name="localTasksCounter" value="7" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -167,6 +171,7 @@
     <MESSAGE value="Added some settings" />
     <MESSAGE value="End of chapter 16" />
     <MESSAGE value="End of chapter 17" />
-    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 17" />
+    <MESSAGE value="End of chapter 18" />
+    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 18" />
   </component>
 </project>

src/App.js

@@ -1,19 +1,19 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import Navbar from './components/layout/Navbar';
+import Navbar from "./components/layout/Navbar";
-import Users from './components/users/Users';
+import Users from "./components/users/Users";
-import Search from './components/users/Search';
+import Search from "./components/users/Search";
-import axios from 'axios';
+import axios from "axios";
-import './App.css';
+import "./App.css";
 
 class App extends Component {
   state = {
-    'users': [],
+    users: [],
-    'loading': false
+    loading: false
   };
 
   static propTypes = {
-    searchUsers:PropTypes.func.isRequired
+    searchUsers: PropTypes.func.isRequired
   };
 
   /*async componentDidMount() {
@@ -22,29 +22,36 @@ class App extends Component {
     console.log(res.data);
     this.setState({ 'users':res.data, 'loading': false });
   }*/
-  // Search github users
-  searchUsers = async (text) => {
 
-    this.setState({ 'loading': true });
+  // Search github users
-       const res = await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);
+  searchUsers = async text => {
+    this.setState({ loading: true });
+    const res = await axios.get(
+      `https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
+    );
     console.log(res.data);
-       this.setState({ 'users':res.data.items, 'loading': false });
+    this.setState({ users: res.data.items, loading: false });
+  };
+
+  // Clear Users from State
+
+  clearUsers = () => {
+    this.setState({ users: [], loading: false });
   };
 
   render() {
+    const {users, loading} = this.state;
     return (
       <div className="App">
-        <Navbar title="Github Finder" icon='fab fa-github'/>
+        <Navbar title="Github Finder" icon="fab fa-github" />
 
         <div className="container">
-          <Search searchUsers={this.searchUsers} />
+          <Search searchUsers={this.searchUsers} clearUsers={this.clearUsers} showClear={users.length > 0}/>
-          <Users loading={this.state.loading} users={this.state.users}/>
+          <Users loading={loading} users={users} />
         </div>
-
       </div>
     );
   }
-
 }
 
 export default App;

src/components/users/Search.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-// import PropTypes from 'prop-types';
+ import PropTypes from 'prop-types';
 
 class Search extends Component {
 
@@ -18,17 +18,27 @@ class Search extends Component {
   };
 
   render() {
+    const {showClear, clearUsers} = this.props;
     return (
       <div>
         <form className='form' onSubmit={this.onSubmit}>
           <input type='text' name='text' placeholder='Search users...' value={this.state.text} onChange={this.onChange.bind(this)}/>
           <input type='submit' value='Search' className='btn btn-dark btn-block' />
         </form>
+        {showClear &&
+        <button className='btn btn-light btn-block' onClick={clearUsers}>Clear</button>
+
+        }
+
       </div>
     );
   }
 }
 
-// Search.propTypes = {};
+Search.propTypes = {
+  searchUsers:PropTypes.func.isRequired,
+  clearUsers: PropTypes.func.isRequired,
+  showClear: PropTypes.bool.isRequired
+};
 
 export default Search;