Add prettier support

Add prettier and bind it with eslint.
Also add pre-commit hook to prettify before commit

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

src/components/alert-dialog.js

@@ -9,7 +9,15 @@ import {
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function AlertDialog({open, cancelHandler, acceptHandler, body, title, cancelComponent, acceptComponent}) {
+function AlertDialog({
+  open,
+  cancelHandler,
+  acceptHandler,
+  body,
+  title,
+  cancelComponent,
+  acceptComponent,
+}) {
   return (
     <Dialog
       open={open}
@@ -17,28 +25,28 @@ function AlertDialog({open, cancelHandler, acceptHandler, body, title, cancelCom
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
     >
-      <DialogTitle
-        id="alert-dialog-title">{title}</DialogTitle>
+      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
       <DialogContent>
         <DialogContentText id="alert-dialog-description">
           {body}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        {
-          acceptHandler && (
-            <Button onClick={acceptHandler} color="primary">
-              {acceptComponent}
-            </Button>
-          )
-        }
-        {
-          cancelHandler && (
-            <Button onClick={cancelHandler} color="secondary" variant="contained" autoFocus>
-              {cancelComponent}
-            </Button>
-          )
-        }
+        {acceptHandler && (
+          <Button onClick={acceptHandler} color="primary">
+            {acceptComponent}
+          </Button>
+        )}
+        {cancelHandler && (
+          <Button
+            onClick={cancelHandler}
+            color="secondary"
+            variant="contained"
+            autoFocus
+          >
+            {cancelComponent}
+          </Button>
+        )}
       </DialogActions>
     </Dialog>
   );

src/components/device-search.js

@@ -1,5 +1,5 @@
-import {InputAdornment, makeStyles, TextField} from '@material-ui/core';
-import {fade} from '@material-ui/core/styles';
+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';
@@ -29,22 +29,18 @@ function SearchTextField(props) {
   return (
     <TextField
       variant="outlined"
-      label={
-        <div className="search-label">
-          {props.labeltext}
-        </div>
-      }
+      label={<div className="search-label">{props.labeltext}</div>}
       disabled={props.disabled}
-      InputProps={
-        {
-          classes,
-          endAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon className={classes.label}/>
-            </InputAdornment>
-          ),
-        }
-      } {...props} />
+      InputProps={{
+        classes,
+        endAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon className={classes.label} />
+          </InputAdornment>
+        ),
+      }}
+      {...props}
+    />
   );
 }
 

src/components/error-snackbar.js

@@ -23,7 +23,7 @@ const SnackBarStyles = makeStyles(theme => ({
   },
 }));
 
-function ErrorSnackBar({open, closeHandle, errorMessage}) {
+function ErrorSnackBar({ open, closeHandle, errorMessage }) {
   const classes = SnackBarStyles();
   return (
     <Snackbar
@@ -43,15 +43,18 @@ function ErrorSnackBar({open, closeHandle, errorMessage}) {
         aria-describedby="client-snackbar"
         message={
           <span id="client-snackbar" className={classes.message}>
-            <ErrorIcon className={classes.icon}/>
-            {errorMessage ||
-                'An unexpected error occurred. Please try again'}
+            <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
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={closeHandle}
+          >
+            <CloseIcon />
           </IconButton>,
         ]}
       />

src/components/header.js

@@ -14,12 +14,11 @@ import {
   Toolbar,
   Typography,
 } from '@material-ui/core';
-import {useTranslation} from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 
 export default function Header() {
-
-  const {t, i18n} = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const [value, setValue] = React.useState('en');
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -41,13 +40,19 @@ export default function Header() {
   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="#">
+        <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/>
+          <LanguageIcon />
         </Button>
         <Popper
           id={id}
@@ -56,22 +61,28 @@ export default function Header() {
           transition
           disablePortal={true}
         >
-          {({TransitionProps}) => (
+          {({ TransitionProps }) => (
             <Fade {...TransitionProps} timeout={350}>
               <Paper className="language-selector-popper">
                 <FormControl component="fieldset">
                   <FormLabel component="legend">Change Language</FormLabel>
-                  <br/>
+                  <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')}/>
+                    <FormControlLabel
+                      value="en"
+                      control={<Radio />}
+                      label={t('English')}
+                    />
+                    <FormControlLabel
+                      value="de"
+                      control={<Radio />}
+                      label={t('German')}
+                    />
                   </RadioGroup>
                 </FormControl>
               </Paper>