add styling and removes role widget

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>

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

+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>
   )
 }

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>

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

-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

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>