#8 Linting Auto-Fixes

package.json

@@ -21,7 +21,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "eslintConfig": {
     "extends": "react-app"

src/components/AddGroup.js

@@ -36,7 +36,7 @@ export const AddGroup = withRouter((props) => {
         }}
       >
         <div className="form-group">
-          <label for="inputCommunityName">New community name</label>
+          <label htmlFor="inputCommunityName">New community name</label>
           <input type="text" className="form-control" id="inputCommunityName"
             placeholder="Enter community name"
             ref={node => {
@@ -45,7 +45,7 @@ export const AddGroup = withRouter((props) => {
           <small className="form-text text-danger">* required</small>
         </div>
         <div className="form-group">
-          <label for="inputCommunityDescription">Description</label>
+          <label htmlFor="inputCommunityDescription">Description</label>
           <input type="text" className="form-control" id="inputCommunityName"
             placeholder="Enter community description"
             ref={node => {

src/components/AddResponse.js

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { withRouter } from "react-router"
 import { useMutation } from '@apollo/react-hooks';
 import { errorHandler } from '../services/graphql/errorHandler'
-import { CREATE_POST } from '../services/graphql/queries';
-import { THREAD } from '../services/graphql/queries';
+import { CREATE_POST , THREAD } from '../services/graphql/queries';
+
 
 export const AddResponse = withRouter((props) => {
   const [showResponseForm, setShowResponseForm] = useState(false)
@@ -50,7 +50,7 @@ export const AddResponse = withRouter((props) => {
                       onClick={() => setShowResponseForm(!showResponseForm)}>share your response</button>
   }
 
-  let body = <div className="mx-0 mb-3">
+  const body = <div className="mx-0 mb-3">
     {responseForm}
   </div>
 

src/components/ContactForm.js

@@ -4,7 +4,7 @@ export const ContactForm = (props) => {
   return (
     <div className="bg-white rounded shadow-sm ">
       <div className="m-3">
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeVV5hF5Lf9uVW5Utd0kI_QYmkzlOexun4vpd-0iHj7ExMDVQ/viewform?embedded=true" className="container-fluid" width="100%" height="1013" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeVV5hF5Lf9uVW5Utd0kI_QYmkzlOexun4vpd-0iHj7ExMDVQ/viewform?embedded=true" className="container-fluid" width="100%" height="1013" frameBorder="0" marginHeight="0" marginWidth="0">Loading…</iframe>
       </div>
     </div>
   );

src/components/GroupPreview.js

@@ -4,24 +4,24 @@ import { Thread } from './Thread';
 
 export const GroupPreview = withRouter((props) => {
   let activeConversations
-  let threadTitles = []
+  const threadTitles = []
   if (props.threads.length > 0) {
     for (let i=0; i < props.threads.length && i < 3; i++) {
       threadTitles.push(
-        <li class="list-group-item">{props.threads[i].title}</li>
+        <li className="list-group-item">{props.threads[i].title}</li>
       )
     }
     activeConversations = <div>
-      <div class="card-header text-center">
+      <div className="card-header text-center">
         Active Conversations
       </div>
-      <ul class="list-group list-group-flush">
+      <ul className="list-group list-group-flush">
         {threadTitles}
       </ul>
     </div>
   }
 
-  let url = "/community/" + props.groupId
+  const url = `/community/${  props.groupId}`
   return (
     <div className="card col-sm m-3">
       <div className="card-body">

src/components/Groups.js

@@ -18,7 +18,7 @@ export const Groups = withRouter((props) => {
   if (error) return <p>Error :(</p>;
 
   if (data.groups.length > 0) {
-    let groupCards = []
+    const groupCards = []
     data.groups.forEach((group, i) =>{
       groupCards.push(<GroupPreview
                   key={group.id}
@@ -28,7 +28,7 @@ export const Groups = withRouter((props) => {
                   threads={group.threads} />)
       if((i+1) % 3 == 0){
         groupCards.push(
-          <div class="w-100"></div>
+          <div className="w-100" />
         )
       }
     });
@@ -39,11 +39,11 @@ export const Groups = withRouter((props) => {
         </div>
       </div>
     );
-  } else {
+  } 
     return (
       <div>
         <h1>welcome.</h1>
       </div>
     )
-  }
+
 });

src/components/Index.js

@@ -9,7 +9,7 @@ export const Index = withRouter((props) => {
       <Header />
       <p className="lead text-center">Hawthorn is a place for communities;</p>
       <p className="text-center">a platform with commitment to social justice, premised on mutual support and owned by you, the community</p>
-      <div class="alert alert-warning" role="alert">
+      <div className="alert alert-warning" role="alert">
         <h1 className="display-4 text-center">Hawthorn's Transition to Small Private Groups</h1>
         <p className="text-center"><u>Updated January 20, 2020</u></p>
         <p className="text-center">

src/components/Navigation.js

@@ -2,25 +2,25 @@ import React from 'react'
 
 export const Navigation = (props) => {
   return (
-    <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
-      <a class="navbar-brand" href="/">Hawthorn</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#primaryNavigation" aria-controls="primaryNavigation" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
+    <nav className="navbar navbar-expand-md navbar-light fixed-top bg-light">
+      <a className="navbar-brand" href="/">Hawthorn</a>
+      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#primaryNavigation" aria-controls="primaryNavigation" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon" />
       </button>
 
-      <div class="collapse navbar-collapse" id="primaryNavigation">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item">
-            <a class="nav-link" href="/communities">Browse Communities</a>
+      <div className="collapse navbar-collapse" id="primaryNavigation">
+        <ul className="navbar-nav mr-auto">
+          <li className="nav-item">
+            <a className="nav-link" href="/communities">Browse Communities</a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/about">About Hawthorn</a>
+          <li className="nav-item">
+            <a className="nav-link" href="/about">About Hawthorn</a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/code-of-conduct">Code of Conduct</a>
+          <li className="nav-item">
+            <a className="nav-link" href="/code-of-conduct">Code of Conduct</a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/contact-us">Contact Us</a>
+          <li className="nav-item">
+            <a className="nav-link" href="/contact-us">Contact Us</a>
           </li>
           <li className="nav-item dropdown">
             <a className="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Account</a>

src/components/Register.js

@@ -41,7 +41,7 @@ const Register = withRouter((props) => {
       >
         <div className="form-row">
           <div className="col-md-4 mb-3">
-            <label for="inputUsername">Username</label>
+            <label htmlFor="inputUsername">Username</label>
             <div className="input-group">
               <div className="input-group-prepend">
                 <span className="input-group-text" id="inputGroupPrepend">@</span>
@@ -52,7 +52,7 @@ const Register = withRouter((props) => {
             </div>
           </div>
           <div className="col-md-4 mb-3">
-            <label for="inputEmail">Email</label>
+            <label htmlFor="inputEmail">Email</label>
             <div className="input-group">
               <input type="email" className="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" required ref={node => {
                   email = node;
@@ -62,7 +62,7 @@ const Register = withRouter((props) => {
           </div>
         </div>
         <div className="form-group">
-          <label for="inputEmail">Password</label>
+          <label htmlFor="inputEmail">Password</label>
           <input type="password" className="form-control" id="inputEmail" placeholder="Password" required ref={node => {
               password = node;
             }}/>

src/components/Routes.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { withRouter } from "react-router"
 import { useQuery } from '@apollo/react-hooks';
+import { Switch, Route } from "react-router-dom";
 import { errorHandler } from '../services/graphql/errorHandler'
 import { FUSIONAUTH_CONFIG } from '../services/graphql/queries'
-import { Switch, Route } from "react-router-dom";
 import { About } from './About';
 import Account from './Account';
 import { CodeOfConduct } from './CodeOfConduct';
@@ -20,20 +20,20 @@ import { Thread } from './Thread';
 
 export const Routes = withRouter((props) => {
   // Retrieve authorization config from the server so we can build auth URIs
-  var { loading, error, data } = useQuery(FUSIONAUTH_CONFIG,
+  const { loading, error, data } = useQuery(FUSIONAUTH_CONFIG,
   {
     onError(error) {
        errorHandler(error, props.history)
     }
   })
   if (loading) {
     return <p>Loading</p>
-  } else if (error) {
+  } if (error) {
     return <p>An unexpected error occurred, please come back later</p>
   }
   if (loading) {
     return <p>Loading</p>
-  } else if (error) {
+  } if (error) {
     return <p>An unexpected error occurred, please come back later</p>
   }
   const configuration = {

src/components/Thread.js

@@ -45,8 +45,8 @@ export const Thread = withRouter((props) => {
           <h3 className="text-center">
           <button
             type="button"
-            className={"btn btn-link btn-lg"}
-            onClick={() => {props.history.push('/community/' + data.thread.group.id)}}>
+            className="btn btn-link btn-lg"
+            onClick={() => {props.history.push(`/community/${  data.thread.group.id}`)}}>
             &larr; back to '{data.thread.group.name}'
             </button>
           </h3>
@@ -59,11 +59,11 @@ export const Thread = withRouter((props) => {
         </div>
       </div>
     )
-  } else {
+  } 
     return (
       <div className="border-bottom border-gray m-3">
         <p>Thread not found</p>
       </div>
     )
-  }
+
 })

src/components/ThreadPreview.js

@@ -3,7 +3,7 @@ import { withRouter } from "react-router"
 import { Post } from './Post';
 
 export const ThreadPreview = withRouter((props) => {
-  let posts = <div className="ml-0">
+  const posts = <div className="ml-0">
                 {/* Limit post content for preview */}
                 {props.posts.slice(0, 2).map((post) =>
                   <Post
@@ -17,8 +17,8 @@ export const ThreadPreview = withRouter((props) => {
       <h4>{props.title}</h4>
       <button
         type="button"
-        className={"btn btn-outline-primary"}
-        onClick={() => {props.history.push('/thread/' + props.threadId)}}>
+        className="btn btn-outline-primary"
+        onClick={() => {props.history.push(`/thread/${  props.threadId}`)}}>
         join conversation
         </button>
       {posts}

src/components/Threads.js

@@ -18,9 +18,9 @@ export const Threads = withRouter((props) => {
         </ul>
       </div>
     );
-  } else {
+  } 
     return (
       <p className="m-3">This is a new community.  Start the first conversation if you have something on your mind.</p>
     )
-  }
+
 })

src/configuration/configuration.js

@@ -1 +1 @@
-export const configuration = require ('./configuration.json');
+export default require ('./configuration.json');

src/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.render((
   <BrowserRouter>

src/serviceWorker.js

@@ -20,40 +20,6 @@ const isLocalhost = Boolean(
     )
 );
 
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
@@ -126,10 +92,44 @@ function checkValidServiceWorker(swUrl, config) {
     });
 }
 
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister();
     });
   }
-}
+}

src/services/graphql/errorHandler.js

@@ -1,4 +1,4 @@
-export const errorHandler = (error, history) => {
+export default (error, history) => {
   if (error.graphQLErrors) {
     error.graphQLErrors.forEach(graphQLError => {
       console.log('graphQLError', graphQLError)