@@ -2,59 +2,91 @@ import { useState, useEffect } from 'react';
22import { Container , Row , Col , Card , CardBody , Button , Input } from 'reactstrap' ;
33import styles from './CPDashboard.module.css' ;
44import { FaCalendarAlt , FaMapMarkerAlt , FaUserAlt } from 'react-icons/fa' ;
5- import { toast } from 'react-toastify' ;
5+ import { ENDPOINTS } from '../../utils/URL' ;
6+ import axios from 'axios' ;
67
78export function CPDashboard ( ) {
89 const [ events , setEvents ] = useState ( [ ] ) ;
910 const [ search , setSearch ] = useState ( '' ) ;
10- const [ selectedDate , setSelectedDate ] = useState ( '' ) ;
11- const [ dateError , setDateError ] = useState ( '' ) ;
11+ const [ isLoading , setIsLoading ] = useState ( false ) ;
12+ const [ error , setError ] = useState ( null ) ;
13+ const [ pagination , setPagination ] = useState ( {
14+ currentPage : 1 ,
15+ totalPages : 5 ,
16+ total : 0 ,
17+ limit : 6 ,
18+ } ) ;
19+
20+ const FALLBACK_IMG =
21+ 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=60' ;
22+
23+ const FixedRatioImage = ( { src, alt, fallback } ) => (
24+ < div
25+ style = { {
26+ width : '100%' ,
27+ aspectRatio : '4 / 3' ,
28+ overflow : 'hidden' ,
29+ background : '#f2f2f2' ,
30+ } }
31+ >
32+ < img
33+ src = { src || fallback }
34+ alt = { alt }
35+ loading = "lazy"
36+ onError = { e => {
37+ if ( e . currentTarget . src !== fallback ) e . currentTarget . src = fallback ;
38+ } }
39+ style = { {
40+ width : '100%' ,
41+ height : '100%' ,
42+ objectFit : 'cover' ,
43+ display : 'block' ,
44+ } }
45+ />
46+ </ div >
47+ ) ;
1248
1349 useEffect ( ( ) => {
14- const mockEvents = [
15- {
16- id : 1 ,
17- title : 'PGSA Lunch Talks' ,
18- date : 'Friday, December 6 at 12:00PM EST' ,
19- location : 'Disque 919' ,
20- organizer : 'Physics Graduate Student Association' ,
21- image : 'https://via.placeholder.com/300' ,
22- } ,
23- {
24- id : 2 ,
25- title : 'Hot Chocolate/Bake Sale' ,
26- date : 'Friday, December 6 at 12:00PM EST' ,
27- location : 'G.C LeBow - Lobby Tabling Space 2' ,
28- organizer : 'Kappa Phi Gamma, Sorority Inc.' ,
29- image : 'https://via.placeholder.com/300' ,
30- } ,
31- {
32- id : 3 ,
33- title : 'Holiday Lunch' ,
34- date : 'Friday, December 6 at 12:00PM EST' ,
35- location : 'Hill Conference Room' ,
36- organizer : 'Chemical and Biological Engineering Graduate Society' ,
37- image : 'https://via.placeholder.com/300' ,
38- } ,
39- ] ;
40- setEvents ( mockEvents ) ;
50+ const fetchEvents = async ( ) => {
51+ setIsLoading ( true ) ;
52+
53+ try {
54+ const response = await axios . get ( ENDPOINTS . EVENTS ) ;
55+ console . log ( 'Fetched events:' , response . data . events ) ;
56+ setEvents ( response . data . events ) ;
57+ } catch ( err ) {
58+ console . error ( 'Here' , err ) ;
59+ setError ( 'Failed to load events' ) ;
60+ } finally {
61+ setIsLoading ( false ) ;
62+ }
63+ } ;
64+
65+ fetchEvents ( ) ;
4166 } , [ ] ) ;
4267
43- const handleDateChange = e => {
44- const value = e . target . value ;
45- setSelectedDate ( value ) ;
68+ const formatDate = dateStr => {
69+ if ( ! dateStr ) return 'Date TBD' ;
70+ const date = new Date ( dateStr ) ;
71+ return date . toLocaleString ( 'en-US' , {
72+ weekday : 'long' ,
73+ month : 'long' ,
74+ day : 'numeric' ,
75+ hour : 'numeric' ,
76+ minute : '2-digit' ,
77+ } ) ;
78+ } ;
4679
47- const today = new Date ( ) ;
48- today . setHours ( 0 , 0 , 0 , 0 ) ; // midnight today
80+ const filteredEvents = events . filter ( event =>
81+ event . title ?. toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ,
82+ ) ;
4983
50- const chosen = new Date ( value ) ;
84+ const totalPages = Math . ceil ( filteredEvents . length / pagination . limit ) ;
5185
52- if ( chosen < today ) {
53- toast . error ( 'Past dates are not supported. Please select a future date.' ) ;
54- setSelectedDate ( '' ) ;
55- return ;
56- }
57- } ;
86+ const displayedEvents = filteredEvents . slice (
87+ ( pagination . currentPage - 1 ) * pagination . limit ,
88+ pagination . currentPage * pagination . limit ,
89+ ) ;
5890
5991 return (
6092 < Container className = { styles [ 'dashboard-container' ] } >
@@ -70,17 +102,6 @@ export function CPDashboard() {
70102 className = { styles [ 'dashboard-search' ] }
71103 />
72104 </ div >
73- { /* <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className="community-dropdown">
74- <DropdownToggle caret color="secondary">
75- Community Portal
76- </DropdownToggle>
77- <DropdownMenu>
78- <DropdownItem onClick={() => handleNavigation('/home')}>Home</DropdownItem>
79- <DropdownItem onClick={() => handleNavigation('/events')}>Events</DropdownItem>
80- <DropdownItem onClick={() => handleNavigation('/about')}>About Us</DropdownItem>
81- <DropdownItem onClick={() => handleNavigation('/contact')}>Contact</DropdownItem>
82- </DropdownMenu>
83- </Dropdown> */ }
84105 </ div >
85106 </ header >
86107
0 commit comments