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>

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/components/header.js

@@ -39,46 +39,46 @@ export default function Header() {
   const id = open ? 'simple-popper' : undefined;
 
   return (
-      <AppBar position="static">
-        <Toolbar>
-          <Typography edge="start" variant="h6">{t(
-              'OpenWrt Firmware Selector Wizard')}</Typography>
-          <div style={{flexGrow: 1}} />
-          <Button aria-describedby={id} color="secondary" variant="contained"
-                  onClick={openChangeLanguagePopper} href="#">
-            {t('Change Language')} &nbsp;
-            <LanguageIcon/>
-          </Button>
-          <Popper
-              id={id}
-              open={open}
-              anchorEl={anchorEl}
-              transition
-              disablePortal={true}
-          >
-            {({TransitionProps}) => (
-                <Fade {...TransitionProps} timeout={350}>
-                  <Paper className="language-selector-popper">
-                    <FormControl component="fieldset">
-                      <FormLabel component="legend">Change Language</FormLabel>
-                      <br/>
-                      <RadioGroup
-                          aria-label="Language"
-                          name="language"
-                          value={value}
-                          onChange={changeLanguage}
-                      >
-                        <FormControlLabel value="en" control={<Radio/>}
-                                          label={t('English')}/>
-                        <FormControlLabel value="de" control={<Radio/>}
-                                          label={t('German')}/>
-                      </RadioGroup>
-                    </FormControl>
-                  </Paper>
-                </Fade>
-            )}
-          </Popper>
-        </Toolbar>
-      </AppBar>
+    <AppBar position="static">
+      <Toolbar>
+        <Typography edge="start" variant="h6">{t(
+          'OpenWrt Firmware Selector Wizard')}</Typography>
+        <div style={{flexGrow: 1}} />
+        <Button aria-describedby={id} color="secondary" variant="contained"
+          onClick={openChangeLanguagePopper} href="#">
+          {t('Change Language')} &nbsp;
+          <LanguageIcon/>
+        </Button>
+        <Popper
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          transition
+          disablePortal={true}
+        >
+          {({TransitionProps}) => (
+            <Fade {...TransitionProps} timeout={350}>
+              <Paper className="language-selector-popper">
+                <FormControl component="fieldset">
+                  <FormLabel component="legend">Change Language</FormLabel>
+                  <br/>
+                  <RadioGroup
+                    aria-label="Language"
+                    name="language"
+                    value={value}
+                    onChange={changeLanguage}
+                  >
+                    <FormControlLabel value="en" control={<Radio/>}
+                      label={t('English')}/>
+                    <FormControlLabel value="de" control={<Radio/>}
+                      label={t('German')}/>
+                  </RadioGroup>
+                </FormControl>
+              </Paper>
+            </Fade>
+          )}
+        </Popper>
+      </Toolbar>
+    </AppBar>
   );
 }