Merge branch 'master' into 198-UI

Author: c-simpson

src/client/src/App.js

@@ -1,11 +1,13 @@
-import React from 'react'
+import React from 'react';
+
+import {BrowserRouter as Router, Switch, Route, useHistory} from 'react-router-dom';
 
-import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import Header, {AdminHeader} from "./components/Header";
 
 import HomePage from './pages/Home';
 import Admin from './pages/Admin';
-import DataView from './pages/DataView360/DataView360';
+import Search360 from './pages/DataView360/Search/Search';
+import View360 from './pages/DataView360/View/View';
 import About from './pages/About';
 import Login from './components/Login/Login';
 import RefreshDlg from './components/RefreshDlg';
@@ -15,9 +17,10 @@ import Refresh from './components/Refresh';
 import useToken from './components/Login/useToken';
 var jwt = require('jsonwebtoken');
 
-// Triggers token expiration check 
+
+// Triggers token expiration check
 const sleep = time => new Promise(resolve => setTimeout(resolve, time))
-const expTimer = () => sleep(500).then(() => ({})) 
+const expTimer = () => sleep(500).then(() => ({}))
 
 const AuthContext = React.createContext()
 
@@ -29,7 +32,7 @@ function AuthProvider({children}) {
 
   React.useEffect(() => {
     expTimer().then(
-      user => setState({status: 'success', error: null, user})  // 
+      user => setState({status: 'success', error: null, user})  //
     )
   }, )
 
@@ -72,7 +75,7 @@ function AuthenticatedApp() {
     const { access_token, setToken } = useToken();
 
     var decoded = jwt.decode(access_token, { complete: true });
-    
+
     const userRole = decoded?.payload.role;
     var expTime =  decoded?.payload.exp -  Date.now()/1000;
     const jwtExpired = expTime <= 0
@@ -81,6 +84,8 @@ function AuthenticatedApp() {
 
     const hdr = userRole === 'admin' ?  <AdminHeader /> : <Header /> // If we're going to display a header, which one?
 
+    const history = useHistory();
+
   return (
     <>
         <Router>
@@ -92,30 +97,35 @@ function AuthenticatedApp() {
             {jwtExpired &&  <RefreshDlg shouldOpen={false} setToken={setToken} /> }     { /* Too late, expired: close the dialog */}
 
 
+
             {  /* If not logged in, show login screen */
-              (!access_token | jwtExpired) ?  <Login setToken={setToken} /> :    <Switch>  
+              (!access_token | jwtExpired) ?  <Login setToken={setToken} /> :    <Switch>
 
                 <Route exact path="/">
                     <HomePage/>
                 </Route>
 
 
                 {  /* If an admin, render Upload page       */
-                  userRole === 'admin' && 
+                  userRole === 'admin' &&
                     <Route path="/admin">
                         <Admin/>
                     </Route>
-                    }               
+                    }
 
 
                 <Route path="/about">
                     <About/>
                 </Route>
 
-                <Route path="/dataView">
-                    <DataView/>
+                <Route path="/360view/search">
+                    <Search360/>
                 </Route>
 
+                <Route path="/360view/view">
+                     <View360/>
+                </Route>
+  
                 <Route path="/check"> 
                   <Check access_token = {access_token}/>
                 </Route>
@@ -141,7 +151,7 @@ function Home() {
 }
 
 function App() {
- 
+
   return (
     <AuthProvider>
       <div>

src/client/src/components/Header.js

@@ -13,7 +13,7 @@ export  function AdminHeader(props){  // This one if user has the ADMIN role
             <div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
 
               <Button className={styles.header_link} component={RouterLink} to="/admin">Admin</Button>
-              <Button className={styles.header_link} component={RouterLink} to="/dataView">360 DataView</Button>
+              <Button className={styles.header_link} component={RouterLink} to="/360view/search">360 DataView</Button>
              { /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
             </div>
           </Toolbar>
@@ -28,7 +28,7 @@ export default function Header(props){  // This one if user only has USER role -
           <Toolbar style={{"minWidth":"100", "dipslay":"flex", "justifyContent":"space-between"}}>
             <Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
             <div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
-              <Button className={styles.header_link} component={RouterLink} to="/dataView">360 DataView</Button>
+              <Button className={styles.header_link} component={RouterLink} to="/360view/search">360 DataView</Button>
               { /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
             </div>
           </Toolbar>