8 files changed, 41 insertions, 21 deletions
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');