End of chapter 21
This commit is contained in:
Martin Donnelly
parent
8e67c0ca3f
commit
3655a3dc96
@ -1,6 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
|
||||
<inspection_tool class="Eslint" enabled="false" level="ERROR" enabled_by_default="false" />
|
||||
</profile>
|
||||
</component>
|
||||
@ -2,10 +2,13 @@
|
||||
<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/layout/Alert.js" afterDir="false" />
|
||||
<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 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/users/Search.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/Search.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/components/layout/Navbar.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/layout/Navbar.js" afterDir="false" />
|
||||
</list>
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
@ -36,13 +39,11 @@
|
||||
<component name="PropertiesComponent">
|
||||
<property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
|
||||
<property name="HbShouldOpenHtmlAsHb" value="" />
|
||||
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
|
||||
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
|
||||
<property name="WebServerToolWindowFactoryState" value="true" />
|
||||
<property name="javascript.nodejs.core.library.configured.version" value="8.1.3" />
|
||||
<property name="js.linters.configure.manually.selectedeslint" value="true" />
|
||||
<property name="js.phonegap.settings.workdir" value="$USER_HOME$/dev/sensortoy/platforms" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$/../../../wiprotest" />
|
||||
<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" />
|
||||
@ -59,7 +60,7 @@
|
||||
<property name="nodejs_package_manager_path" value="npm" />
|
||||
<property name="prettierjs.PrettierConfiguration.NodeInterpreter" value="project" />
|
||||
<property name="prettierjs.PrettierConfiguration.Package" value="$USER_HOME$/.nvm/versions/node/v8.11.3/lib/node_modules/prettier" />
|
||||
<property name="settings.editor.selected.configurable" value="editing.templates" />
|
||||
<property name="settings.editor.selected.configurable" value="settings.javascript.linters.eslint" />
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
@ -104,7 +105,9 @@
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1569429914875</updated>
|
||||
<workItem from="1569429916226" duration="15366000" />
|
||||
<workItem from="1569429916226" duration="16180000" />
|
||||
<workItem from="1570021026245" duration="1507000" />
|
||||
<workItem from="1570698236231" duration="1846000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="End of Chapter 14">
|
||||
<created>1569512995385</created>
|
||||
@ -162,7 +165,14 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1569580705626</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="9" />
|
||||
<task id="LOCAL-00009" summary="End of chapter 20">
|
||||
<created>1569582349054</created>
|
||||
<option name="number" value="00009" />
|
||||
<option name="presentableId" value="LOCAL-00009" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1569582349054</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="10" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@ -173,7 +183,9 @@
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State />
|
||||
<State>
|
||||
<option name="COLUMN_ORDER" />
|
||||
</State>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
@ -188,6 +200,7 @@
|
||||
<MESSAGE value="End of chapter 17" />
|
||||
<MESSAGE value="End of chapter 18" />
|
||||
<MESSAGE value="End of chapter 19" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 19" />
|
||||
<MESSAGE value="End of chapter 20" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 20" />
|
||||
</component>
|
||||
</project>
|
||||
102
package-lock.json
generated
102
package-lock.json
generated
@ -5769,6 +5769,11 @@
|
||||
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
|
||||
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
|
||||
},
|
||||
"gud": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
|
||||
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
|
||||
},
|
||||
"gzip-size": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
|
||||
@ -5917,6 +5922,19 @@
|
||||
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
|
||||
},
|
||||
"history": {
|
||||
"version": "4.10.1",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"loose-envify": "^1.2.0",
|
||||
"resolve-pathname": "^3.0.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0",
|
||||
"value-equal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
@ -5927,6 +5945,14 @@
|
||||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
|
||||
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"hosted-git-info": {
|
||||
"version": "2.8.4",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.4.tgz",
|
||||
@ -8194,6 +8220,16 @@
|
||||
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
|
||||
"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
|
||||
},
|
||||
"mini-create-react-context": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
|
||||
"integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.0",
|
||||
"gud": "^1.0.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz",
|
||||
@ -10352,6 +10388,52 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
|
||||
"integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
|
||||
"integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.3.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
|
||||
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz",
|
||||
"integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.1.2",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.1.2.tgz",
|
||||
@ -10742,6 +10824,11 @@
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
|
||||
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
@ -12023,6 +12110,16 @@
|
||||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
|
||||
"integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
@ -12429,6 +12526,11 @@
|
||||
"spdx-expression-parse": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"eslint": "^6.4.0",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-scripts": "3.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
61
src/App.js
61
src/App.js
@ -1,9 +1,11 @@
|
||||
import React, { Component } from "react";
|
||||
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 Alert from "./components/layout/Alert";
|
||||
import About from "./components/pages/About";
|
||||
import axios from "axios";
|
||||
import "./App.css";
|
||||
|
||||
@ -11,10 +13,10 @@ class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
users: [],
|
||||
loading: false,
|
||||
alert:null
|
||||
}
|
||||
users: [],
|
||||
loading: false,
|
||||
alert: null
|
||||
};
|
||||
}
|
||||
|
||||
/*async componentDidMount() {
|
||||
@ -28,7 +30,9 @@ class App extends Component {
|
||||
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}`
|
||||
`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 });
|
||||
@ -43,28 +47,41 @@ class App extends Component {
|
||||
// Show an alert
|
||||
|
||||
setAlert = (msg, type) => {
|
||||
this.setState({alert:{msg, type}});
|
||||
this.setState({ alert: { msg, type } });
|
||||
|
||||
setTimeout(() => this.setState({alert:null}), 5000);
|
||||
setTimeout(() => this.setState({ alert: null }), 5000);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {users, loading} = this.state;
|
||||
const { users, loading } = this.state;
|
||||
return (
|
||||
<div className="App">
|
||||
<Navbar title="Github Finder" icon="fab fa-github" />
|
||||
<Router>
|
||||
<div className="App">
|
||||
<Navbar title="Github Finder" icon="fab fa-github" />
|
||||
|
||||
<div className="container">
|
||||
<Alert alert={this.state.alert}/>
|
||||
<Search searchUsers={this.searchUsers}
|
||||
clearUsers={this.clearUsers}
|
||||
showClear={users.length > 0}
|
||||
setAlert={this.setAlert}
|
||||
|
||||
/>
|
||||
<Users loading={loading} users={users} />
|
||||
<div className="container">
|
||||
<Alert alert={this.state.alert} />
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path="/"
|
||||
render={props => (
|
||||
<Fragment>
|
||||
<Search
|
||||
searchUsers={this.searchUsers}
|
||||
clearUsers={this.clearUsers}
|
||||
showClear={users.length > 0}
|
||||
setAlert={this.setAlert}
|
||||
/>
|
||||
<Users loading={loading} users={users} />
|
||||
</Fragment>
|
||||
)}
|
||||
/>
|
||||
<Route exact path='/about' component={About} />
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,32 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Navbar = ({ icon, title }) => (
|
||||
<nav className='navbar bg-primary'>
|
||||
<nav className="navbar bg-primary">
|
||||
<h1>
|
||||
<i className={icon}/> {title}</h1>
|
||||
<i className={icon} /> {title}
|
||||
</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to='/'>Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to='/about'>About</Link>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
|
||||
Navbar.propTypes = {
|
||||
'title': PropTypes.string.isRequired,
|
||||
'icon': PropTypes.string.isRequired
|
||||
title: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
Navbar.defaultProps = {
|
||||
'title': 'Unset',
|
||||
'icon': 'fas fa-bug'
|
||||
title: "Unset",
|
||||
icon: "fas fa-bug"
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
||||
13
src/components/pages/About.js
Normal file
13
src/components/pages/About.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React,{Fragment} from "react";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
<h1>About this app</h1>
|
||||
<p>App to search Github users</p>
|
||||
<p>Version 0.0.1</p>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
Loading…
Reference in New Issue
Block a user