Fix front-end lint issues

front/index.js

@@ -1,27 +1,27 @@
-import 'jquery'
-import 'semantic-ui-css/semantic.css'
-import './index.scss'
+import 'jquery';
+import 'semantic-ui-css/semantic.css';
 
 import { ApolloClient } from 'apollo-client';
 import { ApolloProvider } from 'react-apollo';
-import App from './src/App';
 import { HttpLink } from 'apollo-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import gql from 'graphql-tag'
+import App from './src/App';
+
+import './index.scss';
 
 const API_SERVER_URL = process.env.API_SERVER_URL || 'http://127.0.0.1:5000/';
 
 const client = new ApolloClient({
-    link: new HttpLink({ uri: API_SERVER_URL + 'graphql' }),
-    cache: new InMemoryCache()
+  link: new HttpLink({ uri: `${API_SERVER_URL}graphql` }),
+  cache: new InMemoryCache(),
 });
 
 
 ReactDOM.render(
-    <ApolloProvider client={client}>
-        <App />
-    </ApolloProvider>,
-    document.getElementById('app')
+  <ApolloProvider client={client}>
+    <App />
+  </ApolloProvider>,
+  document.getElementById('app'),
 );

front/poi.config.js

@@ -1,14 +1,14 @@
-const webpack = require('webpack')
+const webpack = require('webpack');
 
 module.exports = {
-    env: {
-        API_SERVER_URL: 'http://127.0.0.1:5000/'
-    },
-    webpack(config) {
-        config.plugins.push(new webpack.ProvidePlugin({
-            $: "jquery",
-            jQuery: "jquery"
-        }));
-        return config;
-    }
+  env: {
+    API_SERVER_URL: 'http://127.0.0.1:5000/',
+  },
+  webpack(config) {
+    config.plugins.push(new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    }));
+    return config;
+  },
 };

front/src/App.js

@@ -1,77 +1,82 @@
-import { EditRating, Rating } from './Rating.js'
 import React, { Component } from 'react';
-import { graphql, withApollo } from 'react-apollo';
 
-import { EditPersonContainer } from './EditPerson.js'
-import { PersonSkillsTableContainer } from './PersonSkillsTable.js'
-import gql from 'graphql-tag'
+import { Rating } from './Rating';
+import { EditPersonContainer } from './EditPerson';
+import { PersonSkillsTableContainer } from './PersonSkillsTable';
 
 class App extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { person: null };
-    }
-    selectPerson(person) {
-        this.setState({ person: person === this.state.person ? null : person });
-    }
-    render() {
-        const { person } = this.state;
-        return (
-            <div>
-                <a id="github-icon" href="https://github.com/olin-build/skillz/"
-                    target="_blank">
-                    <i className="huge github icon" />
-                </a>
-                <div className="ui container">
-                    <h1 className="ui dividing header">People Skillz Finder</h1>
-                    <div className="ui message">
-                        <Instructions />
-                        <Legend />
-                    </div>
-                    <PersonSkillsTableContainer className="column"
-                        editablePerson={person}
-                        onRowClick={person => this.selectPerson(person)}
-                    />
-                    {person && <EditPersonContainer person={person} />}
-                </div>
-            </div>
-        );
-    }
+  constructor(props) {
+    super(props);
+    this.state = { person: null };
+  }
+  selectPerson(person) {
+    this.setState({ person: person === this.state.person ? null : person });
+  }
+  render() {
+    const { person } = this.state;
+    return (
+      <div>
+        <a
+          id="github-icon"
+          href="https://github.com/olin-build/skillz/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="huge github icon" />
+        </a>
+        <div className="ui container">
+          <h1 className="ui dividing header">People Skillz Finder</h1>
+          <div className="ui message">
+            <Instructions />
+            <Legend />
+          </div>
+          <PersonSkillsTableContainer
+            className="column"
+            editablePerson={person}
+            onRowClick={p => this.selectPerson(p)}
+          />
+          {person && <EditPersonContainer person={person} />}
+        </div>
+      </div>
+    );
+  }
 }
 
-const Instructions = () =>
-    <div>
-        <p>
-            Use this tool to find people who know or want to learn X. </p>
-        <p>
-            Click on your row to edit your skills and interests. (Please only edit yourself or with permission!)
-        </p>
-    </div>
+const Instructions = () => (
+  <div>
+    <p>
+      Use this tool to find people who know or want to learn X.
+    </p>
+    <p>
+      Click on your row to edit your skills and interests.
+      (Please only edit yourself or with permission!)
+    </p>
+  </div>);
 
 
-const Legend = () =>
-    <table>
-        <tbody>
-            <tr>
-                <td><Rating rating={1} className="inline" /></td>
-                <td>minimal experience</td>
-                <td><Rating rating={1} className="inline" icon="student" /></td>
-                <td>minimal interest</td>
-            </tr>
-            <tr>
-                <td><Rating rating={5} className="inline" /></td>
-                <td>very experienced</td>
-                <td><Rating rating={5} className="inline" icon="student" /></td>
-                <td>really wants to learn</td>
-            </tr>
-            <tr>
-                <td><Rating rating={0} className="inline" /></td>
-                <td>doesn't know</td>
-                <td><Rating rating={0} className="inline" /></td>
-                <td>not interested</td>
-            </tr>
-        </tbody>
-    </table>
+const Legend = () => (
+  <table>
+    <tbody>
+      <tr>
+        <td><Rating rating={1} className="inline" /></td>
+        <td>minimal experience</td>
+        <td><Rating rating={1} className="inline" icon="student" /></td>
+        <td>minimal interest</td>
+      </tr>
+      <tr>
+        <td><Rating rating={5} className="inline" /></td>
+        <td>very experienced</td>
+        <td><Rating rating={5} className="inline" icon="student" /></td>
+        <td>really wants to learn</td>
+      </tr>
+      <tr>
+        <td><Rating rating={0} className="inline" /></td>
+        <td>doesn’t know</td>
+        <td><Rating rating={0} className="inline" /></td>
+        <td>not interested</td>
+      </tr>
+    </tbody>
+  </table>);
 
 
 export default App;

front/src/EditPerson.js

@@ -1,60 +1,62 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { graphql, withApollo } from 'react-apollo';
-
-import { EditRating } from './Rating.js'
-import gql from 'graphql-tag'
+import gql from 'graphql-tag';
+import { EditRating } from './Rating';
 
 // TODO use a provider pattern to read this from init or app
 const API_SERVER_URL = process.env.API_SERVER_URL || 'http://127.0.0.1:5000/';
 
 const EditPerson = ({ person, client, data }) => {
-    let skills = data.allSkills.edges.map(({ node }) => node);
-    let personSkills = getPersonSkillRecords(person, skills);
-    function setRating(skill, key, level) {
-        const url = `${API_SERVER_URL}person/${person.id}/skill/${skill.id}`;
-        fetch(url, {
-            method: 'POST',
-            body: JSON.stringify({ [key]: level }),
-            headers: new Headers({ 'Content-Type': 'application/json' })
-        }).then(res => res.json())
-            .catch(error => console.error('Error:', error))
-            .then(response => client.resetStore());
-    }
-    return (<div>
-        <table className="ui large striped table">
-            <caption>
-                <h1 className="ui header left aligned">
-                    {person.firstName} {person.lastName}
-                </h1>
-            </caption>
-            <thead className="sticky">
-                <tr>
-                    <th />
-                    <th>Experience</th>
-                    <th>Interest Level</th>
-                </tr>
-            </thead>
-            <tbody>
-                {personSkills.map(({ skill, personSkill }) =>
-                    <tr key={`${person.id}-${skill.id}`}>
-                        <th>{skill.name}</th>
-                        <td>
-                            <EditRating
-                                rating={personSkill.experience}
-                                onRating={r => setRating(skill, 'experience', r)} />
-                        </td>
-                        <td>
-                            <EditRating
-                                rating={personSkill.interest}
-                                icon="student"
-                                onRating={r => setRating(skill, 'interest', r)} />
-                        </td>
-                    </tr>)}
-            </tbody>
-        </table>
+  const skills = data.allSkills.edges.map(({ node }) => node);
+  const personSkills = getPersonSkillRecords(person, skills);
+  function setRating(skill, key, level) {
+    const url = `${API_SERVER_URL}person/${person.id}/skill/${skill.id}`;
+    fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({ [key]: level }),
+      headers: new Headers({ 'Content-Type': 'application/json' }),
+    }).then(res => res.json())
+      .catch(error => console.error('Error:', error)) /* eslint no-console: 0 */
+      .then(() => client.resetStore());
+  }
+  return (
+    <div>
+      <table className="ui large striped table">
+        <caption>
+          <h1 className="ui header left aligned">
+            {person.firstName} {person.lastName}
+          </h1>
+        </caption>
+        <thead className="sticky">
+          <tr>
+            <th />
+            <th>Experience</th>
+            <th>Interest Level</th>
+          </tr>
+        </thead>
+        <tbody>
+          {personSkills.map(({ skill, personSkill }) => (
+            <tr key={`${person.id}-${skill.id}`}>
+              <th>{skill.name}</th>
+              <td>
+                <EditRating
+                  rating={personSkill.experience}
+                  onRating={r => setRating(skill, 'experience', r)}
+                />
+              </td>
+              <td>
+                <EditRating
+                  rating={personSkill.interest}
+                  icon="student"
+                  onRating={r => setRating(skill, 'interest', r)}
+                />
+              </td>
+            </tr>))}
+        </tbody>
+      </table>
     </div>
-    );
-}
+  );
+};
 
 export const skillsQuery = gql`
 query {
@@ -69,17 +71,17 @@ query {
 }`;
 
 export function getPersonSkillRecords(person, skills) {
-    let personSkillsById = Object();
-    person.personSkillsByPersonId.edges.forEach(({ node }) =>
-        personSkillsById[node.skillId] = node
-    );
-    return skills.map(skill => ({
-        skill, personSkill: personSkillsById[skill.id] || {}
-    }));
+  const personSkillsById = Object();
+  person.personSkillsByPersonId.edges.forEach(({ node }) => {
+    personSkillsById[node.skillId] = node;
+  });
+  return skills.map(skill => ({
+    skill, personSkill: personSkillsById[skill.id] || {},
+  }));
 }
 
 export const EditPersonContainer = graphql(skillsQuery, {
-    options: {
-        errorPolicy: 'all'
-    }
+  options: {
+    errorPolicy: 'all',
+  },
 })(withApollo(EditPerson));