From fefc7ac76bbbaf19656b64eca18dc1e1d1e0daa8 Mon Sep 17 00:00:00 2001
From: Martin Donnelly <martind2000@gmail.com>
Date: Thu, 10 Oct 2019 14:53:13 +0100
Subject: [PATCH] End of chapter 24

---
 .idea/workspace.xml              | 37 ++++++++++++++++++++++++++------
 src/App.js                       | 37 ++++++++++++++++++++++++++------
 src/components/repos/RepoItem.js | 17 +++++++++++++++
 src/components/repos/Repos.js    | 12 +++++++++++
 src/components/users/User.js     |  9 ++++++--
 5 files changed, 96 insertions(+), 16 deletions(-)
 create mode 100644 src/components/repos/RepoItem.js
 create mode 100644 src/components/repos/Repos.js

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index bd3fb5e..43df2d2 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -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>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 90b15f9..8a5f5f9 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/repos/RepoItem.js b/src/components/repos/RepoItem.js
new file mode 100644
index 0000000..c1071f6
--- /dev/null
+++ b/src/components/repos/RepoItem.js
@@ -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;
diff --git a/src/components/repos/Repos.js b/src/components/repos/Repos.js
new file mode 100644
index 0000000..6072de1
--- /dev/null
+++ b/src/components/repos/Repos.js
@@ -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;
diff --git a/src/components/users/User.js b/src/components/users/User.js
index da6f203..cdd754e 100644
--- a/src/components/users/User.js
+++ b/src/components/users/User.js
@@ -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>
     );
   }