From 6ac6ceaed16b2ae5ef58ba599d24a868ac2f816a Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Fri, 3 Sep 2021 09:41:20 -0700
Subject: Finish migrations

---
 modern/src/DevicesList.js                      |  4 +++-
 modern/src/PositionPage.js                     |  2 +-
 modern/src/admin/UsersPage.js                  |  4 ++--
 modern/src/common/formatter.js                 | 16 ++++++----------
 modern/src/map/StatusView.js                   | 10 ++++++----
 modern/src/reports/ReplayPage.js               |  2 +-
 modern/src/reports/ReportLayout.js             | 20 ++++++++++----------
 modern/src/reports/RouteReportPage.js          |  8 ++++----
 modern/src/reports/StopReportPage.js           |  4 ++--
 modern/src/reports/SummaryReportPage.js        | 12 ++++++------
 modern/src/reports/TripReportPage.js           | 12 ++++++------
 modern/src/settings/MaintenancesPage.js        |  4 ++--
 modern/src/settings/NotificationsPage.js       |  2 +-
 modern/src/settings/OptionsLayout/useRoutes.js | 26 +++++++++++++++-----------
 14 files changed, 65 insertions(+), 61 deletions(-)

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index cbf3a0a..cea7c38 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -19,6 +19,7 @@ import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
 import { formatPosition } from './common/formatter';
 import { getDevices, getPosition } from './common/selectors';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -83,6 +84,7 @@ const getBatteryStatus = (batteryLevel) => {
 const DeviceRow = ({ data, index, style }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
+  const t = useTranslation();
 
   const { items } = data;
   const item = items[index];
@@ -109,7 +111,7 @@ const DeviceRow = ({ data, index, style }) => {
             {position.attributes.hasOwnProperty('batteryLevel') && (
             <Grid item container xs alignItems="center" alignContent="center">
               <Grid item>
-                <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+                <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}</span>
               </Grid>
               <Grid item>
                 <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index f09d43d..2fd320a 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -64,7 +64,7 @@ const PositionPage = () => {
                     />
                     <ListItemSecondaryAction>
                       <Typography variant="body2">
-                        {formatPosition(value, key)}
+                        {formatPosition(value, key, t)}
                       </Typography>
                     </ListItemSecondaryAction>
                   </ListItem>
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 92db32e..bd2a003 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -51,8 +51,8 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
               </TableCell>
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.email}</TableCell>
-              <TableCell>{formatBoolean(item, 'administrator')}</TableCell>
-              <TableCell>{formatBoolean(item, 'disabled')}</TableCell>
+              <TableCell>{formatBoolean(item, 'administrator', t)}</TableCell>
+              <TableCell>{formatBoolean(item, 'disabled', t)}</TableCell>
             </TableRow>
           ))}
         </TableBody>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 5db7a42..7a18d1a 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -1,8 +1,7 @@
 import moment from 'moment';
 import { useTranslation } from '../LocalizationProvider';
 
-export const formatBoolean = (value) => {
-  const t = useTranslation();
+export const formatBoolean = (value, t) => {
   return value ? t('sharedYes') : t('sharedNo');
 }
 
@@ -10,7 +9,7 @@ export const formatNumber = (value, precision = 1) => Number(value.toFixed(preci
 
 export const formatDate = (value, format = 'YYYY-MM-DD HH:mm') => moment(value).format(format);
 
-export const formatPosition = (value, key) => {
+export const formatPosition = (value, key, t) => {
   if (value != null && typeof value === 'object') {
     value = value[key];
   }
@@ -32,14 +31,13 @@ export const formatPosition = (value, key) => {
       if (typeof value === 'number') {
         return formatNumber(value);
       } if (typeof value === 'boolean') {
-        return formatBoolean(value);
+        return formatBoolean(value, t);
       }
       return value;
   }
 };
 
-export const formatDistance = (value, unit) => {
-  const t = useTranslation();
+export const formatDistance = (value, unit, t) => {
   switch (unit) {
     case 'mi':
       return `${(value * 0.000621371).toFixed(2)} ${t('sharedMi')}`;
@@ -51,8 +49,7 @@ export const formatDistance = (value, unit) => {
   }
 };
 
-export const formatSpeed = (value, unit) => {
-  const t = useTranslation();
+export const formatSpeed = (value, unit, t) => {
   switch (unit) {
     case 'kmh':
       return `${(value * 1.852).toFixed(2)} ${t('sharedKmh')}`;
@@ -64,8 +61,7 @@ export const formatSpeed = (value, unit) => {
   }
 };
 
-export const formatVolume = (value, unit) => {
-  const t = useTranslation();
+export const formatVolume = (value, unit, t) => {
   switch (unit) {
     case 'impGal':
       return `${(value / 4.546).toFixed(2)} ${t('sharedGallonAbbreviation')}`;
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index 85009db..5526e14 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -77,27 +77,29 @@ const StatusView = ({
               <ListItem classes={{ container: classes.listItemContainer }}>
                 <ListItemText primary={t('positionSpeed')} />
                 <ListItemSecondaryAction>
-                  <span>{formatSpeed(position.speed, speedUnit)}</span>
+                  {formatSpeed(position.speed, speedUnit, t)}
                 </ListItemSecondaryAction>
               </ListItem>
               {position.attributes.batteryLevel && (
                 <ListItem classes={{ container: classes.listItemContainer }}>
                   <ListItemText primary={t('positionBattery')} />
                   <ListItemSecondaryAction>
-                    <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+                    <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}>
+                      {formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}
+                    </span>
                   </ListItemSecondaryAction>
                 </ListItem>
               )}
               <ListItem classes={{ container: classes.listItemContainer }}>
                 <ListItemText primary={t('positionDistance')} />
                 <ListItemSecondaryAction>
-                  <span>{formatDistance(position.attributes.totalDistance, distanceUnit)}</span>
+                  {formatDistance(position.attributes.totalDistance, distanceUnit, t)}
                 </ListItemSecondaryAction>
               </ListItem>
               <ListItem classes={{ container: classes.listItemContainer }}>
                 <ListItemText primary={t('positionCourse')} />
                 <ListItemSecondaryAction>
-                  <span>{formatPosition(position.course, 'course')}</span>
+                  {formatPosition(position.course, 'course', t)}
                 </ListItemSecondaryAction>
               </ListItem>
             </List>
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 3cc3c2f..bb32daa 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -76,7 +76,7 @@ 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', t) : '')}
               ValueLabelComponent={TimeLabel}
             />
           </Paper>
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 9bf1dd5..f6e71db 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import {
   Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
@@ -51,15 +51,6 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const routes = [
-  { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
-  { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
-  { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
-  { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
-  { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
-  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
-];
-
 const ReportLayout = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
@@ -69,6 +60,15 @@ const ReportLayout = ({ children, filter }) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [reportTitle, setReportTitle] = useState();
 
+  const routes = useMemo(() => [
+    { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
+    { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
+    { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
+    { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
+    { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
+    { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+  ], [t]);
+
   useEffect(() => {
     routes.forEach((route) => {
       switch (location.pathname) {
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index fe43342..3be2107 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -32,12 +32,12 @@ const Filter = ({ setItems }) => {
 };
 
 const RouteReportPage = () => {
+  const theme = useTheme();
   const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const coordinateFormat = usePreference('coordinateFormat');
-  const theme = useTheme();
 
   const columns = [{
     headerName: t('positionFixTime'),
@@ -62,7 +62,7 @@ const RouteReportPage = () => {
     field: 'speed',
     type: 'number',
     width: theme.dimensions.columnWidthString,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
@@ -74,7 +74,7 @@ const RouteReportPage = () => {
     type: 'boolean',
     width: theme.dimensions.columnWidthBoolean,
     valueGetter: ({ row }) => row.attributes.ignition,
-    valueFormatter: ({ value }) => formatBoolean(value),
+    valueFormatter: ({ value }) => formatBoolean(value, t),
   }, {
     headerName: t('deviceTotalDistance'),
     field: 'totalDistance',
@@ -82,7 +82,7 @@ const RouteReportPage = () => {
     hide: true,
     width: theme.dimensions.columnWidthNumber,
     valueGetter: ({ row }) => row.attributes.totalDistance,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }];
 
   const [items, setItems] = useState([]);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 318507e..aa668d5 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -50,7 +50,7 @@ const StopReportPage = () => {
     field: 'startOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
@@ -81,7 +81,7 @@ const StopReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
   }];
 
   return (
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 84546f6..d993d2e 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -65,31 +65,31 @@ const SummaryReportPage = () => {
     field: 'distance',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
@@ -102,7 +102,7 @@ const SummaryReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
   }];
 
   return (
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 22a236a..632da7c 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -51,7 +51,7 @@ const TripReportPage = () => {
     field: 'startOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportStartAddress'),
     field: 'startAddress',
@@ -69,7 +69,7 @@ const TripReportPage = () => {
     field: 'endOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportEndAddress'),
     field: 'endAddress',
@@ -81,19 +81,19 @@ const TripReportPage = () => {
     field: 'distance',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
@@ -106,7 +106,7 @@ const TripReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
   }, {
     headerName: t('sharedDriver'),
     field: 'driverName',
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index a59a24e..89b0279 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -41,9 +41,9 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
     if (attribute && attribute.dataType) {
       switch (attribute.dataType) {
         case 'speed':
-          return formatSpeed(value, speedUnit);
+          return formatSpeed(value, speedUnit, t);
         case 'distance':
-          return formatDistance(value, distanceUnit);
+          return formatDistance(value, distanceUnit, t);
         default:
           return value;
       }
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 0148363..0d49d5a 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -62,7 +62,7 @@ const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
                 </IconButton>
               </TableCell>
               <TableCell>{t(prefixString('event', item.type))}</TableCell>
-              <TableCell>{formatBoolean(item.always)}</TableCell>
+              <TableCell>{formatBoolean(item.always, t)}</TableCell>
               <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
               <TableCell>{formatList('notificator', item.notificators)}</TableCell>
             </TableRow>
diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js
index 4f0621c..b6ed75f 100644
--- a/modern/src/settings/OptionsLayout/useRoutes.js
+++ b/modern/src/settings/OptionsLayout/useRoutes.js
@@ -9,13 +9,9 @@ import BuildIcon from '@material-ui/icons/Build';
 import PeopleIcon from '@material-ui/icons/People';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import { getIsAdmin, getUserId } from '../../common/selectors';
+import { useTranslation } from '../../LocalizationProvider';
 
-const accountRoute = {
-  name: t('settingsUser'),
-  icon: <PersonIcon />,
-};
-
-const adminRoutes = [
+const useAdminRoutes = (t) => useMemo([
   { subheader: t('userAdmin') },
   {
     name: t('settingsServer'),
@@ -32,10 +28,14 @@ const adminRoutes = [
     href: '/admin/statistics',
     icon: <BarChartIcon />,
   },
-];
+], [t]);
 
-const mainRoutes = [
-  accountRoute,
+const useMainRoutes = (t, userId) => useMemo([
+  {
+    name: t('settingsUser'),
+    href: `/user/${userId}`,
+    icon: <PersonIcon />,
+  },
   {
     match: 'geofence',
     name: t('sharedGeofences'),
@@ -72,12 +72,16 @@ const mainRoutes = [
     href: '/settings/maintenances',
     icon: <BuildIcon />,
   },
-];
+], [t, userId]);
 
 export default () => {
+  const t = useTranslation();
+
   const isAdmin = useSelector(getIsAdmin);
   const userId = useSelector(getUserId);
-  accountRoute.href = `/user/${userId}`;
+
+  const mainRoutes = useMainRoutes(t, userId);
+  const adminRoutes = useAdminRoutes(t);
 
   return useMemo(() => [...mainRoutes, ...(isAdmin ? adminRoutes : [])], [
     isAdmin,
-- 
cgit v1.2.3