From e6f906dbb565abdb29297ec67db3c922135c628c Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Thu, 2 Sep 2021 23:20:12 -0700 Subject: Migrate components --- modern/src/DevicePage.js | 3 +- modern/src/EditCollectionView.js | 3 +- modern/src/EditItemView.js | 4 ++- modern/src/GeofencePage.js | 3 +- modern/src/GeofencesPage.js | 4 +-- modern/src/LocalizationProvider.js | 6 ++-- modern/src/MainPage.js | 3 +- modern/src/MainToolbar.js | 9 ++++-- modern/src/PositionPage.js | 2 +- modern/src/RegisterDialog.js | 4 ++- modern/src/RemoveDialog.js | 4 ++- modern/src/UserPage.js | 3 +- modern/src/admin/ServerPage.js | 5 ++-- modern/src/admin/StatisticsPage.js | 6 +++- modern/src/admin/UsersPage.js | 3 +- modern/src/attributes/AddAttributeDialog.js | 4 ++- modern/src/attributes/EditAttributesView.js | 3 +- modern/src/components/registration/RegisterForm.js | 3 +- modern/src/map/StatusView.js | 3 +- modern/src/reports/ChartReportPage.js | 32 ++++++++++++---------- modern/src/reports/EventReportPage.js | 7 ++++- modern/src/reports/ReportFilter.js | 4 ++- modern/src/reports/ReportLayout.js | 4 ++- modern/src/reports/RouteReportPage.js | 4 ++- modern/src/reports/StopReportPage.js | 3 +- modern/src/reports/SummaryReportPage.js | 5 +++- modern/src/reports/TripReportPage.js | 3 +- modern/src/settings/ComputedAttributePage.js | 4 ++- modern/src/settings/ComputedAttributesPage.js | 4 +-- modern/src/settings/DriverPage.js | 3 +- modern/src/settings/GroupPage.js | 3 +- modern/src/settings/GroupsPage.js | 3 +- modern/src/settings/MaintenancePage.js | 4 ++- modern/src/settings/MaintenancesPage.js | 3 +- modern/src/settings/NotificationsPage.js | 3 +- 35 files changed, 110 insertions(+), 54 deletions(-) (limited to 'modern') 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 (
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 }) => ( - - - - {t('reportChartType')} - - +const ChartType = ({ type, setType }) => { + const t = useTranslation(); + + return ( + + + + {t('reportChartType')} + + + - -); + ); +}; 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 = () => ( - ); 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([]); -- cgit v1.2.3