fairkmitl · October 11, 2018 06:29 · Oct 11, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,2 @@
+
+<div id="app"></app>
diff --git a/react-fetch-example.markdown b/react-fetch-example.markdown
@@ -0,0 +1,7 @@
+React fetch example
+-------------------
+
+
+A [Pen](https://codepen.io/fair-weerapat/pen/JmNegJ) by [Fair Weerapat](https://codepen.io/fair-weerapat) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/fair-weerapat/pen/JmNegJ/license).
diff --git a/script.babel b/script.babel
@@ -0,0 +1,90 @@
+class App extends React.Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      repos: []
+    };
+  }
+
+  handleSearch = (user) =>{
+    let url = 'https://api.github.com/users/'+user+'/repos';
+ fetch(url).
+  then(response => response.json()).then((repos) => {
+      console.log(repos);
+      console.log(repos.length);
+      this.setState({
+        repos: repos
+      });
+    });
+  };
+
+  render(){
+    return (
+      <div className="app-container">
+        <h3>React fetch example</h3>
+        <SearchBar handleSubmit={this.handleSearch} />
+        <RepoList repos={this.state.repos}/>
+      </div>
+    )
+  }
+}
+
+class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const text = event.target.text.value;
+    this.props.handleSubmit(text);
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input
+          name="text"
+          className="form-control"
+          type="text"
+          placeholder="Type github user and press ENTER"
+        />
+      </form>
+    );
+  }
+}
+
+
+class RepoList extends React.Component {
+
+  render(){
+    var rows = [];
+      this.props.repos.map((repo,index) => rows.push(<RepoItem key={index} repo={repo} />))
+    return (
+      <div className="list-group">
+        {rows}
+      </div>
+    )
+  }
+}
+RepoList.defaultProps = {
+  repos: []
+};
+
+class RepoItem extends React.Component {
+  render(){
+    return (
+        <a href="#" className="list-group-item list-group-item-action flex-column align-items-start">
+    <div className="d-flex w-100 justify-content-between">
+      <h5 className="mb-1">{this.props.repo.name}</h5>
+      <small>{new Date(Date.parse(this.props.repo.created_at)).toLocaleDateString()}</small>
+    </div>
+    <p className="mb-1">{this.props.repo.description}</p>
+    <small>{this.props.repo.html_url}</small>
+  </a>
+    )
+  }
+}
+
+ReactDOM.render(<App/>,document.getElementById('app'));
diff --git a/scripts b/scripts
@@ -0,0 +1,4 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,16 @@
+body {
+  background: #538cb5;	
+}
+.app-container {
+  background: #fff;	
+  max-width: 480px;
+  margin: 60px auto;
+  padding: 40px 25px;
+}
+
+h3 {
+  color: #538cb5;
+}
+input {
+  margin: 20px 0;
+}
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
No results found