add overflow protection for widget, add new widget and improved styling somewhat

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>

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>

client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx

+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

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>

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>