End of chapter 23

This commit is contained in:
Martin Donnelly 2019-10-10 12:37:24 +01:00
parent ce5f8b0da7
commit 331a4bbeac
2 changed files with 94 additions and 8 deletions

View File

@ -2,10 +2,8 @@
<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/users/User.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/UserItem.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/UserItem.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" />
<option name="SHOW_DIALOG" value="false" />
@ -104,7 +102,7 @@
<updated>1569429914875</updated>
<workItem from="1569429916226" duration="16180000" />
<workItem from="1570021026245" duration="1507000" />
<workItem from="1570698236231" duration="3790000" />
<workItem from="1570698236231" duration="6919000" />
</task>
<task id="LOCAL-00001" summary="End of Chapter 14">
<created>1569512995385</created>
@ -176,7 +174,14 @@
<option name="project" value="LOCAL" />
<updated>1570700448342</updated>
</task>
<option name="localTasksCounter" value="11" />
<task id="LOCAL-00011" summary="End of chapter 22">
<created>1570702713915</created>
<option name="number" value="00011" />
<option name="presentableId" value="LOCAL-00011" />
<option name="project" value="LOCAL" />
<updated>1570702713915</updated>
</task>
<option name="localTasksCounter" value="12" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -206,6 +211,7 @@
<MESSAGE value="End of chapter 19" />
<MESSAGE value="End of chapter 20" />
<MESSAGE value="End of chapter 21" />
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 21" />
<MESSAGE value="End of chapter 22" />
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 22" />
</component>
</project>

View File

@ -1,13 +1,23 @@
import React, { Component } from "react";
import React, { Component, Fragment } from "react";
import Spinner from "../layout/Spinner";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
class User extends Component {
componentDidMount() {
this.props.getUser(this.props.match.params.login);
}
static propTypes = {
loading: PropTypes.bool,
user: PropTypes.object.isRequired,
getUser: PropTypes.func.isRequired
};
render() {
const {
name,
company,
avatar_url,
location,
bio,
@ -22,7 +32,77 @@ class User extends Component {
} = this.props.user;
const { loading } = this.props;
return <div>{name}</div>;
if (loading) return <Spinner />;
return (
<Fragment>
{name}
<Link to="/" className="btn btn-light">
Back to search
</Link>
Hireable:{" "}
{hireable ? (
<i className="fas fa-check text-success" />
) : (
<i className="fas fa-times-circle text-danger" />
)}
<div className="card grid-2">
<div className="all-center">
<img
src={avatar_url}
className="round-img"
alt=""
style={{ width: "150px" }}
/>
<h1>{name}</h1>
<p>Location: {location}</p>
</div>
<div>
{bio && (
<Fragment>
<h3>Bio</h3>
<p>{bio}</p>
</Fragment>
)}
<a href={html_url} className="btn btn-dark my-1">
Visit Github
</a>
<ul>
<li>
{login && (
<Fragment>
<strong>Username: </strong> {login}
</Fragment>
)}
</li>
<li>
{company && (
<Fragment>
<strong>Company: </strong> {company}
</Fragment>
)}
</li>
<li>
{blog && (
<Fragment>
<strong>Website: </strong> {blog}
</Fragment>
)}
</li>
</ul>
</div>
</div>
<div className="card text-center">
<div className="badge badge-primary">Followers: {followers}</div>
<div className="badge badge-success">Following: {following}</div>
<div className="badge badge-light">Public Repos: {public_repos}</div>
<div className="badge badge-dark">Public Gists: {public_gists}</div>
</div>
</Fragment>
);
}
}