fix(admin-ui): show list of users on dashboard

GluuFederation · Jul 12, 2022 · 6a0f705 · 6a0f705
1 parent 4bfc471
commit 6a0f705
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 44 deletions.
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -303,25 +303,19 @@ function DashboardPage({
   }, [isMobile])
 
   useEffect(() => {
+    let count = 0
     let userOptions = {
       limit: 3,
     }
-    setTimeout(() => {
-      dispatch(getUsers(userOptions))
-    }, 1000)
-  }, [])
-
-  useEffect(() => {
-    let count = 0
     const interval = () => {
-      console.log(count)
       setTimeout(() => {
         if (statData.length === 0 && count < 2) {
           search()
         }
         if (clients.length === 0 && count < 2) {
           buildPayload(userAction, 'Fetch openid connect clients', {})
           dispatch(getClients(userAction))
+          dispatch(getUsers(userOptions))
         }
         if (Object.keys(license).length === 0 && count < 2) {
           getLicense()

diff --git a/admin-ui/app/routes/Dashboards/Table/DashboardTable.js b/admin-ui/app/routes/Dashboards/Table/DashboardTable.js
@@ -1,20 +1,16 @@
 import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
-import Box from '@material-ui/core/Box'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
 import Paper from '@material-ui/core/Paper'
-import Ava1 from '../../../images/avatars/ava1.png'
-import Ava2 from '../../../images/avatars/ava2.png'
-import Ava3 from '../../../images/avatars/ava3.png'
-
+import { useSelector } from 'react-redux'
 const useStyles = makeStyles({
   table: {
     minWidth: 600,
-    borderCollapse: 'unset'
+    borderCollapse: 'unset',
   },
   transparentBg: {
     background: 'transparent',
@@ -49,43 +45,68 @@ const useStyles = makeStyles({
   username: {
     position: 'relative',
     top: 6,
-  }
+  },
 })
 
-function createData(name, city, lastLogin, status) {
-  return { name, city, lastLogin, status }
-}
-
-const rows = [
-  createData('First User', 'London', '10:34:23', 'Active'),
-  createData('Second User', 'New York', '20:34:23', 'Active'),
-  createData('Third User', 'Osaka', '17:34:23', 'Active'),
-]
-
 export default function BasicTable() {
+  const users = useSelector((state) => state.userReducer.items)
   const classes = useStyles()
-  const getAva = (key) => {
-    const avaList = [Ava1, Ava2, Ava3]
-    return avaList[key]
-  }
 
   return (
-    <TableContainer component={Paper} elevation={0} className={classes.transparentBg}>
-      <Table className={`${classes.table} ${classes.transparentBg}`} aria-label="simple table">
+    <TableContainer
+      component={Paper}
+      elevation={0}
+      className={classes.transparentBg}
+    >
+      <Table
+        className={`${classes.table} ${classes.transparentBg}`}
+        aria-label="simple table"
+      >
         <TableBody>
-          {rows.map((row, key) => (
-            <TableRow key={row.name} className={key % 2 !== 0 ? classes.trWhiteBg:null}>
-              <TableCell scope="row" className={key % 2 !== 0 ? `${classes.standardText} ${classes.roundedLeft}` : classes.whiteText}>
-                <Box display="flex">
-                  <img src={getAva(key)} alt="user" className={classes.avatar} />
-                  <div className={classes.username}>{row.name}</div>
-                </Box>
-              </TableCell>
-              <TableCell align="right" className={key % 2 !== 0 ? classes.standardText : classes.whiteText}>{row.city}</TableCell>
-              <TableCell align="right" className={key % 2 !== 0 ? classes.standardText : classes.whiteText}>{row.lastLogin}</TableCell>
-              <TableCell align="right" className={key % 2 !== 0 ? `${classes.standardText} ${classes.roundedRight}` : classes.whiteText}>{row.status}</TableCell>
-            </TableRow>
-          ))}
+          {users.length > 0 &&
+            users.slice(0, 3).map((row, key) => (
+              <TableRow
+                key={'user' + key}
+                className={key % 2 !== 0 ? classes.trWhiteBg : null}
+              >
+                <TableCell
+                  align="left"
+                  className={
+                    key % 2 !== 0 ? classes.standardText : classes.whiteText
+                  }
+                >
+                  {row?.displayName || ''}
+                </TableCell>
+                <TableCell
+                  align="left"
+                  className={
+                    key % 2 !== 0 ? classes.standardText : classes.whiteText
+                  }
+                >
+                  {row?.userId || ''}
+                </TableCell>
+                <TableCell
+                  align="left"
+                  className={
+                    key % 2 !== 0
+                      ? `${classes.standardText} ${classes.roundedRight}`
+                      : classes.whiteText
+                  }
+                >
+                  {row?.mail || ''}
+                </TableCell>
+                <TableCell
+                  align="left"
+                  className={
+                    key % 2 !== 0
+                      ? `${classes.standardText} ${classes.roundedRight}`
+                      : classes.whiteText
+                  }
+                >
+                  {row?.jansStatus || ''}
+                </TableCell>
+              </TableRow>
+            ))}
         </TableBody>
       </Table>
     </TableContainer>