From 0fbc8fa98e345c3740fb4e05db8fd13c102f10cd Mon Sep 17 00:00:00 2001
From: bmodee <bjomo323@student.liu.se>
Date: Tue, 13 Apr 2021 09:31:41 +0200
Subject: [PATCH 1/6] add dashboard file and widget folder
---
client/src/pages/admin/AdminPage.tsx | 5 ++---
client/src/pages/admin/dashboard/Dashboard.tsx | 16 ++++++++++++++++
.../admin/dashboard/widgets/CurrentUser.tsx | 16 ++++++++++++++++
3 files changed, 34 insertions(+), 3 deletions(-)
create mode 100644 client/src/pages/admin/dashboard/Dashboard.tsx
create mode 100644 client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx
index 921f721d..c4e43b6d 100644
--- a/client/src/pages/admin/AdminPage.tsx
+++ b/client/src/pages/admin/AdminPage.tsx
@@ -23,6 +23,7 @@ import { getRoles } from '../../actions/roles'
import { logoutUser } from '../../actions/user'
import { useAppDispatch, useAppSelector } from '../../hooks'
import CompetitionManager from './competitions/CompetitionManager'
+import Dashboard from './dashboard/Dashboard'
import RegionManager from './regions/Regions'
import { LeftDrawer } from './styled'
import UserManager from './users/UserManager'
@@ -138,9 +139,7 @@ const AdminView: React.FC = () => {
<div className={classes.toolbar} />
<Switch>
<Route exact path={[path, `${path}/startsida`]}>
- <Typography variant="h1" noWrap>
- Startsida
- </Typography>
+ <Dashboard />
</Route>
<Route path={`${path}/regioner`}>
<RegionManager />
diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
new file mode 100644
index 00000000..a8cd1ff5
--- /dev/null
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -0,0 +1,16 @@
+import Box from '@material-ui/core/Box'
+import React from 'react'
+import CurrentUser from './widgets/CurrentUser'
+// import * from '@material-ui/core'
+
+const Dashboard: React.FC = () => {
+ return (
+ <div className="widget-container">
+ <Box display="flex" flexDirection="row" p={1} m={1} bgcolor="text.disabled">
+ <CurrentUser />
+ </Box>
+ </div>
+ )
+}
+
+export default Dashboard
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
new file mode 100644
index 00000000..f81be4eb
--- /dev/null
+++ b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
@@ -0,0 +1,16 @@
+import { Box } from '@material-ui/core'
+import React from 'react'
+
+// import * from '@material-ui/core'
+
+const CurrentUser: React.FC = () => {
+ return (
+ <div>
+ <Box color="text.primary" bgcolor="secondary.main" fontFamily="h3.fontFamily" width="200%" height="200%">
+ Current User Widget
+ </Box>
+ </div>
+ )
+}
+
+export default CurrentUser
--
GitLab
From a4529393f5140f500334424d418efa5aa23fcd98 Mon Sep 17 00:00:00 2001
From: bmodee <bjomo323@student.liu.se>
Date: Tue, 13 Apr 2021 11:10:11 +0200
Subject: [PATCH 2/6] add styling and dashboard grid
---
client/src/pages/admin/AdminPage.tsx | 4 +-
.../src/pages/admin/dashboard/Dashboard.tsx | 53 ++++++++++++++++---
.../admin/dashboard/widgets/CurrentUser.tsx | 4 +-
3 files changed, 52 insertions(+), 9 deletions(-)
diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx
index c4e43b6d..a0dbe2bd 100644
--- a/client/src/pages/admin/AdminPage.tsx
+++ b/client/src/pages/admin/AdminPage.tsx
@@ -46,7 +46,9 @@ const useStyles = makeStyles((theme: Theme) =>
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
- paddingLeft: theme.spacing(31),
+ paddingTop: theme.spacing(2),
+ paddingLeft: theme.spacing(35),
+ paddingRight: theme.spacing(5),
},
})
)
diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
index a8cd1ff5..e3139d72 100644
--- a/client/src/pages/admin/dashboard/Dashboard.tsx
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -1,14 +1,55 @@
-import Box from '@material-ui/core/Box'
+import Grid from '@material-ui/core/Grid'
+import Paper from '@material-ui/core/Paper'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import React from 'react'
import CurrentUser from './widgets/CurrentUser'
-// import * from '@material-ui/core'
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ },
+ })
+)
const Dashboard: React.FC = () => {
+ const classes = useStyles()
+
return (
- <div className="widget-container">
- <Box display="flex" flexDirection="row" p={1} m={1} bgcolor="text.disabled">
- <CurrentUser />
- </Box>
+ <div className={classes.root}>
+ <div>
+ <Grid container spacing={3}>
+ <Grid item xs={12}>
+ <Paper className={classes.paper}>Dashboard Header</Paper>
+ </Grid>
+ <Grid item xs={6}>
+ <Paper className={classes.paper}>Widget 1</Paper>
+ </Grid>
+ <Grid item xs={6}>
+ <Paper className={classes.paper}>Widget 2</Paper>
+ </Grid>
+ <Grid item xs={3}>
+ <Paper className={classes.paper}>Widget 3</Paper>
+ </Grid>
+ <Grid item xs={3}>
+ <Paper className={classes.paper}>
+ Widget 4
+ <CurrentUser />
+ </Paper>
+ </Grid>
+ <Grid item xs={3}>
+ <Paper className={classes.paper}>Widget 5</Paper>
+ </Grid>
+ <Grid item xs={3}>
+ <Paper className={classes.paper}>Widget 6</Paper>
+ </Grid>
+ </Grid>
+ </div>
</div>
)
}
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
index f81be4eb..b197e7b0 100644
--- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
+++ b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
@@ -6,8 +6,8 @@ import React from 'react'
const CurrentUser: React.FC = () => {
return (
<div>
- <Box color="text.primary" bgcolor="secondary.main" fontFamily="h3.fontFamily" width="200%" height="200%">
- Current User Widget
+ <Box color="text.primary" bgcolor="secondary.main" fontFamily="h3.fontFamily" width="100%" height="100%">
+ Current user info
</Box>
</div>
)
--
GitLab
From fe0eefb374f47b25bf1433eb578b2bffc60b26ce Mon Sep 17 00:00:00 2001
From: bmodee <bjomo323@student.liu.se>
Date: Tue, 13 Apr 2021 12:05:10 +0200
Subject: [PATCH 3/6] add 4 widgets to dashboard
---
client/package-lock.json | 115 ++++++++++++++++++
client/package.json | 3 +
.../src/pages/admin/dashboard/Dashboard.tsx | 26 +++-
.../admin/dashboard/widgets/CurrentUser.tsx | 10 +-
.../dashboard/widgets/NumberOfRegions.tsx | 26 ++++
.../admin/dashboard/widgets/NumberOfRoles.tsx | 26 ++++
.../admin/dashboard/widgets/NumberOfUsers.tsx | 27 ++++
7 files changed, 223 insertions(+), 10 deletions(-)
create mode 100644 client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
create mode 100644 client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx
create mode 100644 client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
diff --git a/client/package-lock.json b/client/package-lock.json
index b08413fa..7e73859f 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1125,6 +1125,49 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
+ "@devexpress/dx-chart-core": {
+ "version": "2.7.5",
+ "resolved": "https://registry.npmjs.org/@devexpress/dx-chart-core/-/dx-chart-core-2.7.5.tgz",
+ "integrity": "sha512-ZSpBN7SjnOhBOcvmuYZ5U+XyUYKlsTrYXCYMfFH2qXwvqh0e0UbhzW1FPfDXdWqx0Y52MtPX0HJrBC4QqH7Bcg==",
+ "requires": {
+ "d3-array": "^2.4.0",
+ "d3-scale": "^3.2.0",
+ "d3-shape": "^1.3.7"
+ }
+ },
+ "@devexpress/dx-core": {
+ "version": "2.7.5",
+ "resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.7.5.tgz",
+ "integrity": "sha512-VQQkz0uUqQ7YuVZeBEx1JFqpSSe5Bz9Qy2T0XAbilBQ8IItj74xjzaFMCNjuASAKXOJGtG0RUh+BOKrMGV7jlg=="
+ },
+ "@devexpress/dx-react-chart": {
+ "version": "2.7.5",
+ "resolved": "https://registry.npmjs.org/@devexpress/dx-react-chart/-/dx-react-chart-2.7.5.tgz",
+ "integrity": "sha512-j3nPsHrMiCbgm6olZCykxHOxxJ2XXG0CVihMYGOoyenM74Ed+NIaLi1bk2VtxKZdEPB5UrWgU10rd9SLH45BsQ==",
+ "requires": {
+ "@devexpress/dx-chart-core": "2.7.5",
+ "d3-scale": "^3.2.0",
+ "d3-shape": "^1.3.7"
+ }
+ },
+ "@devexpress/dx-react-chart-material-ui": {
+ "version": "2.7.5",
+ "resolved": "https://registry.npmjs.org/@devexpress/dx-react-chart-material-ui/-/dx-react-chart-material-ui-2.7.5.tgz",
+ "integrity": "sha512-uS450uSP1D6mZ2jgtueShqaATNRVqJEwqhgyRQUXL/gQyTrTCvM61TC5NLyEYCOW6RkiHK1BabWbhJlVATZbeg==",
+ "requires": {
+ "clsx": "^1.0.4",
+ "prop-types": "^15.7.2"
+ }
+ },
+ "@devexpress/dx-react-core": {
+ "version": "2.7.5",
+ "resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.7.5.tgz",
+ "integrity": "sha512-YwJ4l8nnMs/vghqamo8OzirDnrbT1ZNIcMP5xJFJJQIyfYAXvGGDS4yLeYI4cwitBg/d2O4jMOReXDB8tUaDDQ==",
+ "requires": {
+ "@devexpress/dx-core": "2.7.5",
+ "prop-types": "^15.7.2"
+ }
+ },
"@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -5416,6 +5459,73 @@
"type": "^1.0.1"
}
},
+ "d3-array": {
+ "version": "2.12.1",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+ "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+ "requires": {
+ "internmap": "^1.0.0"
+ }
+ },
+ "d3-color": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+ "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+ },
+ "d3-format": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+ "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+ },
+ "d3-interpolate": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+ "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+ "requires": {
+ "d3-color": "1 - 2"
+ }
+ },
+ "d3-path": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+ "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+ },
+ "d3-scale": {
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.4.tgz",
+ "integrity": "sha512-PG6gtpbPCFqKbvdBEswQcJcTzHC8VEd/XzezF5e68KlkT4/ggELw/nR1tv863jY6ufKTvDlzCMZvhe06codbbA==",
+ "requires": {
+ "d3-array": "^2.3.0",
+ "d3-format": "1 - 2",
+ "d3-interpolate": "1.2.0 - 2",
+ "d3-time": "1 - 2",
+ "d3-time-format": "2 - 3"
+ }
+ },
+ "d3-shape": {
+ "version": "1.3.7",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+ "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+ "requires": {
+ "d3-path": "1"
+ }
+ },
+ "d3-time": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+ "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+ "requires": {
+ "d3-array": "2"
+ }
+ },
+ "d3-time-format": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+ "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+ "requires": {
+ "d3-time": "1 - 2"
+ }
+ },
"damerau-levenshtein": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -8492,6 +8602,11 @@
"side-channel": "^1.0.4"
}
},
+ "internmap": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+ "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+ },
"ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
diff --git a/client/package.json b/client/package.json
index f41350a6..2d393d3d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@devexpress/dx-react-chart": "^2.7.5",
+ "@devexpress/dx-react-chart-material-ui": "^2.7.5",
+ "@devexpress/dx-react-core": "^2.7.5",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
index e3139d72..07426279 100644
--- a/client/src/pages/admin/dashboard/Dashboard.tsx
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -3,6 +3,9 @@ import Paper from '@material-ui/core/Paper'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import React from 'react'
import CurrentUser from './widgets/CurrentUser'
+import NumberOfRegions from './widgets/NumberOfRegions'
+import NumberOfRoles from './widgets/NumberOfRoles'
+import NumberOfUsers from './widgets/NumberOfUsers'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -25,25 +28,36 @@ const Dashboard: React.FC = () => {
<div>
<Grid container spacing={3}>
<Grid item xs={12}>
- <Paper className={classes.paper}>Dashboard Header</Paper>
+ <Paper className={classes.paper}>
+ <h1>Dashboard Header</h1>
+ </Paper>
</Grid>
<Grid item xs={6}>
- <Paper className={classes.paper}>Widget 1</Paper>
+ <Paper className={classes.paper}>
+ <h1>Du är inloggad som:</h1>
+ <CurrentUser />
+ </Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>Widget 2</Paper>
</Grid>
<Grid item xs={3}>
- <Paper className={classes.paper}>Widget 3</Paper>
+ <Paper className={classes.paper}>
+ <h1>Antal Användare:</h1>
+ <NumberOfUsers />
+ </Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
- Widget 4
- <CurrentUser />
+ <h1>Antal Regioner:</h1>
+ <NumberOfRegions />
</Paper>
</Grid>
<Grid item xs={3}>
- <Paper className={classes.paper}>Widget 5</Paper>
+ <Paper className={classes.paper}>
+ <h1>Antal Roller:</h1>
+ <NumberOfRoles />
+ </Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>Widget 6</Paper>
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
index b197e7b0..1c61a808 100644
--- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
+++ b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
@@ -1,14 +1,16 @@
-import { Box } from '@material-ui/core'
import React from 'react'
+import { useAppSelector } from '../../../../hooks'
// import * from '@material-ui/core'
const CurrentUser: React.FC = () => {
+ const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
return (
<div>
- <Box color="text.primary" bgcolor="secondary.main" fontFamily="h3.fontFamily" width="100%" height="100%">
- Current user info
- </Box>
+ <div>Namn: {currentUser.name}</div>
+ <div>Email: {currentUser.email}</div>
+ <div>Region: {currentUser.city.name}</div>
+ <div>Roll: {currentUser.role.name}</div>
</div>
)
}
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
new file mode 100644
index 00000000..f8757762
--- /dev/null
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
@@ -0,0 +1,26 @@
+import { Box } from '@material-ui/core'
+import React, { useEffect } from 'react'
+import { getSearchUsers } from '../../../../actions/searchUser'
+import { useAppDispatch, useAppSelector } from '../../../../hooks'
+
+// import * from '@material-ui/core'
+
+const NumberOfRegions: React.FC = () => {
+ const cities = useAppSelector((state) => state.cities.cities)
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ dispatch(getSearchUsers())
+ }, [])
+ return (
+ <div>
+ <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <div>
+ <h2>{cities.length} </h2>
+ </div>
+ </Box>
+ </div>
+ )
+}
+
+export default NumberOfRegions
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx
new file mode 100644
index 00000000..b94dcc05
--- /dev/null
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx
@@ -0,0 +1,26 @@
+import { Box } from '@material-ui/core'
+import React, { useEffect } from 'react'
+import { getSearchUsers } from '../../../../actions/searchUser'
+import { useAppDispatch, useAppSelector } from '../../../../hooks'
+
+// import * from '@material-ui/core'
+
+const NumberOfRoles: React.FC = () => {
+ const roles = useAppSelector((state) => state.roles.roles)
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ dispatch(getSearchUsers())
+ }, [])
+ return (
+ <div>
+ <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <div>
+ <h2>{roles.length} </h2>
+ </div>
+ </Box>
+ </div>
+ )
+}
+
+export default NumberOfRoles
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
new file mode 100644
index 00000000..2989c2fb
--- /dev/null
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
@@ -0,0 +1,27 @@
+import { Box } from '@material-ui/core'
+import React, { useEffect } from 'react'
+import { getSearchUsers } from '../../../../actions/searchUser'
+import { useAppDispatch, useAppSelector } from '../../../../hooks'
+
+// import * from '@material-ui/core'
+
+const NumberOfUsers: React.FC = () => {
+ const users = useAppSelector((state) => state.searchUsers.users)
+ const usersTotal = useAppSelector((state) => state.searchUsers.total)
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ dispatch(getSearchUsers())
+ }, [])
+ return (
+ <div>
+ <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <div>
+ <h2>{usersTotal}</h2>
+ </div>
+ </Box>
+ </div>
+ )
+}
+
+export default NumberOfUsers
--
GitLab
From 588849d8948531824a6dac7ab701402038b2bc2d Mon Sep 17 00:00:00 2001
From: bmodee <bjomo323@student.liu.se>
Date: Tue, 13 Apr 2021 14:00:56 +0200
Subject: [PATCH 4/6] add styling and removes role widget
---
.../src/pages/admin/dashboard/Dashboard.tsx | 16 ++----------
.../admin/dashboard/widgets/CurrentUser.tsx | 21 ++++++++++-----
.../dashboard/widgets/NumberOfRegions.tsx | 13 +++++++---
.../admin/dashboard/widgets/NumberOfRoles.tsx | 26 -------------------
.../admin/dashboard/widgets/NumberOfUsers.tsx | 14 +++++++---
5 files changed, 37 insertions(+), 53 deletions(-)
delete mode 100644 client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx
diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
index 07426279..6d6c81b1 100644
--- a/client/src/pages/admin/dashboard/Dashboard.tsx
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -4,7 +4,6 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import React from 'react'
import CurrentUser from './widgets/CurrentUser'
import NumberOfRegions from './widgets/NumberOfRegions'
-import NumberOfRoles from './widgets/NumberOfRoles'
import NumberOfUsers from './widgets/NumberOfUsers'
const useStyles = makeStyles((theme: Theme) =>
@@ -29,7 +28,7 @@ const Dashboard: React.FC = () => {
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
- <h1>Dashboard Header</h1>
+ <h1>Välkommen!</h1>
</Paper>
</Grid>
<Grid item xs={6}>
@@ -38,9 +37,7 @@ const Dashboard: React.FC = () => {
<CurrentUser />
</Paper>
</Grid>
- <Grid item xs={6}>
- <Paper className={classes.paper}>Widget 2</Paper>
- </Grid>
+
<Grid item xs={3}>
<Paper className={classes.paper}>
<h1>Antal Användare:</h1>
@@ -53,15 +50,6 @@ const Dashboard: React.FC = () => {
<NumberOfRegions />
</Paper>
</Grid>
- <Grid item xs={3}>
- <Paper className={classes.paper}>
- <h1>Antal Roller:</h1>
- <NumberOfRoles />
- </Paper>
- </Grid>
- <Grid item xs={3}>
- <Paper className={classes.paper}>Widget 6</Paper>
- </Grid>
</Grid>
</div>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
index 1c61a808..4acdf4ea 100644
--- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
+++ b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
@@ -1,16 +1,25 @@
+import { Box } from '@material-ui/core'
import React from 'react'
import { useAppSelector } from '../../../../hooks'
-// import * from '@material-ui/core'
-
const CurrentUser: React.FC = () => {
const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
return (
<div>
- <div>Namn: {currentUser.name}</div>
- <div>Email: {currentUser.email}</div>
- <div>Region: {currentUser.city.name}</div>
- <div>Roll: {currentUser.role.name}</div>
+ <Box display="flex" flexDirection="column" alignContent="flex-start">
+ <div>
+ <h2>Namn: {currentUser.name}</h2>
+ </div>
+ <div>
+ <h2>Email: {currentUser.email}</h2>
+ </div>
+ <div>
+ <h2>Region: {currentUser.city.name}</h2>
+ </div>
+ <div>
+ <h2>Roll: {currentUser.role.name}</h2>
+ </div>
+ </Box>
</div>
)
}
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
index f8757762..7120e527 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
@@ -3,12 +3,19 @@ import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
-// import * from '@material-ui/core'
-
const NumberOfRegions: React.FC = () => {
const cities = useAppSelector((state) => state.cities.cities)
const dispatch = useAppDispatch()
+ const handleCount = () => {
+ if (cities.length >= 1000000) {
+ ;<div>{cities.length / 1000000 + 'M'}</div>
+ } else if (cities.length >= 1000) {
+ ;<div>{cities.length / 1000 + 'K'}</div>
+ }
+ return <div>{cities.length}</div>
+ }
+
useEffect(() => {
dispatch(getSearchUsers())
}, [])
@@ -16,7 +23,7 @@ const NumberOfRegions: React.FC = () => {
<div>
<Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
<div>
- <h2>{cities.length} </h2>
+ <h2>{handleCount()}</h2>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx
deleted file mode 100644
index b94dcc05..00000000
--- a/client/src/pages/admin/dashboard/widgets/NumberOfRoles.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Box } from '@material-ui/core'
-import React, { useEffect } from 'react'
-import { getSearchUsers } from '../../../../actions/searchUser'
-import { useAppDispatch, useAppSelector } from '../../../../hooks'
-
-// import * from '@material-ui/core'
-
-const NumberOfRoles: React.FC = () => {
- const roles = useAppSelector((state) => state.roles.roles)
- const dispatch = useAppDispatch()
-
- useEffect(() => {
- dispatch(getSearchUsers())
- }, [])
- return (
- <div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
- <div>
- <h2>{roles.length} </h2>
- </div>
- </Box>
- </div>
- )
-}
-
-export default NumberOfRoles
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
index 2989c2fb..79f4d4fb 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
@@ -3,13 +3,19 @@ import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
-// import * from '@material-ui/core'
-
const NumberOfUsers: React.FC = () => {
- const users = useAppSelector((state) => state.searchUsers.users)
const usersTotal = useAppSelector((state) => state.searchUsers.total)
const dispatch = useAppDispatch()
+ const handleCount = () => {
+ if (usersTotal >= 1000000) {
+ ;<div>{usersTotal / 1000000 + 'M'}</div>
+ } else if (usersTotal >= 1000) {
+ ;<div>{usersTotal / 1000 + 'K'}</div>
+ }
+ return <div>{usersTotal}</div>
+ }
+
useEffect(() => {
dispatch(getSearchUsers())
}, [])
@@ -17,7 +23,7 @@ const NumberOfUsers: React.FC = () => {
<div>
<Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
<div>
- <h2>{usersTotal}</h2>
+ <h2>{handleCount()}</h2>
</div>
</Box>
</div>
--
GitLab
From e6af0c8672fac2e012b7cf34be73868483fbb454 Mon Sep 17 00:00:00 2001
From: bmodee <bjomo323@student.liu.se>
Date: Tue, 13 Apr 2021 18:53:49 +0200
Subject: [PATCH 5/6] add overflow protection for widget, add new widget and
improved styling somewhat
---
.../src/pages/admin/dashboard/Dashboard.tsx | 19 ++++++-----
.../admin/dashboard/widgets/CurrentUser.tsx | 2 +-
.../widgets/NumberOfCompetitions.tsx | 33 +++++++++++++++++++
.../dashboard/widgets/NumberOfRegions.tsx | 14 ++++----
.../admin/dashboard/widgets/NumberOfUsers.tsx | 2 +-
5 files changed, 52 insertions(+), 18 deletions(-)
create mode 100644 client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
index 6d6c81b1..e73b6533 100644
--- a/client/src/pages/admin/dashboard/Dashboard.tsx
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -3,6 +3,7 @@ import Paper from '@material-ui/core/Paper'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import React from 'react'
import CurrentUser from './widgets/CurrentUser'
+import NumberOfCompetitions from './widgets/NumberOfCompetitions'
import NumberOfRegions from './widgets/NumberOfRegions'
import NumberOfUsers from './widgets/NumberOfUsers'
@@ -26,30 +27,30 @@ const Dashboard: React.FC = () => {
<div className={classes.root}>
<div>
<Grid container spacing={3}>
- <Grid item xs={12}>
+ <Grid item xs={4}>
<Paper className={classes.paper}>
- <h1>Välkommen!</h1>
- </Paper>
- </Grid>
- <Grid item xs={6}>
- <Paper className={classes.paper}>
- <h1>Du är inloggad som:</h1>
<CurrentUser />
</Paper>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs>
<Paper className={classes.paper}>
<h1>Antal Användare:</h1>
<NumberOfUsers />
</Paper>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs>
<Paper className={classes.paper}>
<h1>Antal Regioner:</h1>
<NumberOfRegions />
</Paper>
</Grid>
+ <Grid item xs>
+ <Paper className={classes.paper}>
+ <h1>Antal Tävlingar:</h1>
+ <NumberOfCompetitions />
+ </Paper>
+ </Grid>
</Grid>
</div>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
index 4acdf4ea..66384c97 100644
--- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
+++ b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
@@ -8,7 +8,7 @@ const CurrentUser: React.FC = () => {
<div>
<Box display="flex" flexDirection="column" alignContent="flex-start">
<div>
- <h2>Namn: {currentUser.name}</h2>
+ <h1>Välkommen, {currentUser.name}!</h1>
</div>
<div>
<h2>Email: {currentUser.email}</h2>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
new file mode 100644
index 00000000..a6a73455
--- /dev/null
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
@@ -0,0 +1,33 @@
+import { Box } from '@material-ui/core'
+import React, { useEffect } from 'react'
+import { getSearchUsers } from '../../../../actions/searchUser'
+import { useAppDispatch, useAppSelector } from '../../../../hooks'
+
+const NumberOfCompetitions: React.FC = () => {
+ const cities = useAppSelector((state) => state.cities.cities)
+ const dispatch = useAppDispatch()
+
+ const handleCount = () => {
+ if (cities.length >= 1000000) {
+ ;<div>{cities.length / 1000000 + 'M'}</div>
+ } else if (cities.length >= 1000) {
+ ;<div>{cities.length / 1000 + 'K'}</div>
+ }
+ return <div>{cities.length}</div>
+ }
+
+ useEffect(() => {
+ dispatch(getSearchUsers())
+ }, [])
+ return (
+ <div>
+ <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <div>
+ <h1>{handleCount()}</h1>
+ </div>
+ </Box>
+ </div>
+ )
+}
+
+export default NumberOfCompetitions
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
index 7120e527..d2bf7251 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
@@ -4,16 +4,16 @@ import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
const NumberOfRegions: React.FC = () => {
- const cities = useAppSelector((state) => state.cities.cities)
+ const competitionTotal = useAppSelector((state) => state.competitions.total)
const dispatch = useAppDispatch()
const handleCount = () => {
- if (cities.length >= 1000000) {
- ;<div>{cities.length / 1000000 + 'M'}</div>
- } else if (cities.length >= 1000) {
- ;<div>{cities.length / 1000 + 'K'}</div>
+ if (competitionTotal >= 1000000) {
+ ;<div>{competitionTotal / 1000000 + 'M'}</div>
+ } else if (competitionTotal >= 1000) {
+ ;<div>{competitionTotal / 1000 + 'K'}</div>
}
- return <div>{cities.length}</div>
+ return <div>{competitionTotal}</div>
}
useEffect(() => {
@@ -23,7 +23,7 @@ const NumberOfRegions: React.FC = () => {
<div>
<Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
<div>
- <h2>{handleCount()}</h2>
+ <h1>{handleCount()}</h1>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx b/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
index 79f4d4fb..1de1b5b9 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
+++ b/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
@@ -23,7 +23,7 @@ const NumberOfUsers: React.FC = () => {
<div>
<Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
<div>
- <h2>{handleCount()}</h2>
+ <h1>{handleCount()}</h1>
</div>
</Box>
</div>
--
GitLab
From 360ab724d985944d9e72b9bc39855cd2c06a1bad Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Wed, 14 Apr 2021 10:04:27 +0200
Subject: [PATCH 6/6] Fix tests
---
.../src/pages/admin/dashboard/Dashboard.tsx | 18 +++++-------
.../dashboard/components/CurrentUser.tsx | 29 +++++++++++++++++++
.../NumberOfCompetitions.tsx | 6 ++--
.../NumberOfRegions.tsx | 6 ++--
.../{widgets => components}/NumberOfUsers.tsx | 6 ++--
.../admin/dashboard/widgets/CurrentUser.tsx | 27 -----------------
6 files changed, 46 insertions(+), 46 deletions(-)
create mode 100644 client/src/pages/admin/dashboard/components/CurrentUser.tsx
rename client/src/pages/admin/dashboard/{widgets => components}/NumberOfCompetitions.tsx (81%)
rename client/src/pages/admin/dashboard/{widgets => components}/NumberOfRegions.tsx (81%)
rename client/src/pages/admin/dashboard/{widgets => components}/NumberOfUsers.tsx (80%)
delete mode 100644 client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
index e73b6533..a0f569b0 100644
--- a/client/src/pages/admin/dashboard/Dashboard.tsx
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -1,11 +1,10 @@
+import { createStyles, makeStyles, Paper, Theme, Typography } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'
-import Paper from '@material-ui/core/Paper'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import React from 'react'
-import CurrentUser from './widgets/CurrentUser'
-import NumberOfCompetitions from './widgets/NumberOfCompetitions'
-import NumberOfRegions from './widgets/NumberOfRegions'
-import NumberOfUsers from './widgets/NumberOfUsers'
+import CurrentUser from './components/CurrentUser'
+import NumberOfCompetitions from './components/NumberOfCompetitions'
+import NumberOfRegions from './components/NumberOfRegions'
+import NumberOfUsers from './components/NumberOfUsers'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -22,7 +21,6 @@ const useStyles = makeStyles((theme: Theme) =>
const Dashboard: React.FC = () => {
const classes = useStyles()
-
return (
<div className={classes.root}>
<div>
@@ -35,19 +33,19 @@ const Dashboard: React.FC = () => {
<Grid item xs>
<Paper className={classes.paper}>
- <h1>Antal Användare:</h1>
+ <Typography variant="h4">Antal Användare:</Typography>
<NumberOfUsers />
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
- <h1>Antal Regioner:</h1>
+ <Typography variant="h4">Antal Regioner:</Typography>
<NumberOfRegions />
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
- <h1>Antal Tävlingar:</h1>
+ <Typography variant="h4">Antal Tävlingar:</Typography>
<NumberOfCompetitions />
</Paper>
</Grid>
diff --git a/client/src/pages/admin/dashboard/components/CurrentUser.tsx b/client/src/pages/admin/dashboard/components/CurrentUser.tsx
new file mode 100644
index 00000000..0dfdf557
--- /dev/null
+++ b/client/src/pages/admin/dashboard/components/CurrentUser.tsx
@@ -0,0 +1,29 @@
+import { Box, Typography } from '@material-ui/core'
+import React from 'react'
+import { useAppSelector } from '../../../../hooks'
+
+const CurrentUser: React.FC = () => {
+ const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
+ return (
+ <div>
+ <Box display="flex" flexDirection="column" alignContent="flex-start">
+ <div>
+ <Typography variant="h2">
+ Välkommen{currentUser && currentUser.name ? `, ${currentUser.name}` : ''}!
+ </Typography>
+ </div>
+ <div>
+ <Typography variant="h6">Email: {currentUser && currentUser.email}</Typography>
+ </div>
+ <div>
+ <Typography variant="h6">Region: {currentUser && currentUser.city && currentUser.city.name}</Typography>
+ </div>
+ <div>
+ <Typography variant="h6">Roll: {currentUser && currentUser.role && currentUser.role.name}</Typography>
+ </div>
+ </Box>
+ </div>
+ )
+}
+
+export default CurrentUser
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx b/client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx
similarity index 81%
rename from client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
rename to client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx
index a6a73455..da5d015f 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
+++ b/client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
@@ -21,9 +21,9 @@ const NumberOfCompetitions: React.FC = () => {
}, [])
return (
<div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <Box width="100%" height="100%">
<div>
- <h1>{handleCount()}</h1>
+ <Typography variant="h4">{handleCount()}</Typography>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx b/client/src/pages/admin/dashboard/components/NumberOfRegions.tsx
similarity index 81%
rename from client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
rename to client/src/pages/admin/dashboard/components/NumberOfRegions.tsx
index d2bf7251..a48b41a6 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
+++ b/client/src/pages/admin/dashboard/components/NumberOfRegions.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
@@ -21,9 +21,9 @@ const NumberOfRegions: React.FC = () => {
}, [])
return (
<div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <Box width="100%" height="100%">
<div>
- <h1>{handleCount()}</h1>
+ <Typography variant="h4">{handleCount()}</Typography>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx b/client/src/pages/admin/dashboard/components/NumberOfUsers.tsx
similarity index 80%
rename from client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
rename to client/src/pages/admin/dashboard/components/NumberOfUsers.tsx
index 1de1b5b9..af0f9767 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
+++ b/client/src/pages/admin/dashboard/components/NumberOfUsers.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
@@ -21,9 +21,9 @@ const NumberOfUsers: React.FC = () => {
}, [])
return (
<div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <Box width="100%" height="100%">
<div>
- <h1>{handleCount()}</h1>
+ <Typography variant="h4">{handleCount()}</Typography>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
deleted file mode 100644
index 66384c97..00000000
--- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Box } from '@material-ui/core'
-import React from 'react'
-import { useAppSelector } from '../../../../hooks'
-
-const CurrentUser: React.FC = () => {
- const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
- return (
- <div>
- <Box display="flex" flexDirection="column" alignContent="flex-start">
- <div>
- <h1>Välkommen, {currentUser.name}!</h1>
- </div>
- <div>
- <h2>Email: {currentUser.email}</h2>
- </div>
- <div>
- <h2>Region: {currentUser.city.name}</h2>
- </div>
- <div>
- <h2>Roll: {currentUser.role.name}</h2>
- </div>
- </Box>
- </div>
- )
-}
-
-export default CurrentUser
--
GitLab