martin/githubfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

End of chapter 28

Browse Source
This commit is contained in:
Martin Donnelly 2019-10-10 16:01:26 +01:00
parent c522bec270
commit 72c3a69812
2 changed files with 93 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.idea/workspace.xml
View File

@ -2,9 +2,8 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment=""> <list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
<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$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/users/User.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/User.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
</list> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@ -116,7 +115,8 @@
<workItem from="1570713507620" duration="154000" /> <workItem from="1570713507620" duration="154000" />
<workItem from="1570713697039" duration="68000" /> <workItem from="1570713697039" duration="68000" />
<workItem from="1570713775683" duration="2307000" /> <workItem from="1570713775683" duration="2307000" />
<workItem from="1570716281021" duration="1452000" /> <workItem from="1570716281021" duration="2536000" />
<workItem from="1570719196036" duration="307000" />
</task> </task>
<task id="LOCAL-00001" summary="End of Chapter 14"> <task id="LOCAL-00001" summary="End of Chapter 14">
<created>1569512995385</created> <created>1569512995385</created>
@ -216,7 +216,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1570717008344</updated> <updated>1570717008344</updated>
</task> </task>
<option name="localTasksCounter" value="15" /> <task id="LOCAL-00015" summary="End of chapter 27">
<created>1570718032804</created>
<option name="number" value="00015" />
<option name="presentableId" value="LOCAL-00015" />
<option name="project" value="LOCAL" />
<updated>1570718032804</updated>
</task>
<option name="localTasksCounter" value="16" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -250,6 +257,7 @@
<MESSAGE value="End of chapter 23" /> <MESSAGE value="End of chapter 23" />
<MESSAGE value="End of chapter 24" /> <MESSAGE value="End of chapter 24" />
<MESSAGE value="End of chapter 26" /> <MESSAGE value="End of chapter 26" />
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 26" /> <MESSAGE value="End of chapter 27" />
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 27" />
</component> </component>
</project> </project>

103
src/App.js
View File

@ -1,93 +1,83 @@
import React, { Component, Fragment } from "react"; import React, { Fragment, useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
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 Alert from "./components/layout/Alert"; import Alert from './components/layout/Alert';
import About from "./components/pages/About"; import About from './components/pages/About';
import User from "./components/users/User"; import User from './components/users/User';
import axios from "axios"; import axios from 'axios';
import "./App.css"; import './App.css';
class App extends Component { const App = () => {
constructor(props) { const [users, setUsers] = useState([]);
super(props); const [user, setUser] = useState({});
this.state = { const [loading, setLoading] = useState(false);
users: [], const [alert, setAlert] = useState(null);
loading: false, const [repos, setRepos] = useState([]);
alert: null,
user: {},
repos: []
};
}
/*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 // Search github users
searchUsers = async text => { const searchUsers = async text => {
this.setState({ loading: true }); setLoading(true);
const res = await axios.get( const res = await axios.get(
`https://api.github.com/search/users?q=${text}&client_id=${ `https://api.github.com/search/users?q=${text}&client_id=${
process.env.REACT_APP_GITHUB_CLIENT_ID process.env.REACT_APP_GITHUB_CLIENT_ID
}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}` }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
); );
console.log(res.data);
this.setState({ users: res.data.items, loading: false }); setUsers(res.data.items);
setLoading(false);
}; };
// Get Single user // Get Single user
getUser = async username => { const getUser = async username => {
this.setState({ loading: true }); setLoading(true);
const res = await axios.get( const res = await axios.get(
`https://api.github.com/users/${username}?client_id=${ `https://api.github.com/users/${username}?client_id=${
process.env.REACT_APP_GITHUB_CLIENT_ID process.env.REACT_APP_GITHUB_CLIENT_ID
}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}` }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
); );
console.log(res.data);
this.setState({ user: res.data, loading: false }); setUser(res.data);
setLoading(false);
}; };
getUserRepos = async username => { const getUserRepos = async username => {
this.setState({ loading: true }); setLoading(true);
const res = await axios.get( const res = await axios.get(
`https://api.github.com/users/${username}/repos?per_page=5&sort=created:asc&client_id=${ `https://api.github.com/users/${username}/repos?per_page=5&sort=created:asc&client_id=${
process.env.REACT_APP_GITHUB_CLIENT_ID process.env.REACT_APP_GITHUB_CLIENT_ID
}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}` }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
); );
console.log(res.data);
this.setState({ repos: res.data, loading: false }); setRepos(res.data);
setLoading(false);
}; };
// Clear Users from State // Clear Users from State
clearUsers = () => { const clearUsers = () => {
this.setState({ users: [], loading: false }); setUsers([]);
setLoading(false);
}; };
// Show an alert // Show an alert
setAlert = (msg, type) => { const showAlert = (msg, type) => {
this.setState({ alert: { msg, type } }); setAlert({ msg, type });
setTimeout(() => this.setState({ alert: null }), 5000); setTimeout(() => setAlert(null), 5000);
}; };
render() {
const { users, user, loading, repos } = this.state;
return ( return (
<Router> <Router>
<div className="App"> <div className="App">
<Navbar title="Github Finder" icon="fab fa-github" /> <Navbar title="Github Finder" icon="fab fa-github" />
<div className="container"> <div className="container">
<Alert alert={this.state.alert} /> <Alert alert={alert} />
<Switch> <Switch>
<Route <Route
exact exact
@ -95,10 +85,10 @@ class App extends Component {
render={props => ( render={props => (
<Fragment> <Fragment>
<Search <Search
searchUsers={this.searchUsers} searchUsers={searchUsers}
clearUsers={this.clearUsers} clearUsers={clearUsers}
showClear={users.length > 0} showClear={users.length > 0}
setAlert={this.setAlert} setAlert={showAlert}
/> />
<Users loading={loading} users={users} /> <Users loading={loading} users={users} />
</Fragment> </Fragment>
@ -111,8 +101,8 @@ class App extends Component {
render={props => ( render={props => (
<User <User
{...props} {...props}
getUser={this.getUser} getUser={getUser}
getUserRepos={this.getUserRepos} getUserRepos={getUserRepos}
user={user} user={user}
loading={loading} loading={loading}
repos={repos} repos={repos}
@ -124,11 +114,10 @@ class App extends Component {
</div> </div>
</Router> </Router>
); );
} };
}
App.propTypes = { App.propTypes = {
searchUsers: PropTypes.func.isRequired 'searchUsers': PropTypes.func.isRequired
}; };
export default App; export default App;