fix: search and pagination

Author: darkhorse-420

src/ui/components/Pagination/Pagination.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './Pagination.css'; 
 
 export default function Pagination({ currentPage, totalItems = 0, itemsPerPage, onPageChange }) {
-  // Calculate the total number of pages
+
   const totalPages = Math.ceil(totalItems / itemsPerPage);
 
   const handlePageClick = (page) => {

src/ui/components/Search/Search.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import './Search.css'; // Import the CSS file
+import './Search.css';
 
 export default function Search({ placeholder = 'Search...', onSearch }) {
   const [query, setQuery] = useState('');
@@ -15,7 +15,7 @@ export default function Search({ placeholder = 'Search...', onSearch }) {
 
   const handleKeyDown = (event) => {
     if (event.key === 'Enter') {
-      handleSearch(); // Trigger search on Enter
+      handleSearch(); 
     }
   };
 
@@ -26,8 +26,8 @@ export default function Search({ placeholder = 'Search...', onSearch }) {
         placeholder={placeholder}
         value={query}
         onChange={handleInputChange}
-        onKeyDown={handleKeyDown} // Add keydown event
-        className="search-input" // Apply the class
+        onKeyDown={handleKeyDown} 
+        className="search-input" 
       />
       <button onClick={handleSearch} className="search-button">
         Search

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

@@ -24,11 +24,10 @@ export default function Repositories(props) {
   const [, setAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1); // Pagination state
-  const itemsPerPage = 5; // Set items per page
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5; 
   const navigate = useNavigate();
   const { user } = useContext(UserContext);
-
   const openRepo = (repo) => navigate(`/admin/repo/${repo}`, { replace: true });
 
   useEffect(() => {
@@ -39,7 +38,7 @@ export default function Repositories(props) {
     }
     getRepos(setIsLoading, (data) => {
       setData(data);
-      setFilteredData(data); // Set both data and filteredData
+      setFilteredData(data); 
     }, setAuth, setIsError, query);
   }, [props]);
 
@@ -50,7 +49,7 @@ export default function Repositories(props) {
   };
 
   const handleSearch = (query) => {
-    setCurrentPage(1); // Reset to page 1 on new search
+    setCurrentPage(1); 
     if (!query) {
       setFilteredData(data);
     } else {
@@ -63,10 +62,7 @@ export default function Repositories(props) {
       );
     }
   };
-  const handlePageChange = (page) => setCurrentPage(page); // Update current page
-
-
-  // Calculate items for the current page
+  const handlePageChange = (page) => setCurrentPage(page); 
   const startIdx = (currentPage - 1) * itemsPerPage;
   const paginatedData = filteredData.slice(startIdx, startIdx + itemsPerPage);
 
@@ -86,13 +82,13 @@ export default function Repositories(props) {
       key='x'
       classes={classes}
       openRepo={openRepo}
-      data={paginatedData} // Use filteredData here
+      data={paginatedData} 
       repoButton={addrepoButton}
-      onSearch={handleSearch} // Pass handleSearch
-      currentPage={currentPage} // Pass current page
-      totalItems={filteredData.length} // Pass total items for pagination
-      itemsPerPage={itemsPerPage} // Pass items per page
-      onPageChange={handlePageChange} // Pass page change handler
+      onSearch={handleSearch} 
+      currentPage={currentPage} 
+      totalItems={filteredData.length} 
+      itemsPerPage={itemsPerPage} 
+      onPageChange={handlePageChange} 
     />
   );
 }
@@ -114,7 +110,7 @@ function GetGridContainerLayOut(props) {
     <GridContainer>
       {props.repoButton}
       <GridItem xs={12} sm={12} md={12}>
-        {/* Add Search component */}
+       
         <Search onSearch={props.onSearch} />
 
         <TableContainer

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

@@ -15,15 +15,9 @@ import styles from '../../../assets/jss/material-dashboard-react/views/dashboard
 import { getUsers } from '../../../services/user';
 import Pagination from '../../../components/Pagination/Pagination';
 import { CloseRounded, Check, KeyboardArrowRight } from '@material-ui/icons';
-
 import Search from '../../../components/Search/Search';
 
 
-// const useStyles = makeStyles({
-//   table: {
-//     minWidth: 650,
-//   },
-// });
 
 const useStyles = makeStyles(styles);
 
@@ -34,21 +28,12 @@ export default function UserList(props) {
   const [, setAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
-
-
-    // Pagination states
-    const [currentPage, setCurrentPage] = useState(1);
-    const itemsPerPage = 5; 
-    
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5; 
   const [searchQuery, setSearchQuery] = useState('');
 
 
 
-
-  // const openUser = (username) => navigate(`/admin/user/${username}`, { replace: true });
-
-
-
   useEffect(() => {
     const query = {};
 
@@ -63,37 +48,32 @@ export default function UserList(props) {
   if (isError) return <div>Something went wrong...</div>;
 
 
-
-
-
- // Filter users based on the search query
- const filteredUsers = data.filter(user =>
+  const filteredUsers = data.filter(user =>
   user.displayName && user.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
   user.username && user.username.toLowerCase().includes(searchQuery.toLowerCase())
 );
-  // Calculate the items for the current page
-const indexOfLastItem = currentPage * itemsPerPage;
-const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
-const totalItems = filteredUsers.length;
 
-  // Function to handle page change
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
+  const totalItems = filteredUsers.length;
+
+
   const handlePageChange = (page) => {
     setCurrentPage(page);
   };
 
 
-  // Function to handle search
   const handleSearch = (query) => {
     setSearchQuery(query);
-    setCurrentPage(1); // Reset to the first page when searching
+    setCurrentPage(1); 
   };
 
   return (
     <GridContainer>
       <GridItem xs={12} sm={12} md={12}>
 
-        {/* Search Component */}
+  
         <Search onSearch={handleSearch} placeholder="Search users..." />
 
         <TableContainer component={Paper}>
@@ -135,7 +115,7 @@ const totalItems = filteredUsers.length;
           </Table>
         </TableContainer>
 
-        {/* Pagination Component */}
+      
         <Pagination
           currentPage={currentPage}
           totalItems={totalItems}