diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx index 6d6c81b1d1dda62a7d1b26ffd6207faa58a8e23b..e73b6533fa09bb01e8233fd88e877681cfbb6448 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 4acdf4ea879078e402bb350854540ed02a97be41..66384c974b93d609ac67249c6eb0069614386d5f 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 0000000000000000000000000000000000000000..a6a73455888f027feea529312849ef4f131ecb79 --- /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 7120e527a87173ba46c0a3c87b44152747d02cf3..d2bf725143a41840e55ab027f20c31d32d661586 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 79f4d4fb0f22f7b2318465c729a62e3f88a878e3..1de1b5b9d78cd764388ba0ebb9b2cfd11ebd3847 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>