feat: pagination in userList(with dummy values)

Author: darkhorse-420

src/ui/views/RepoList/Components/RepoOverview.jsx

@@ -578,7 +578,7 @@ export default function Repositories(props) {
   const itemsPerPage = 5;
 
 
-  // Dummy repository data
+  // Dummy repository data```````````
   const dummyRepositories = [
     { project: 'Org1', name: 'Repo1', description: 'Description for Repo 1' },
     { project: 'Org2', name: 'Repo2', description: 'Description for Repo 2' },

src/ui/views/UserList/Components/UserList.jsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import GridItem from '../../../components/Grid/GridItem';
 import GridContainer from '../../../components/Grid/GridContainer';
-import { useNavigate } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -11,35 +10,43 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
-import styles from '../../../assets/jss/material-dashboard-react/views/dashboardStyle';
-import { getUsers } from '../../../services/user';
-
 import { CloseRounded, Check, KeyboardArrowRight } from '@material-ui/icons';
-// import Pagination from '../../../components/Pagination/Pagination';
+import Pagination from '../../../components/Pagination/Pagination';
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+});
 
-export default function UserList(props) {
-  const useStyles = makeStyles(styles);
+export default function UserList() {
   const classes = useStyles();
-  const [data, setData] = useState([]);
-  const [, setAuth] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
-  const navigate = useNavigate();
 
-  const openUser = (username) => navigate(`/admin/user/${username}`, { replace: true });
+  // Dummy user data
+  const dummyUsers = [
+    { username: 'johnDoe', displayName: 'John Doe', title: 'Developer', email: '[email protected]', gitAccount: 'johnDoeGit', admin: true },
+    { username: 'janeDoe', displayName: 'Jane Doe', title: 'Designer', email: '[email protected]', gitAccount: 'janeDoeGit', admin: false },
+    { username: 'markSmith', displayName: 'Mark Smith', title: 'Project Manager', email: '[email protected]', gitAccount: 'markSmithGit', admin: true },
+    { username: 'lucasBrown', displayName: 'Lucas Brown', title: 'Data Scientist', email: '[email protected]', gitAccount: 'lucasBrownGit', admin: false },
+    { username: 'emilyWhite', displayName: 'Emily White', title: 'Backend Engineer', email: '[email protected]', gitAccount: 'emilyWhiteGit', admin: true },
+    { username: 'oliviaGreen', displayName: 'Olivia Green', title: 'Frontend Developer', email: '[email protected]', gitAccount: 'oliviaGreenGit', admin: false },
+    { username: 'noahBlue', displayName: 'Noah Blue', title: 'DevOps Engineer', email: '[email protected]', gitAccount: 'noahBlueGit', admin: true },
+    { username: 'miaBlack', displayName: 'Mia Black', title: 'Quality Analyst', email: '[email protected]', gitAccount: 'miaBlackGit', admin: false },
+    { username: 'willGray', displayName: 'Will Gray', title: 'HR Manager', email: '[email protected]', gitAccount: 'willGrayGit', admin: false },
+    { username: 'avaYellow', displayName: 'Ava Yellow', title: 'UX Designer', email: '[email protected]', gitAccount: 'avaYellowGit', admin: true },
+  ];
 
-  useEffect(() => {
-    const query = {};
+  // Pagination states
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5; // Set the number of items per page
 
-    for (const k in props) {
-      if (!k) continue;
-      query[k] = props[k];
-    }
-    getUsers(setIsLoading, setData, setAuth, setIsError, query);
-  }, [props]);
+  // Calculate the items for the current page
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = dummyUsers.slice(indexOfFirstItem, indexOfLastItem);
+  const totalItems = dummyUsers.length;
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>Something went wrong...</div>;
+  const handlePageChange = (page) => setCurrentPage(page);
 
   return (
     <GridContainer>
@@ -57,37 +64,23 @@ export default function UserList(props) {
               </TableRow>
             </TableHead>
             <TableBody>
-              {data.map((row) => (
+              {currentItems.map((row) => (
                 <TableRow key={row.username}>
                   <TableCell align='left'>{row.displayName}</TableCell>
                   <TableCell align='left'>{row.title}</TableCell>
                   <TableCell align='left'>
                     <a href={`mailto:${row.email}`}>{row.email}</a>
                   </TableCell>
                   <TableCell align='left'>
-                    <a
-                      href={`https://github.com/${row.gitAccount}`}
-                      rel='noreferrer'
-                      target='_blank'
-                    >
+                    <a href={`https://github.com/${row.gitAccount}`} target='_blank' rel='noreferrer'>
                       {row.gitAccount}
                     </a>
                   </TableCell>
                   <TableCell align='left'>
-                    {row.admin ? (
-                      <span style={{ color: 'green' }}>
-                        <Check fontSize='small' />
-                      </span>
-                    ) : (
-                      <CloseRounded color='error' />
-                    )}
+                    {row.admin ? <Check fontSize='small' color='primary' /> : <CloseRounded color='error' />}
                   </TableCell>
                   <TableCell component='th' scope='row'>
-                    <Button
-                      variant='contained'
-                      color='primary'
-                      onClick={() => openUser(row.username)}
-                    >
+                    <Button variant='contained' color='primary'>
                       <KeyboardArrowRight />
                     </Button>
                   </TableCell>
@@ -96,7 +89,16 @@ export default function UserList(props) {
             </TableBody>
           </Table>
         </TableContainer>
+
+        {/* Pagination Component */}
+        <Pagination
+          currentPage={currentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+          onPageChange={handlePageChange}
+        />
       </GridItem>
     </GridContainer>
   );
 }
+