adding eslint

.eslintignore

@@ -0,0 +1,2 @@
+*.test.js
+*registerServiceWorker.js

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+    "extends": "airbnb",
+    "parser": "babel-eslint",
+    "rules": {
+        "indent": ["error", 2],
+        "react/prefer-stateless-function": [0, { "ignorePureComponents": true }],
+        "import/no-named-as-default": 0,
+        "import/no-named-as-default-member": 0,
+        "react/prop-types": 0,
+        "react/button-has-type":0,
+        "jsx-a11y/click-events-have-key-events": 0,
+        "jsx-a11y/no-static-element-interactions": 0,
+        "jsx-a11y/no-noninteractive-element-interactions": 0,
+        "react/destructuring-assignment": 0,
+        "prefer-destructuring": 0,
+        "no-case-declarations": 0,
+        "no-underscore-dangle": 0,
+        "no-undef": 0,
+        "no-unused-vars": 0
+    }
+}

package.json

@@ -21,12 +21,19 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ."
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1"
+  }
 }

src/App.js → src/App.jsx

@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import './App.scss';
-import { Route } from "react-router-dom";
+import { Route } from 'react-router-dom';
 import Landing from './features/Issues/Landing';
 import Issues from './features/Issues/Issues';
 
 
 class App extends Component {
-
   render() {
     return (
       <div className="App">

src/features/Issues/Issues.js → src/features/Issues/Issues.jsx

@@ -39,15 +39,15 @@ class Issues extends Component {
     super(props);
     this.state = {
       issues: {},
-      owner: "",
-      repo: "",
-      filter: "all",
-      page: 1 // By default, page always start at 1
+      owner: '',
+      repo: '',
+      filter: 'all',
+      page: 1, // By default, page always start at 1
     };
   }
 
   componentDidMount() {
-    let a = this.props.location.pathname.split("/");
+    const a = this.props.location.pathname.split('/');
     const owner = a[1];
     const repo = a[2];
     this.setState({ owner, repo });
@@ -59,7 +59,7 @@ class Issues extends Component {
     console.log(nextProps.filteredIssues);
   }
 
-  handleFilter = by => {
+  handleFilter = (by) => {
     this.props.filterIssues(by);
     this.setState({ filter: by });
   };
@@ -68,16 +68,18 @@ class Issues extends Component {
     window.location.href = `https://github.com/${owner}/${repo}/issues/${id}`;
   };
 
-  handlePageChange = number => {
+  handlePageChange = (number) => {
     const { owner, repo, page } = this.state;
-    let newPage = page + number;
+    const newPage = page + number;
 
     this.props.getIssues({ owner, repo, page: newPage });
     this.setState({ page: newPage });
   };
 
   render() {
-    const { owner, repo, issues, filter } = this.state;
+    const {
+      owner, repo, issues, filter,
+    } = this.state;
     return (
       <div className="App">
         <header className="App-header">
@@ -146,7 +148,7 @@ class Issues extends Component {
             </button>
           )}
           <span className="page-number">{this.state.page}</span>
-          {/* Since GitHub sends 30 issues per page, 
+          {/* Since GitHub sends 30 issues per page,
               there is no more requests if there are not exactly 30 requests */}
           {Object.keys(this.state.issues).length === 30 && (
             <button
@@ -165,15 +167,15 @@ class Issues extends Component {
 const mapStateToProps = state => ({
   filteredIssues: state.issues.filteredIssues,
   fetched: state.issues.fetched,
-  isLoading: state.issues.isLoading
+  isLoading: state.issues.isLoading,
 });
 
 const mapDispatchToProps = dispatch => ({
   getIssues: url => dispatch(getIssues(url)),
-  filterIssues: state => dispatch(filterIssues(state))
+  filterIssues: state => dispatch(filterIssues(state)),
 });
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(Issues);

src/features/Issues/Landing.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import './Landing.scss';
+
+class Landing extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { url: '' };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange = (e) => {
+    this.setState({ url: e.target.value });
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const a = this.state.url.split('/');
+    const owner = a[3];
+    const repo = a[4];
+
+    if (!owner || !repo) return;
+    this.props.history.push(`/${owner}/${repo}`);
+  }
+
+  render() {
+    return (
+      <div className="landing">
+        <h1 className="landing-title"> Github Issues Viewer</h1>
+        <div className="search-bar">
+          <form onSubmit={this.handleSubmit}>
+            <i className="material-icons search-icon noUserSelect">search</i>
+            <input
+              type="url"
+              name="url"
+              value={this.state.url}
+              id="search-input"
+              placeholder="Paste a link to a Github repo!"
+              onChange={this.handleChange}
+            />
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Landing;

src/features/Issues/actions.js

@@ -1,59 +1,58 @@
+import axios from 'axios';
 import {
   GET_ISSUES,
   GET_ISSUES_SUCCESS,
   GET_ISSUES_FAILURE,
-  FILTER_ISSUES
+  FILTER_ISSUES,
 } from '../../constants';
 
-import axios from 'axios';
 import config from '../../config';
 
-export const filterIssues = by => {
-  console.log(by)
+export const filterIssues = (by) => {
+  console.log(by);
   return dispatch => dispatch({
     type: FILTER_ISSUES,
     payload: {
-      by: by,
-    }
-  })
-}
-
-
-
-export const getIssues = ({owner, repo, page}) => {
-  const newUrl = `https://api.github.com/repos/${owner}/${repo}/issues?access_token=${config.access_token}&state=all&page=${page}`
-  console.log(newUrl)
-  return dispatch => {
-    dispatch(getIssuesStarted({owner, repo}));
-
-    axios
-      .get(newUrl)
-      .then(res => {
-        dispatch(getIssuesSuccess(res.data));
-      })
-      .catch(err => {
-        dispatch(getIssuesFailure(err.message));
-      });
-  };
+      by,
+    },
+  });
 };
 
 const getIssuesStarted = payload => ({
   type: GET_ISSUES,
   payload: {
     owner: payload.owner,
-    repo: payload.repo
-  }
+    repo: payload.repo,
+  },
 });
 const getIssuesSuccess = issues => ({
   type: GET_ISSUES_SUCCESS,
   payload: {
-    ...issues
-  }
+    ...issues,
+  },
 });
 
 const getIssuesFailure = error => ({
   type: GET_ISSUES_FAILURE,
   payload: {
-    error
-  }
+    error,
+  },
 });
+
+
+export const getIssues = ({ owner, repo, page }) => {
+  const newUrl = `https://api.github.com/repos/${owner}/${repo}/issues?access_token=${config.access_token}&state=all&page=${page}`;
+  console.log(newUrl);
+  return (dispatch) => {
+    dispatch(getIssuesStarted({ owner, repo }));
+
+    axios
+      .get(newUrl)
+      .then((res) => {
+        dispatch(getIssuesSuccess(res.data));
+      })
+      .catch((err) => {
+        dispatch(getIssuesFailure(err.message));
+      });
+  };
+};

src/features/Issues/index.js

@@ -1,4 +1,4 @@
 import * as actions from './actions';
 import reducer from './reducer';
 
-export { actions, reducer }
+export { actions, reducer };

src/features/Issues/reducer.js

@@ -7,24 +7,39 @@ import {
 
 const INITIAL_STATE = {
   issues: {},
-  filteredIssues: {}
-}
+  filteredIssues: {},
+};
 
 export default function reducer(state = INITIAL_STATE, action) {
   switch (action.type) {
-    case GET_ISSUES:
-      return {
-        ...state,
-        fetched: false,
-        isLoading: true,
-      };
-    case GET_ISSUES_SUCCESS:
+  case GET_ISSUES:
+    return {
+      ...state,
+      fetched: false,
+      isLoading: true,
+    };
+  case GET_ISSUES_SUCCESS:
+    return {
+      ...state,
+      issues: action.payload, // Used to store the original api request data
+      filteredIssues: action.payload, // Actually used in view to handle filtering
+      fetched: true,
+      isLoading: false,
+    };
+  case GET_ISSUES_FAILURE:
+    return {
+      ...state,
+      error: action.payload,
+      fetched: false,
+      isLoading: false,
+    };
+  case FILTER_ISSUES:
+    const by = action.payload.by;
+    if (by === 'all') {
       return {
         ...state,
-        issues: action.payload, // Used to store the original api request data
-        filteredIssues: action.payload, // Actually used in view to handle filtering
-        fetched: true,
-        isLoading: false,
+        filterBy: action.payload.by,
+        filteredIssues: state.issues,
       };
     case GET_ISSUES_FAILURE:
       return {