End of chapter 30

2019-10-15 15:59:11 +01:00 · 2019-10-15 15:59:11 +01:00 · e98f23de32
commit e98f23de32
parent c6b5c21e44
5 changed files with 81 additions and 26 deletions
--- a/.idea/workspace.xml
+++ b/.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>
--- a/src/App.js
+++ b/src/App.js
@ -21,17 +21,19 @@ const App = () => {
  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);
-  };
+  /*
+   * 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

@ -89,7 +91,6 @@ const App = () => {
                render={props => (
                  <Fragment>
                    <Search
-                      searchUsers={searchUsers}
                      clearUsers={clearUsers}
                      showClear={users.length > 0}
                      setAlert={showAlert}
--- a/src/components/users/Search.js
+++ b/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
--- a/src/context/github/GithubState.js
+++ b/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
    }}

  >
--- a/src/context/github/githubReducer.js
+++ b/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;
+  }
+};