better graphs - group modal fix - system list

admin/src/App/App.js

@@ -1,7 +1,7 @@
 import Navigation from "./Navigation"
 import { Routes, Route } from 'react-router-dom';
 
-import Restricted from "./Restricted"
+import {AdminRestricted, Restricted} from "./Restricted"
 
 import About from "../Components/About"
 import System from "../System/System"
@@ -20,6 +20,7 @@ const App = (params) => {
 					<Route path="/update-system/:shortName" element={ <Restricted><UpdateSystem/></Restricted>} />
 					<Route path="/create-system" element={ <Restricted><CreateSystem/></Restricted>}  />
 					<Route path="/list-systems" element={ <Restricted><ListSystems/></Restricted>}  />
+					<Route path="/all-systems" element={ <AdminRestricted><ListSystems/></AdminRestricted>}  />
 					<Route path="/" element={ <Restricted><ListSystems/></Restricted>} />
 					<Route render={() => (<div>Miss</div>)} />
 				</Routes>

admin/src/App/Navigation.js

@@ -9,7 +9,7 @@ const navStyle = {
 
 const Navigation = (props) => {
   const dispatch = useDispatch();
-  const { email } = useSelector((state) => state.user);
+  const { email, admin } = useSelector((state) => state.user);
 
   const logout = event => {
     event.preventDefault();
@@ -24,6 +24,11 @@ const Navigation = (props) => {
           {process.env.REACT_APP_SITE_NAME}
         </Menu.Item>
         <Menu.Menu position="right">
+          {admin &&
+          <Link to="/all-systems">
+            <Menu.Item name="all-systems">All Systems</Menu.Item>
+          </Link>          
+          }
           <Link to="/list-systems">
             <Menu.Item name="systems"> Systems</Menu.Item>
           </Link>

admin/src/App/Restricted.js

@@ -7,7 +7,7 @@ import { authenticateUser  } from "../features/user/userSlice";
  * Higher-order component (HOC) to wrap restricted pages
  */
 
-const Restricted = ({children }) => {
+export const Restricted = ({children }) => {
   const { authenticated, hasAuthenticated } = useSelector((state) => state.user);
   const dispatch = useDispatch();
   useEffect(() => {
@@ -26,4 +26,23 @@ const Restricted = ({children }) => {
   
 };
 
+export const AdminRestricted = ({children }) => {
+  const { authenticated, hasAuthenticated, admin } = useSelector((state) => state.user);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(authenticateUser({}));
+  },[]);
+
+  if (hasAuthenticated) {
+    if (authenticated && admin) {
+      return children;;
+    } 
+   else {
+    window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
+  } 
+}
+  return <div/>
+  
+};
+
 export default Restricted