Moved some selectors into separate file

1 files changed, 45 insertions, 30 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 064507fb..c11ca96b 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -28,21 +28,22 @@ import CreateIcon from '@material-ui/icons/Create';
 import ReplayIcon from '@material-ui/icons/Replay';
 import BuildIcon from '@material-ui/icons/Build';
 import t from './common/localization';
+import * as selectors from './selectors'
 
 const useStyles = makeStyles(theme => ({
   flex: {
     flexGrow: 1
   },
   appBar: {
-    zIndex: theme.zIndex.drawer + 1,
+    zIndex: theme.zIndex.drawer + 1
   },
   list: {
     width: 250
   },
   menuButton: {
     marginLeft: -12,
-    marginRight: 20,
-  },
+    marginRight: 20
+  }
 }));
 
 const MainToolbar = () => {
@@ -50,11 +51,15 @@ const MainToolbar = () => {
   const [drawer, setDrawer] = useState(false);
   const classes = useStyles();
   const history = useHistory();
-  const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator);
-  const userId = useSelector(state => state.session.user && state.session.user.id);
+  const adminEnabled = useSelector(selectors.getIsAdmin);
+  const userId = useSelector(selectors.getUserId);
 
-  const openDrawer = () => { setDrawer(true) }
-  const closeDrawer = () => { setDrawer(false) }
+  const openDrawer = () => {
+    setDrawer(true);
+  };
+  const closeDrawer = () => {
+    setDrawer(false);
+  };
 
   const handleLogout = async () => {
     const response = await fetch('/api/session', { method: 'DELETE' });
@@ -62,7 +67,7 @@ const MainToolbar = () => {
       dispatch(sessionActions.updateUser(null));
       history.push('/login');
     }
-  }
+  };
 
   return (
     <>
@@ -71,13 +76,16 @@ const MainToolbar = () => {
           <IconButton
             className={classes.menuButton}
             color="inherit"
-            onClick={openDrawer}>
+            onClick={openDrawer}
+          >
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" color="inherit" className={classes.flex}>
             Traccar
           </Typography>
-          <Button color="inherit" onClick={handleLogout}>{t('loginLogout')}</Button>
+          <Button color="inherit" onClick={handleLogout}>
+            {t('loginLogout')}
+          </Button>
         </Toolbar>
       </AppBar>
       <Drawer open={drawer} onClose={closeDrawer}>
@@ -86,7 +94,8 @@ const MainToolbar = () => {
           className={classes.list}
           role="button"
           onClick={closeDrawer}
-          onKeyDown={closeDrawer}>
+          onKeyDown={closeDrawer}
+        >
           <List>
             <ListItem button onClick={() => history.push('/')}>
               <ListItemIcon>
@@ -105,16 +114,15 @@ const MainToolbar = () => {
                 <DescriptionIcon />
               </ListItemIcon>
               <ListItemText primary={t('reportTitle')} />
-            </ListItem>            
+            </ListItem>
           </List>
           <Divider />
-          <List
-            subheader={
-              <ListSubheader>
-                {t('settingsTitle')}
-              </ListSubheader>
-            }>
-            <ListItem button disabled={!userId} onClick={() => history.push(`/user/${userId}`)}>
+          <List subheader={<ListSubheader>{t('settingsTitle')}</ListSubheader>}>
+            <ListItem
+              button
+              disabled={!userId}
+              onClick={() => history.push(`/user/${userId}`)}
+            >
               <ListItemIcon>
                 <PersonIcon />
               </ListItemIcon>
@@ -126,7 +134,10 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('sharedGeofences')} />
             </ListItem>
-            <ListItem button onClick={() => history.push('/settings/notifications')}>
+            <ListItem
+              button
+              onClick={() => history.push('/settings/notifications')}
+            >
               <ListItemIcon>
                 <NotificationsIcon />
               </ListItemIcon>
@@ -144,13 +155,19 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('sharedDrivers')} />
             </ListItem>
-            <ListItem button onClick={() => history.push('/settings/attributes')}>
+            <ListItem
+              button
+              onClick={() => history.push('/settings/attributes')}
+            >
               <ListItemIcon>
                 <StorageIcon />
               </ListItemIcon>
               <ListItemText primary={t('sharedComputedAttributes')} />
             </ListItem>
-            <ListItem button onClick={() => history.push('/settings/maintenances')}>
+            <ListItem
+              button
+              onClick={() => history.push('/settings/maintenances')}
+            >
               <ListItemIcon>
                 <BuildIcon />
               </ListItemIcon>
@@ -160,12 +177,7 @@ const MainToolbar = () => {
           {adminEnabled && (
             <>
               <Divider />
-              <List
-                subheader={
-                  <ListSubheader>
-                    {t('userAdmin')}
-                  </ListSubheader>
-                }>
+              <List subheader={<ListSubheader>{t('userAdmin')}</ListSubheader>}>
                 <ListItem button onClick={() => history.push('/admin/server')}>
                   <ListItemIcon>
                     <StorageIcon />
@@ -178,7 +190,10 @@ const MainToolbar = () => {
                   </ListItemIcon>
                   <ListItemText primary={t('settingsUsers')} />
                 </ListItem>
-                <ListItem button onClick={() => history.push('/admin/statistics')}>
+                <ListItem
+                  button
+                  onClick={() => history.push('/admin/statistics')}
+                >
                   <ListItemIcon>
                     <BarChartIcon />
                   </ListItemIcon>
@@ -191,6 +206,6 @@ const MainToolbar = () => {
       </Drawer>
     </>
   );
-}
+};
 
 export default MainToolbar;