20 files changed, 76 insertions, 54 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 5867c979..c3a49a58 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -7,12 +7,12 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
-import deviceAttributes from './attributes/deviceAttributes';
 import SelectField from './form/SelectField';
 import deviceCategories from './common/deviceCategories';
 import LinkField from './form/LinkField';
 import { prefixString } from './common/stringUtils';
 import { useTranslation } from './LocalizationProvider';
+import { useDeviceAttributes } from './attributes/deviceAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -24,6 +24,8 @@ const DevicePage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const deviceAttributes = useDeviceAttributes(t);
+
   const [item, setItem] = useState();
 
   return (
diff --git a/modern/src/GeofencePage.js b/modern/src/GeofencePage.js
index 485795de..db752467 100644
--- a/modern/src/GeofencePage.js
+++ b/modern/src/GeofencePage.js
@@ -7,8 +7,8 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
-import geofenceAttributes from './attributes/geofenceAttributes';
 import { useTranslation } from './LocalizationProvider';
+import { useGeofenceAttributes } from './attributes/geofenceAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -20,6 +20,8 @@ const GeofencePage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const geofenceAttributes = useGeofenceAttributes(t);
+
   const [item, setItem] = useState();
 
   return (
diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js
index bf454e71..129f1d9c 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/LocalizationProvider.js
@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import usePersistedState from './common/usePersistedState';
+import { usePersistedState } from './common/usePersistedState';
 
 import af from '../../web/l10n/af.json';
 import ar from '../../web/l10n/ar.json';
@@ -113,8 +113,6 @@ const languages = {
   zh_TW: { data: zh_TW, name: '中文 (Taiwan)' },
 };
 
-//const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
-
 const getDefaultLanguage = () => {
   const browserLanguages = window.navigator.languages ? window.navigator.languages.slice() : [];
   const browserLanguage = window.navigator.userLanguage || window.navigator.language;
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index 37bc922c..f09d43d6 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -8,6 +8,7 @@ import { useEffectAsync } from './reactHelper';
 import MainToolbar from './MainToolbar';
 import { formatPosition } from './common/formatter';
 import { prefixString } from './common/stringUtils';
+import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js
index 0e6af09f..977d3302 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 userAttributes from './attributes/userAttributes';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
 import LinkField from './form/LinkField';
 import { useTranslation } from './LocalizationProvider';
+import { useUserAttributes } from './attributes/userAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -21,6 +21,8 @@ const UserPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const userAttributes = useUserAttributes(t);
+
   const [item, setItem] = useState();
 
   return (
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 62c93f67..b424aac4 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -9,8 +9,8 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { sessionActions } from '../store';
 import EditAttributesView from '../attributes/EditAttributesView';
-import deviceAttributes from '../attributes/deviceAttributes';
-import userAttributes from '../attributes/userAttributes';
+import { useDeviceAttributes } from '../attributes/deviceAttributes';
+import { useUserAttributes } from '../attributes/userAttributes';
 import OptionsLayout from '../settings/OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
@@ -36,6 +36,9 @@ const ServerPage = () => {
   const dispatch = useDispatch();
   const t = useTranslation();
 
+  const userAttributes = useUserAttributes(t);
+  const deviceAttributes = useDeviceAttributes(t);
+
   const item = useSelector((state) => state.session.server);
   const setItem = (updatedItem) => dispatch(sessionActions.updateServer(updatedItem));
 
diff --git a/modern/src/attributes/deviceAttributes.js b/modern/src/attributes/deviceAttributes.js
index 2b874c52..20bb1e09 100644
--- a/modern/src/attributes/deviceAttributes.js
+++ b/modern/src/attributes/deviceAttributes.js
@@ -1,6 +1,6 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
 
-export default {
+export const useDeviceAttributes = (t) => useMemo({
   speedLimit: {
     name: t('attributeSpeedLimit'),
     type: 'string',
@@ -9,4 +9,4 @@ export default {
     name: t('attributeReportIgnoreOdometer'),
     type: 'boolean',
   },
-};
+}, [t]);
diff --git a/modern/src/attributes/geofenceAttributes.js b/modern/src/attributes/geofenceAttributes.js
index 5f197de7..d9f512f1 100644
--- a/modern/src/attributes/geofenceAttributes.js
+++ b/modern/src/attributes/geofenceAttributes.js
@@ -1,8 +1,8 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
 
-export default {
+export const useGeofenceAttributes = (t) => useMemo({
   speedLimit: {
     name: t('attributeSpeedLimit'),
     type: 'string',
   },
-};
+}, [t]);
diff --git a/modern/src/attributes/positionAttributes.js b/modern/src/attributes/positionAttributes.js
index b44b6062..49a64f71 100644
--- a/modern/src/attributes/positionAttributes.js
+++ b/modern/src/attributes/positionAttributes.js
@@ -1,6 +1,6 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
 
-export default {
+export const usePositionAttributes = (t) => useMemo({
   raw: {
     name: t('positionRaw'),
     type: 'string',
@@ -18,4 +18,4 @@ export default {
     type: 'number',
     dataType: 'distance',
   },
-};
+}, [t]);
diff --git a/modern/src/attributes/userAttributes.js b/modern/src/attributes/userAttributes.js
index 33a6657c..d9a5814d 100644
--- a/modern/src/attributes/userAttributes.js
+++ b/modern/src/attributes/userAttributes.js
@@ -1,6 +1,6 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
 
-export default {
+export const useUserAttributes = (t) => useMemo({
   notificationTokens: {
     name: t('attributeNotificationTokens'),
     type: 'string',
@@ -65,4 +65,4 @@ export default {
     name: t('sharedTimezone'),
     type: 'string',
   },
-};
+}, [t]);
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index e9371653..5db7a420 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -1,7 +1,10 @@
 import moment from 'moment';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
-export const formatBoolean = (value) => (value ? t('sharedYes') : t('sharedNo'));
+export const formatBoolean = (value) => {
+  const t = useTranslation();
+  return value ? t('sharedYes') : t('sharedNo');
+}
 
 export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
 
@@ -36,6 +39,7 @@ export const formatPosition = (value, key) => {
 };
 
 export const formatDistance = (value, unit) => {
+  const t = useTranslation();
   switch (unit) {
     case 'mi':
       return `${(value * 0.000621371).toFixed(2)} ${t('sharedMi')}`;
@@ -48,6 +52,7 @@ export const formatDistance = (value, unit) => {
 };
 
 export const formatSpeed = (value, unit) => {
+  const t = useTranslation();
   switch (unit) {
     case 'kmh':
       return `${(value * 1.852).toFixed(2)} ${t('sharedKmh')}`;
@@ -60,6 +65,7 @@ export const formatSpeed = (value, unit) => {
 };
 
 export const formatVolume = (value, unit) => {
+  const t = useTranslation();
   switch (unit) {
     case 'impGal':
       return `${(value / 4.546).toFixed(2)} ${t('sharedGallonAbbreviation')}`;
@@ -74,8 +80,11 @@ export const formatVolume = (value, unit) => {
 export const formatHours = (value) => moment.duration(value).humanize();
 
 export const formatCoordinate = (key, value, unit) => {
-  let hemisphere; let degrees; let minutes; let
-    seconds;
+  let hemisphere;
+  let degrees;
+  let minutes;
+  let seconds;
+
   if (key === 'latitude') {
     hemisphere = value >= 0 ? 'N' : 'S';
   } else {
diff --git a/modern/src/common/usePersistedState.js b/modern/src/common/usePersistedState.js
index 0a6627c6..a3a60d75 100644
--- a/modern/src/common/usePersistedState.js
+++ b/modern/src/common/usePersistedState.js
@@ -1,13 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
-export default usePersistedState = (key, defaultValue) => {
+export const usePersistedState = (key, defaultValue) => {
 
   const [value, setValue] = useState(() => {
     const stickyValue = window.localStorage.getItem(key);
     return stickyValue ? JSON.parse(stickyValue) : defaultValue;
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.localStorage.setItem(key, JSON.stringify(value));
   }, [key, value]);
 
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index c3081d90..2f6e266f 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -6,7 +6,7 @@ import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { sessionActions } from '../../store';
-import t, { useLocalization } from '../../LocalizationProvider';
+import { useLocalization, useTranslation } from '../../LocalizationProvider';
 import StartPage from '../../StartPage';
 
 const useStyles = makeStyles((theme) => ({
@@ -24,7 +24,10 @@ const LoginForm = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const theme = useTheme();
-  const { language, languageList, setLanguage } = useLocalization();
+  const t = useTranslation();
+
+  const { languages, language, setLanguage } = useLocalization();
+  const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
   const [failed, setFailed] = useState(false);
   const [email, setEmail] = useState('');
@@ -32,14 +35,6 @@ const LoginForm = () => {
   const registrationEnabled = useSelector((state) => (state.session.server ? state.session.server.registration : false));
   const emailEnabled = useSelector((state) => (state.session.server ? state.session.server.emailEnabled : false));
 
-  const handleEmailChange = (event) => {
-    setEmail(event.target.value);
-  };
-
-  const handlePasswordChange = (event) => {
-    setPassword(event.target.value);
-  };
-
   const handleLogin = async (event) => {
     event.preventDefault();
     const response = await fetch('/api/session', {
@@ -62,10 +57,6 @@ const LoginForm = () => {
     }
   };
 
-  const handleLanguageChange = (e) => {
-    setLanguage(e.target.value);
-  };
-
   return (
     <StartPage>
       <Grid container direction="column" spacing={2}>
@@ -87,7 +78,7 @@ const LoginForm = () => {
             value={email}
             autoComplete="email"
             autoFocus
-            onChange={handleEmailChange}
+            onChange={(e) => setEmail(e.target.value)}
             onKeyUp={handleSpecialKey}
             helperText={failed && 'Invalid username or password'}
             variant="filled"
@@ -103,7 +94,7 @@ const LoginForm = () => {
             value={password}
             type="password"
             autoComplete="current-password"
-            onChange={handlePasswordChange}
+            onChange={(e) => setPassword(e.target.value)}
             onKeyUp={handleSpecialKey}
             variant="filled"
           />
@@ -129,8 +120,8 @@ const LoginForm = () => {
           <Grid item xs>
             <FormControl variant="filled" fullWidth>
               <InputLabel>{t('loginLanguage')}</InputLabel>
-              <Select value={language} onChange={handleLanguageChange}>
-                {languageList.map((lang) => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
+              <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
+                {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)}
               </Select>
             </FormControl>
           </Grid>
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 9e31fa15..1fa4db5d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -10,10 +10,13 @@ import { prepareIcon, loadImage } from './mapUtil';
 import {
   styleCarto, styleMapbox, styleMapTiler, styleOsm,
 } from './mapStyles';
-import t from '../LocalizationProvider';
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
 
+// TODO fix localization
+import en from '../../../web/l10n/en.json';
+const t = (key) => en[key];
+
 const element = document.createElement('div');
 element.style.width = '100%';
 element.style.height = '100%';
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index 7aff0da0..6733e980 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -4,8 +4,8 @@ import {
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from '../EditItemView';
-import positionAttributes from '../attributes/positionAttributes';
 import { useTranslation } from '../LocalizationProvider';
+import { usePositionAttributes } from '../attributes/positionAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -17,6 +17,8 @@ const ComputedAttributePage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   const [item, setItem] = useState();
   const [key, setKey] = useState();
 
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index faf8acbe..88b9504d 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -7,7 +7,7 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
-import deviceAttributes from '../attributes/deviceAttributes';
+import { useDeviceAttributes } from '../attributes/deviceAttributes';
 import SelectField from '../form/SelectField';
 import { useTranslation } from '../LocalizationProvider';
 
@@ -21,6 +21,8 @@ const GroupPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const deviceAttributes = useDeviceAttributes(t);
+
   const [item, setItem] = useState();
 
   return (
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index a9fed7d6..d9500bed 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -7,12 +7,12 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { prefixString } from '../common/stringUtils';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
-import positionAttributes from '../attributes/positionAttributes';
 import { useAttributePreference } from '../common/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
 } from '../common/converter';
 import { useTranslation } from '../LocalizationProvider';
+import { usePositionAttributes } from '../attributes/positionAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -24,6 +24,8 @@ const MaintenancePage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   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 5b040b55..a59a24e1 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -6,7 +6,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 
-import positionAttributes from '../attributes/positionAttributes';
+import { usePositionAttributes } from '../attributes/positionAttributes';
 import { formatDistance, formatSpeed } from '../common/formatter';
 import { useAttributePreference } from '../common/preferences';
 import OptionsLayout from './OptionsLayout';
@@ -23,6 +23,8 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   const [items, setItems] = useState([]);
   const speedUnit = useAttributePreference('speedUnit');
   const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 98104d76..6d895d0f 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -4,7 +4,7 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t, { findStringKeys } from '../LocalizationProvider';
+import t, { findStringKeys, useTranslation, useTranslationKeys } from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import { prefixString, unprefixString } from '../common/stringUtils';
 import SelectField from '../form/SelectField';
@@ -17,10 +17,11 @@ const useStyles = makeStyles(() => ({
 
 const NotificationPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
-  const alarms = findStringKeys((it) => it.startsWith('alarm')).map((it) => ({
+  const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({
     key: unprefixString('alarm', it),
     name: t(it),
   }));
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index dd969196..fea03722 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -13,8 +13,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 import SideNav from '../../components/SideNav';
 import NavBar from '../../components/NavBar';
-import t from '../../LocalizationProvider';
 import useRoutes from './useRoutes';
+import { useTranslation } from '../../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -54,9 +54,11 @@ const OptionsLayout = ({ children }) => {
   const classes = useStyles();
   const location = useLocation();
   const history = useHistory();
+  const routes = useRoutes();
+  const t = useTranslation();
+
   const [openDrawer, setOpenDrawer] = useState(false);
   const [optionTitle, setOptionTitle] = useState();
-  const routes = useRoutes();
 
   useEffect(() => {
     const activeRoute = routes.find(