pushing part 1 of charle's code

Author: nngocjade

src/App.js

@@ -1,15 +1,44 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { Container } from "react-bootstrap";
+import IssueList from "./components/IssueList";
+import SearchForm from "./components/SearchForm";
 
 function App() {
+  const [issues, setIssues] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [url, setUrl] = useState(
+    "https://api.github.com/repos/octocat/hello-world/issues"
+  );
+  useEffect(() => {
+    async function fetchData() {
+      let data = await fetch(url);
+      let json = await data.json();
+      setIssues(json);
+    }
+    fetchData();
+  }, [url]);
+
+  const handleClick = () => {
+    setUrl(`https://api.github.com/repos/${searchTerm}/issues`);
+  };
+
+  const handleChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
   return (
     <Container>
       <h1 className="text-center">GitHub Issues Browser</h1>
-      <p>Fill in files from /src/components.</p>
+      <SearchForm
+        handleChange={handleChange}
+        handleClick={handleClick}
+        searchTerm={searchTerm}
+      />
+      <IssueList issues={issues} />
     </Container>
   );
 }
 
-export default App;
+export default App;

src/components/IssueList.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const IssueList = ({ issues }) => {
+  return (
+    <div>
+      <h2>Issue list</h2>
+      <ul>
+        {issues.map((i) => (
+          <li key={i.id}>{i.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default IssueList;

src/components/SearchForm.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const SearchForm = ({ handleChange, searchTerm, handleClick }) => {
+  return (
+    <div>
+      <input type="text" onChange={handleChange} value={searchTerm} />
+      <button onClick={handleClick}>Search</button>
+    </div>
+  );
+};
+
+export default SearchForm;