Fixed linting

10 files changed, 228 insertions, 200 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 8eeedc4b..c55ed6d5 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import {
+  Grid, FormControl, InputLabel, Select, MenuItem,
+} from '@material-ui/core';
 import ReportLayout from './ReportLayout';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
@@ -9,66 +11,61 @@ import { speedFromKnots } from '../common/converter';
 import t from '../common/localization';
 
 const Filter = ({ children, setItems }) => {
-
   const speedUnit = useAttributePreference('speedUnit');
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
+    const query = new URLSearchParams({
+      deviceId, from, to, mail,
+    });
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
       const positions = await response.json();
-      let formattedPositions = positions.map(position => {
-        return {
-          speed: Number(speedFromKnots(position.speed, speedUnit)),
-          altitude: position.altitude,
-          accuracy: position.accuracy,
-          fixTime: formatDate(position.fixTime)
-        }
-      });
+      const formattedPositions = positions.map((position) => ({
+        speed: Number(speedFromKnots(position.speed, speedUnit)),
+        altitude: position.altitude,
+        accuracy: position.accuracy,
+        fixTime: formatDate(position.fixTime),
+      }));
       setItems(formattedPositions);
     }
-  }
+  };
   return (
     <>
       <ReportFilter handleSubmit={handleSubmit} showOnly />
       {children}
     </>
-  )
-}
-
-const ChartType = ({ type, setType }) => {
+  );
+};
 
-  return (
-    <Grid container spacing={3}>
-      <Grid item xs={12} sm={6}>
-        <FormControl variant="filled" margin="normal" fullWidth>
-          <InputLabel>{t('reportChartType')}</InputLabel>
-          <Select value={type} onChange={e => setType(e.target.value)}>
-            <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-            <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-            <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-          </Select>
-        </FormControl>
-      </Grid>
+const ChartType = ({ type, setType }) => (
+  <Grid container spacing={3}>
+    <Grid item xs={12} sm={6}>
+      <FormControl variant="filled" margin="normal" fullWidth>
+        <InputLabel>{t('reportChartType')}</InputLabel>
+        <Select value={type} onChange={(e) => setType(e.target.value)}>
+          <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+          <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+          <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+        </Select>
+      </FormControl>
     </Grid>
-  )
-}
-
+  </Grid>
+);
 
 const ChartReportPage = () => {
-  
   const [items, setItems] = useState([]);
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayout filter={ 
+    <ReportLayout filter={(
       <Filter setItems={setItems}>
         <ChartType type={type} setType={setType} />
       </Filter>
-    }>
+    )}
+    >
       <Graph items={items} type={type} />
     </ReportLayout>
-  )
-}
+  );
+};
 
 export default ChartReportPage;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index b938dc85..b5c3daeb 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import { useTheme } from "@material-ui/core/styles";
+import {
+  Grid, FormControl, InputLabel, Select, MenuItem,
+} from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -10,12 +12,13 @@ import { prefixString } from '../common/stringUtils';
 import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
-
   const [eventTypes, setEventTypes] = useState(['allEvents']);
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
-    eventTypes.forEach(it => query.append('type', it));
+    const query = new URLSearchParams({
+      deviceId, from, to, mail,
+    });
+    eventTypes.forEach((it) => query.append('type', it));
     const response = await fetch(`/api/reports/events?${query.toString()}`, { headers });
     if (response.ok) {
       const contentType = response.headers.get('content-type');
@@ -34,7 +37,7 @@ const Filter = ({ setItems }) => {
       <Grid item xs={12} sm={6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportEventTypes')}</InputLabel>
-          <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
+          <Select value={eventTypes} onChange={(e) => setEventTypes(e.target.value)} multiple>
             <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
             <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>
             <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>
@@ -58,21 +61,20 @@ const Filter = ({ setItems }) => {
       </Grid>
     </ReportFilter>
   );
-}
+};
 
 const EventReportPage = () => {
-
   const theme = useTheme();
-  const geofences = useSelector(state => state.geofences.items);
+  const geofences = useSelector((state) => state.geofences.items);
   const [items, setItems] = useState([]);
 
-  const formatGeofence = value => {
+  const formatGeofence = (value) => {
     if (value > 0) {
-        const geofence = geofences[value];
-        return geofence ? geofence.name : '';
+      const geofence = geofences[value];
+      return geofence ? geofence.name : '';
     }
     return null;
-  }
+  };
 
   const columns = [{
     headerName: t('positionFixTime'),
@@ -101,12 +103,13 @@ const EventReportPage = () => {
   return (
     <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
-        autoHeight />
+        rows={items}
+        columns={columns}
+        hideFooter
+        autoHeight
+      />
     </ReportLayout>
   );
-}
+};
 
 export default EventReportPage;
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
index 990eb5d5..63d24eee 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/Graph.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { withWidth } from '@material-ui/core';
-import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
 
-const CustomizedAxisTick = ({ x, y, payload }) =>{
-  if(!payload.value) {
+const CustomizedAxisTick = ({ x, y, payload }) => {
+  if (!payload.value) {
     return payload.value;
   }
   const parts = payload.value.split(' ');
@@ -13,22 +15,19 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{
       <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
     </g>
   );
-}
+};
 
-const Graph = ({ type, items }) => {
-
-  return (
-    <ResponsiveContainer height={400} width="100%" debounce={1}>
-      <LineChart data={items}>
-        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
-        <YAxis />
-        <CartesianGrid strokeDasharray="3 3" />
-        <Tooltip />
-        <Legend />
-        <Line type="natural" dataKey={type} />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-}
+const Graph = ({ type, items }) => (
+  <ResponsiveContainer height={400} width="100%" debounce={1}>
+    <LineChart data={items}>
+      <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <Line type="natural" dataKey={type} />
+    </LineChart>
+  </ResponsiveContainer>
+);
 
 export default withWidth()(Graph);
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index dfa99997..12bbd351 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography } from '@material-ui/core';
+import {
+  Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography,
+} from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
@@ -9,7 +11,7 @@ import PositionsMap from '../map/PositionsMap';
 import { formatPosition } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     height: '100%',
     display: 'flex',
@@ -31,13 +33,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const TimeLabel = ({ children, open, value }) => {
-  return (
-    <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
-      {children}
-    </Tooltip>
-  );
-};
+const TimeLabel = ({ children, open, value }) => (
+  <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
+    {children}
+  </Tooltip>
+);
 
 const ReplayPage = () => {
   const classes = useStyles();
@@ -61,12 +61,12 @@ const ReplayPage = () => {
       <MainToolbar />
       <Map>
         <ReplayPathMap positions={positions} />
-        {index < positions.length &&
-          <PositionsMap positions={[positions[index]]} />
-        }
+        {index < positions.length
+          && <PositionsMap positions={[positions[index]]} />}
       </Map>
       <Container maxWidth="sm" className={classes.controlPanel}>
-        {!!positions.length &&
+        {!!positions.length
+          && (
           <Paper className={classes.controlContent}>
             <Slider
               max={positions.length - 1}
@@ -75,15 +75,15 @@ const ReplayPage = () => {
               value={index}
               onChange={(_, index) => setIndex(index)}
               valueLabelDisplay="auto"
-              valueLabelFormat={i => i < positions.length ? formatPosition(positions[i], 'fixTime') : ''}
+              valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime') : '')}
               ValueLabelComponent={TimeLabel}
-              />
+            />
           </Paper>
-        }
+          )}
         <div>
           <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography align='center'>
+              <Typography align="center">
                 {t('reportConfigure')}
               </Typography>
             </AccordionSummary>
@@ -95,6 +95,6 @@ const ReplayPage = () => {
       </Container>
     </div>
   );
-}
+};
 
 export default ReplayPage;
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 524f7bbf..dec8d018 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
+import {
+  FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography,
+} from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 import t from '../common/localization';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
-  const devices = useSelector(state => Object.values(state.devices.items));
+  const devices = useSelector((state) => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
   const [from, setFrom] = useState(moment().subtract(1, 'hour'));
@@ -51,9 +53,9 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
       selectedFrom.toISOString(),
       selectedTo.toISOString(),
       mail,
-      { Accept: accept }
+      { Accept: accept },
     );
-  }
+  };
 
   return (
     <Grid container spacing={2} justify="flex-end">
@@ -81,56 +83,69 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
           </Select>
         </FormControl>
       </Grid>
-      {period === 'custom' && <Grid item xs={12} sm={3}>
+      {period === 'custom' && (
+      <Grid item xs={12} sm={3}>
         <TextField
           variant="filled"
           label={t('reportFrom')}
           type="datetime-local"
           value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-          fullWidth />
-      </Grid>}
-      {period === 'custom' && <Grid item xs={12} sm={3}>
+          onChange={(e) => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+          fullWidth
+        />
+      </Grid>
+      )}
+      {period === 'custom' && (
+      <Grid item xs={12} sm={3}>
         <TextField
           variant="filled"
           label={t('reportTo')}
           type="datetime-local"
           value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-          fullWidth />
-      </Grid>}
+          onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+          fullWidth
+        />
+      </Grid>
+      )}
       {children}
       <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
-        <Button 
+        <Button
           onClick={() => handleClick(false, true)}
-          variant='outlined'
-          color='secondary'
-          fullWidth>
+          variant="outlined"
+          color="secondary"
+          fullWidth
+        >
           {t('reportShow')}
         </Button>
       </Grid>
-      {!showOnly && 
+      {!showOnly
+        && (
         <Grid item xs={4} sm={2}>
-            <Button 
-              onClick={() => handleClick(false, false)}
-              variant='outlined'
-              color='secondary'
-              fullWidth>
-              {t('reportExport')}
-            </Button>
-        </Grid>}
-      {!showOnly && 
+          <Button
+            onClick={() => handleClick(false, false)}
+            variant="outlined"
+            color="secondary"
+            fullWidth
+          >
+            {t('reportExport')}
+          </Button>
+        </Grid>
+        )}
+      {!showOnly
+        && (
         <Grid item xs={4} sm={2}>
-            <Button 
-              onClick={() => handleClick(true, false)}
-              variant='outlined'
-              color='secondary'
-              fullWidth>
-              <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
-            </Button>
-        </Grid>}
+          <Button
+            onClick={() => handleClick(true, false)}
+            variant="outlined"
+            color="secondary"
+            fullWidth
+          >
+            <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
+          </Button>
+        </Grid>
+        )}
     </Grid>
   );
-}
+};
 
 export default ReportFilter;
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 5b543355..92ffc0c9 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -7,7 +7,7 @@ import {
   Drawer,
   makeStyles,
   IconButton,
-  Hidden
+  Hidden,
 } from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
@@ -21,35 +21,35 @@ import SideNav from '../components/SideNav';
 import NavBar from '../components/NavBar';
 import t from '../common/localization';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
-    height: '100%'
+    height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.drawerWidthDesktop
+    width: theme.dimensions.drawerWidthDesktop,
   },
   drawer: {
     width: theme.dimensions.drawerWidthDesktop,
     [theme.breakpoints.down('md')]: {
-      width: theme.dimensions.drawerWidthTablet
-    }
+      width: theme.dimensions.drawerWidthTablet,
+    },
   },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3)
+    padding: theme.spacing(5, 3, 3, 3),
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
     display: 'flex',
     alignItems: 'center',
-    padding: theme.spacing(0, 1)
+    padding: theme.spacing(0, 1),
   },
   toolbar: {
     [theme.breakpoints.down('md')]: {
-      ...theme.mixins.toolbar
-    }
-  }
+      ...theme.mixins.toolbar,
+    },
+  },
 }));
 
 const routes = [
@@ -57,24 +57,24 @@ const routes = [
   {
     name: t('reportEvents'),
     href: '/reports/event',
-    icon: <NotificationsActiveIcon />
+    icon: <NotificationsActiveIcon />,
   },
   {
     name: t('reportTrips'),
     href: '/reports/trip',
-    icon: <PlayCircleFilledIcon />
+    icon: <PlayCircleFilledIcon />,
   },
   {
     name: t('reportStops'),
     href: '/reports/stop',
-    icon: <PauseCircleFilledIcon />
+    icon: <PauseCircleFilledIcon />,
   },
   {
     name: t('reportSummary'),
     href: '/reports/summary',
-    icon: <FormatListBulletedIcon />
+    icon: <FormatListBulletedIcon />,
   },
-  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> }
+  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
 ];
 
 const ReportLayout = ({ children, filter }) => {
@@ -85,7 +85,7 @@ const ReportLayout = ({ children, filter }) => {
   const [reportTitle, setReportTitle] = useState();
 
   useEffect(() => {
-    routes.forEach(route => {
+    routes.forEach((route) => {
       switch (location.pathname) {
         case `${route.href}`:
           setReportTitle(route.name);
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index c09d4f5c..fffcdcb5 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,17 +1,20 @@
 import React, { useState } from 'react';
 import { Paper } from '@material-ui/core';
 import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+  formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
+} from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference, usePreference } from '../common/preferences';
 import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
-
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
+    const query = new URLSearchParams({
+      deviceId, from, to, mail,
+    });
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
       const contentType = response.headers.get('content-type');
@@ -23,7 +26,7 @@ const Filter = ({ setItems }) => {
         }
       }
     }
-  }
+  };
 
   return <ReportFilter handleSubmit={handleSubmit} />;
 };
@@ -78,7 +81,7 @@ const RouteReportPage = () => {
     width: theme.dimensions.columnWidthNumber,
     valueGetter: ({ row }) => row.attributes.totalDistance,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
-  }]
+  }];
 
   const [items, setItems] = useState([]);
 
@@ -86,10 +89,11 @@ const RouteReportPage = () => {
     <ReportLayout filter={<Filter setItems={setItems} />}>
       <Paper>
         <DataGrid
-          rows={items} 
-          columns={columns} 
-          hideFooter 
-          autoHeight />
+          rows={items}
+          columns={columns}
+          hideFooter
+          autoHeight
+        />
       </Paper>
     </ReportLayout>
   );
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 57f59564..d2e7e7ed 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+  formatDistance, formatHours, formatDate, formatVolume,
+} from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
-
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
+    const query = new URLSearchParams({
+      deviceId, from, to, mail,
+    });
     const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers });
     if (response.ok) {
       const contentType = response.headers.get('content-type');
@@ -22,13 +25,12 @@ const Filter = ({ setItems }) => {
         }
       }
     }
-  }
+  };
 
   return <ReportFilter handleSubmit={handleSubmit} />;
 };
 
 const StopReportPage = () => {
-
   const theme = useTheme();
 
   const distanceUnit = useAttributePreference('distanceUnit');
@@ -41,7 +43,7 @@ const StopReportPage = () => {
     field: 'startTime',
     type: 'dateTime',
     width: theme.dimensions.columnWidthDate,
-    valueFormatter: ({ value }) => formatDate(value), 
+    valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('positionOdometer'),
     field: 'startOdometer',
@@ -53,7 +55,7 @@ const StopReportPage = () => {
     field: 'address',
     type: 'string',
     hide: true,
-    width: theme.dimensions.columnWidthString,    
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
@@ -78,17 +80,18 @@ const StopReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),    
-  }]
-  
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+  }];
+
   return (
     <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
+        rows={items}
+        columns={columns}
+        hideFooter
         autoHeight
-        getRowId={() => Math.random()} />
+        getRowId={() => Math.random()}
+      />
     </ReportLayout>
   );
 };
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 53e697d0..4523e652 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,19 +1,22 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+  formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
+} from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
-
   const [daily, setDaily] = useState(false);
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
-    const query = new URLSearchParams({ deviceId, from, to, daily, mail });
+    const query = new URLSearchParams({
+      deviceId, from, to, daily, mail,
+    });
     const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers });
     if (response.ok) {
       const contentType = response.headers.get('content-type');
@@ -25,21 +28,21 @@ const Filter = ({ setItems }) => {
         }
       }
     }
-  }
+  };
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
       <Grid item xs={12} sm={6}>
         <FormControlLabel
-          control={<Checkbox checked={daily} onChange={e => setDaily(e.target.checked)} />}
-          label={t('reportDaily')} />
+          control={<Checkbox checked={daily} onChange={(e) => setDaily(e.target.checked)} />}
+          label={t('reportDaily')}
+        />
       </Grid>
     </ReportFilter>
   );
-}
+};
 
 const SummaryReportPage = () => {
-
   const theme = useTheme();
 
   const distanceUnit = useAttributePreference('distanceUnit');
@@ -96,19 +99,20 @@ const SummaryReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),                
-  }]
-  
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+  }];
+
   return (
     <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
+        rows={items}
+        columns={columns}
+        hideFooter
         autoHeight
-        getRowId={() => Math.random()} />
+        getRowId={() => Math.random()}
+      />
     </ReportLayout>
   );
-}
+};
 
 export default SummaryReportPage;
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index e8c91295..f611dde1 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+  formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
+} from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
-
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
+    const query = new URLSearchParams({
+      deviceId, from, to, mail,
+    });
     const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers });
     if (response.ok) {
       const contentType = response.headers.get('content-type');
@@ -22,15 +25,14 @@ const Filter = ({ setItems }) => {
         }
       }
     }
-  }
+  };
 
   return <ReportFilter handleSubmit={handleSubmit} />;
-}
+};
 
 const TripReportPage = () => {
-
   const theme = useTheme();
-  
+
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
@@ -109,19 +111,20 @@ const TripReportPage = () => {
     field: 'driverName',
     type: 'string',
     width: theme.dimensions.columnWidthString,
-    hide: true                                        
-  }]
+    hide: true,
+  }];
 
   return (
     <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
+        rows={items}
+        columns={columns}
+        hideFooter
         autoHeight
-        getRowId={() => Math.random()} />
+        getRowId={() => Math.random()}
+      />
     </ReportLayout>
   );
-}
+};
 
 export default TripReportPage;