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