End of chapter 28
This commit is contained in:
Martin Donnelly
parent
c522bec270
commit
72c3a69812
@ -2,9 +2,8 @@
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<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$/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>
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
@ -116,7 +115,8 @@
|
||||
<workItem from="1570713507620" duration="154000" />
|
||||
<workItem from="1570713697039" duration="68000" />
|
||||
<workItem from="1570713775683" duration="2307000" />
|
||||
<workItem from="1570716281021" duration="1452000" />
|
||||
<workItem from="1570716281021" duration="2536000" />
|
||||
<workItem from="1570719196036" duration="307000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="End of Chapter 14">
|
||||
<created>1569512995385</created>
|
||||
@ -216,7 +216,14 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1570717008344</updated>
|
||||
</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 />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@ -250,6 +257,7 @@
|
||||
<MESSAGE value="End of chapter 23" />
|
||||
<MESSAGE value="End of chapter 24" />
|
||||
<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>
|
||||
</project>
|
||||
103
src/App.js
103
src/App.js
@ -1,93 +1,83 @@
|
||||
import React, { Component, Fragment } from "react";
|
||||
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||
import PropTypes from "prop-types";
|
||||
import Navbar from "./components/layout/Navbar";
|
||||
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";
|
||||
import React, { Fragment, useState } from 'react';
|
||||
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import Navbar from './components/layout/Navbar';
|
||||
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';
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
users: [],
|
||||
loading: false,
|
||||
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 });
|
||||
}*/
|
||||
const App = () => {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [user, setUser] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [alert, setAlert] = useState(null);
|
||||
const [repos, setRepos] = useState([]);
|
||||
|
||||
// Search github users
|
||||
searchUsers = async text => {
|
||||
this.setState({ loading: true });
|
||||
const searchUsers = async text => {
|
||||
setLoading(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 });
|
||||
|
||||
setUsers(res.data.items);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// Get Single user
|
||||
|
||||
getUser = async username => {
|
||||
this.setState({ loading: true });
|
||||
const getUser = async username => {
|
||||
setLoading(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 });
|
||||
|
||||
setUser(res.data);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
getUserRepos = async username => {
|
||||
this.setState({ loading: true });
|
||||
const getUserRepos = async username => {
|
||||
setLoading(true);
|
||||
const res = await axios.get(
|
||||
`https://api.github.com/users/${username}/repos?per_page=5&sort=created:asc&client_id=${
|
||||
process.env.REACT_APP_GITHUB_CLIENT_ID
|
||||
}&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
|
||||
|
||||
clearUsers = () => {
|
||||
this.setState({ users: [], loading: false });
|
||||
const clearUsers = () => {
|
||||
setUsers([]);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// Show an alert
|
||||
|
||||
setAlert = (msg, type) => {
|
||||
this.setState({ alert: { msg, type } });
|
||||
const showAlert = (msg, type) => {
|
||||
setAlert({ msg, type });
|
||||
|
||||
setTimeout(() => this.setState({ alert: null }), 5000);
|
||||
setTimeout(() => setAlert(null), 5000);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { users, user, loading, repos } = this.state;
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<Navbar title="Github Finder" icon="fab fa-github" />
|
||||
|
||||
<div className="container">
|
||||
<Alert alert={this.state.alert} />
|
||||
<Alert alert={alert} />
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
@ -95,10 +85,10 @@ class App extends Component {
|
||||
render={props => (
|
||||
<Fragment>
|
||||
<Search
|
||||
searchUsers={this.searchUsers}
|
||||
clearUsers={this.clearUsers}
|
||||
searchUsers={searchUsers}
|
||||
clearUsers={clearUsers}
|
||||
showClear={users.length > 0}
|
||||
setAlert={this.setAlert}
|
||||
setAlert={showAlert}
|
||||
/>
|
||||
<Users loading={loading} users={users} />
|
||||
</Fragment>
|
||||
@ -111,8 +101,8 @@ class App extends Component {
|
||||
render={props => (
|
||||
<User
|
||||
{...props}
|
||||
getUser={this.getUser}
|
||||
getUserRepos={this.getUserRepos}
|
||||
getUser={getUser}
|
||||
getUserRepos={getUserRepos}
|
||||
user={user}
|
||||
loading={loading}
|
||||
repos={repos}
|
||||
@ -124,11 +114,10 @@ class App extends Component {
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
searchUsers: PropTypes.func.isRequired
|
||||
'searchUsers': PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user