Add ESLint & Run it against the system (#4470)

webclient/src/forms/CardImportForm/CardImportForm.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Form, Field, reduxForm} from 'redux-form'
+import { Form, Field, reduxForm } from 'redux-form'
 
 import Button from '@material-ui/core/Button';
 import Stepper from '@material-ui/core/Stepper';
@@ -16,7 +16,7 @@ import { FormKey } from 'types';
 import './CardImportForm.css';
 
 const CardImportForm = (props) => {
-  const { handleSubmit, onSubmit:onClose } = props;
+  const { handleSubmit, onSubmit: onClose } = props;
 
   const [loading, setLoading] = useState(false);
   const [activeStep, setActiveStep] = useState(0);
@@ -25,7 +25,9 @@ const CardImportForm = (props) => {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    if (loading) { setError(null); }
+    if (loading) {
+      setError(null);
+    }
   }, [loading])
 
   const steps = ['Imports sets', 'Save sets', 'Import tokens', 'Finished'];
@@ -50,7 +52,7 @@ const CardImportForm = (props) => {
       })
       .catch(({ message }) => setError(message))
       .finally(() => setLoading(false));
-  }
+  };
 
   const handleCardSave = async () => {
     setLoading(true);
@@ -60,13 +62,13 @@ const CardImportForm = (props) => {
       await SetDTO.bulkAdd(importedSets);
 
       handleNext();
-    } catch(e) {
+    } catch (e) {
       console.error(e);
       setError('Failed to save cards');
     }
 
     setLoading(false);
-  }
+  };
 
   const handleTokenDownload = ({ tokenDownloadUrl }) => {
     setLoading(true);
@@ -78,7 +80,7 @@ const CardImportForm = (props) => {
       })
       .catch(({ message }) => setError(message))
       .finally(() => setLoading(false));
-  }
+  };
 
   const getStepContent = (stepIndex) => {
     switch (stepIndex) {
@@ -172,7 +174,7 @@ const CardImportForm = (props) => {
       ) }
     </div>
   );
-}
+};
 
 const BackButton = ({ click, disabled }) => (
   <Button onClick={click} disabled={disabled}>Go Back</Button>
@@ -182,7 +184,7 @@ const ErrorMessage = ({ error }) => {
   return error && (
     <div className='error'>{error}</div>
   );
-}
+};
 
 const CardsImported = ({ cards, sets }) => {
   const items = [
@@ -192,11 +194,11 @@ const CardsImported = ({ cards, sets }) => {
       </div>
     ),
 
-    ( <div className='spacer' /> ),
+    (<div className='spacer' />),
 
     ...sets.map(set => (
       <div>{set.name}: {set.cards.length} cards imported</div>
-    ) )
+    ))
   ];
 
   return (

webclient/src/forms/ConnectForm/ConnectForm.tsx

@@ -1,15 +1,15 @@
 // eslint-disable-next-line
 import React, { useState } from "react";
-import { connect } from "react-redux";
-import { Form, Field, reduxForm, change} from "redux-form"
+import { connect } from 'react-redux';
+import { Form, Field, reduxForm, change } from 'redux-form'
 
-import Button from "@material-ui/core/Button";
+import Button from '@material-ui/core/Button';
 
-import { InputField } from "components";
+import { InputField } from 'components';
 import { FormKey, KnownHost, KnownHosts } from 'types';
 
-import "./ConnectForm.css";
-import { Select, MenuItem } from "@material-ui/core";
+import './ConnectForm.css';
+import { Select, MenuItem } from '@material-ui/core';
 
 const ConnectForm = (props) => {
   const { handleSubmit, dispatch } = props;
@@ -17,23 +17,23 @@ const ConnectForm = (props) => {
 
   const handleChange = (event) => {
     setKnownHosts(event.target.value);
-    dispatch(change(FormKey.CONNECT,'host', KnownHosts[event.target.value].host));
-    dispatch(change(FormKey.CONNECT,'port', KnownHosts[event.target.value].port))
+    dispatch(change(FormKey.CONNECT, 'host', KnownHosts[event.target.value].host));
+    dispatch(change(FormKey.CONNECT, 'port', KnownHosts[event.target.value].port))
   };
 
   return (
     <Form className="connectForm" onSubmit={handleSubmit}>
       <div className="connectForm-item">
         <Select
-              labelId="selectedKnownHosts-label"
-              id="selectedKnownHosts-label"
-              className="selectKnownHosts-items"
-              value={knownHosts}
-              fullWidth={true}
-              onChange={handleChange}
-            >
-            <MenuItem value={KnownHost.ROOSTER}>{KnownHost.ROOSTER}</MenuItem>
-            <MenuItem value={KnownHost.TETRARCH}>{KnownHost.TETRARCH}</MenuItem>
+          labelId="selectedKnownHosts-label"
+          id="selectedKnownHosts-label"
+          className="selectKnownHosts-items"
+          value={knownHosts}
+          fullWidth={true}
+          onChange={handleChange}
+        >
+          <MenuItem value={KnownHost.ROOSTER}>{KnownHost.ROOSTER}</MenuItem>
+          <MenuItem value={KnownHost.TETRARCH}>{KnownHost.TETRARCH}</MenuItem>
         </Select>
       </div>
       <div className="connectForm-item">
@@ -53,7 +53,7 @@ const ConnectForm = (props) => {
       </Button>
     </Form>
   );
-}
+};
 
 const propsMap = {
   form: FormKey.CONNECT
@@ -63,8 +63,8 @@ const mapStateToProps = () => ({
   initialValues: {
     // host: "mtg.tetrarch.co/servatrice",
     // port: "443"
-    host: "server.cockatrice.us",
-    port: "4748"
+    host: 'server.cockatrice.us',
+    port: '4748'
   }
 });
 

webclient/src/forms/LoginForm/LoginForm.tsx

@@ -1,21 +1,21 @@
 // eslint-disable-next-line
 import React from "react";
-import { connect } from "react-redux";
-import { Form, Field, reduxForm, change } from "redux-form"
+import { connect } from 'react-redux';
+import { Form, Field, reduxForm, change } from 'redux-form'
 
-import Button from "@material-ui/core/Button";
+import Button from '@material-ui/core/Button';
 
-import { InputField, KnownHosts } from "components";
+import { InputField, KnownHosts } from 'components';
 // import { ServerDispatch } from "store";
 import { FormKey } from 'types';
 
-import "./LoginForm.css";
+import './LoginForm.css';
 
 const LoginForm = (props) => {
   const { dispatch, handleSubmit } = props;
 
   const forgotPassword = () => {
-    console.log("Show recover password dialog, then AuthService.forgotPasswordRequest");
+    console.log('Show recover password dialog, then AuthService.forgotPasswordRequest');
   };
 
   const onHostChange = ({ host, port }) => {
@@ -45,17 +45,25 @@ const LoginForm = (props) => {
       </Button>
     </Form>
   );
-}
+};
 
 const propsMap = {
   form: FormKey.LOGIN,
   validate: values => {
     const errors: any = {};
 
-    if (!values.user) errors.user = 'Required';
-    if (!values.pass) errors.pass = 'Required';
-    if (!values.host) errors.host = 'Required';
-    if (!values.port) errors.port = 'Required';
+    if (!values.user) {
+      errors.user = 'Required';
+    }
+    if (!values.pass) {
+      errors.pass = 'Required';
+    }
+    if (!values.host) {
+      errors.host = 'Required';
+    }
+    if (!values.port) {
+      errors.port = 'Required';
+    }
 
     return errors;
   }

webclient/src/forms/RegisterForm/RegisterForm.tsx

@@ -5,7 +5,7 @@ import { Form, Field, reduxForm, change } from 'redux-form'
 
 import Button from '@material-ui/core/Button';
 
-import { InputField, KnownHosts  } from 'components';
+import { InputField, KnownHosts } from 'components';
 import { FormKey } from 'types';
 
 import './RegisterForm.css';
@@ -51,7 +51,7 @@ const RegisterForm = (props) => {
 
     </Form >
   );
-}
+};
 
 const propsMap = {
   form: FormKey.REGISTER,
@@ -59,7 +59,7 @@ const propsMap = {
 
 const mapStateToProps = () => ({
   initialValues: {
-    
+
   }
 });
 

webclient/src/forms/SearchForm/SearchForm.tsx

@@ -1,16 +1,16 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
-import { connect } from "react-redux";
-import { Form, Field, reduxForm } from "redux-form"
+import { connect } from 'react-redux';
+import { Form, Field, reduxForm } from 'redux-form'
 
-import Button from "@material-ui/core/Button";
-import Divider from "@material-ui/core/Divider";
-import Paper from "@material-ui/core/Paper";
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
 
-import { InputField, CheckboxField } from "components";
-import { FormKey } from "types";
+import { InputField, CheckboxField } from 'components';
+import { FormKey } from 'types';
 
-import "./SearchForm.css";
+import './SearchForm.css';
 
 const SearchForm = ({ handleSubmit }) => (
   <Paper className="log-search">
@@ -35,7 +35,7 @@ const SearchForm = ({ handleSubmit }) => (
         <Field label="Rooms" name="logLocation.room" component={CheckboxField} />
         <Field label="Games" name="logLocation.game" component={CheckboxField} />
         <Field label="Chats" name="logLocation.chat" component={CheckboxField} />
-     </div>
+      </div>
       <Divider />
       <div className="log-search__form-item">
         <span>Date Range: Coming Soon</span>
@@ -57,7 +57,7 @@ const propsMap = {
 };
 
 const mapStateToProps = () => ({
-  
+
 });
 
 export default connect(mapStateToProps)(reduxForm(propsMap)(SearchForm));