Updating eslint rules and addressing issues

.eslintrc.json

@@ -23,6 +23,27 @@
     "jest"
   ],
   "rules": {
+    "arrow-parens": [
+      "error",
+      "as-needed"
+    ],
+    "arrow-spacing": [
+      "error",
+      {
+        "before": true,
+        "after": true
+      }
+    ],
+    "comma-dangle": [
+      "error",
+      {
+        "objects": "never",
+        "arrays": "never",
+        "imports": "never",
+        "exports": "never",
+        "functions": "never"
+      }
+    ],
     "indent": [
       "error",
       2
@@ -31,6 +52,13 @@
       "error",
       "unix"
     ],
+    "max-len": [
+      "warn",
+      {
+        "code": 80
+      }
+    ],
+    "no-var": "error",
     "quotes": [
       "error",
       "single"
@@ -38,6 +66,18 @@
     "semi": [
       "error",
       "always"
+    ],
+    "space-before-function-paren": [
+      "error",
+      {
+        "named": "never",
+        "anonymous": "never",
+        "asyncArrow": "always"
+      }
+    ],
+    "template-curly-spacing": [
+      "error",
+      "always"
     ]
   },
   "settings": {

gatsby-config.js

@@ -2,7 +2,9 @@ const buildId = [
   process.env.CI_COMMIT_REF_SLUG || 'prerelese',
   (process.env.CI_COMMIT_SHA || 'gitsha').slice(0, 7)
 ].join('-');
-const banner = (process.env.NODE_ENV === 'production') ? false : (process.env.NODE_ENV || 'development');
+const banner = (process.env.NODE_ENV === 'production')
+  ? false
+  : (process.env.NODE_ENV || 'development');
 
 module.exports = {
   siteMetadata: {

src/components/Footer/index.js

@@ -21,8 +21,12 @@ export const FooterImpl = ({ site: { siteMetadata } }) => (
         Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
       </li>
       <li>
-        Generated images licensed: <a href="http://creativecommons.org/licenses/by/3.0/" rel="license external noopener noreferrer" target="_blank">
+        Generated images licensed: <a
-          <img src="https://licensebuttons.net/l/by/3.0/80x15.png" alt="Creative Commons CC-BY-3.0 License" />
+          href="http://creativecommons.org/licenses/by/3.0/"
+          rel="license external noopener noreferrer"
+          target="_blank">
+          <img src="https://licensebuttons.net/l/by/3.0/80x15.png"
+            alt="Creative Commons CC-BY-3.0 License" />
         </a>
       </li>
     </ul>

src/components/Header/index.js

@@ -17,14 +17,18 @@ const query = graphql`
 `;
 
 export const HeaderImpl = ({ site: { siteMetadata } }) => (
-  <header className={ style.header } data-banner={ siteMetadata.banner || null }>
+  <header
+    className={ style.header }
+    data-banner={ siteMetadata.banner || null }>
     <h1>
       <Link to="/">Regexper</Link>
     </h1>
 
     <ul className={ style.list }>
       <li>
-        <a href="https://gitlab.com/javallone/regexper-static" rel="external noopener noreferrer" target="_blank">
+        <a href="https://gitlab.com/javallone/regexper-static"
+          rel="external noopener noreferrer"
+          target="_blank">
           <GitlabIcon />
           Source on GitLab
         </a>

src/components/Message/index.js

@@ -24,7 +24,10 @@ const renderIcon = (type, icon) => {
 };
 
 const Message = ({ type, icon, heading, children }) => (
-  <div className={ [style.message, type && style[type] ].filter(Boolean).join(' ') }>
+  <div className={ [
+    style.message,
+    type && style[type]
+  ].filter(Boolean).join(' ') }>
     <div className={ style.header }>
       { renderIcon(type, icon) }
       <h2>{ heading }</h2>

src/components/SentryBoundary/test.js

@@ -27,9 +27,13 @@ describe('SentryBoundary', () => {
 
     const error = new Error('Example error');
     component.find('Child').simulateError(error);
-    component.setState({ hasError: true }); // NOTE: Enzyme doesn't call getDerivedStateFromError yet
+    // NOTE: Enzyme doesn't call getDerivedStateFromError yet, so we have to
+    // set the state manually
+    component.setState({ hasError: true });
 
-    expect(Sentry.captureException).toHaveBeenCalledWith(error, expect.anything());
+    expect(Sentry.captureException).toHaveBeenCalledWith(
+      error,
+      expect.anything());
     expect(component).toMatchSnapshot();
   });
 });

src/components/SentryError/index.js

@@ -14,7 +14,8 @@ class SentryError extends React.Component {
 
   render() {
     return <Message type="error" heading="An error has occurred">
-      <p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
+      <p>This error has been logged. You may also <a href="#error-report"
+        onClick={ this.reportError }>fill out a report</a>.</p>
     </Message>;
   }
 }

src/components/SentryError/test.js

@@ -15,7 +15,7 @@ describe('SentryError', () => {
   });
 
   describe('error reporting', () => {
-    test('clicking to fill out a report when an event has been logged', () => {
+    test('fill out a report when an event has been logged', () => {
       Sentry.lastEventId.mockReturnValue(1);
       const component = shallow(
         <SentryError />
@@ -27,7 +27,7 @@ describe('SentryError', () => {
       expect(Sentry.showReportDialog).toHaveBeenCalled();
     });
 
-    test('clicking to fill out a report when an event has not been logged', () => {
+    test('fill out a report when an event has not been logged', () => {
       Sentry.lastEventId.mockReturnValue(false);
       const component = shallow(
         <SentryError />

src/pages/index.js

@@ -8,7 +8,8 @@ const IndexPage = () => <Layout>
   <noscript>
     <Message type="error" heading="JavaScript Required">
       <p>You need JavaScript to use Regexper.</p>
-      <p>If you have concerns regarding the use of tracking code on Regexper, please see the <Link to="/privacy">Privacy Policy</Link>.</p>
+      <p>If you have concerns regarding the use of tracking code on Regexper,
+        please see the <Link to="/privacy">Privacy Policy</Link>.</p>
     </Message>
   </noscript>
   <div>Hello world</div>

src/pages/privacy.js

@@ -5,14 +5,41 @@ import Message from 'components/Message';
 
 const PrivacyPage = () => <Layout title="Privacy Policy">
   <Message type="info" heading="Privacy Policy">
-    <p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the <a href="https://gitlab.com/javallone/regexper-static" rel="external noopener noreferrer" target="_blank">GitLab repository</a>.</p>
+    <p>
-    <p>There are two data collection tools integrated in the app. These tools are not used to collect personal information:</p>
+      Regexper and the tools used to create it are all open source. If you are
+      concerned that the JavaScript being delivered is in any way malicious,
+      please inspect the source in the <a
+        href="https://gitlab.com/javallone/regexper-static"
+        rel="external noopener noreferrer"
+        target="_blank">GitLab repository</a>.
+    </p>
+    <p>
+      There are two data collection tools integrated in the app. These tools
+      are not used to collect personal information:
+    </p>
     <ul>
-      <li><b>Google Analytics</b> is used to track browser usage data and application performance. It is configured to anonymize the client IP address.</li>
+      <li>
-      <li><b>Sentry.io</b> is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.</li>
+        <b>Google Analytics</b> is used to track browser usage data and
+        application performance. It is configured to anonymize the client IP
+        address.
+      </li>
+      <li>
+        <b>Sentry.io</b> is a tool used to capture and report client-side
+        JavaScript errors. It is configured to not store the client IP address.
+      </li>
     </ul>
-    <p>Regexper honors the browser <b>&ldquo;Do Not Track&rdquo;</b> setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will <b>not</b> impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.</p>
+    <p>
-    <p>Regexper is not supported by ad revenue or sales of any kind.</p>
+      Regexper honors the browser <b>&ldquo;Do Not Track&rdquo;</b> setting and
+      will not enable these data collection tools if that setting is enabled.
+      Also, most popular ad blockers will prevent these tools from sending any
+      tracking data. Disabling or blocking these data collection tools
+      will <b>not</b> impact the performance of this app. The information
+      collected by these tools is used to monitor application performance,
+      determine browser support, and collect error reports.
+    </p>
+    <p>
+      Regexper is not supported by ad revenue or sales of any kind.
+    </p>
   </Message>
 </Layout>;