End of chapter 22

.idea/workspace.xml

@@ -2,13 +2,10 @@
 <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/pages/About.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/users/User.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.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-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" 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/layout/Navbar.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/layout/Navbar.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/users/UserItem.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/UserItem.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -43,7 +40,7 @@
     <property name="WebServerToolWindowFactoryState" value="true" />
     <property name="javascript.nodejs.core.library.configured.version" value="8.1.3" />
     <property name="js.phonegap.settings.workdir" value="$USER_HOME$/dev/sensortoy/platforms" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../wiprotest" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../SilvrAPI" />
     <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" />
@@ -107,7 +104,7 @@
       <updated>1569429914875</updated>
       <workItem from="1569429916226" duration="16180000" />
       <workItem from="1570021026245" duration="1507000" />
-      <workItem from="1570698236231" duration="1846000" />
+      <workItem from="1570698236231" duration="3790000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -172,7 +169,14 @@
       <option name="project" value="LOCAL" />
       <updated>1569582349054</updated>
     </task>
-    <option name="localTasksCounter" value="10" />
+    <task id="LOCAL-00010" summary="End of chapter 21">
+      <created>1570700448342</created>
+      <option name="number" value="00010" />
+      <option name="presentableId" value="LOCAL-00010" />
+      <option name="project" value="LOCAL" />
+      <updated>1570700448342</updated>
+    </task>
+    <option name="localTasksCounter" value="11" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -201,6 +205,7 @@
     <MESSAGE value="End of chapter 18" />
     <MESSAGE value="End of chapter 19" />
     <MESSAGE value="End of chapter 20" />
-    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 20" />
+    <MESSAGE value="End of chapter 21" />
+    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 21" />
   </component>
 </project>

src/App.js

@@ -6,6 +6,7 @@ import Users from "./components/users/Users";
 import Search from "./components/users/Search";
 import Alert from "./components/layout/Alert";
 import About from "./components/pages/About";
+import User from './components/users/User';
 import axios from "axios";
 import "./App.css";
 
@@ -15,7 +16,8 @@ class App extends Component {
     this.state = {
       users: [],
       loading: false,
-      alert: null
+      alert: null,
+      user: {}
     };
   }
 
@@ -38,6 +40,18 @@ class App extends Component {
     this.setState({ users: res.data.items, loading: false });
   };
 
+  // Get Single user
+
+  getUser = async username => {
+    this.setState({ loading: true });
+    const res = await axios.get(
+      `https://api.github.com/users/${username}?client_id=${
+        process.env.REACT_APP_GITHUB_CLIENT_ID
+      }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
+    );
+    console.log(res.data);
+    this.setState({ user: res.data, loading: false });
+  };
   // Clear Users from State
 
   clearUsers = () => {
@@ -53,7 +67,7 @@ class App extends Component {
   };
 
   render() {
-    const { users, loading } = this.state;
+    const { users, user, loading } = this.state;
     return (
       <Router>
         <div className="App">
@@ -77,7 +91,11 @@ class App extends Component {
                   </Fragment>
                 )}
               />
-              <Route exact path='/about' component={About} />
+              <Route exact path="/about" component={About} />
+              <Route exact path='/user/:login' render={props => (
+                <User {...props} getUser={this.getUser} user={user} loading={loading}/>
+
+              )}/>
             </Switch>
           </div>
         </div>

src/components/users/User.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+
+class User extends Component {
+  componentDidMount() {
+    this.props.getUser(this.props.match.params.login);
+  }
+
+  render() {
+    const {
+      name,
+      avatar_url,
+      location,
+      bio,
+      blog,
+      login,
+      html_url,
+      followers,
+      following,
+      public_repos,
+      public_gists,
+      hireable
+    } = this.props.user;
+
+    const { loading } = this.props;
+    return <div>{name}</div>;
+  }
+}
+
+export default User;

src/components/users/UserItem.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Link} from 'react-router-dom';
 
 const UserItem = props => {
   const { login, avatar_url, html_url } = props.user;
@@ -9,7 +10,7 @@ const UserItem = props => {
       <img src={avatar_url} alt='' className='round-img' style={{ 'width': '60px' }}/>
       <h3>{login}</h3>
       <div>
-        <a href={html_url} className='btn btn-dark btn-sm my-1'>More</a>
+        <Link to={`/user/${login}`} className='btn btn-dark btn-sm my-1'>More</Link>
       </div>
     </div>
   );