diff --git a/package.json b/package.json
index cae8988be5d5e4b75ca5763756c9d363c0abe66e..bd81ed312610874e7e0fff5b1f82aa073b79bd8f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"@auth0/auth0-spa-js": "^1.0.2",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
+ "@material-ui/lab": "^4.0.0-alpha.46",
"axios": "^0.19.0",
"clsx": "^1.1.0",
"react": "^16.8.6",
diff --git a/src/App.js b/src/App.js
index 09498bcbce6caad817e300329f37cbed817406a6..48ae760b5f021dcd48ff0d580b6bbca4bb1c0afd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import { Router, Route, Switch } from "react-router-dom";
import PrivateRoute from "./components/PrivateRoute";
import Loading from "./components/Loading";
import NavBar from "./components/NavBar";
-import Home from "./views/Home";
+import LandingPage from "./views/LandingPage";
import Profile from "./views/Profile";
import { useAuth0 } from "./react-auth0-spa";
import history from "./utils/history";
@@ -17,6 +17,7 @@ import IconButton from "@material-ui/core/IconButton";
import Container from "@material-ui/core/Container";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Navigation from "./components/Navigation";
+import HomePage from "./views/HomePage";
const drawerWidth = 240;
@@ -45,10 +46,6 @@ const useStyles = makeStyles((theme) => ({
},
drawerPaperClose: {
overflowX: "hidden",
- transition: theme.transitions.create("width", {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen
- }),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9)
@@ -118,7 +115,8 @@ const App = () => {
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Switch>
- <Route path="/" exact component={Home} />
+ <Route path="/" exact component={LandingPage} />
+ <PrivateRoute path="/home-page" component={HomePage} />
<PrivateRoute path="/profile" component={Profile} />
</Switch>
</Container>
diff --git a/src/views/Home.js b/src/views/HomePage.js
similarity index 62%
rename from src/views/Home.js
rename to src/views/HomePage.js
index f89852c56d6a1c09ae450b55e90b84b9107f6fab..36baa657faaa08a6f99880a154bae54a68d059cd 100644
--- a/src/views/Home.js
+++ b/src/views/HomePage.js
@@ -1,5 +1,4 @@
-import React, { Fragment, useEffect, useState } from "react";
-import { useAuth0 } from "../react-auth0-spa";
+import React, { useEffect, useState } from "react";
import Api from "../utils/api";
import { makeStyles } from "@material-ui/core/styles";
@@ -10,11 +9,13 @@ import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
+import Pagination from "@material-ui/lab/Pagination";
+import CircularProgress from "@material-ui/core/CircularProgress";
const useStyles = makeStyles({
table: {
minWidth: 650,
- overflowY: 'scroll',
+ overflowY: "scroll"
},
tableContainer: {
margin: 24
@@ -68,21 +69,45 @@ const DataTable = ({ rows }) => {
);
};
-const Home = () => {
- const { loading, user } = useAuth0();
+const HomePage = () => {
const [data, setData] = useState([]);
+ const [{ max, skip, count }, setPagination] = useState({
+ max: 15,
+ skip: 0,
+ count: 0
+ });
+ const [initialized, setInitialized] = useState(false);
+ const handlePagination = (_event, page) => {
+ setPagination((prevPagination) => ({
+ ...prevPagination,
+ skip: (page - 1) * prevPagination.max
+ }));
+ };
+ const query = `max=${max}&skip=${skip}`;
useEffect(() => {
- if (!loading && user) {
- Api.get("rest/sunshine").then((data) => setData(data));
- }
- }, [loading, user]);
+ setInitialized(false);
+ Promise.all([
+ Api.get(`rest/sunshine?q={}&${query}`).then((data) => setData(data)),
+ Api.get(`rest/sunshine?q={}&h={"$aggregate":["COUNT:"]}`).then((data) =>
+ setPagination((prevPagination) => ({ ...prevPagination, count: data["COUNT "] }))
+ )
+ ]).then(() => setInitialized(true));
+ }, [skip]);
+
+ if (!initialized) {
+ return (
+ <div>
+ <CircularProgress />
+ </div>
+ );
+ }
return (
- <Fragment>
- <h1>There will be dragons</h1>
- {!user && <h2>Log in to show some data</h2>}
- {user && <DataTable rows={data} />}
- </Fragment>
+ <div>
+ <h1>Home page</h1>
+ <Pagination count={Math.ceil(count / max)} page={skip/max + 1} onChange={handlePagination} />
+ <DataTable rows={data} />
+ </div>
);
};
-export default Home;
+export default HomePage;
diff --git a/src/views/LandingPage.js b/src/views/LandingPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1321504d7627127f9f62a6bf196f98d6d18869b
--- /dev/null
+++ b/src/views/LandingPage.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { useAuth0 } from "../react-auth0-spa";
+import { Redirect } from "react-router-dom";
+
+const LandingPage = () => {
+ const { user } = useAuth0();
+ if (user) {
+ return <Redirect to="/home-page" />;
+ }
+
+ return <h1>Landing page</h1>;
+};
+
+export default LandingPage;
diff --git a/yarn.lock b/yarn.lock
index bd23de3c63af5d8942b1eaf39464bb4e31747703..2520460db06b439a5323d3cfaffdb86505cfc4fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1220,6 +1220,17 @@
dependencies:
"@babel/runtime" "^7.4.4"
+"@material-ui/lab@^4.0.0-alpha.46":
+ version "4.0.0-alpha.46"
+ resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.46.tgz#453546d58d3a0064263c198dedb6a1c54d24d1a4"
+ integrity sha512-JGgZmj1UNP8bbYNAGvndipjXRK3x2+9mFBzbX7MyCj+WpfnJbeqTmJK2No9MXvPj/EZJ1piaKif46FdDc4U93A==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.9.6"
+ clsx "^1.0.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0"
+
"@material-ui/styles@^4.9.0":
version "4.9.0"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
@@ -1265,6 +1276,15 @@
prop-types "^15.7.2"
react-is "^16.8.0"
+"@material-ui/utils@^4.9.6":
+ version "4.9.6"
+ resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.9.6.tgz#5f1f9f6e4df9c8b6a263293b68c94834248ff157"
+ integrity sha512-gqlBn0JPPTUZeAktn1rgMcy9Iczrr74ecx31tyZLVGdBGGzsxzM6PP6zeS7FuoLS6vG4hoZP7hWnOoHtkR0Kvw==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0"
+
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2675,7 +2695,7 @@ clone-deep@^2.0.1:
kind-of "^6.0.0"
shallow-clone "^1.0.0"
-clsx@^1.0.2, clsx@^1.1.0:
+clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702"
integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==