End of chapter 31

.idea/workspace.xml

@@ -5,6 +5,8 @@
       <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/Search.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/Search.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/Users.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/Users.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>
@@ -120,7 +122,7 @@
       <workItem from="1570713775683" duration="2307000" />
       <workItem from="1570716281021" duration="2536000" />
       <workItem from="1570719196036" duration="7092000" />
-      <workItem from="1571151198512" duration="168000" />
+      <workItem from="1571151198512" duration="2197000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -241,7 +243,14 @@
       <option name="project" value="LOCAL" />
       <updated>1570721044833</updated>
     </task>
-    <option name="localTasksCounter" value="18" />
+    <task id="LOCAL-00018" summary="End of chapter 30">
+      <created>1571151552015</created>
+      <option name="number" value="00018" />
+      <option name="presentableId" value="LOCAL-00018" />
+      <option name="project" value="LOCAL" />
+      <updated>1571151552015</updated>
+    </task>
+    <option name="localTasksCounter" value="19" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -278,6 +287,7 @@
     <MESSAGE value="End of chapter 27" />
     <MESSAGE value="End of chapter 28" />
     <MESSAGE value="End of chapter 29" />
-    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 29" />
+    <MESSAGE value="End of chapter 30" />
+    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 30" />
   </component>
 </project>

src/App.js

@@ -14,43 +14,11 @@ import GithubState from './context/github/GithubState';
 import './App.css';
 
 const App = () => {
-  const [users, setUsers] = useState([]);
-  const [user, setUser] = useState({});
-  const [loading, setLoading] = useState(false);
   const [alert, setAlert] = useState(null);
   const [repos, setRepos] = useState([]);
 
-  // Search github users
-  /*
-   * const searchUsers = async text => {
-   * setLoading(true);
-   * const res = await axios.get(
-   * `https://api.github.com/search/users?q=${text}&client_id=${
-   * process.env.REACT_APP_GITHUB_CLIENT_ID
-   * }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
-   * );
-   *
-   * setUsers(res.data.items);
-   * setLoading(false);
-   * };
-   */
-
-  // Get Single user
-
-  const getUser = async username => {
-    setLoading(true);
-    const res = await axios.get(
-      `https://api.github.com/users/${username}?client_id=${
-        process.env.REACT_APP_GITHUB_CLIENT_ID
-      }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
-    );
-
-    setUser(res.data);
-    setLoading(false);
-  };
-
   const getUserRepos = async username => {
-    setLoading(true);
+   // 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
@@ -58,14 +26,7 @@ const App = () => {
     );
 
     setRepos(res.data);
-    setLoading(false);
+    // setLoading(false);
-  };
-
-  // Clear Users from State
-
-  const clearUsers = () => {
-    setUsers([]);
-    setLoading(false);
   };
 
   // Show an alert
@@ -91,11 +52,10 @@ const App = () => {
                 render={props => (
                   <Fragment>
                     <Search
-                      clearUsers={clearUsers}
+
-                      showClear={users.length > 0}
                       setAlert={showAlert}
                     />
-                    <Users loading={loading} users={users} />
+                    <Users />
                   </Fragment>
                 )}
               />
@@ -106,10 +66,9 @@ const App = () => {
                 render={props => (
                   <User
                     {...props}
-                    getUser={getUser}
+
                     getUserRepos={getUserRepos}
-                    user={user}
+
-                    loading={loading}
                     repos={repos}
                   />
                 )}

src/components/users/Search.js

@@ -1,20 +1,20 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext } from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
 import GithubContext from '../../context/github/githubContext';
 
-const Search = ({  showClear, clearUsers, setAlert }) => {
+const Search = ({ setAlert }) => {
   const githubContext = useContext(GithubContext);
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   const onChange = e => {
     setText(e.target.value);
   };
 
   const onSubmit = e => {
     e.preventDefault();
-    if (text === "") {
+    if (text === '')
-      setAlert("Please enter something", "light");
+      setAlert('Please enter something', 'light');
-    } else {
+    else {
       githubContext.searchUsers(text);
       setText('');
     }
@@ -36,8 +36,8 @@ const Search = ({  showClear, clearUsers, setAlert }) => {
           className="btn btn-dark btn-block"
         />
       </form>
-      {showClear && (
+      {githubContext.users.length > 0 && (
-        <button className="btn btn-light btn-block" onClick={clearUsers}>
+        <button className="btn btn-light btn-block" onClick={githubContext.clearUsers}>
           Clear
         </button>
       )}
@@ -47,9 +47,7 @@ const Search = ({  showClear, clearUsers, setAlert }) => {
 
 Search.propTypes = {
 
-  clearUsers: PropTypes.func.isRequired,
+  'setAlert': PropTypes.func.isRequired
-  showClear: PropTypes.bool.isRequired,
-  setAlert: PropTypes.func.isRequired
 };
 
 export default Search;

src/components/users/User.js

@@ -1,10 +1,14 @@
-import React, { useEffect, Fragment } from 'react';
+import React, { useEffect, Fragment, useContext } from 'react';
 import Spinner from '../layout/Spinner';
 import Repos from '../repos/Repos';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import GithubContext from '../../context/github/githubContext';
+
+const User = ({ getUserRepos, repos, match }) => {
+  const githubContext = useContext(GithubContext);
+  const { getUser, loading, user } = githubContext;
 
-const User = ({ user, loading, getUser, getUserRepos, repos, match }) => {
   useEffect(() => {
     getUser(match.params.login);
     getUserRepos(match.params.login);
@@ -101,9 +105,6 @@ const User = ({ user, loading, getUser, getUserRepos, repos, match }) => {
 };
 
 User.propTypes = {
-  'loading': PropTypes.bool,
-  'user': PropTypes.object.isRequired,
-  'getUser': PropTypes.func.isRequired,
   'getUserRepos': PropTypes.func.isRequired,
   'repos': PropTypes.array.isRequired
 };

src/components/users/Users.js

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import UserItem from './UserItem';
 import Spinner from '../layout/Spinner';
-import PropTypes from 'prop-types';
 
-const Users = ({ users, loading }) => {
+import GithubContext from '../../context/github/githubContext';
+
+const Users = () => {
+  const githubContext = useContext(GithubContext);
+
+  const { loading, users } = githubContext;
+
   if(loading)
     return <Spinner/>;
   else
@@ -17,11 +22,6 @@ const Users = ({ users, loading }) => {
     );
 };
 
-Users.propTypes = {
-  'users': PropTypes.array.isRequired,
-  'loading': PropTypes.bool.isRequired
-};
-
 const userStyle = {
   'display':'grid',
   'gridTemplateColumns':'repeat(3, 1fr)',

src/context/github/GithubState.js

@@ -33,11 +33,32 @@ const GithubState = props => {
     });
   };
 
-  // get user
+  /*
+   * get user
+   * Get Single user
+   */
+
+  const getUser = async username => {
+    setLoading();
+    const res = await axios.get(
+      `https://api.github.com/users/${username}?client_id=${
+        process.env.REACT_APP_GITHUB_CLIENT_ID
+      }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
+    );
+
+    dispatch({
+      'type':GET_USER, 'payload':res.data
+    });
+  };
 
   // get repos
 
-  // clear users
+  /*
+   * clear users
+   * Clear Users from State
+   */
+
+  const clearUsers = () => dispatch({ 'type':CLEAR_USERS });
 
   // set loading
 
@@ -50,7 +71,9 @@ const GithubState = props => {
       'user': state.user,
       'repos': state.repos,
       'loading': state.loading,
-      searchUsers
+      searchUsers,
+      clearUsers,
+      getUser
     }}
 
   >

src/context/github/githubReducer.js

@@ -16,6 +16,18 @@ export default (state, action) => {
         users: action.payload,
         loading: false
       };
+    case GET_USER:
+      return {
+        ...state,
+        user: action.payload,
+        loading: false
+      };
+    case CLEAR_USERS:
+      return {
+        ...state,
+        users:[],
+        loading:false
+      };
     case SET_LOADING:
       return {
         ...state,