@@ -40,7 +40,15 @@ const Events = () => {
4040 throw new Error ( "Failed to fetch data" ) ;
4141 }
4242 const data = await response . json ( ) ;
43- setEventData ( data . data ) ;
43+
44+ // Sort events by date (most recent first)
45+ const sortedEvents = data . data . sort ( ( a , b ) => {
46+ const dateA = new Date ( a . event_date ) ;
47+ const dateB = new Date ( b . event_date ) ;
48+ return dateB - dateA ; // Sort in descending order (newest first)
49+ } ) ;
50+
51+ setEventData ( sortedEvents ) ;
4452 setFetched ( true ) ;
4553 } catch ( error ) {
4654 console . error ( error ) ;
@@ -52,6 +60,10 @@ const Events = () => {
5260
5361 const allEvents = eventData || [ ] ;
5462
63+ const activeEvents = allEvents . filter ( event => event . is_active ) ;
64+
65+ const pastEvents = allEvents . filter ( event => ! event . is_active ) ;
66+
5567 return (
5668 < div className = "bg-bg_black" >
5769 < Head >
@@ -65,8 +77,8 @@ const Events = () => {
6577 content = { `events, Community SRM, hackathons, workshops, ${ allEvents
6678 . map ( ( event ) => event . event_name )
6779 . join ( ", " ) } , ${ allEvents
68- . map ( ( event ) => event . venue )
69- . join ( ", " ) } , tech events, student events`}
80+ . map ( ( event ) => event . venue )
81+ . join ( ", " ) } , tech events, student events`}
7082 />
7183
7284 < meta
@@ -151,7 +163,7 @@ const Events = () => {
151163 < div className = "bg-black/40 -top-8 lg:top-0 lg:p-8 md:p-12 lg:px-16 lg:py-24 flex justify-center items-center" >
152164 < div className = "mt-10 relative z-10" >
153165 { eventData &&
154- eventData . filter ( ( event ) => event . is_active ) . length >
166+ eventData . filter ( ( event ) => event . is_active ) . length >
155167 0 ? (
156168 eventData . map (
157169 ( event , index ) =>
@@ -193,36 +205,36 @@ const Events = () => {
193205 < div className = "flex flex-wrap justify-center gap-4 items-center pb-16 md:pb-28" >
194206 { ! fetched
195207 ? Array . from ( { length : 4 } , ( _ , index ) => (
196- < div
197- key = { index }
198- className = "w-96 sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 pr-4 lg:pl-10"
199- >
200- < PastEventsSkeleton />
201- </ div >
202- ) )
208+ < div
209+ key = { index }
210+ className = "w-96 sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 pr-4 lg:pl-10"
211+ >
212+ < PastEventsSkeleton />
213+ </ div >
214+ ) )
203215 : allEvents . map (
204- ( event , index ) =>
205- ! event . is_active && (
206- < div
207- key = { index }
208- className = "w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 p-4"
209- >
210- < PastEvents
211- poster = { event . poster_url }
212- title = { event . event_name }
213- certificateLink = { event . certificate }
214- onButtonClick = { handleButtonClick }
215- openModal = { ( certificateLink ) =>
216- setIsModalOpen ( {
217- open : true ,
218- certificate : certificateLink ,
219- slug : event . slug
220- } )
221- }
222- />
223- </ div >
224- )
225- ) }
216+ ( event , index ) =>
217+ ! event . is_active && (
218+ < div
219+ key = { index }
220+ className = "w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/3 p-4"
221+ >
222+ < PastEvents
223+ poster = { event . poster_url }
224+ title = { event . event_name }
225+ certificateLink = { event . certificate }
226+ onButtonClick = { handleButtonClick }
227+ openModal = { ( certificateLink ) =>
228+ setIsModalOpen ( {
229+ open : true ,
230+ certificate : certificateLink ,
231+ slug : event . slug
232+ } )
233+ }
234+ />
235+ </ div >
236+ )
237+ ) }
226238 </ div >
227239
228240 { isModalOpen && (
0 commit comments