From f37d05090cb22523cf4b59bc3e8471c92edc7502 Mon Sep 17 00:00:00 2001 From: Akshith <33996844+akshith312@users.noreply.github.com> Date: Sat, 17 Jan 2026 01:52:52 -0500 Subject: [PATCH] Added Apply and Clear Filter Button and functionality --- .../CommunityPortal/CPDashboard.jsx | 132 ++++++++++------ .../CommunityPortal/CPDashboard.module.css | 142 ++++++++++++++---- 2 files changed, 203 insertions(+), 71 deletions(-) diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx index 8baf7053c4..026f1bf2ff 100644 --- a/src/components/CommunityPortal/CPDashboard.jsx +++ b/src/components/CommunityPortal/CPDashboard.jsx @@ -33,15 +33,27 @@ const FixedRatioImage = ({ src, alt, fallback }) => ( ); +// Default filter values +const DEFAULT_FILTERS = { + dateFilter: '', + onlineOnly: false, + branches: '', + themes: '', + categories: '', +}; + export function CPDashboard() { const [events, setEvents] = useState([]); const [searchInput, setSearchInput] = useState(''); const [searchQuery, setSearchQuery] = useState(''); - const [onlineOnly, setOnlineOnly] = useState(false); const [isLoading, setIsLoading] = useState(false); - const [dateFilter, setDateFilter] = useState(''); const [error, setError] = useState(null); const darkMode = useSelector(state => state.theme.darkMode); + + // Consolidated filter states + const [pendingFilters, setPendingFilters] = useState(DEFAULT_FILTERS); + const [appliedFilters, setAppliedFilters] = useState(DEFAULT_FILTERS); + const [pagination, setPagination] = useState({ currentPage: 1, totalPages: 5, @@ -55,7 +67,6 @@ export function CPDashboard() { useEffect(() => { const fetchEvents = async () => { setIsLoading(true); - try { const response = await axios.get(ENDPOINTS.EVENTS); setEvents(response.data.events || []); @@ -99,19 +110,16 @@ export function CPDashboard() { }); }; - function isTomorrow(dateString) { + const isTomorrow = dateString => { const input = new Date(dateString); - const today = new Date(); today.setHours(0, 0, 0, 0); - const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1); - return input >= tomorrow && input < new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000); - } + }; - function isComingWeekend(dateString) { + const isComingWeekend = dateString => { const input = new Date(dateString); const today = new Date(); today.setHours(0, 0, 0, 0); @@ -122,28 +130,48 @@ export function CPDashboard() { const sunday = new Date(saturday); sunday.setDate(saturday.getDate() + 1); sunday.setHours(23, 59, 59, 999); - return input >= saturday && input <= sunday; - } + }; + + // Handler to update pending filter values + const handleFilterChange = (filterName, value) => { + setPendingFilters(prev => ({ + ...prev, + [filterName]: value, + })); + }; + + // Apply all pending filters + const handleApplyFilters = () => { + setAppliedFilters(pendingFilters); + setPagination(prev => ({ ...prev, currentPage: 1 })); + }; + + // Clear all filters + const handleClearFilters = () => { + setPendingFilters(DEFAULT_FILTERS); + setAppliedFilters(DEFAULT_FILTERS); + setPagination(prev => ({ ...prev, currentPage: 1 })); + }; + // Filter events based on applied filters const filteredEvents = events.filter(event => { - // Filter by online only if checkbox is checked - if (onlineOnly) { + // Filter by online only + if (appliedFilters.onlineOnly) { const isOnlineEvent = event.location?.toLowerCase() === 'virtual'; if (!isOnlineEvent) return false; } - // Filter by date filter - if (dateFilter === 'tomorrow') { + // Filter by date + if (appliedFilters.dateFilter === 'tomorrow') { return isTomorrow(event.date); - } else if (dateFilter === 'weekend') { + } else if (appliedFilters.dateFilter === 'weekend') { return isComingWeekend(event.date); } - // Filter by search query if provided + // Filter by search query if (!searchQuery) return true; const term = searchQuery.toLowerCase(); - return ( event.title?.toLowerCase().includes(term) || event.location?.toLowerCase().includes(term) || @@ -152,7 +180,6 @@ export function CPDashboard() { }); const totalPages = Math.ceil(filteredEvents.length / pagination.limit) || 1; - const displayedEvents = filteredEvents.slice( (pagination.currentPage - 1) * pagination.limit, pagination.currentPage * pagination.limit, @@ -226,16 +253,17 @@ export function CPDashboard() {

Search Filters

+ {/* Date Filter */}
- +
setDateFilter('tomorrow')} + checked={pendingFilters.dateFilter === 'tomorrow'} + onChange={() => handleFilterChange('dateFilter', 'tomorrow')} className={styles.radioInput} />
-
- -
+ {/* Online Only Filter */}
{ - setOnlineOnly(e.target.checked); - setPagination(prev => ({ ...prev, currentPage: 1 })); - }} + checked={pendingFilters.onlineOnly} + onChange={e => handleFilterChange('onlineOnly', e.target.checked)} />{' '} Online Only
+ {/* Branches Filter */}
- - + handleFilterChange('branches', e.target.value)} + > +
+ {/* Themes Filter */}
- - + handleFilterChange('themes', e.target.value)} + > +
+ {/* Categories Filter */}
- - + handleFilterChange('categories', e.target.value)} + > +
+ + {/* Apply and Clear Buttons */} +
+ + +
@@ -347,7 +396,7 @@ export function CPDashboard() { )} - {/* Simple pagination controls if needed */} + {/* Pagination controls */} {totalPages > 1 && (