Migrate components

35 files changed, 110 insertions, 54 deletions

diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 83b19707..5867c979 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -5,7 +5,6 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from './LocalizationProvider';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
 import deviceAttributes from './attributes/deviceAttributes';
@@ -13,6 +12,7 @@ import SelectField from './form/SelectField';
 import deviceCategories from './common/deviceCategories';
 import LinkField from './form/LinkField';
 import { prefixString } from './common/stringUtils';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -22,6 +22,7 @@ const useStyles = makeStyles(() => ({
 
 const DevicePage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js
index 944ef61b..0bfec615 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/EditCollectionView.js
@@ -7,8 +7,8 @@ import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import { useSelector } from 'react-redux';
 
-import t from './LocalizationProvider';
 import RemoveDialog from './RemoveDialog';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   fab: {
@@ -23,6 +23,7 @@ const EditCollectionView = ({
 }) => {
   const classes = useStyles();
   const history = useHistory();
+  const t = useTranslation();
 
   const [selectedId, setSelectedId] = useState(null);
   const [selectedAnchorEl, setSelectedAnchorEl] = useState(null);
diff --git a/modern/src/EditItemView.js b/modern/src/EditItemView.js
index add61004..e1aea2a9 100644
--- a/modern/src/EditItemView.js
+++ b/modern/src/EditItemView.js
@@ -5,9 +5,9 @@ import Container from '@material-ui/core/Container';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 
-import t from './LocalizationProvider';
 import { useEffectAsync } from './reactHelper';
 import OptionsLayout from './settings/OptionsLayout';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -27,6 +27,8 @@ const EditItemView = ({
 }) => {
   const history = useHistory();
   const classes = useStyles();
+  const t = useTranslation();
+
   const { id } = useParams();
 
   useEffectAsync(async () => {
diff --git a/modern/src/GeofencePage.js b/modern/src/GeofencePage.js
index 2b503a71..485795de 100644
--- a/modern/src/GeofencePage.js
+++ b/modern/src/GeofencePage.js
@@ -5,10 +5,10 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from './LocalizationProvider';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
 import geofenceAttributes from './attributes/geofenceAttributes';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -18,6 +18,7 @@ const useStyles = makeStyles(() => ({
 
 const GeofencePage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index d343a381..42dfb6b1 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -10,8 +10,7 @@ import Map from './map/Map';
 import CurrentLocationMap from './map/CurrentLocationMap';
 import GeofenceEditMap from './map/GeofenceEditMap';
 import GeofencesList from './GeofencesList';
-
-import t from './LocalizationProvider';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -51,6 +50,7 @@ const useStyles = makeStyles((theme) => ({
 const GeofencesPage = ({ width }) => {
   const classes = useStyles();
   const history = useHistory();
+  const t = useTranslation();
 
   return (
     <div className={classes.root}>
diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js
index 84419683..bf454e71 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/LocalizationProvider.js
@@ -158,10 +158,12 @@ export const useLocalization = () => {
 
 export const useTranslation = () => {
   const context = useContext(LocalizationContext);
-  return (key) => context.languages[context.language].data[key];
+  const data = context.languages[context.language];
+  return (key) => data[key];
 };
 
 export const useTranslationKeys = (predicate) => {
   const context = useContext(LocalizationContext);
-  return Object.keys(context.languages[context.language].data).filter(predicate);
+  const data = context.languages[context.language];
+  return Object.keys(data).filter(predicate);
 };
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 5a8d4ce8..ea32fb33 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -19,7 +19,7 @@ import GeofenceMap from './map/GeofenceMap';
 import CurrentPositionsMap from './map/CurrentPositionsMap';
 import CurrentLocationMap from './map/CurrentLocationMap';
 import BottomNav from './components/BottomNav';
-import t from './LocalizationProvider';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -91,6 +91,7 @@ const MainPage = () => {
   const classes = useStyles();
   const history = useHistory();
   const theme = useTheme();
+  const t = useTranslation();
 
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 65b02f51..1e4dabe4 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -18,8 +18,8 @@ import PersonIcon from '@material-ui/icons/Person';
 import DescriptionIcon from '@material-ui/icons/Description';
 import ReplayIcon from '@material-ui/icons/Replay';
 import { sessionActions } from './store';
-import t from './LocalizationProvider';
 import * as selectors from './common/selectors';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   flex: {
@@ -38,12 +38,15 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const MainToolbar = () => {
-  const dispatch = useDispatch();
-  const [drawer, setDrawer] = useState(false);
   const classes = useStyles();
   const history = useHistory();
+  const dispatch = useDispatch();
+  const t = useTranslation();
+
   const userId = useSelector(selectors.getUserId);
 
+  const [drawer, setDrawer] = useState(false);
+
   const openDrawer = () => { setDrawer(true); };
   const closeDrawer = () => { setDrawer(false); };
 
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index 51c3c856..37bc922c 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -4,7 +4,6 @@ import {
   makeStyles, Typography, ListItem, ListItemText, ListItemSecondaryAction, List, Container, Paper, Divider,
 } from '@material-ui/core';
 import { useParams } from 'react-router-dom';
-import t from './LocalizationProvider';
 import { useEffectAsync } from './reactHelper';
 import MainToolbar from './MainToolbar';
 import { formatPosition } from './common/formatter';
@@ -19,6 +18,7 @@ const useStyles = makeStyles((theme) => ({
 
 const PositionPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const { id } = useParams();
 
diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
index e1483bc2..66b1c658 100644
--- a/modern/src/RegisterDialog.js
+++ b/modern/src/RegisterDialog.js
@@ -6,9 +6,11 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import TextField from '@material-ui/core/TextField';
 import Snackbar from '@material-ui/core/Snackbar';
-import t from './LocalizationProvider';
+import { useTranslation } from './LocalizationProvider';
 
 const RegisterDialog = ({ showDialog, onResult }) => {
+  const t = useTranslation();
+
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
diff --git a/modern/src/RemoveDialog.js b/modern/src/RemoveDialog.js
index 4ba5c1e9..6d191d6a 100644
--- a/modern/src/RemoveDialog.js
+++ b/modern/src/RemoveDialog.js
@@ -4,11 +4,13 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
-import t from './LocalizationProvider';
+import { useTranslation } from './LocalizationProvider';
 
 const RemoveDialog = ({
   open, endpoint, itemId, onResult,
 }) => {
+  const t = useTranslation();
+
   const handleRemove = async () => {
     const response = await fetch(`/api/${endpoint}/${itemId}`, { method: 'DELETE' });
     if (response.ok) {
diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js
index d09cd631..0e6af09f 100644
--- a/modern/src/UserPage.js
+++ b/modern/src/UserPage.js
@@ -5,11 +5,11 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from './LocalizationProvider';
 import userAttributes from './attributes/userAttributes';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
 import LinkField from './form/LinkField';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles(() => ({
 
 const UserPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 05190643..62c93f67 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -7,12 +7,12 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import t from '../LocalizationProvider';
 import { sessionActions } from '../store';
 import EditAttributesView from '../attributes/EditAttributesView';
 import deviceAttributes from '../attributes/deviceAttributes';
 import userAttributes from '../attributes/userAttributes';
 import OptionsLayout from '../settings/OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -31,9 +31,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const ServerPage = () => {
+  const classes = useStyles();
   const history = useHistory();
   const dispatch = useDispatch();
-  const classes = useStyles();
+  const t = useTranslation();
 
   const item = useSelector((state) => state.session.server);
   const setItem = (updatedItem) => dispatch(sessionActions.updateServer(updatedItem));
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js
index 96ee4d18..9d075fef 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/admin/StatisticsPage.js
@@ -3,11 +3,13 @@ import {
   FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper,
 } from '@material-ui/core';
 import moment from 'moment';
-import t from '../LocalizationProvider';
 import { formatDate } from '../common/formatter';
 import OptionsLayout from '../settings/OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
+  const t = useTranslation();
+
   const [period, setPeriod] = useState('today');
   const [from, setFrom] = useState(moment().subtract(1, 'hour'));
   const [to, setTo] = useState(moment());
@@ -95,6 +97,8 @@ const Filter = ({ setItems }) => {
 };
 
 const StatisticsPage = () => {
+  const t = useTranslation();
+
   const [items, setItems] = useState([]);
 
   return (
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 2bfbb755..92db32e0 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -3,11 +3,11 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import { formatBoolean } from '../common/formatter';
 import OptionsLayout from '../settings/OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) => ({
 
 const UsersView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
 
diff --git a/modern/src/attributes/AddAttributeDialog.js b/modern/src/attributes/AddAttributeDialog.js
index 3d392fd5..4669ba02 100644
--- a/modern/src/attributes/AddAttributeDialog.js
+++ b/modern/src/attributes/AddAttributeDialog.js
@@ -4,9 +4,11 @@ import {
 } from '@material-ui/core';
 
 import { Autocomplete, createFilterOptions } from '@material-ui/lab';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const AddAttributeDialog = ({ open, onResult, definitions }) => {
+  const t = useTranslation();
+
   const filter = createFilterOptions({
     stringify: (option) => option.name,
   });
diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/attributes/EditAttributesView.js
index 68395d9c..e8ab83e1 100644
--- a/modern/src/attributes/EditAttributesView.js
+++ b/modern/src/attributes/EditAttributesView.js
@@ -5,8 +5,8 @@ import {
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import AddIcon from '@material-ui/icons/Add';
-import t from '../LocalizationProvider';
 import AddAttributeDialog from './AddAttributeDialog';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   addButton: {
@@ -20,6 +20,7 @@ const useStyles = makeStyles((theme) => ({
 
 const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [addDialogShown, setAddDialogShown] = useState(false);
 
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 2d7fa6f9..2da33a28 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -5,7 +5,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import StartPage from '../../StartPage';
-import t from '../../LocalizationProvider';
+import { useTranslation } from '../../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   register: {
@@ -25,6 +25,7 @@ const useStyles = makeStyles((theme) => ({
 const RegisterForm = () => {
   const classes = useStyles();
   const history = useHistory();
+  const t = useTranslation();
 
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index f4062f5a..85009db7 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -18,8 +18,8 @@ import {
 } from '../common/formatter';
 import { useAttributePreference } from '../common/preferences';
 import RemoveDialog from '../RemoveDialog';
-import t from '../LocalizationProvider';
 import { getPosition } from '../common/selectors';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -35,6 +35,7 @@ const StatusView = ({
   deviceId, onShowDetails, onShowHistory, onEditClick,
 }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [removeDialogShown, setRemoveDialogShown] = useState(false);
   const device = useSelector((state) => state.devices.items[deviceId]);
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index ba476ef8..6679fe4f 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -8,7 +8,7 @@ import Graph from './Graph';
 import { useAttributePreference } from '../common/preferences';
 import { formatDate } from '../common/formatter';
 import { speedFromKnots } from '../common/converter';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ children, setItems }) => {
   const speedUnit = useAttributePreference('speedUnit');
@@ -37,20 +37,24 @@ const Filter = ({ children, setItems }) => {
   );
 };
 
-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>
+const ChartType = ({ type, setType }) => {
+  const t = useTranslation();
+  
+  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>
     </Grid>
-  </Grid>
-);
+  );
+};
 
 const ChartReportPage = () => {
   const [items, setItems] = useState([]);
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 1c40c3c7..b76ee955 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -9,9 +9,11 @@ import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { prefixString } from '../common/stringUtils';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
+  const t = useTranslation();
+
   const [eventTypes, setEventTypes] = useState(['allEvents']);
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -65,7 +67,10 @@ const Filter = ({ setItems }) => {
 
 const EventReportPage = () => {
   const theme = useTheme();
+  const t = useTranslation();
+
   const geofences = useSelector((state) => state.geofences.items);
+
   const [items, setItems] = useState([]);
 
   const formatGeofence = (value) => {
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 56f3e5d7..23c7fc00 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -4,9 +4,11 @@ import {
 } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+  const t = useTranslation();
+
   const devices = useSelector((state) => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 67d2ab70..9bf1dd5e 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -13,7 +13,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 import SideNav from '../components/SideNav';
 import NavBar from '../components/NavBar';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -64,6 +64,8 @@ const ReportLayout = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
   const location = useLocation();
+  const t = useTranslation();
+
   const [openDrawer, setOpenDrawer] = useState(false);
   const [reportTitle, setReportTitle] = useState();
 
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 185486bc..fe433422 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -8,7 +8,7 @@ import {
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference, usePreference } from '../common/preferences';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -32,6 +32,8 @@ const Filter = ({ setItems }) => {
 };
 
 const RouteReportPage = () => {
+  const t = useTranslation();
+
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const coordinateFormat = usePreference('coordinateFormat');
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index c00c2383..318507ed 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -7,7 +7,7 @@ import {
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -32,6 +32,7 @@ const Filter = ({ setItems }) => {
 
 const StopReportPage = () => {
   const theme = useTheme();
+  const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index d606dda2..84546f6b 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -8,9 +8,11 @@ import {
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
+  const t = useTranslation();
+
   const [daily, setDaily] = useState(false);
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -44,6 +46,7 @@ const Filter = ({ setItems }) => {
 
 const SummaryReportPage = () => {
   const theme = useTheme();
+  const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 4fa6a340..22a236a2 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -7,7 +7,7 @@ import {
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -32,6 +32,7 @@ const Filter = ({ setItems }) => {
 
 const TripReportPage = () => {
   const theme = useTheme();
+  const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index a3b45b4a..7aff0da0 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -3,9 +3,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import positionAttributes from '../attributes/positionAttributes';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -15,6 +15,8 @@ const useStyles = makeStyles(() => ({
 
 const ComputedAttributePage = () => {
   const classes = useStyles();
+  const t = useTranslation();
+
   const [item, setItem] = useState();
   const [key, setKey] = useState();
 
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 9858ea39..b989b43e 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -4,10 +4,10 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useSelector } from 'react-redux';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) => ({
 
 const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
   const adminEnabled = useSelector((state) => state.session.user && state.session.user.administrator);
@@ -66,7 +67,6 @@ const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
 
 const ComputedAttributesPage = () => (
   <OptionsLayout>
-
     <EditCollectionView content={ComputedAttributeView} editPath="/settings/attribute" endpoint="attributes/computed" />
   </OptionsLayout>
 );
diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js
index 7bb4497b..a185405e 100644
--- a/modern/src/settings/DriverPage.js
+++ b/modern/src/settings/DriverPage.js
@@ -4,9 +4,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -16,6 +16,7 @@ const useStyles = makeStyles(() => ({
 
 const DriverPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index ad578e25..faf8acbe 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -5,11 +5,11 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
 import deviceAttributes from '../attributes/deviceAttributes';
 import SelectField from '../form/SelectField';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles(() => ({
 
 const GroupPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 89715928..0b28e7bf 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -3,10 +3,10 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -17,6 +17,7 @@ const useStyles = makeStyles((theme) => ({
 
 const GroupsView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
 
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index 287d040d..a9fed7d6 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -4,7 +4,6 @@ import {
 } from '@material-ui/core';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import { prefixString } from '../common/stringUtils';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
@@ -13,6 +12,7 @@ import { useAttributePreference } from '../common/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
 } from '../common/converter';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -22,6 +22,8 @@ const useStyles = makeStyles(() => ({
 
 const MaintenancePage = () => {
   const classes = useStyles();
+  const t = useTranslation();
+
   const [item, setItem] = useState();
   const [labels, setLabels] = useState({ start: '', period: '' });
 
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 07d78ee9..5b040b55 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -3,7 +3,6 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 
@@ -11,6 +10,7 @@ import positionAttributes from '../attributes/positionAttributes';
 import { formatDistance, formatSpeed } from '../common/formatter';
 import { useAttributePreference } from '../common/preferences';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme) => ({
 
 const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
   const speedUnit = useAttributePreference('speedUnit');
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 273c15d5..01483637 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -3,12 +3,12 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import { prefixString } from '../common/stringUtils';
 import { formatBoolean } from '../common/formatter';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme) => ({
 
 const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);