End of chapter 23

.idea/workspace.xml

@@ -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/User.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/User.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/users/UserItem.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/UserItem.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>

src/components/users/User.js

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