Extract MenuItem

src/common/components/MenuItem.jsx

@@ -0,0 +1,22 @@
+import makeStyles from '@mui/styles/makeStyles';
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Link } from 'react-router-dom';
+import React from 'react';
+
+const MenuItem = ({
+  title, link, icon, selected,
+}) => {
+  const classes = makeStyles({
+    menuItemText: {
+      whiteSpace: 'nowrap',
+    },
+  });
+  return (
+    <ListItemButton key={link} component={Link} to={link} selected={selected}>
+      <ListItemIcon>{icon}</ListItemIcon>
+      <ListItemText primary={title} className={classes.menuItemText} />
+    </ListItemButton>
+  );
+};
+
+export default MenuItem;

src/reports/components/ReportsMenu.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  Divider, List, ListItemButton, ListItemIcon, ListItemText,
-} from '@mui/material';
+import { Divider, List } from '@mui/material';
 import StarIcon from '@mui/icons-material/Star';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import PauseCircleFilledIcon from '@mui/icons-material/PauseCircleFilled';
@@ -13,28 +11,10 @@ import BarChartIcon from '@mui/icons-material/BarChart';
 import RouteIcon from '@mui/icons-material/Route';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
 import NotesIcon from '@mui/icons-material/Notes';
-import { Link, useLocation } from 'react-router-dom';
-import makeStyles from '@mui/styles/makeStyles';
+import { useLocation } from 'react-router-dom';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useAdministrator, useRestriction } from '../../common/util/permissions';
-
-const useStyles = makeStyles({
-  menuItemText: {
-    whiteSpace: 'nowrap',
-  },
-});
-
-const MenuItem = ({
-  title, link, icon, selected,
-}) => {
-  const classes = useStyles();
-  return (
-    <ListItemButton key={link} component={Link} to={link} selected={selected}>
-      <ListItemIcon>{icon}</ListItemIcon>
-      <ListItemText primary={title} className={classes.menuItemText} />
-    </ListItemButton>
-  );
-};
+import MenuItem from '../../common/components/MenuItem';
 
 const ReportsMenu = () => {
   const t = useTranslation();

src/settings/components/SettingsMenu.jsx

@@ -15,32 +15,14 @@ import PublishIcon from '@mui/icons-material/Publish';
 import SmartphoneIcon from '@mui/icons-material/Smartphone';
 import HelpIcon from '@mui/icons-material/Help';
 import CampaignIcon from '@mui/icons-material/Campaign';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import makeStyles from '@mui/styles/makeStyles';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import {
   useAdministrator, useManager, useRestriction,
 } from '../../common/util/permissions';
 import useFeatures from '../../common/util/useFeatures';
-
-const useStyles = makeStyles({
-  menuItemText: {
-    whiteSpace: 'nowrap',
-  },
-});
-
-const MenuItem = ({
-  title, link, icon, selected,
-}) => {
-  const classes = useStyles();
-  return (
-    <ListItemButton key={link} component={Link} to={link} selected={selected}>
-      <ListItemIcon>{icon}</ListItemIcon>
-      <ListItemText primary={title} className={classes.menuItemText} />
-    </ListItemButton>
-  );
-};
+import MenuItem from '../../common/components/MenuItem';
 
 const SettingsMenu = () => {
   const t = useTranslation();