Skip to content

Commit afb224d

Browse files
jasondippeljasondippel
committed
add router and basic home page with header
1 parent 1635c49 commit afb224d

12 files changed

Lines changed: 306 additions & 76 deletions

File tree

‎templates/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^7.1.2",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11+
"react-router-dom": "^5.2.0",
1112
"react-scripts": "3.4.1"
1213
},
1314
"scripts": {

‎templates/src/App.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,6 @@
11
.App {
2-
text-align: center;
32
background-color: white;
43
font-family: 'Montserrat';
54
padding: 0;
65
margin: 0;
76
}
8-
9-
.App-logo {
10-
width: calc(1/8 * 100vw)
11-
}
12-
13-
.App-header h1 {
14-
font-size: calc(1/12 * 100vw);
15-
margin: 0;
16-
margin-top: calc(-1/25 * 100vh);
17-
}
18-
19-
.App-header {
20-
min-height: 100vh;
21-
display: flex;
22-
flex-direction: column;
23-
align-items: center;
24-
justify-content: center;
25-
font-size: calc(10px + 2vmin);
26-
color: black;
27-
}

‎templates/src/App.js‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
1-
import React, { useEffect, useState } from "react";
2-
import logo from "./commit-logo.png";
3-
import "./App.css";
1+
import React from 'react'
2+
import {
3+
BrowserRouter as Router,
4+
Switch,
5+
Route,
6+
Redirect,
7+
} from 'react-router-dom'
8+
import Home from './pages/Home'
9+
import Login from './pages/Login'
10+
import PageNotFound from './pages/PageNotFound'
411

5-
import "./components/Info";
6-
import InfoPanel from "./components/Info";
12+
import './App.css'
13+
import Header from './components/Header'
714

8-
// Set config based on the environment variable the build was run under.
9-
let config = {};
10-
if (process.env.REACT_APP_CONFIG === "production") {
11-
config = require("./config/production.json");
12-
} else if (process.env.REACT_APP_CONFIG === "staging") {
13-
config = require("./config/staging.json");
14-
} else {
15-
config = require("./config/development.json");
15+
// A wrapper for <Route> that redirects to the login
16+
// screen if you're not yet authenticated.
17+
function PrivateRoute({ children, ...rest }) {
18+
// TODO: perform actual check
19+
const isAuthenticated = false
20+
return (
21+
<Route
22+
{...rest}
23+
render={({ location }) =>
24+
isAuthenticated ? (
25+
children
26+
) : (
27+
<Redirect
28+
to={{
29+
pathname: '/login',
30+
state: { from: location },
31+
}}
32+
/>
33+
)
34+
}
35+
/>
36+
)
1637
}
1738

1839
function App() {
19-
const [data, setData] = useState({
20-
info: {},
21-
error: null,
22-
});
23-
24-
const [status, setStatus] = useState({
25-
code: "Checking...",
26-
})
27-
28-
useEffect(() => {
29-
fetch(`${config.backendURL}/status/about`)
30-
.then(result => {
31-
setStatus({
32-
code: result.status,
33-
})
34-
return result.json()
35-
})
36-
.then(data => {
37-
setData({
38-
info: data,
39-
error: null
40-
})
41-
})
42-
.catch(error => {
43-
setData({
44-
info: {},
45-
error: error
46-
})
47-
});
48-
}, []);
49-
5040
return (
51-
<div className="App">
52-
<header className="App-header">
53-
<img src={logo} className="App-logo" alt="logo" />
54-
<h1>zero</h1>
55-
<InfoPanel data={data} status={status} config={config} />
56-
</header>
57-
</div>
58-
);
41+
<Router>
42+
<div className="App">
43+
<Header />
44+
45+
<Switch>
46+
<Route exact path="/">
47+
<Home />
48+
</Route>
49+
<Route path="/login">
50+
<Login />
51+
</Route>
52+
<Route path="*">
53+
<PageNotFound />
54+
</Route>
55+
</Switch>
56+
</div>
57+
</Router>
58+
)
5959
}
6060

61-
export default App;
61+
export default App

‎templates/src/commit-logo-white.png‎

1.71 KB
Loading

‎templates/src/components/Header.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.App-header {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
background-color: #000242;
6+
color: #ffffff;
7+
height: 50px;
8+
padding: 10px 20px;
9+
box-sizing: border-box;
10+
}
11+
12+
.App-header ul {
13+
list-style: none;
14+
padding: 0;
15+
margin: 0;
16+
}
17+
18+
.App-header a {
19+
color: #ffffff;
20+
}
21+
22+
.Header-logo {
23+
height: 25px;
24+
}
25+
26+
.Header-logo img {
27+
height: 25px;
28+
}

‎templates/src/components/Header.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import { Link } from 'react-router-dom'
3+
import logo from '../commit-logo-white.png'
4+
5+
import './Header.css'
6+
7+
function Header() {
8+
return (
9+
<header className="App-header">
10+
<Link to="/" className="Header-logo">
11+
<img src={logo} alt="logo" />
12+
</Link>
13+
14+
<ul>
15+
<li>
16+
<Link to="/login">Login</Link>
17+
</li>
18+
</ul>
19+
</header>
20+
)
21+
}
22+
23+
export default Header

‎templates/src/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
15
body {
26
margin: 0;
37
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

‎templates/src/pages/Home.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.Home {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
margin-top: calc(1 / 12 * 100vh);
7+
font-size: calc(10px + 2vmin);
8+
color: black;
9+
}
10+
11+
.App-logo {
12+
width: calc(1 / 8 * 100vw);
13+
}
14+
15+
.Home h1 {
16+
font-size: calc(1 / 12 * 100vw);
17+
margin: 0;
18+
margin-top: calc(-1 / 25 * 100vh);
19+
}

‎templates/src/pages/Home.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useEffect, useState } from 'react'
2+
import logo from '../commit-logo.png'
3+
import './Home.css'
4+
5+
import '../components/Info'
6+
import InfoPanel from '../components/Info'
7+
8+
// Set config based on the environment variable the build was run under.
9+
let config = {}
10+
if (process.env.REACT_APP_CONFIG === 'production') {
11+
config = require('../config/production.json')
12+
} else if (process.env.REACT_APP_CONFIG === 'staging') {
13+
config = require('../config/staging.json')
14+
} else {
15+
config = require('../config/development.json')
16+
}
17+
18+
function Home() {
19+
const [data, setData] = useState({
20+
info: {},
21+
error: null,
22+
})
23+
24+
const [status, setStatus] = useState({
25+
code: 'Checking...',
26+
})
27+
28+
useEffect(() => {
29+
fetch(`${config.backendURL}/status/about`)
30+
.then((result) => {
31+
setStatus({
32+
code: result.status,
33+
})
34+
return result.json()
35+
})
36+
.then((data) => {
37+
setData({
38+
info: data,
39+
error: null,
40+
})
41+
})
42+
.catch((error) => {
43+
setData({
44+
info: {},
45+
error: error,
46+
})
47+
})
48+
}, [])
49+
50+
return (
51+
<main className="Home">
52+
<img src={logo} className="App-logo" alt="logo" />
53+
<h1>zero</h1>
54+
<InfoPanel data={data} status={status} config={config} />
55+
</main>
56+
)
57+
}
58+
59+
export default Home

‎templates/src/pages/Login.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
function Login() {
4+
return (
5+
<div>
6+
<h1>Login</h1>
7+
</div>
8+
)
9+
}
10+
11+
export default Login

0 commit comments

Comments
 (0)