Add ESLint to maintain code style. Add pre-commit hook to lint prior.

ESLint is used with the standard react plugin. It detects all kinds of
issues ranging from misspells, indentation, variable-naming, etc.
A pre-commit hook is added to git. Prior commiting, ESlint will run
to validate that everything is OK and the user will have the option
to fix it.

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>

.eslintignore

@@ -0,0 +1 @@
+src/serviceWorker.js

.eslintrc.yml

@@ -0,0 +1,34 @@
+env:
+  browser: true
+  es6: true
+  jest: true
+extends:
+  - 'eslint:recommended'
+  - 'plugin:react/recommended'
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+parser: 'babel-eslint'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 2018
+  sourceType: module
+plugins:
+  - react
+settings:
+  react:
+    version: 'detect'
+rules:
+  indent:
+    - error
+    - 2
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - single
+  semi:
+    - error
+    - always

package.json

@@ -24,7 +24,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "yarn run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint src/ --ext .js --fix"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -40,5 +41,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.2",
+    "eslint": "^6.1.0",
+    "eslint-plugin-react": "^7.14.2",
+    "prop-types": "latest",
+    "typescript": "^3.5.3"
   }
 }

src/components/alert-dialog.js

@@ -0,0 +1,50 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@material-ui/core';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function AlertDialog({open, cancelHandler, acceptHandler, text, title, cancelComponent, acceptComponent}) {
+  return (
+    <Dialog
+      open={open}
+      onClose={cancelHandler}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle
+        id="alert-dialog-title">{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {text}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={acceptHandler} color="primary">
+          {acceptComponent}
+        </Button>
+        <Button onClick={cancelHandler} color="secondary"
+          variant="contained" autoFocus>
+          {cancelComponent}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+AlertDialog.propTypes = {
+  open: PropTypes.boolean,
+  cancelHandler: PropTypes.func,
+  acceptHandler: PropTypes.func,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  cancelComponent: PropTypes.elementType,
+  acceptComponent: PropTypes.elementType,
+};
+
+export default AlertDialog;

src/components/device-search.js

@@ -0,0 +1,54 @@
+import {InputAdornment, makeStyles, TextField} from '@material-ui/core';
+import {fade} from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const useStylesSearch = makeStyles(theme => ({
+  root: {
+    borderColor: '#e2e2e1',
+    overflow: 'hidden',
+    margin: 0,
+    borderRadius: 4,
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    '&:hover': {
+      borderColor: fade(theme.palette.primary.main, 0.25),
+    },
+    '&$focused': {
+      backgroundColor: '#fff',
+      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  focused: {},
+}));
+
+function SearchTextField(props) {
+  const classes = useStylesSearch();
+
+  return (
+    <TextField
+      variant="outlined"
+      label={
+        <div className="search-label">
+          {props.labeltext}
+        </div>
+      }
+      InputProps={
+        {
+          classes,
+          endAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon className={classes.label}/>
+            </InputAdornment>
+          ),
+        }
+      } {...props} />
+  );
+}
+
+SearchTextField.propTypes = {
+  labeltext: PropTypes.string,
+};
+
+export default SearchTextField;

src/components/error-snackbar.js

@@ -0,0 +1,68 @@
+import {
+  IconButton,
+  makeStyles,
+  Snackbar,
+  SnackbarContent,
+} from '@material-ui/core';
+import ErrorIcon from '@material-ui/icons/Error';
+import CloseIcon from '@material-ui/icons/Close';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SnackBarStyles = makeStyles(theme => ({
+  error: {
+    backgroundColor: theme.palette.error.dark,
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: '20px',
+    fontSize: 20,
+  },
+}));
+
+function ErrorSnackBar({open, closeHandle, errorMessage}) {
+  const classes = SnackBarStyles();
+  return (
+    <Snackbar
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'left',
+      }}
+      open={open}
+      autoHideDuration={6000}
+      onClose={closeHandle}
+      ContentProps={{
+        'aria-describedby': 'message-id',
+      }}
+    >
+      <SnackbarContent
+        className={classes.error}
+        aria-describedby="client-snackbar"
+        message={
+          <span id="client-snackbar" className={classes.message}>
+            <ErrorIcon className={classes.icon}/>
+            {errorMessage ||
+                'An unexpected error occurred. Please try again'}
+          </span>
+        }
+        action={[
+          <IconButton key="close" aria-label="Close" color="inherit"
+            onClick={closeHandle}>
+            <CloseIcon/>
+          </IconButton>,
+        ]}
+      />
+    </Snackbar>
+  );
+}
+
+ErrorSnackBar.propTypes = {
+  open: PropTypes.boolean,
+  closeHandle: PropTypes.func,
+  errorMessage: PropTypes.string,
+};
+
+export default ErrorSnackBar;

src/containers/home/home.js

@@ -6,16 +6,9 @@ import {
   CircularProgress,
   ClickAwayListener,
   Container,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
   FormControl,
   Grid,
-  IconButton,
   Input,
-  InputAdornment,
   InputLabel,
   List,
   ListItem,
@@ -24,123 +17,27 @@ import {
   OutlinedInput,
   Paper,
   Select,
-  Snackbar,
-  SnackbarContent,
   Tab,
   Tabs,
-  TextField,
   Tooltip,
   Typography,
 } from '@material-ui/core';
-import {fade, makeStyles} from '@material-ui/core/styles';
-
-import SearchIcon from '@material-ui/icons/Search';
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
 import WarningIcon from '@material-ui/icons/Warning';
 import BuildIcon from '@material-ui/icons/Build';
-import CloseIcon from '@material-ui/icons/Close';
-import ErrorIcon from '@material-ui/icons/Error';
 import './home.scss';
 import {withTranslation} from 'react-i18next';
 import FuzzySet from 'fuzzyset.js';
 
 import DataService from '../../services/data';
 
+import AlertDialog from '../../components/alert-dialog';
+import ErrorSnackBar from '../../components/error-snackbar';
+import SearchTextField from '../../components/device-search';
+import PropTypes from 'prop-types';
+
 const buildStatusCheckInterval = 5000;
 
-const useStylesSearch = makeStyles(theme => ({
-  root: {
-    borderColor: '#e2e2e1',
-    overflow: 'hidden',
-    margin: 0,
-    borderRadius: 4,
-    transition: theme.transitions.create(['border-color', 'box-shadow']),
-    '&:hover': {
-      borderColor: fade(theme.palette.primary.main, 0.25),
-    },
-    '&$focused': {
-      backgroundColor: '#fff',
-      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
-      borderColor: theme.palette.primary.main,
-    },
-  },
-  focused: {},
-}));
-
-const SnackBarStyles = makeStyles(theme => ({
-  error: {
-    backgroundColor: theme.palette.error.dark,
-  },
-  message: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  icon: {
-    marginRight: '20px',
-    fontSize: 20,
-  },
-}));
-
-function ErrorSnackBar({open, closeHandle, errorMessage}) {
-  const classes = SnackBarStyles();
-  return (
-      <Snackbar
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          open={open}
-          autoHideDuration={6000}
-          onClose={closeHandle}
-          ContentProps={{
-            'aria-describedby': 'message-id',
-          }}
-      >
-        <SnackbarContent
-            className={classes.error}
-            aria-describedby="client-snackbar"
-            message={
-              <span id="client-snackbar" className={classes.message}>
-                <ErrorIcon className={classes.icon}/>
-                {errorMessage ||
-                'An unexpected error occurred. Please try again'}
-              </span>
-            }
-            action={[
-              <IconButton key="close" aria-label="Close" color="inherit"
-                          onClick={closeHandle}>
-                <CloseIcon/>
-              </IconButton>,
-            ]}
-        />
-      </Snackbar>
-  );
-}
-
-function SearchTextField(props) {
-  const classes = useStylesSearch();
-
-  return (
-      <TextField
-          variant="outlined"
-          label={
-            <div className="search-label">
-              {props.labeltext}
-            </div>
-          }
-          InputProps={
-            {
-              classes,
-              endAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon className={classes.label}/>
-                  </InputAdornment>
-              ),
-            }
-          } {...props} />
-  );
-}
-
 function TabContainer({children, dir}) {
   return (
     <Typography component="div" dir={dir} style={{padding: '20px 0 0'}}>
@@ -149,33 +46,10 @@ function TabContainer({children, dir}) {
   );
 }
 
-function AlertDialog({open, cancelHandler, acceptHandler, text, title, cancelComponent, acceptComponent}) {
-  return (
-      <Dialog
-          open={open}
-          onClose={cancelHandler}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle
-            id="alert-dialog-title">{title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            {text}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={acceptHandler} color="primary">
-            {acceptComponent}
-          </Button>
-          <Button onClick={cancelHandler} color="secondary"
-                  variant="contained" autoFocus>
-            {cancelComponent}
-          </Button>
-        </DialogActions>
-      </Dialog>
-  );
-}
+TabContainer.propTypes = {
+  children: PropTypes.elementType,
+  dir: PropTypes.any,
+};
 
 class Home extends React.Component {
 
@@ -323,7 +197,7 @@ class Home extends React.Component {
     this.basicInterface = val;
   };
 
-  downloadingImageIndicatorShow = (i) => {
+  downloadingImageIndicatorShow = () => {
     this.setState({
       downloading: true,
     });
@@ -367,7 +241,7 @@ class Home extends React.Component {
     }
   };
 
-  closeConfirmBuildDialog = (v) => {
+  closeConfirmBuildDialog = () => {
     this.confirmingBuild = false;
   };
 
@@ -405,8 +279,8 @@ class Home extends React.Component {
       request_hash);
     if (buildStatusResponse.status === 202) {
       this.checkBuildStatus = setTimeout(
-          () => {
-            this.buildImageCheck(request_hash);
+        async () => {
+          await this.buildImageCheck(request_hash);
         }, buildStatusCheckInterval,
       );
     } else if (buildStatusResponse.status === 200) {
@@ -423,7 +297,7 @@ class Home extends React.Component {
     this.closeConfirmBuildDialog();
     const board = this.state.device.id;
     const packages = this.state.packages;
-    const target = this.state.device.target + '/' + this.state.device.subtarget;
+    const target = this.state.device['target'] + '/' + this.state.device['subtarget'];
     const version = this.state.release;
     this.setState({
       isBuilding: true,
@@ -524,7 +398,7 @@ class Home extends React.Component {
                     <Paper elevation={4} className="search-results">
                       <List>
                         {
-                            this.state.searchResults.map((res, index) => {
+                          this.state.searchResults.map((res) => {
                             return (
                               <ListItem
                                 key={res}
@@ -734,4 +608,8 @@ class Home extends React.Component {
   }
 }
 
+Home.propTypes = {
+  t: PropTypes.func
+};
+
 export default withTranslation()(Home);

src/services/data.js

@@ -3,6 +3,7 @@ import axios from 'axios';
 const base = 'https://cors-anywhere.herokuapp.com/https://mwarning.de/misc/json/bin';
 
 class DataService {
+
   getDevicesData = axios.get(
     `${base}/overview.json`)
     .then(res => res.data);
@@ -34,7 +35,7 @@ class DataService {
       response.isBuilt = res.status === 202 && res.data.files !== undefined;
       response.status = res.status;
       if (response.isBuilt) {
-        response = {...response, data: res.data}
+        response = {...response, data: res.data};
       }
     });
     return response;