WIP: Implement github user search

src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -36,3 +36,16 @@
     transform: rotate(360deg);
   }
 }
+
+.search-result-cont {
+  margin-top: 8vh;
+}
+
+.search-result {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  display: inline;
+  padding: 50px;
+  border: solid 1px gray;
+}

src/App.js

@@ -1,20 +1,30 @@
 import React, { useState } from "react";
 import "./App.css";
+import SearchResults from "./components/SearchResults";
 
-function handleSearchClick(searchTerm) {
-  fetchGitHubUser(searchTerm);
-}
+function App() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
 
-function fetchGitHubUser(name) {
-  let gitHubUrl = `https://api.github.com/users/${name}`;
+  function handleSearchClick() {
+    let gitHubUrl = `https://api.github.com/users/${searchTerm}`;
 
-  fetch(gitHubUrl)
-    .then((res) => res.json())
-    .then((res) => console.log(res));
-}
+    fetch(gitHubUrl)
+      .then((res) => res.json())
+      .then((res) => {
+        searchResults.unshift(res);
+        setSearchResults(searchResults);
+        setSearchTerm("");
+      });
+  }
 
-function App() {
-  const [searchTerm, setSearchTerm] = useState("");
+  function removeResult(result) {
+    let index = searchResults.indexOf(result);
+    if (index > -1) {
+      searchResults.splice(index, 1);
+      setSearchResults(searchResults);
+    }
+  }
 
   return (
     <div className="App">
@@ -24,9 +34,13 @@ function App() {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          <button onClick={() => handleSearchClick(searchTerm)}>Search</button>
+          <button onClick={handleSearchClick}>Search</button>
         </div>
       </header>
+      <SearchResults
+        searchResults={searchResults}
+        removeResult={removeResult}
+      />
     </div>
   );
 }

src/App.test.js

@@ -1,9 +1,26 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  const buttonElement = getByText(/Search/i);
+  expect(buttonElement).toBeInTheDocument();
+});
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({ name: "Test User" })
+  })
+);
+
+describe("Fetch github user test", () => {
+  test("that component is added after searching for github user", async () => {
+    const { getByText } = render(<App />);
+    const node = getByText("Search");
+    fireEvent.click(node);
+    // const searchResult = getByText(/Test User/i);
+    // expect(searchResult).toBeInTheDocument();
+  });
+
+  afterEach(cleanup);
 });

src/components/SearchResults.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+function SearchResults(props) {
+  function removeResult(result) {
+    props.removeResult(result);
+  }
+
+  if (props.searchResults.length > 0) {
+    return (
+      <div className="search-result-cont">
+        {props.searchResults.map((result, i) => {
+          return (
+            <div key={i} className="search-result">
+              {result.name}
+              <button onClick={(e) => removeResult(result)}>X</button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  } else {
+    return <div />;
+  }
+}
+
+export default SearchResults;