Skip to content

Commit f52a3ad

Browse files
Jenil's changes (#105)
Fixed things
1 parent 3fa974a commit f52a3ad

File tree

3 files changed

+151
-1
lines changed

3 files changed

+151
-1
lines changed

src/app/events/page.jsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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() {
6+
const [events, setEvents] = useState([]);
7+
const [nextPageEvents, setNextPageEvents] = useState([]);
8+
const [pageCount, setPageCount] = useState(1);
9+
const [hasMoreEvents, setHasMoreEvents] = useState(true);
10+
const [columnCount, setColumnCount] = useState(3);
11+
12+
const fetchEvents = async (page) => {
13+
try {
14+
const response = await fetch(`/api/v1/get/events?page=${page}`);
15+
const data = await response.json();
16+
return data;
17+
} catch (error) {
18+
console.error("Error fetching events:", error);
19+
return [];
20+
}
21+
};
22+
23+
const getMoreEvents = async () => {
24+
setEvents((prevEvents) => [...prevEvents, ...nextPageEvents]);
25+
setPageCount((prev) => prev + 1);
26+
27+
const newEvents = await fetchEvents(pageCount + 2);
28+
if (newEvents.length === 0) {
29+
setHasMoreEvents(false);
30+
} else {
31+
setNextPageEvents(newEvents);
32+
}
33+
};
34+
35+
useEffect(() => {
36+
const loadInitialEvents = async () => {
37+
const firstPageEvents = await fetchEvents(pageCount);
38+
const secondPageEvents = await fetchEvents(pageCount + 1);
39+
40+
setEvents(firstPageEvents);
41+
setNextPageEvents(secondPageEvents);
42+
43+
if (secondPageEvents.length === 0) {
44+
setHasMoreEvents(false);
45+
}
46+
};
47+
48+
49+
const handleResize = () => {
50+
if (window.innerWidth < 768) {
51+
setColumnCount(2);
52+
} else {
53+
setColumnCount(3);
54+
}
55+
};
56+
57+
window.addEventListener("resize", handleResize);
58+
handleResize();
59+
loadInitialEvents();
60+
61+
return () => {
62+
window.removeEventListener("resize", handleResize);
63+
};
64+
}, []);
65+
66+
const columns = Array.from({ length: columnCount }, () => []);
67+
68+
events.forEach((event, index) => {
69+
let posterUrl = getPublicUrl(`/events/${event.id}/poster`)
70+
71+
columns[index % columnCount].push(
72+
<EventBox
73+
img={posterUrl}
74+
key={event.id}
75+
caption={event.description}
76+
time={event.date}
77+
category={event.name}
78+
hostLink={event.host_link}
79+
/>
80+
);
81+
});
82+
83+
return (
84+
<div className="flex flex-col w-full h-full">
85+
<div className="self-center h-fit py-2 w-11/12 flex flex-col bg-[#201f31] mt-4">
86+
<p className="md:pl-12 pt-5 text-2xl font-medium mb-7 ">Events Near</p>
87+
<div className="self-center w-full grid grid-flow-row grid-cols-2 md:grid-cols-3">
88+
{columns.map((column, colIndex) => (
89+
<section
90+
key={colIndex}
91+
className={`h-fit w-full gap-8 py-4 grid grid-flow-row md:pl-12 ${
92+
colIndex === 1 && columnCount === 3 ? "mt-32" : ""
93+
}
94+
${
95+
colIndex === 1 && columnCount === 2 ? "mt-20" : ""
96+
}`
97+
}
98+
>
99+
{column}
100+
</section>
101+
))}
102+
</div>
103+
{hasMoreEvents && (
104+
<button
105+
onClick={getMoreEvents}
106+
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"
107+
>
108+
Show More
109+
</button>
110+
)}
111+
</div>
112+
</div>
113+
);
114+
}
115+
116+
export default Page;

src/components/ui/EventBox.jsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
3+
function EventBox({ time, category, caption, secondCat = false, hostLink , img }) {
4+
return (
5+
<div >
6+
<div style={{
7+
backgroundImage:`url(${img})`,
8+
backgroundPosition:"center",
9+
backgroundRepeat:"no-repeat",
10+
backgroundSize:"cover"
11+
}}
12+
className={`w-11/12 ${
13+
secondCat ? "h-24 md:h-40" : "h-40 md:h-60"
14+
} rounded-3xl ${
15+
secondCat ? "border-[0.1vh]" : "border-[0.4vh] md:border-[1vh]"
16+
} border-[#FFBADE]`}
17+
></div>
18+
<p className="text-[#FFBADE] px-2 md:ml-2 font-mono text-xl md:text-2xl">
19+
{time}
20+
</p>
21+
<p className="text-[#FFBADE] px-2 md:ml-2 font-mono text-nowrap text-xs md:text-xl">
22+
{category}
23+
</p>
24+
<a
25+
href={hostLink}
26+
className="text-white md:ml-2 hover:underline text-center self-center text-xs md:text-2xl px-2 font-semibold"
27+
>
28+
{caption}
29+
</a>
30+
</div>
31+
);
32+
}
33+
34+
export default EventBox;

src/lib/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export function cn(...inputs: ClassValue[]) {
77
}
88

99
export const getPublicUrl = (path: string) => {
10-
return `https://${process.env.PROJECT_ID}.supabase.co/storage/v1/object/public/${process.env.BUCKET}${path}`;
10+
return `https://${process.env.NEXT_PUBLIC_PROJECT_ID}.supabase.co/storage/v1/object/public/${process.env.NEXT_PUBLIC_BUCKET}${path}`;
1111
};

0 commit comments

Comments
 (0)