End of chapter 32

.idea/workspace.xml

@@ -1,8 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="BranchesTreeState">
+    <expand>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="LOCAL_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="GROUP_NODE:origin" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+    </expand>
+    <select />
+  </component>
   <component name="ChangeListManager">
     <list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
       <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/context/github/GithubState.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/context/github/GithubState.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/context/github/githubReducer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/context/github/githubReducer.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -37,17 +59,17 @@
   </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showExcludedFiles" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
   <component name="PropertiesComponent">
     <property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
     <property name="HbShouldOpenHtmlAsHb" value="" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="true" />
     <property name="aspect.path.notification.shown" value="true" />
     <property name="com.intellij.ide.scratch.LRUPopupBuilder$1/New Scratch File" value="TEXT" />
-    <property name="javascript.nodejs.core.library.configured.version" value="10.16.2" />
+    <property name="javascript.nodejs.core.library.configured.version" value="12.16.1" />
     <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" />
@@ -61,12 +83,13 @@
     <property name="node.js.selected.package.jscs" value="$USER_HOME$/.nvm/versions/node/v8.1.3/lib/node_modules/jscs" />
     <property name="node.js.selected.package.standard" value="$USER_HOME$/.nvm/versions/node/v8.1.3/lib/node_modules/eslint" />
     <property name="node.js.selected.package.tslint" value="(autodetect)" />
+    <property name="nodejs_interpreter_path" value="$USER_HOME$/.nvm/versions/node/v12.16.3/bin/node" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="$USER_HOME$/.nvm/versions/node/v8.1.3/bin/node" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <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="settings.nodejs" />
     <property name="show.migrate.to.gradle.popup" value="false" />
   </component>
   <component name="RecentsManager">
@@ -90,18 +113,6 @@
       <method v="2" />
     </configuration>
   </component>
-  <component name="ServiceViewManager">
-    <option name="viewStates">
-      <list>
-        <serviceView>
-          <treeState>
-            <expand />
-            <select />
-          </treeState>
-        </serviceView>
-      </list>
-    </option>
-  </component>
   <component name="SvnConfiguration">
     <configuration />
   </component>
@@ -133,6 +144,8 @@
       <workItem from="1575930059280" duration="269000" />
       <workItem from="1575930534435" duration="3393000" />
       <workItem from="1580237324454" duration="9000" />
+      <workItem from="1585649399085" duration="1972000" />
+      <workItem from="1589364455407" duration="2331000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -264,20 +277,19 @@
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
+    <option name="version" value="2" />
   </component>
   <component name="Vcs.Log.Tabs.Properties">
     <option name="TAB_STATES">
       <map>
         <entry key="MAIN">
           <value>
-            <State>
+            <State />
-              <option name="COLUMN_ORDER" />
-            </State>
           </value>
         </entry>
       </map>
     </option>
+    <option name="oldMeFiltersMigrated" value="true" />
   </component>
   <component name="VcsManagerConfiguration">
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
@@ -301,25 +313,30 @@
     <option name="LAST_COMMIT_MESSAGE" value="End of chapter 30" />
   </component>
   <component name="WindowStateProjectService">
-    <state width="670" height="302" key="GridCell.Tab.0.bottom" timestamp="1575980078037">
+    <state width="1699" height="387" key="GridCell.Tab.0.bottom" timestamp="1589368148885">
-      <screen x="2048" y="23" width="2048" height="1129" />
+      <screen x="0" y="29" width="2560" height="1411" />
     </state>
-    <state width="670" height="302" key="GridCell.Tab.0.bottom/0.23.2048.1129/2048.23.2048.1129@2048.23.2048.1129" timestamp="1575980078037" />
+    <state width="1687" height="359" key="GridCell.Tab.0.bottom/0.25.2560.1415@0.25.2560.1415" timestamp="1585661700135" />
-    <state width="670" height="302" key="GridCell.Tab.0.center" timestamp="1575980078037">
+    <state width="1699" height="387" key="GridCell.Tab.0.bottom/0.29.2560.1411@0.29.2560.1411" timestamp="1589368148885" />
-      <screen x="2048" y="23" width="2048" height="1129" />
+    <state width="1699" height="387" key="GridCell.Tab.0.center" timestamp="1589368148884">
+      <screen x="0" y="29" width="2560" height="1411" />
     </state>
-    <state width="670" height="302" key="GridCell.Tab.0.center/0.23.2048.1129/2048.23.2048.1129@2048.23.2048.1129" timestamp="1575980078037" />
+    <state width="1687" height="359" key="GridCell.Tab.0.center/0.25.2560.1415@0.25.2560.1415" timestamp="1585661700135" />
-    <state width="670" height="302" key="GridCell.Tab.0.left" timestamp="1575980078037">
+    <state width="1699" height="387" key="GridCell.Tab.0.center/0.29.2560.1411@0.29.2560.1411" timestamp="1589368148884" />
-      <screen x="2048" y="23" width="2048" height="1129" />
+    <state width="1699" height="387" key="GridCell.Tab.0.left" timestamp="1589368148883">
+      <screen x="0" y="29" width="2560" height="1411" />
     </state>
-    <state width="670" height="302" key="GridCell.Tab.0.left/0.23.2048.1129/2048.23.2048.1129@2048.23.2048.1129" timestamp="1575980078037" />
+    <state width="1687" height="359" key="GridCell.Tab.0.left/0.25.2560.1415@0.25.2560.1415" timestamp="1585661700134" />
-    <state width="670" height="302" key="GridCell.Tab.0.right" timestamp="1575980078037">
+    <state width="1699" height="387" key="GridCell.Tab.0.left/0.29.2560.1411@0.29.2560.1411" timestamp="1589368148883" />
-      <screen x="2048" y="23" width="2048" height="1129" />
+    <state width="1699" height="387" key="GridCell.Tab.0.right" timestamp="1589368148884">
+      <screen x="0" y="29" width="2560" height="1411" />
     </state>
-    <state width="670" height="302" key="GridCell.Tab.0.right/0.23.2048.1129/2048.23.2048.1129@2048.23.2048.1129" timestamp="1575980078037" />
+    <state width="1687" height="359" key="GridCell.Tab.0.right/0.25.2560.1415@0.25.2560.1415" timestamp="1585661700135" />
-    <state x="888" y="346" width="601" height="474" key="find.popup" timestamp="1575938043835">
+    <state width="1699" height="387" key="GridCell.Tab.0.right/0.29.2560.1411@0.29.2560.1411" timestamp="1589368148884" />
-      <screen x="0" y="23" width="2048" height="1129" />
+    <state x="680" y="196" width="1441" height="1081" key="SettingsEditor" timestamp="1589364473413">
+      <screen x="0" y="29" width="2560" height="1411" />
     </state>
-    <state x="888" y="346" width="601" height="474" key="find.popup/0.23.2048.1129/2048.23.2048.1129@0.23.2048.1129" timestamp="1575938043835" />
+    <state x="680" y="192" width="1441" height="1081" key="SettingsEditor/0.25.2560.1415@0.25.2560.1415" timestamp="1585649467192" />
+    <state x="680" y="196" key="SettingsEditor/0.29.2560.1411@0.29.2560.1411" timestamp="1589364473413" />
   </component>
 </project>

src/App.js

@@ -7,7 +7,6 @@ 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 axios from 'axios';
 
 import GithubState from './context/github/GithubState';
 
@@ -15,19 +14,6 @@ import './App.css';
 
 const App = () => {
   const [alert, setAlert] = useState(null);
-  const [repos, setRepos] = useState([]);
-
-  const getUserRepos = async username => {
-   // setLoading(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}`
-    );
-
-    setRepos(res.data);
-    // setLoading(false);
-  };
 
   // Show an alert
 
@@ -63,15 +49,7 @@ const App = () => {
               <Route
                 exact
                 path="/user/:login"
-                render={props => (
+                component={User}
-                  <User
-                    {...props}
-
-                    getUserRepos={getUserRepos}
-
-                    repos={repos}
-                  />
-                )}
               />
             </Switch>
           </div>

src/components/users/User.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import GithubContext from '../../context/github/githubContext';
 
-const User = ({ getUserRepos, repos, match }) => {
+const User = ({ match }) => {
   const githubContext = useContext(GithubContext);
-  const { getUser, loading, user } = githubContext;
+  const { getUser, loading, user, repos, getUserRepos } = githubContext;
 
   useEffect(() => {
     getUser(match.params.login);
@@ -104,9 +104,4 @@ const User = ({ getUserRepos, repos, match }) => {
   );
 };
 
-User.propTypes = {
-  'getUserRepos': PropTypes.func.isRequired,
-  'repos': PropTypes.array.isRequired
-};
-
 export default User;

src/context/github/GithubState.js

@@ -53,6 +53,20 @@ const GithubState = props => {
 
   // get repos
 
+  const getUserRepos = async username => {
+    setLoading();
+    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}`
+    );
+
+    dispatch({
+      'type': GET_REPOS,
+      'payload': res.data
+    });
+  };
+
   /*
    * clear users
    * Clear Users from State
@@ -73,7 +87,8 @@ const GithubState = props => {
       'loading': state.loading,
       searchUsers,
       clearUsers,
-      getUser
+      getUser,
+      getUserRepos
     }}
 
   >

src/context/github/githubReducer.js

@@ -28,6 +28,12 @@ export default (state, action) => {
         users:[],
         loading:false
       };
+    case GET_REPOS:
+      return {
+        ...state,
+        repos: action.payload,
+        loading: false
+      };
     case SET_LOADING:
       return {
         ...state,