End of chapter 19
This commit is contained in:
parent
f39451ae45
commit
61bd74bc69
@ -2,10 +2,7 @@
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
|
||||
<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>
|
||||
@ -106,7 +103,7 @@
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1569429914875</updated>
|
||||
<workItem from="1569429916226" duration="12287000" />
|
||||
<workItem from="1569429916226" duration="13411000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="End of Chapter 14">
|
||||
<created>1569512995385</created>
|
||||
@ -143,7 +140,14 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1569577010198</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="6" />
|
||||
<task id="LOCAL-00006" summary="End of chapter 18">
|
||||
<created>1569579204855</created>
|
||||
<option name="number" value="00006" />
|
||||
<option name="presentableId" value="LOCAL-00006" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1569579204855</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="7" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@ -167,6 +171,7 @@
|
||||
<MESSAGE value="Added some settings" />
|
||||
<MESSAGE value="End of chapter 16" />
|
||||
<MESSAGE value="End of chapter 17" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 17" />
|
||||
<MESSAGE value="End of chapter 18" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 18" />
|
||||
</component>
|
||||
</project>
|
49
src/App.js
49
src/App.js
@ -1,19 +1,19 @@
|
||||
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';
|
||||
import axios from 'axios';
|
||||
import './App.css';
|
||||
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";
|
||||
import axios from "axios";
|
||||
import "./App.css";
|
||||
|
||||
class App extends Component {
|
||||
state = {
|
||||
'users': [],
|
||||
'loading': false
|
||||
users: [],
|
||||
loading: false
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
searchUsers:PropTypes.func.isRequired
|
||||
searchUsers: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
/*async componentDidMount() {
|
||||
@ -22,29 +22,36 @@ class App extends Component {
|
||||
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 });
|
||||
// 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 });
|
||||
};
|
||||
|
||||
// Clear Users from State
|
||||
|
||||
clearUsers = () => {
|
||||
this.setState({ users: [], loading: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {users, loading} = this.state;
|
||||
return (
|
||||
<div className="App">
|
||||
<Navbar title="Github Finder" icon='fab fa-github'/>
|
||||
<Navbar title="Github Finder" icon="fab fa-github" />
|
||||
|
||||
<div className="container">
|
||||
<Search searchUsers={this.searchUsers} />
|
||||
<Users loading={this.state.loading} users={this.state.users}/>
|
||||
<Search searchUsers={this.searchUsers} clearUsers={this.clearUsers} showClear={users.length > 0}/>
|
||||
<Users loading={loading} users={users} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, {Component} from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class Search extends Component {
|
||||
|
||||
@ -18,17 +18,27 @@ class Search extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const {showClear, clearUsers} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<form className='form' onSubmit={this.onSubmit}>
|
||||
<input type='text' name='text' placeholder='Search users...' value={this.state.text} onChange={this.onChange.bind(this)}/>
|
||||
<input type='submit' value='Search' className='btn btn-dark btn-block' />
|
||||
</form>
|
||||
{showClear &&
|
||||
<button className='btn btn-light btn-block' onClick={clearUsers}>Clear</button>
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Search.propTypes = {};
|
||||
Search.propTypes = {
|
||||
searchUsers:PropTypes.func.isRequired,
|
||||
clearUsers: PropTypes.func.isRequired,
|
||||
showClear: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default Search;
|
||||
|
Loading…
Reference in New Issue
Block a user