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] 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