Merge pull request #257 from CodeForPhilly/refactor-360-ui

UI re-factor 360

Author: urirot

src/client/src/App.js

@@ -1,20 +1,23 @@
-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 Check from './pages/Check/Check';
 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()
 
@@ -26,7 +29,7 @@ function AuthProvider({children}) {
 
   React.useEffect(() => {
     expTimer().then(
-      user => setState({status: 'success', error: null, user})  // 
+      user => setState({status: 'success', error: null, user})  //
     )
   }, )
 
@@ -70,45 +73,51 @@ function AuthenticatedApp() {
 
 
     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
 
     const hdr = userRole === 'admin' ?  <AdminHeader /> : <Header /> // If we're going to display a header, which one?
 
+    const history = useHistory();
+
   return (
     <>
         <Router>
-          
-            { !jwtExpired && hdr ?  hdr : '' /* Above-chosen header, or if logged out, no header */ } 
-           
+
+            { !jwtExpired && hdr ?  hdr : '' /* Above-chosen header, or if logged out, no header */ }
+
             {  /* 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="/check"> 
+                  <Route path="/360view/view">
+                      <View360/>
+                  </Route>
+
+                <Route path="/check">
                   <Check />
                 </Route>
             </Switch>
@@ -128,7 +137,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>