From f39451ae45ba69850ae11e88883dbcdf2b34d3a7 Mon Sep 17 00:00:00 2001
From: Martin Donnelly <martind2000@gmail.com>
Date: Fri, 27 Sep 2019 11:13:24 +0100
Subject: [PATCH] End of chapter 18

---
 .eslintrc.json                 | 13 +++++++++----
 .idea/jsLinters/eslint.xml     |  2 +-
 .idea/workspace.xml            | 25 +++++++++++++++++++------
 package.json                   |  4 ++++
 src/App.js                     | 19 ++++++++++++++++---
 src/components/users/Search.js |  3 ++-
 6 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index a242ad8..1ad936c 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -3,8 +3,12 @@
     "ecmaVersion": 2017,
     "sourceType": "module",
     "ecmaFeatures": {
-      "jsx": false
-    }
+      "jsx": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+      ]
   },
   "env": {
     "browser": true,
@@ -27,7 +31,7 @@
     "func-names": 1,
     "indent": ["error", 2, { "SwitchCase": 1 }],
     "lines-around-comment": ["error", { "beforeBlockComment": true, "allowArrayStart": true }],
-    "max-len": [1, 180, 2], // 2 spaces per tab, max 80 chars per line
+    "max-len": [1, 180, 2],
     "new-cap": 1,
     "newline-before-return": "error",
     "no-array-constructor": 1,
@@ -49,7 +53,8 @@
     "space-infix-ops": 1,
     "vars-on-top": 1,
     "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
-    "spaced-comment": ["error", "always", { "markers": ["/"] }]
+    "spaced-comment": ["error", "always", { "markers": ["/"] }],
+    "multiline-comment-style": ["error", "starred-block"]
   }
 
 }
diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
index 118d674..b269b71 100644
--- a/.idea/jsLinters/eslint.xml
+++ b/.idea/jsLinters/eslint.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="EslintConfiguration">
-    <custom-configuration-file used="true" path="$USER_HOME$/dev/usefulfiles/dev_dotfiles/eslintrc.json" />
+    <custom-configuration-file used="true" path="$PROJECT_DIR$/.eslintrc.json" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 07f36cc..feb7739 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,9 +2,12 @@
 <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/users/Search.js" afterDir="false" />
+      <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>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -39,15 +42,17 @@
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="true" />
     <property name="javascript.nodejs.core.library.configured.version" value="8.1.3" />
+    <property name="js.linters.configure.manually.selectedeslint" value="true" />
     <property name="js.phonegap.settings.workdir" value="$USER_HOME$/dev/sensortoy/platforms" />
     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
     <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.detected.package.standard" value="true" />
     <property name="node.js.detected.package.tslint" value="true" />
     <property name="node.js.path.for.package.eslint" value="project" />
     <property name="node.js.path.for.package.jscs" value="project" />
     <property name="node.js.path.for.package.standard" value="project" />
     <property name="node.js.path.for.package.tslint" value="project" />
-    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" />
     <property name="node.js.selected.package.jscs" value="$USER_HOME$/.nvm/versions/node/v8.1.3/lib/node_modules/jscs" />
     <property name="node.js.selected.package.standard" value="$USER_HOME$/.nvm/versions/node/v8.1.3/lib/node_modules/eslint" />
     <property name="node.js.selected.package.tslint" value="(autodetect)" />
@@ -56,7 +61,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="preferences.pluginManager" />
+    <property name="settings.editor.selected.configurable" value="settings.javascript.linters.eslint" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
@@ -101,7 +106,7 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1569429914875</updated>
-      <workItem from="1569429916226" duration="10267000" />
+      <workItem from="1569429916226" duration="12287000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -131,7 +136,14 @@
       <option name="project" value="LOCAL" />
       <updated>1569576014565</updated>
     </task>
-    <option name="localTasksCounter" value="5" />
+    <task id="LOCAL-00005" summary="End of chapter 17">
+      <created>1569577010198</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1569577010198</updated>
+    </task>
+    <option name="localTasksCounter" value="6" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -154,6 +166,7 @@
     <MESSAGE value="End of Chapter 15" />
     <MESSAGE value="Added some settings" />
     <MESSAGE value="End of chapter 16" />
-    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 16" />
+    <MESSAGE value="End of chapter 17" />
+    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 17" />
   </component>
 </project>
\ No newline at end of file
diff --git a/package.json b/package.json
index d0bac70..0350c87 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "eslint": "^6.4.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.2"
@@ -28,5 +29,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-plugin-react": "^7.14.3"
   }
 }
diff --git a/src/App.js b/src/App.js
index 474b9c1..d3bf8cf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Navbar from './components/layout/Navbar';
 import Users from './components/users/Users';
 import Search from './components/users/Search';
@@ -11,12 +12,24 @@ class App extends Component {
     'loading': false
   };
 
-  async componentDidMount() {
+  static propTypes = {
+    searchUsers:PropTypes.func.isRequired
+  };
+
+  /*async componentDidMount() {
     this.setState({ 'loading': true });
     const res = await axios.get(`https://api.github.com/users?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, 'loading': false });
-  }
+  }*/
+  // Search github users
+  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 });
+  };
 
   render() {
     return (
@@ -24,7 +37,7 @@ class App extends Component {
         <Navbar title="Github Finder" icon='fab fa-github'/>
 
         <div className="container">
-          <Search />
+          <Search searchUsers={this.searchUsers} />
           <Users loading={this.state.loading} users={this.state.users}/>
         </div>
 
diff --git a/src/components/users/Search.js b/src/components/users/Search.js
index 4e6f1a9..4dfdd70 100644
--- a/src/components/users/Search.js
+++ b/src/components/users/Search.js
@@ -13,7 +13,8 @@ class Search extends Component {
 
   onSubmit = e => {
     e.preventDefault();
-    console.log(this.state.text);
+    this.props.searchUsers(this.state.text);
+    this.setState({text:''});
   };
 
   render() {