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

End of chapter 21

Browse Source
This commit is contained in:
Martin Donnelly 2019-10-10 10:40:48 +01:00
parent 8e67c0ca3f
commit 3655a3dc96
7 changed files with 198 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.idea/inspectionProfiles/Project_Default.xml
View File

@ -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>

33
.idea/workspace.xml
View File

@ -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
View File

@ -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",

1
package.json
View File

@ -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
View File

@ -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>
);
}
}

27
src/components/layout/Navbar.js
View File

@ -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
View 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;