Skip to content

Commit a1606f2

Browse files
c-simpsonc-simpson
committed
Merge remote-tracking branch 'origin' into k8s-helm
2 parents c449d48 + a091456 commit a1606f2

31 files changed

+961
-468
lines changed

‎src/client/src/App.js

Lines changed: 115 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import React from 'react';
22

3-
import {BrowserRouter as Router, Switch, Route, useHistory} from 'react-router-dom';
3+
import {BrowserRouter as Router, Switch, Route, useHistory, Redirect} from 'react-router-dom';
44

55
import Header, {AdminHeader, LoginHeader} from "./components/Header";
66

7+
import Login from './pages/Login/Login';
78
import HomePage from './pages/Home';
89
import Admin from './pages/Admin';
910
import Search360 from './pages/DataView360/Search/Search';
1011
import View360 from './pages/DataView360/View/View360';
1112
import About from './pages/About';
12-
import Login from './components/Login/Login';
1313
import RefreshDlg from './components/RefreshDlg';
1414
import Check from './pages/Check/Check';
1515
import Refresh from './components/Refresh';
1616

17-
import useToken from './components/Login/useToken';
18-
var jwt = require('jsonwebtoken');
17+
import useToken from './pages/Login/useToken';
18+
19+
let jwt = require('jsonwebtoken');
1920

2021
const REFRESH_POPUP_TIME = 300 // seconds
2122

@@ -26,139 +27,149 @@ const expTimer = () => sleep(500).then(() => ({}))
2627
const AuthContext = React.createContext()
2728

2829
function AuthProvider({children}) {
29-
const [state, setState] = React.useState({
30-
status: 'pending',
31-
error: null,
32-
user: null, })
33-
34-
React.useEffect(() => {
35-
expTimer().then(
36-
user => setState({status: 'success', error: null, user}) //
30+
const [state, setState] = React.useState({
31+
status: 'pending',
32+
error: null,
33+
user: null,
34+
})
35+
36+
React.useEffect(() => {
37+
expTimer().then(
38+
user => setState({status: 'success', error: null, user}) //
39+
)
40+
},)
41+
42+
return (
43+
<AuthContext.Provider value={state}>
44+
{state.status === 'pending' ? (
45+
'App ACP: Loading...'
46+
) : state.status === 'error' ? (
47+
<div>
48+
Oh no
49+
<div>
50+
<pre>{state.error.message}</pre>
51+
</div>
52+
</div>
53+
) : (
54+
children
55+
)}
56+
</AuthContext.Provider>
3757
)
38-
}, )
39-
40-
return (
41-
<AuthContext.Provider value={state}>
42-
{state.status === 'pending' ? (
43-
'App ACP: Loading...'
44-
) : state.status === 'error' ? (
45-
<div>
46-
Oh no
47-
<div>
48-
<pre>{state.error.message}</pre>
49-
</div>
50-
</div>
51-
) : (
52-
children
53-
)}
54-
</AuthContext.Provider>
55-
)
5658
}
5759

5860
function useAuthState() {
59-
const state = React.useContext(AuthContext)
60-
const isPending = state.status === 'pending'
61-
const isError = state.status === 'error'
62-
const isSuccess = state.status === 'success'
63-
const isAuthenticated = state.user && isSuccess
64-
return {
65-
...state,
66-
isPending,
67-
isError,
68-
isSuccess,
69-
isAuthenticated,
70-
}
61+
const state = React.useContext(AuthContext)
62+
const isPending = state.status === 'pending'
63+
const isError = state.status === 'error'
64+
const isSuccess = state.status === 'success'
65+
const isAuthenticated = state.user && isSuccess
66+
return {
67+
...state,
68+
isPending,
69+
isError,
70+
isSuccess,
71+
isAuthenticated,
72+
}
7173
}
7274

7375

7476
function AuthenticatedApp() {
75-
76-
const { access_token, setToken } = useToken();
7777

78-
var decoded = jwt.decode(access_token, { complete: true });
78+
const {access_token, setToken} = useToken();
79+
80+
let decoded = jwt.decode(access_token, {complete: true});
7981

8082
const userRole = decoded?.payload.role;
81-
var expTime = decoded?.payload.exp - Date.now()/1000;
83+
let expTime = decoded?.payload.exp - Date.now() / 1000;
8284
const jwtExpired = !expTime || expTime <= 0
8385

8486
const popRefreshAlert = expTime > 0 && expTime < REFRESH_POPUP_TIME; // Time in secs to pop up refresh dialog
8587

86-
const hdr = userRole === 'admin' ? <AdminHeader /> : <Header /> // If we're going to display a header, which one?
88+
const hdr = userRole === 'admin' ? <AdminHeader/> : <Header/> // If we're going to display a header, which one?
8789

8890
const history = useHistory();
8991

90-
return (
91-
<>
92+
return (
9293
<Router>
93-
94-
{ !jwtExpired && hdr ? hdr : <LoginHeader /> /* Above-chosen header, or if logged out, no header */ }
95-
96-
{popRefreshAlert && <RefreshDlg shouldOpen={true} setToken={setToken} /> } {/* Pop up the refresh dialog */}
97-
98-
{jwtExpired && <RefreshDlg shouldOpen={false} setToken={setToken} /> } { /* Too late, expired: close the dialog */}
99-
100-
<Route path="/about">
101-
<About/>
102-
</Route>
103-
104-
{ /* If not logged in, show login screen */
105-
(!access_token | jwtExpired) ? <Login setToken={setToken} /> : <Switch>
106-
107-
<Route exact path="/">
108-
<HomePage access_token = {access_token}/>
109-
</Route>
11094

95+
{!jwtExpired && hdr ? hdr : <LoginHeader/> /* Above-chosen header, or if logged out, no header */}
96+
{popRefreshAlert &&
97+
<RefreshDlg shouldOpen={true} setToken={setToken}/>} {/* Pop up the refresh dialog */}
11198

112-
{ /* If an admin, render Upload page */
113-
userRole === 'admin' &&
114-
<Route path="/admin">
115-
<Admin access_token = {access_token}/>
116-
</Route>
117-
}
99+
{jwtExpired &&
100+
<RefreshDlg shouldOpen={false} setToken={setToken}/>} { /* Too late, expired: close the dialog */}
118101

119102

120-
121-
<Route path="/360view/search">
122-
<Search360 access_token = {access_token} />
123-
</Route>
124-
125-
<Route path="/360view/view">
126-
<View360 access_token = {access_token} />
127-
</Route>
128-
129-
<Route path="/check">
130-
<Check access_token = {access_token}/>
131-
</Route>
132-
133-
<Route path="/ref">
134-
<Refresh />
135-
</Route>
136-
137-
</Switch>
103+
{ /* If not logged in, show login screen */
104+
(!access_token | jwtExpired) ?
105+
<Switch>
106+
<Route path="/about">
107+
<About/>
108+
</Route>
109+
<Route>
110+
<Login setToken={setToken}/>
111+
</Route>
112+
</Switch>
113+
114+
: <Switch>
115+
<Route exact path="/login">
116+
<Redirect to="/"/>
117+
</Route>
118+
<Route exact path="/">
119+
<HomePage access_token={access_token}/>
120+
</Route>
121+
<Route path="/about">
122+
<About/>
123+
</Route>
124+
125+
{ /* If an admin, render Upload page */
126+
userRole === 'admin' &&
127+
<Route path="/admin">
128+
<Admin access_token={access_token}/>
129+
</Route>
130+
}
131+
132+
133+
<Route path="/360view/search">
134+
<Search360 access_token={access_token}/>
135+
</Route>
136+
137+
<Route path="/360view/view">
138+
<View360 access_token={access_token}/>
139+
</Route>
140+
141+
<Route path="/check">
142+
<Check access_token={access_token}/>
143+
</Route>
144+
145+
<Route path="/ref">
146+
<Refresh/>
147+
</Route>
148+
149+
</Switch>
138150
}
139151

140152
</Router>
141-
</>
142-
)
153+
)
143154
}
144155

145156

146157
function Home() {
147-
const {user} = useAuthState()
148-
/*eslint no-unused-vars: ["warn", { "varsIgnorePattern": "access_token" }]*/
149-
const { access_token, setToken } = useToken();
150-
return user ? <AuthenticatedApp /> : <Login setToken={setToken} />
158+
const {user} = useAuthState()
159+
/*eslint no-unused-vars: ["warn", { "varsIgnorePattern": "access_token" }]*/
160+
const {access_token, setToken} = useToken();
161+
return user ? <AuthenticatedApp/> : <Login setToken={setToken}/>
151162
}
152163

153164
function App() {
154165

155-
return (
156-
<AuthProvider>
157-
<div>
158-
<Home />
159-
</div>
160-
</AuthProvider>
161-
)
166+
return (
167+
<AuthProvider>
168+
<div>
169+
<Home/>
170+
</div>
171+
</AuthProvider>
172+
)
162173
}
163174

164-
export default App
175+
export default App

‎src/client/src/components/Header.js

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,61 @@
1-
import React from "react";
2-
import { Link as RouterLink } from "react-router-dom";
3-
import {AppBar, Button, Toolbar, Typography } from "@material-ui/core";
1+
import React from "react";
2+
import {Link as RouterLink} from "react-router-dom";
3+
import {AppBar, Button, Toolbar, Typography} from "@material-ui/core";
44
import styles from "./styles/header.module.css";
55
import admstyles from "./styles/adm_header.module.css";
66

7-
export function AdminHeader(props){ // This one if user has the ADMIN role
7+
export function AdminHeader(props) { // This one if user has the ADMIN role
88

9-
return(
10-
<AppBar position="static" id="header" className={admstyles.header} elevation={1}>
11-
<Toolbar style={{"minWidth":"100", "dipslay":"flex", "justifyContent":"space-between"}}>
12-
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
13-
<div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
9+
return (
10+
<AppBar position="static" id="header" className={admstyles.header} elevation={1}>
11+
<Toolbar style={{"minWidth": "100", "dipslay": "flex", "justifyContent": "space-between"}}>
12+
<Button className={styles.header_link} component={RouterLink} to="/">
13+
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
14+
</Button>
1415

15-
<Button className={styles.header_link} component={RouterLink} to="/admin">Admin</Button>
16-
<Button className={styles.header_link} component={RouterLink} to="/360view/search">360 DataView</Button>
17-
<Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
18-
{ /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
19-
</div>
20-
</Toolbar>
16+
<div style={{"display": "flex", "justifyContent": "space-between", "margin": "16px 6px 16px 16px"}}>
17+
18+
<Button className={styles.header_link} component={RouterLink} to="/admin">Admin</Button>
19+
<Button className={styles.header_link} component={RouterLink} to="/360view/search">360
20+
DataView</Button>
21+
<Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
22+
{ /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */}
23+
</div>
24+
</Toolbar>
2125
</AppBar>
22-
);
26+
);
2327
}
2428

25-
export function LoginHeader(props){ // This one for login page
26-
27-
return(
28-
<AppBar position="static" id="header" className={styles.header} elevation={1}>
29-
<Toolbar style={{"minWidth":"100", "dipslay":"flex", "justifyContent":"space-between"}}>
30-
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
31-
<div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
32-
<Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
33-
{ /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
34-
</div>
35-
</Toolbar>
29+
export function LoginHeader(props) { // This one for login page
30+
31+
return (
32+
<AppBar position="static" id="header" className={styles.header} elevation={1}>
33+
<Toolbar style={{"minWidth": "100", "dipslay": "flex", "justifyContent": "space-between"}}>
34+
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
35+
<div style={{"display": "flex", "justifyContent": "space-between", "margin": "16px 6px 16px 16px"}}>
36+
<Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
37+
{ /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */}
38+
</div>
39+
</Toolbar>
3640
</AppBar>
37-
);
41+
);
3842
}
3943

4044

45+
export default function Header(props) { // This one if user only has USER role - no link to Admin page
4146

42-
43-
export default function Header(props){ // This one if user only has USER role - no link to Admin page
44-
45-
return(
46-
<AppBar position="static" id="header" className={styles.header} elevation={1}>
47-
<Toolbar style={{"minWidth":"100", "dipslay":"flex", "justifyContent":"space-between"}}>
48-
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
49-
<div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
50-
<Button className={styles.header_link} component={RouterLink} to="/360view/search">360 DataView</Button>
51-
<Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
52-
{ /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
53-
</div>
54-
</Toolbar>
47+
return (
48+
<AppBar position="static" id="header" className={styles.header} elevation={1}>
49+
<Toolbar style={{"minWidth": "100", "dipslay": "flex", "justifyContent": "space-between"}}>
50+
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
51+
<div style={{"display": "flex", "justifyContent": "space-between", "margin": "16px 6px 16px 16px"}}>
52+
<Button className={styles.header_link} component={RouterLink} to="/360view/search">360
53+
DataView</Button>
54+
<Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
55+
{ /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */}
56+
</div>
57+
</Toolbar>
5558
</AppBar>
56-
);
59+
);
5760
}
5861

‎src/client/src/components/RefreshDlg.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent';
66
import DialogContentText from '@material-ui/core/DialogContentText';
77
import DialogTitle from '@material-ui/core/DialogTitle';
88

9-
import useToken from './Login/useToken';
9+
import useToken from '../pages/Login/useToken';
1010

1111
import Refresh from './Refresh';
1212

0 commit comments

Comments
 (0)