Gettign going

admin/src/App/App.js

@@ -1,15 +1,48 @@
-import React, { Component }  from "react"
+import React, { Component } from "react"
 import NavigationContainer from "./NavigationContainer"
+import { Routes, Route } from 'react-router-dom';
 
-class App extends Component {
-	render() {
-		return(
+import Restricted from "./Restricted"
+
+import About from "../Components/About"
+import System from "../System/System"
+import ListSystems from "../System/ListSystems"
+import UpdateSystemContainer from "../System/UpdateSystemContainer"
+import CreateSystemContainer from "../System/CreateSystemContainer"
+
+
+const App = (params) => {
+		const {store} = params;
+		return (
 			<div>
 				<NavigationContainer />
-				{this.props.children}
+				<Routes>
+					<Route path="/about"  element={ <Restricted><About/></Restricted>} />
+					<Route path="/system/:shortName" element={ <Restricted><System/></Restricted>} />
+					<Route path="/update-system/:shortName" component={Restricted(UpdateSystemContainer, store)} />
+					<Route path="/create-system" component={Restricted(CreateSystemContainer, store)} />
+					<Route path="/list-systems" element={ <Restricted><ListSystems/></Restricted>}  />
+					<Route path="/" element={ <Restricted><ListSystems/></Restricted>} />
+					<Route render={() => (<div>Miss</div>)} />
+				</Routes>
 			</div>
 		)
-	}
-}
+		/*
+		return (
+			<div>
+				<NavigationContainer />
+				<Routes>
+					<Route path="/about" element={<About />}   component={Restricted(About, store)} />
+					<Route path="/system/:shortName" component={Restricted(SystemContainer, store)} />
+					<Route path="/update-system/:shortName" component={Restricted(UpdateSystemContainer, store)} />
+					<Route path="/create-system" component={Restricted(CreateSystemContainer, store)} />
+					<Route path="/list-systems" component={Restricted(ListSystemsContainer, store)} />
+					<Route path="/" component={Restricted(ListSystemsContainer, store)} />
+					<Route render={() => (<div>Miss</div>)} />
+				</Routes>
+			</div>
+		)*/
+	
+};
 
 export default App

admin/src/App/Restricted.js

@@ -1,12 +1,46 @@
 // in src/restricted.js
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+//import React, { Component } from 'react';
+import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from "react";
+import { useSelector, useDispatch } from 'react-redux'
 import * as types from "../User/user-constants";
 import axios from "axios";
+import {
+  Routes,
+  Route,
+  Link,
+  Navigate,
+  Outlet,
+} from 'react-router-dom';
+import { authenticateUser  } from "../features/user/userSlice";
 /**
  * Higher-order component (HOC) to wrap restricted pages
  */
+
+
+const Restricted = ({children }) => {
+  const { authenticated, hasAuthenticated } = useSelector((state) => state.user);
+  const dispatch = useDispatch();
+  
+  useEffect(() => {
+    dispatch(authenticateUser({}));
+  },[]);
+
+  useEffect(() => {
+    if (!authenticated) {
+      console.log("I loaded things and it is not good")
+    }
+  }, [hasAuthenticated])
+
+  if (authenticated) {
+    return children;;
+  }
+  return <div/>
+  
+};
+
+/*
 const restricted = (BaseComponent, store) => {
+  
   class Restricted extends Component {
     componentDidMount() {
       this.checkAuthentication(this.props);
@@ -32,8 +66,6 @@ const restricted = (BaseComponent, store) => {
               });
             } else {
               window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
-              /*history.replace({ pathname: '/login',
-              state: { nextPathname: params.location.pathname } });*/
             }
           })
           .catch(response => {
@@ -51,4 +83,6 @@ const restricted = (BaseComponent, store) => {
   }
   return withRouter(Restricted);
 }
-export default restricted
+*/
+
+export default Restricted