1
1
"use client" ;
2
- import { useEffect , useState } from "react" ;
3
- import EventBox from "../../components/ui/EventBox" ;
4
- import { getPublicUrl } from "@/lib/utils" ;
5
- function Page ( ) {
2
+ import React , { useState , useEffect } from "react" ;
3
+ import { useRouter } from "next/navigation" ;
4
+ import "./styles.css"
5
+ import Loader from "@/components/ui/loader" ;
6
+ import EventCard from "./components/eventCard"
7
+
8
+ import { Montserrat , Alata } from "next/font/google" ;
9
+ const montserratFont = Montserrat ( {
10
+ weight : [ "100" , "200" , "400" , "600" ] ,
11
+ subsets : [ "latin" ] ,
12
+ } ) ;
13
+ const alataFont = Alata ( { weight : [ "400" ] , subsets : [ "latin" ] } ) ;
14
+
15
+ export default function Events ( ) {
16
+ const router = useRouter ( ) ;
6
17
const [ events , setEvents ] = useState ( [ ] ) ;
7
18
const [ nextPageEvents , setNextPageEvents ] = useState ( [ ] ) ;
8
19
const [ pageCount , setPageCount ] = useState ( 1 ) ;
9
- const [ hasMoreEvents , setHasMoreEvents ] = useState ( true ) ;
10
- const [ columnCount , setColumnCount ] = useState ( 3 ) ;
20
+ const [ hasMoreEvents , setHasMoreEvents ] = useState ( false ) ;
21
+ const [ loading , setLoading ] = useState ( false ) ;
11
22
12
23
const fetchEvents = async ( page ) => {
13
24
try {
25
+ setHasMoreEvents ( false ) ;
26
+ setLoading ( true ) ;
14
27
const response = await fetch ( `/api/v1/get/events?page=${ page } ` ) ;
15
28
const data = await response . json ( ) ;
16
29
return data ;
17
30
} catch ( error ) {
18
31
console . error ( "Error fetching events:" , error ) ;
19
32
return [ ] ;
20
33
}
34
+ finally {
35
+ setHasMoreEvents ( true ) ;
36
+ setLoading ( false ) ;
37
+ }
21
38
} ;
22
39
23
40
const getMoreEvents = async ( ) => {
@@ -44,69 +61,48 @@ function Page() {
44
61
setHasMoreEvents ( false ) ;
45
62
}
46
63
} ;
47
-
48
- const handleResize = ( ) => {
49
- if ( window . innerWidth < 768 ) {
50
- setColumnCount ( 2 ) ;
51
- } else {
52
- setColumnCount ( 3 ) ;
53
- }
54
- } ;
55
-
56
- window . addEventListener ( "resize" , handleResize ) ;
57
- handleResize ( ) ;
58
64
loadInitialEvents ( ) ;
59
-
60
- return ( ) => {
61
- window . removeEventListener ( "resize" , handleResize ) ;
62
- } ;
63
- } , [ ] ) ;
64
-
65
- const columns = Array . from ( { length : columnCount } , ( ) => [ ] ) ;
66
-
67
- events . forEach ( ( event , index ) => {
68
- let posterUrl = getPublicUrl ( `/events/${ event . id } /poster` ) ;
69
-
70
- columns [ index % columnCount ] . push (
71
- < EventBox
72
- img = { posterUrl }
73
- key = { event . id }
74
- caption = { event . description }
75
- time = { event . date }
76
- category = { event . name }
77
- hostLink = { event . host_link }
78
- /> ,
79
- ) ;
80
- } ) ;
65
+ } , [ ] ) ;
81
66
82
67
return (
83
- < div className = "flex flex-col w-full h-full" >
84
- < div className = "self-center h-fit py-2 w-11/12 flex flex-col bg-[#201f31] mt-4" >
85
- < p className = "md:pl-12 pt-5 text-2xl font-medium mb-7 " > Events Near</ p >
86
- < div className = "self-center w-full grid grid-flow-row grid-cols-2 md:grid-cols-3" >
87
- { columns . map ( ( column , colIndex ) => (
88
- < section
89
- key = { colIndex }
90
- className = { `h-fit w-full gap-8 py-4 grid grid-flow-row md:pl-12 ${
91
- colIndex === 1 && columnCount === 3 ? "mt-32" : ""
92
- }
93
- ${ colIndex === 1 && columnCount === 2 ? "mt-20" : "" } ` }
94
- >
95
- { column }
96
- </ section >
68
+ < div className = "w-full flex justify-center mt-6" >
69
+ < div className = "w-[95%]" >
70
+ < p className = { `underline text-3xl ml-4 ${ alataFont . className } ` } >
71
+ Events
72
+ </ p >
73
+ < div className = "grid lg:grid-cols-3 gap-8 px-4 mt-6 sm:grid-cols-2 grid-cols-1 grid-rows-1" >
74
+ { /* Static Quote Box in 2nd column, 1st row */ }
75
+ < div className = "h-full lg:col-start-2 lg:col-span-1 lg:row-start-1 lg:row-span-1 sm:col-span-2 col-span-1 p-4 bg-gray-700 rounded-2xl flex items-center justify-center text-white text-center" >
76
+ Random image or quote
77
+ </ div >
78
+
79
+ { events . map ( ( event , index ) => (
80
+ < EventCard event = { event } key = { index } />
97
81
) ) }
98
82
</ div >
99
- { hasMoreEvents && (
100
- < button
101
- onClick = { getMoreEvents }
102
- className = "text-sm md:text-xl hover:border-[#e890bd] text-[#FFBADE] border-[#FFBADE] border-[0.5vh] w-fit px-24 md:px-32 active:scale-95 transition-all duration-100 self-center rounded-3xl py-3"
83
+
84
+ { loading ? (
85
+ < div className = "w-full flex justify-center p-12" >
86
+ < p className = { `text-xl px-5 ${ montserratFont . className } ` } >
87
+ Loading...{ " " }
88
+ </ p >
89
+ < Loader />
90
+ </ div >
91
+ ) : (
92
+ hasMoreEvents && (
93
+ < div
94
+ className = { `${ montserratFont . className } w-full flex justify-center my-10` }
103
95
>
104
- Show More
105
- </ button >
96
+ < button
97
+ className = "show-more-button"
98
+ onClick = { getMoreEvents }
99
+ >
100
+ < p > Show More</ p >
101
+ </ button >
102
+ </ div >
103
+ )
106
104
) }
107
105
</ div >
108
106
</ div >
109
107
) ;
110
108
}
111
-
112
- export default Page ;
0 commit comments