Example of a component fetching data from GitHub. Added ESLInt with AirBnb settings. Refactored code to follow AirBnn Es6 & React code-guideline. Added superagent as http client

eabait · eabait · commit 91c80e7f1fbb · 2016-03-23T15:41:59.000-03:00
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    comma-dangle: [2, "never"]
+  }
+}
diff --git a/index.html b/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <title>React Seed</title>
+
+    <style media="screen">
+
+    </style>
   </head>
   <body>
     <main class="application-container"></main>
diff --git a/package.json b/package.json
@@ -16,14 +16,20 @@
   "license": "MIT",
   "dependencies": {
     "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react-dom": "^0.14.7",
+    "superagent": "^1.8.2"
   },
   "devDependencies": {
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.2",
+    "babel-eslint": "^5.0.0",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "eslint": "^2.4.0",
+    "eslint-config-airbnb": "^6.2.0",
+    "eslint-loader": "^1.3.0",
+    "eslint-plugin-react": "^4.2.3",
     "webpack": "^1.12.14"
   }
 }
diff --git a/src/RepositorySearch/RepositorySearch.jsx b/src/RepositorySearch/RepositorySearch.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import request from 'superagent';
+import RepositorySearchResult from './RepositorySearchResult.jsx';
+
+export default class RepositorySearch extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      searchQuery: '',
+      repositories: []
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleQueryChange = this.handleQueryChange.bind(this);
+  }
+
+  handleQueryChange(e) {
+    this.setState({
+      searchQuery: e.target.value
+    });
+    if (e.target.value === '') {
+      this.setState({
+        repositories: []
+      });
+    }
+  }
+
+  handleSearch() {
+    if (this.state.searchQuery) {
+      request
+        .get('https://api.github.com/search/repositories')
+        .query({
+          q: this.state.searchQuery
+        })
+        .end((err, res) => {
+          this.setState({
+            repositories: res.body.items
+          });
+        });
+    }
+    this.setState({
+      repositories: []
+    });
+  }
+
+  render() {
+    return (
+      <section className="repository-search">
+        <article className="repository-search__search-query">
+          <input
+            type="search"
+            placeholder="Search GitHub repositories"
+            onChange={this.handleQueryChange}
+            value={this.state.searchQuery}
+          />
+        <button onClick={this.handleSearch}>
+            Search
+        </button>
+        </article>
+        <RepositorySearchResult repositories={this.state.repositories} />
+      </section>
+    );
+  }
+}
diff --git a/src/RepositorySearch/RepositorySearchResult.jsx b/src/RepositorySearch/RepositorySearchResult.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function RepositorySearchResult({ repositories }) {
+  return (
+    <ul className="repository-search__results">
+      {repositories.map((repository) => (
+        <li key={repository.id}>
+          {repository.full_name}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+RepositorySearchResult.propTypes = {
+  repositories: React.PropTypes.nod
+};
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,17 +1,14 @@
-'use strict';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import RepositorySearch from './RepositorySearch/RepositorySearch.jsx';
 
-const React = require('react');
-const ReactDOM = require('react-dom');
-
-class Application extends React.Component {
-  render() {
-    return (
-      <section className="application">
-        React Seed
-      </section>
-    );
-  }
-};
+function Application() {
+  return (
+    <section className="application">
+      <RepositorySearch />
+    </section>
+  );
+}
 
 ReactDOM.render(
   <Application />,
diff --git a/webpack.config.js b/webpack.config.js
@@ -11,6 +11,14 @@ var config = {
     filename: 'bundle.js'
   },
   module: {
+    preLoaders: [
+      {
+        test: /\.jsx$|\.js$/,
+        loader: 'eslint-loader',
+        include: APP_DIR,
+        exclude: BUILD_DIR
+      }
+    ],
     loaders: [
       {
         test: /\.jsx?/,
