fix: code clean

Author: darkhorse-420

src/ui/components/Filtering/Filtering.css

@@ -0,0 +1,55 @@
+.filtering-container {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 10px;
+}
+
+.dropdown-toggle {
+  padding: 10px 10px;
+  padding-right: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #fff;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+  width: 130px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dropdown-toggle:hover {
+  background-color: #f0f0f0;
+}
+
+.dropdown-arrow {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 15px;
+  margin-left: 1px;
+  margin-right: 10px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-top: 5px;
+  z-index: 1000;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-item {
+  padding: 10px 15px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #333;
+}
+
+.dropdown-item:hover {
+  background-color: #f0f0f0;
+}

src/ui/components/Filtering/Filtering.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import './Filtering.css';
+
+const Filtering = ({ onFilterChange }) => {
+  const [isOpen, setIsOpen] = useState(false); // State to toggle dropdown open/close
+  const [selectedOption, setSelectedOption] = useState('Sort by'); // Initial state
+  const [sortOrder, setSortOrder] = useState('asc'); // Track sort order (asc/desc)
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen); // Toggle dropdown open/close state
+  };
+
+  const toggleSortOrder = () => {
+    // Toggle sort order only if an option is selected
+    if (selectedOption !== 'Sort by') {
+      const newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+      setSortOrder(newSortOrder);
+      onFilterChange(selectedOption, newSortOrder); // Trigger filtering with new order
+    }
+  };
+
+  const handleOptionClick = (option) => {
+    // Handle filter option selection
+    setSelectedOption(option);
+    onFilterChange(option, sortOrder); // Call the parent function with selected filter and order
+    setIsOpen(false); // Collapse the dropdown after selection
+  };
+
+  return (
+    <div className="filtering-container">
+      <div className="dropdown">
+        {/* Make the entire button clickable for toggling dropdown */}
+        <button onClick={toggleDropdown} className="dropdown-toggle">
+          {selectedOption}
+          {/* Render the up/down arrow next to selected option */}
+          {selectedOption !== 'Sort by' && (
+            <span onClick={(e) => { e.stopPropagation(); toggleSortOrder(); }}>
+              {sortOrder === 'asc' ? ' ↑' : ' ↓'}
+            </span>
+          )}
+          <span className="dropdown-arrow">▼</span>
+        </button>
+
+        {isOpen && (
+          <div className="dropdown-menu">
+            <div onClick={() => handleOptionClick('Date Modified')} className="dropdown-item">
+              Date Modified
+            </div>
+            <div onClick={() => handleOptionClick('Date Created')} className="dropdown-item">
+              Date Created
+            </div>
+            <div onClick={() => handleOptionClick('Alphabetical')} className="dropdown-item">
+              Alphabetical
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Filtering;
+
+
+
+

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

@@ -13,7 +13,8 @@ import RepoOverview from './RepoOverview';
 import { UserContext } from '../../../../context';
 import PropTypes from 'prop-types';
 import Search from '../../../components/Search/Search';
-import Pagination from '../../../components/Pagination/Pagination'; 
+import Pagination from '../../../components/Pagination/Pagination';
+import Filtering from '../../../components/Filtering/Filtering'; 
 
 
 export default function Repositories(props) {
@@ -62,6 +63,32 @@ export default function Repositories(props) {
       );
     }
   };
+
+  // New function for handling filter changes
+  const handleFilterChange = (filterOption, sortOrder) => {
+    const sortedData = [...data];
+    switch (filterOption) {
+      case 'dateModified':
+        sortedData.sort((a, b) => new Date(a.lastModified) - new Date(b.lastModified));
+        break;
+      case 'dateCreated':
+        sortedData.sort((a, b) => new Date(a.dateCreated) - new Date(b.dateCreated));
+        break;
+      case 'alphabetical':
+        sortedData.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+      default:
+        break;
+    }
+
+    if (sortOrder === 'desc') {
+      sortedData.reverse();
+    }
+
+    setFilteredData(sortedData);
+  };
+
+
   const handlePageChange = (page) => setCurrentPage(page); 
   const startIdx = (currentPage - 1) * itemsPerPage;
   const paginatedData = filteredData.slice(startIdx, startIdx + itemsPerPage);
@@ -89,6 +116,7 @@ export default function Repositories(props) {
       totalItems={filteredData.length} 
       itemsPerPage={itemsPerPage} 
       onPageChange={handlePageChange} 
+      onFilterChange={handleFilterChange}  // Pass handleFilterChange as prop
     />
   );
 }
@@ -112,7 +140,7 @@ function GetGridContainerLayOut(props) {
       <GridItem xs={12} sm={12} md={12}>
 
         <Search onSearch={props.onSearch} />
-
+        <Filtering onFilterChange={props.onFilterChange} />  {/* Include the Filtering component */}
         <TableContainer
           style={{ background: 'transparent', borderRadius: '5px', border: '1px solid #d0d7de' }}
         >