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

webclient/src/components/CardImportDialog/CardImportDialog.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -33,4 +33,4 @@ const CardImportDialog = ({ classes, handleClose, isOpen }: any) => {
   );
 };
 
-export default CardImportDialog;
+export default CardImportDialog;

webclient/src/components/CheckboxField/CheckboxField.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 const CheckboxField = ({ input, label }) => {
   const { value, onChange } = input;

webclient/src/components/Guard/AuthGuard.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { connect } from "react-redux";
-import { Redirect } from "react-router-dom";
+import React from 'react';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
 
-import { ServerSelectors } from "store";
-import { RouteEnum } from "types";
+import { ServerSelectors } from 'store';
+import { RouteEnum } from 'types';
 
-import { AuthenticationService } from "api";
+import { AuthenticationService } from 'api';
 
 const AuthGuard = ({ state }: AuthGuardProps) => {
   return !AuthenticationService.isConnected(state)

webclient/src/components/Guard/ModGuard.tsx

@@ -1,18 +1,18 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { Redirect } from "react-router-dom";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
 
-import { ServerSelectors } from "store";
-import { User } from "types";
+import { ServerSelectors } from 'store';
+import { User } from 'types';
 
-import { AuthenticationService } from "api";
-import { RouteEnum } from "types";
+import { AuthenticationService } from 'api';
+import { RouteEnum } from 'types';
 
 class ModGuard extends Component<ModGuardProps> {
   render() {
     return !AuthenticationService.isModerator(this.props.user)
       ? <Redirect from="*" to={RouteEnum.SERVER} />
-      : "";
+      : '';
   }
 };
 
@@ -24,4 +24,4 @@ const mapStateToProps = state => ({
   user: ServerSelectors.getUser(state),
 });
 
-export default connect(mapStateToProps)(ModGuard);
+export default connect(mapStateToProps)(ModGuard);

webclient/src/components/Header/Header.tsx

@@ -1,23 +1,23 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { NavLink, withRouter, generatePath } from "react-router-dom";
-import AppBar from "@material-ui/core/AppBar";
-import IconButton from "@material-ui/core/IconButton";
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
-import Toolbar from "@material-ui/core/Toolbar";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { NavLink, withRouter, generatePath } from 'react-router-dom';
+import AppBar from '@material-ui/core/AppBar';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Toolbar from '@material-ui/core/Toolbar';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import CloseIcon from '@material-ui/icons/Close';
 import MailOutlineRoundedIcon from '@material-ui/icons/MailOutline';
 import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
-import * as _ from "lodash";
+import * as _ from 'lodash';
 
-import { AuthenticationService, RoomsService } from "api";
+import { AuthenticationService, RoomsService } from 'api';
 import { Images } from 'images';
-import {  RoomsSelectors, ServerSelectors } from "store";
-import { Room, RouteEnum, User } from "types";
+import { RoomsSelectors, ServerSelectors } from 'store';
+import { Room, RouteEnum, User } from 'types';
 
-import "./Header.css";
+import './Header.css';
 
 import CardImportDialog from '../CardImportDialog/CardImportDialog';
 
@@ -85,7 +85,7 @@ class Header extends Component<HeaderProps> {
     const { joinedRooms, state, user } = this.props;
     const { anchorEl, showCardImportDialog } = this.state;
 
-    let options = [ ...this.options ];
+    let options = [...this.options];
 
     if (user && AuthenticationService.isModerator(user)) {
       options = [
@@ -183,7 +183,7 @@ class Header extends Component<HeaderProps> {
             </div>
           ) }
         </Toolbar>
-        
+
         <CardImportDialog
           isOpen={showCardImportDialog}
           handleClose={this.closeImportCardWizard}

webclient/src/components/InputAction/InputAction.tsx

@@ -1,11 +1,11 @@
 // eslint-disable-next-line
 import React from "react";
-import { Field } from "redux-form"
-import Button from "@material-ui/core/Button";
+import { Field } from 'redux-form'
+import Button from '@material-ui/core/Button';
 
 import { InputField } from 'components';
 
-import "./InputAction.css";
+import './InputAction.css';
 
 const InputAction = ({ action, label, name }) => (
   <div className="input-action">

webclient/src/components/InputField/InputField.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 import { styled } from '@material-ui/core/styles';
-import TextField from "@material-ui/core/TextField";
+import TextField from '@material-ui/core/TextField';
 import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
 
 import './InputField.css';
@@ -10,14 +10,14 @@ const InputField = ({ input, label, name, autoComplete, type, meta: { touched, e
     { touched && (
       <div className="inputField-validation">
         {
-          ( error &&
+          (error &&
             <ThemedFieldError className="inputField-error">
               {error}
               <ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
             </ThemedFieldError>
           ) ||
 
-          ( warning && <ThemedFieldWarning className="inputField-warning">{warning}</ThemedFieldWarning> )
+          (warning && <ThemedFieldWarning className="inputField-warning">{warning}</ThemedFieldWarning>)
         }
       </div>
     ) }
@@ -44,4 +44,4 @@ const ThemedFieldWarning = styled('div')(({ theme }) => ({
   color: theme.palette.warning.main
 }));
 
-export default InputField;
+export default InputField;

webclient/src/components/Message/CardCallout.tsx

@@ -49,7 +49,7 @@ const CardCallout = ({ name }) => {
 
   return (
     <span className='callout'>
-      <span 
+      <span
         onMouseEnter={handlePopoverOpen}
         onMouseLeave={handlePopoverClose}
       >{card?.name || token?.name?.value || name}</span>
@@ -74,8 +74,8 @@ const CardCallout = ({ name }) => {
             }}
           >
             <div className="callout-card">
-              { card && ( <CardDetails card={card} /> ) }
-              { token && ( <TokenDetails token={token} /> ) }
+              { card && (<CardDetails card={card} />) }
+              { token && (<TokenDetails token={token} />) }
             </div>
           </Popover>
         )

webclient/src/components/Message/Message.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { NavLink, generatePath } from "react-router-dom";
+import { NavLink, generatePath } from 'react-router-dom';
 
 import {
   RouteEnum,
@@ -39,7 +39,7 @@ const ParsedMessage = ({ message }) => {
 
   return (
     <div>
-      { name && ( <strong><PlayerLink name={name} />:</strong> ) }
+      { name && (<strong><PlayerLink name={name} />:</strong>) }
       { messageChunks }
     </div>
   );
@@ -61,7 +61,7 @@ function parseMessage(message) {
 function parseChunks(chunk, index) {
   if (chunk.match(CARD_CALLOUT_REGEX)) {
     const name = chunk.replace(CALLOUT_BOUNDARY_REGEX, '').trim();
-    return ( <CardCallout name={name} key={index}></CardCallout> );
+    return (<CardCallout name={name} key={index}></CardCallout>);
   }
 
   if (chunk.match(URL_REGEX)) {
@@ -80,7 +80,7 @@ function parseUrlChunk(chunk) {
     .filter(urlChunk => !!urlChunk)
     .map((urlChunk, index) => {
       if (urlChunk.match(URL_REGEX)) {
-        return ( <a className='link' href={urlChunk} key={index} target='_blank' rel='noopener noreferrer'>{urlChunk}</a> );
+        return (<a className='link' href={urlChunk} key={index} target='_blank' rel='noopener noreferrer'>{urlChunk}</a>);
       }
 
       return urlChunk;
@@ -95,7 +95,7 @@ function parseMentionChunk(chunk) {
 
       if (mention) {
         const name = mention[0].substr(1);
-        return ( <PlayerLink name={name} label={mention} key={index} /> );
+        return (<PlayerLink name={name} label={mention} key={index} />);
       }
 
       return mentionChunk;

webclient/src/components/RegistrationDialog/RegistrationDialog.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';

webclient/src/components/ScrollToBottomOnChanges/ScrollToBottomOnChanges.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from 'react';
 
 const ScrollToBottomOnChanges = ({ content, changes }) => {
   const messagesEndRef = useRef(null);
 
   // @TODO (2)
   const scrollToBottom = () => {
-    messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+    messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
   }
 
   useEffect(scrollToBottom, [changes]);
@@ -22,4 +22,4 @@ const ScrollToBottomOnChanges = ({ content, changes }) => {
   )
 }
 
-export default ScrollToBottomOnChanges;
+export default ScrollToBottomOnChanges;

webclient/src/components/SelectField/SelectField.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
+import React from 'react';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 
 import './SelectField.css';
 
 const SelectField = ({ input, label, options, value }) => {
-  const id = label + "-select-field";
-  const labelId = id + "-label";
+  const id = label + '-select-field';
+  const labelId = id + '-label';
 
   return (
     <FormControl variant="outlined" margin="dense" className="select-field">
@@ -19,12 +19,12 @@ const SelectField = ({ input, label, options, value }) => {
         value={value}
         { ...input }
       >{
-        options.map((option, index) => (
-          <MenuItem value={index} key={index}> { option } </MenuItem>
-        ))
-      }</Select>
+          options.map((option, index) => (
+            <MenuItem value={index} key={index}> { option } </MenuItem>
+          ))
+        }</Select>
     </FormControl>
   );
 };
 
-export default SelectField;
+export default SelectField;

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -1,10 +1,10 @@
 // eslint-disable-next-line
 import React, { Component, CElement } from "react";
-import { connect } from "react-redux";
-import Grid from "@material-ui/core/Grid";
-import Hidden from "@material-ui/core/Hidden";
+import { connect } from 'react-redux';
+import Grid from '@material-ui/core/Grid';
+import Hidden from '@material-ui/core/Hidden';
 
-import "./ThreePaneLayout.css";
+import './ThreePaneLayout.css';
 
 // @DEPRECATED
 // This component sucks balls, dont use it. It will be removed sooner than later.
@@ -15,14 +15,14 @@ class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
         <Grid container spacing={2} className="grid">
           <Grid item xs={12} md={9} lg={10} className="grid-main">
             <Grid item className={
-              "grid-main__top"
-              + (this.props.fixedHeight ? " fixedHeight" : "")
+              'grid-main__top'
+              + (this.props.fixedHeight ? ' fixedHeight' : '')
             }>
               {this.props.top}
             </Grid>
             <Grid item className={
-              "grid-main__bottom"
-              + (this.props.fixedHeight ? " fixedHeight" : "")
+              'grid-main__bottom'
+              + (this.props.fixedHeight ? ' fixedHeight' : '')
             }>
               {this.props.bottom}
             </Grid>

webclient/src/components/UserDisplay/UserDisplay.tsx

@@ -1,17 +1,17 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
-import { connect } from "react-redux";
-import { NavLink, generatePath } from "react-router-dom";
+import { connect } from 'react-redux';
+import { NavLink, generatePath } from 'react-router-dom';
 
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
 
-import { Images } from "images/Images";
-import { SessionService } from "api";
-import { ServerSelectors } from "store";
-import { RouteEnum, User } from "types";
+import { Images } from 'images/Images';
+import { SessionService } from 'api';
+import { ServerSelectors } from 'store';
+import { RouteEnum, User } from 'types';
 
-import "./UserDisplay.css";
+import './UserDisplay.css';
 
 
 class UserDisplay extends Component<UserDisplayProps, UserDisplayState> {
@@ -117,13 +117,13 @@ class UserDisplay extends Component<UserDisplayProps, UserDisplayState> {
             </NavLink>
             {
               !isABuddy
-                ? ( <MenuItem dense onClick={this.addToBuddyList}>Add to Buddy List</MenuItem> )
-                : ( <MenuItem dense onClick={this.removeFromBuddyList}>Remove From Buddy List</MenuItem> )
+                ? (<MenuItem dense onClick={this.addToBuddyList}>Add to Buddy List</MenuItem>)
+                : (<MenuItem dense onClick={this.removeFromBuddyList}>Remove From Buddy List</MenuItem>)
             }
             {
               !isIgnored
-                ? ( <MenuItem dense onClick={this.addToIgnoreList}>Add to Ignore List</MenuItem> )
-                : ( <MenuItem dense onClick={this.removeFromIgnoreList}>Remove From Ignore List</MenuItem> )
+                ? (<MenuItem dense onClick={this.addToIgnoreList}>Add to Ignore List</MenuItem>)
+                : (<MenuItem dense onClick={this.removeFromIgnoreList}>Remove From Ignore List</MenuItem>)
             }
           </Menu>
         </div>

webclient/src/components/index.ts

@@ -7,8 +7,8 @@ export { default as InputAction } from './InputAction/InputAction';
 export { default as KnownHosts } from './KnownHosts/KnownHosts';
 export { default as Message } from './Message/Message';
 export { default as VirtualList } from './VirtualList/VirtualList';
-export { default as UserDisplay} from './UserDisplay/UserDisplay';
-export { default as ThreePaneLayout }  from './ThreePaneLayout/ThreePaneLayout';
+export { default as UserDisplay } from './UserDisplay/UserDisplay';
+export { default as ThreePaneLayout } from './ThreePaneLayout/ThreePaneLayout';
 export { default as CheckboxField } from './CheckboxField/CheckboxField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/ScrollToBottomOnChanges';
@@ -16,7 +16,7 @@ export { default as RegistrationDialog } from './RegistrationDialog/Registration
 
 // Guards
 export { default as AuthGuard } from './Guard/AuthGuard';
-export { default as ModGuard} from './Guard/ModGuard';
+export { default as ModGuard } from './Guard/ModGuard';
 
 // Dialogs
-export { default as CardImportDialog} from './CardImportDialog/CardImportDialog';
+export { default as CardImportDialog } from './CardImportDialog/CardImportDialog';