Handle Errors

Author: thenamankumar

src/App.js

@@ -1,8 +1,44 @@
-import React from "react";
-import Search from "./components/Search3";
+import React from 'react';
+import Search from './components/Search';
 
-function App() {
-  return <Search />;
+class App extends React.Component {
+  state = {
+    user: null,
+    error: null,
+  };
+
+  fetchUserData = async username => {
+    try {
+      const res = await fetch(`https://api.github.com/users/${username}`);
+      if (res.ok) {
+        const data = await res.json();
+
+        return this.setState({
+          user: data,
+        });
+      }
+
+      const error = (await res.json()).message;
+
+      this.setState({
+        error,
+      });
+    } catch (err) {
+      this.setState({
+        error: 'There was some error',
+      });
+    }
+  };
+
+  render() {
+    const { error } = this.state;
+    return (
+      <div>
+        <Search fetchData={this.fetchUserData} />
+        {error && <p className="text-danger">{error}</p>}
+      </div>
+    );
+  }
 }
 
 export default App;

src/components/Search.js

@@ -1,22 +1,47 @@
 import React from "react";
 
 class Search extends React.Component {
-  state= {
-    username: '',
-  }
+  state = {
+    username: ""
+  };
 
   handleUserNameChange = e => {
-    const  value = e.target.value;
+    const value = e.target.value;
 
     this.setState({
-      username: value,
+      username: value
     });
   };
 
   render() {
+    const { fetchData } = this.props;
     const { username } = this.state;
 
-    return <input value={username} onChange={this.handleUserNameChange} type="text" name="username" placeholder="Enter username" />;
+    return (
+      <div className="bg-dark">
+        <div className="container py-5">
+          <div className="row">
+            <div className="col-8 offset-2 text-center">
+              <div className="row">
+                <div className="col-9">
+                  <input
+                    className="form-control"
+                    value={username}
+                    onChange={this.handleUserNameChange}
+                    type="text"
+                    name="username"
+                    placeholder="Enter username"
+                  />
+                </div>
+                <div className="col-3">
+                  <button onClick={() => fetchData(username)} className="btn btn-large btn-success">Search</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 }