End of chapter 22
This commit is contained in:
Martin Donnelly
parent
3655a3dc96
commit
ce5f8b0da7
@ -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 beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/components/users/User.js" 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>
|
||||
24
src/App.js
24
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>
|
||||
|
||||
29
src/components/users/User.js
Normal file
29
src/components/users/User.js
Normal file
@ -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;
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user