From 105e4ec887e249ec47db83095504012bad22df80 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Fri, 3 Sep 2021 00:21:33 -0700 Subject: More translation migrations --- modern/src/DevicePage.js | 4 +++- modern/src/GeofencePage.js | 4 +++- modern/src/LocalizationProvider.js | 4 +--- modern/src/PositionPage.js | 1 + modern/src/UserPage.js | 4 +++- modern/src/admin/ServerPage.js | 7 +++++-- modern/src/attributes/deviceAttributes.js | 6 +++--- modern/src/attributes/geofenceAttributes.js | 6 +++--- modern/src/attributes/positionAttributes.js | 6 +++--- modern/src/attributes/userAttributes.js | 6 +++--- modern/src/common/formatter.js | 17 ++++++++++++---- modern/src/common/usePersistedState.js | 6 +++--- modern/src/components/registration/LoginForm.js | 27 +++++++++---------------- modern/src/map/Map.js | 5 ++++- modern/src/settings/ComputedAttributePage.js | 4 +++- modern/src/settings/GroupPage.js | 4 +++- modern/src/settings/MaintenancePage.js | 4 +++- modern/src/settings/MaintenancesPage.js | 4 +++- modern/src/settings/NotificationPage.js | 5 +++-- modern/src/settings/OptionsLayout/index.js | 6 ++++-- 20 files changed, 76 insertions(+), 54 deletions(-) (limited to 'modern') 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 ( @@ -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 = () => { {t('loginLanguage')} - setLanguage(e.target.value)}> + {languageList.map((it) => {it.name})} 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( -- cgit v1.2.3