End of chapter 24
This commit is contained in:
Martin Donnelly
parent
331a4bbeac
commit
fefc7ac76b
@ -2,7 +2,10 @@
|
||||
<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/repos/RepoItem.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/components/repos/Repos.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/User.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/User.js" afterDir="false" />
|
||||
</list>
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
@ -11,6 +14,9 @@
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="CodeStyleSettingsInfer">
|
||||
<option name="done" value="true" />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
@ -27,6 +33,9 @@
|
||||
<other-services-enabled>true</other-services-enabled>
|
||||
<auto-save>true</auto-save>
|
||||
</component>
|
||||
<component name="ProjectCodeStyleSettingsMigration">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
<component name="ProjectId" id="1RKy7YCwSO1aq3XFt8R2yzB2dfL" />
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
|
||||
<ConfirmationsSetting value="2" id="Add" />
|
||||
@ -36,9 +45,10 @@
|
||||
<property name="HbShouldOpenHtmlAsHb" value="" />
|
||||
<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.phonegap.settings.workdir" value="$USER_HOME$/dev/sensortoy/platforms" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$/../../../SilvrAPI" />
|
||||
<property name="aspect.path.notification.shown" value="true" />
|
||||
<property name="javascript.nodejs.core.library.configured.version" value="10.16.2" />
|
||||
<property name="js.phonegap.settings.workdir" value="$PROJECT_DIR$/../../../sensortoy/platforms" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<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" />
|
||||
@ -55,7 +65,8 @@
|
||||
<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="settings.javascript.linters.eslint" />
|
||||
<property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
|
||||
<property name="show.migrate.to.gradle.popup" value="false" />
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
@ -102,7 +113,11 @@
|
||||
<updated>1569429914875</updated>
|
||||
<workItem from="1569429916226" duration="16180000" />
|
||||
<workItem from="1570021026245" duration="1507000" />
|
||||
<workItem from="1570698236231" duration="6919000" />
|
||||
<workItem from="1570698236231" duration="7904000" />
|
||||
<workItem from="1570713368048" duration="8000" />
|
||||
<workItem from="1570713507620" duration="154000" />
|
||||
<workItem from="1570713697039" duration="68000" />
|
||||
<workItem from="1570713775683" duration="1669000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="End of Chapter 14">
|
||||
<created>1569512995385</created>
|
||||
@ -181,7 +196,14 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1570702713915</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="12" />
|
||||
<task id="LOCAL-00012" summary="End of chapter 23">
|
||||
<created>1570707444485</created>
|
||||
<option name="number" value="00012" />
|
||||
<option name="presentableId" value="LOCAL-00012" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1570707444485</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="13" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@ -212,6 +234,7 @@
|
||||
<MESSAGE value="End of chapter 20" />
|
||||
<MESSAGE value="End of chapter 21" />
|
||||
<MESSAGE value="End of chapter 22" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 22" />
|
||||
<MESSAGE value="End of chapter 23" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 23" />
|
||||
</component>
|
||||
</project>
|
||||
37
src/App.js
37
src/App.js
@ -6,7 +6,7 @@ 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 User from "./components/users/User";
|
||||
import axios from "axios";
|
||||
import "./App.css";
|
||||
|
||||
@ -17,7 +17,8 @@ class App extends Component {
|
||||
users: [],
|
||||
loading: false,
|
||||
alert: null,
|
||||
user: {}
|
||||
user: {},
|
||||
repos: []
|
||||
};
|
||||
}
|
||||
|
||||
@ -52,6 +53,18 @@ class App extends Component {
|
||||
console.log(res.data);
|
||||
this.setState({ user: res.data, loading: false });
|
||||
};
|
||||
|
||||
getUserRepos = async username => {
|
||||
this.setState({ loading: 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 });
|
||||
};
|
||||
|
||||
// Clear Users from State
|
||||
|
||||
clearUsers = () => {
|
||||
@ -67,7 +80,7 @@ class App extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { users, user, loading } = this.state;
|
||||
const { users, user, loading, repos } = this.state;
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
@ -92,10 +105,20 @@ class App extends Component {
|
||||
)}
|
||||
/>
|
||||
<Route exact path="/about" component={About} />
|
||||
<Route exact path='/user/:login' render={props => (
|
||||
<User {...props} getUser={this.getUser} user={user} loading={loading}/>
|
||||
|
||||
)}/>
|
||||
<Route
|
||||
exact
|
||||
path="/user/:login"
|
||||
render={props => (
|
||||
<User
|
||||
{...props}
|
||||
getUser={this.getUser}
|
||||
getUserRepos={this.getUserRepos}
|
||||
user={user}
|
||||
loading={loading}
|
||||
repos={repos}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
17
src/components/repos/RepoItem.js
Normal file
17
src/components/repos/RepoItem.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const RepoItem = ({ repo }) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<h3>
|
||||
<a href={repo.html_url}>{repo.name}</a>
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
RepoItem.propTypes = {
|
||||
repo: PropTypes.object.isRequired
|
||||
};
|
||||
export default RepoItem;
|
||||
12
src/components/repos/Repos.js
Normal file
12
src/components/repos/Repos.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import RepoItem from "./RepoItem";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const Repos = ({ repos }) => {
|
||||
return repos.map(repo => <RepoItem repo={repo} key={repo.id} />);
|
||||
};
|
||||
|
||||
Repos.propTypes = {
|
||||
repos: PropTypes.array.isRequired
|
||||
};
|
||||
export default Repos;
|
||||
@ -1,17 +1,21 @@
|
||||
import React, { Component, Fragment } from "react";
|
||||
import Spinner from "../layout/Spinner";
|
||||
import Repos from '../repos/Repos';
|
||||
import PropTypes from "prop-types";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
class User extends Component {
|
||||
componentDidMount() {
|
||||
this.props.getUser(this.props.match.params.login);
|
||||
this.props.getUserRepos(this.props.match.params.login);
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
loading: PropTypes.bool,
|
||||
user: PropTypes.object.isRequired,
|
||||
getUser: PropTypes.func.isRequired
|
||||
getUser: PropTypes.func.isRequired,
|
||||
getUserRepos: PropTypes.func.isRequired,
|
||||
repos: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -31,7 +35,7 @@ class User extends Component {
|
||||
hireable
|
||||
} = this.props.user;
|
||||
|
||||
const { loading } = this.props;
|
||||
const { loading, repos } = this.props;
|
||||
|
||||
if (loading) return <Spinner />;
|
||||
|
||||
@ -101,6 +105,7 @@ class User extends Component {
|
||||
<div className="badge badge-light">Public Repos: {public_repos}</div>
|
||||
<div className="badge badge-dark">Public Gists: {public_gists}</div>
|
||||
</div>
|
||||
<Repos repos={repos} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user