End of chapter 30

.idea/workspace.xml

@@ -2,12 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/context/github/GithubState.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/context/github/githubContext.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/context/github/githubReducer.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/context/types.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/Search.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/Search.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="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -49,7 +48,7 @@
     <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="last_opened_file_path" value="$PROJECT_DIR$/../../../sidekick" />
     <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" />
@@ -120,7 +119,8 @@
       <workItem from="1570713697039" duration="68000" />
       <workItem from="1570713775683" duration="2307000" />
       <workItem from="1570716281021" duration="2536000" />
-      <workItem from="1570719196036" duration="1629000" />
+      <workItem from="1570719196036" duration="7092000" />
+      <workItem from="1571151198512" duration="168000" />
     </task>
     <task id="LOCAL-00001" summary="End of Chapter 14">
       <created>1569512995385</created>
@@ -234,7 +234,14 @@
       <option name="project" value="LOCAL" />
       <updated>1570719686766</updated>
     </task>
-    <option name="localTasksCounter" value="17" />
+    <task id="LOCAL-00017" summary="End of chapter 29">
+      <created>1570721044833</created>
+      <option name="number" value="00017" />
+      <option name="presentableId" value="LOCAL-00017" />
+      <option name="project" value="LOCAL" />
+      <updated>1570721044833</updated>
+    </task>
+    <option name="localTasksCounter" value="18" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -270,6 +277,7 @@
     <MESSAGE value="End of chapter 26" />
     <MESSAGE value="End of chapter 27" />
     <MESSAGE value="End of chapter 28" />
-    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 28" />
+    <MESSAGE value="End of chapter 29" />
+    <option name="LAST_COMMIT_MESSAGE" value="End of chapter 29" />
   </component>
 </project>

src/App.js

@@ -21,17 +21,19 @@ const App = () => {
   const [repos, setRepos] = useState([]);
 
   // Search github users
-  const searchUsers = async text => {
+  /*
-    setLoading(true);
+   * const searchUsers = async text => {
-    const res = await axios.get(
+   * setLoading(true);
-      `https://api.github.com/search/users?q=${text}&client_id=${
+   * const res = await axios.get(
-        process.env.REACT_APP_GITHUB_CLIENT_ID
+   * `https://api.github.com/search/users?q=${text}&client_id=${
-      }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
+   * process.env.REACT_APP_GITHUB_CLIENT_ID
-    );
+   * }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
-
+   * );
-    setUsers(res.data.items);
+   *
-    setLoading(false);
+   * setUsers(res.data.items);
-  };
+   * setLoading(false);
+   * };
+   */
 
   // Get Single user
 
@@ -89,7 +91,6 @@ const App = () => {
                 render={props => (
                   <Fragment>
                     <Search
-                      searchUsers={searchUsers}
                       clearUsers={clearUsers}
                       showClear={users.length > 0}
                       setAlert={showAlert}

src/components/users/Search.js

@@ -1,7 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import PropTypes from "prop-types";
 
-const Search = ({ searchUsers, showClear, clearUsers, setAlert }) => {
+import GithubContext from '../../context/github/githubContext';
+
+const Search = ({  showClear, clearUsers, setAlert }) => {
+  const githubContext = useContext(GithubContext);
   const [text, setText] = useState("");
   const onChange = e => {
     setText(e.target.value);
@@ -12,7 +15,7 @@ const Search = ({ searchUsers, showClear, clearUsers, setAlert }) => {
     if (text === "") {
       setAlert("Please enter something", "light");
     } else {
-      searchUsers(text);
+      githubContext.searchUsers(text);
       setText('');
     }
   };
@@ -43,7 +46,7 @@ const Search = ({ searchUsers, showClear, clearUsers, setAlert }) => {
 };
 
 Search.propTypes = {
-  searchUsers: PropTypes.func.isRequired,
+
   clearUsers: PropTypes.func.isRequired,
   showClear: PropTypes.bool.isRequired,
   setAlert: PropTypes.func.isRequired

src/context/github/GithubState.js

@@ -18,7 +18,20 @@ const GithubState = props => {
 
   const [state, dispatch] = useReducer(GithubReducer, initialState);
 
-  // search users
+  // Search github users
+  const searchUsers = async text => {
+    setLoading();
+    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}`
+    );
+
+    dispatch({
+      'type':SEARCH_USERS,
+      'payload': res.data.items
+    });
+  };
 
   // get user
 
@@ -28,13 +41,16 @@ const GithubState = props => {
 
   // set loading
 
+  const setLoading = () => dispatch({ 'type':SET_LOADING });
+
   return <GithubContext.Provider
 
     value={{
       'users': state.users,
       'user': state.user,
       'repos': state.repos,
-      'loading': state.loading
+      'loading': state.loading,
+      searchUsers
     }}
 
   >

src/context/github/githubReducer.js

@@ -0,0 +1,27 @@
+import {
+  SEARCH_USERS,
+  CLEAR_USERS,
+  GET_REPOS,
+  GET_USER,
+  REMOVE_ALERT,
+  SET_ALERT,
+  SET_LOADING
+} from "../types";
+
+export default (state, action) => {
+  switch (action.type) {
+    case SEARCH_USERS:
+      return {
+        ...state,
+        users: action.payload,
+        loading: false
+      };
+    case SET_LOADING:
+      return {
+        ...state,
+        loading: true
+      };
+    default:
+      return state;
+  }
+};