Extract column select component

3 files changed, 34 insertions, 26 deletions

diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index aefd0c6e..67eb4962 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, MenuItem, Select, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
 } from '@material-ui/core';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
@@ -21,7 +21,6 @@ const columnsArray = [
 const columnsMap = new Map(columnsArray);
 
 const RouteReportPage = () => {
-  const classes = useFilterStyles();
   const t = useTranslation();
 
   const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']);
@@ -47,16 +46,7 @@ const RouteReportPage = () => {
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
       <ReportFilter handleSubmit={handleSubmit}>
-        <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
-            <InputLabel>{t('sharedColumns')}</InputLabel>
-            <Select value={columns} onChange={(e) => setColumns(e.target.value)} renderValue={(it) => it.length} multiple>
-              {columnsArray.map(([key, string]) => (
-                <MenuItem value={key}>{t(string)}</MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </div>
+        <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
       </ReportFilter>
       <TableContainer>
         <Table>
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 09128c8a..214773fe 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import {
-  TableContainer, Table, TableRow, TableCell, TableHead, TableBody, FormControl, InputLabel, Select, MenuItem,
+  TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
 } from '@material-ui/core';
 import { formatDate } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
 import usePersistedState from '../common/util/usePersistedState';
+import ColumnSelect from './components/ColumnSelect';
 
 const columnsArray = [
   ['captureTime', 'statisticsCaptureTime'],
@@ -24,7 +25,6 @@ const columnsArray = [
 const columnsMap = new Map(columnsArray);
 
 const StatisticsPage = () => {
-  const classes = useFilterStyles();
   const t = useTranslation();
 
   const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
@@ -41,16 +41,7 @@ const StatisticsPage = () => {
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
       <ReportFilter handleSubmit={handleSubmit} showOnly ignoreDevice>
-        <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
-            <InputLabel>{t('sharedColumns')}</InputLabel>
-            <Select value={columns} onChange={(e) => setColumns(e.target.value)} renderValue={(it) => it.length} multiple>
-              {columnsArray.map(([key, string]) => (
-                <MenuItem value={key}>{t(string)}</MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </div>
+        <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
       </ReportFilter>
       <TableContainer>
         <Table>
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
new file mode 100644
index 00000000..98e97420
--- /dev/null
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -0,0 +1,27 @@
+import { useTranslation } from "../../common/components/LocalizationProvider";
+import { useFilterStyles } from "./ReportFilter";
+
+const ColumnSelect = ({ columns, setColumns, columnsArray }) => {
+  const classes = useFilterStyles();
+  const t = useTranslation();
+  
+  return (
+    <div className={classes.item}>
+      <FormControl variant="filled" fullWidth>
+        <InputLabel>{t('sharedColumns')}</InputLabel>
+        <Select
+          value={columns}
+          onChange={(e) => setColumns(e.target.value)}
+          renderValue={(it) => it.length}
+          multiple
+        >
+          {columnsArray.map(([key, string]) => (
+            <MenuItem value={key}>{t(string)}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+  
+export default ColumnSelect;