diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 6b84279..efc19b4 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,5 +1,5 @@ "use client"; -import React from "react"; +import React, { useEffect, useState } from "react"; import Link from "next/link"; import { Card, @@ -9,6 +9,9 @@ import { CardContent, CardFooter, } from "@/components/ui/card"; + +import axios from "axios"; + // import { HeroParallax } from "./components/hero-parallax" import Image from "next/image"; @@ -109,7 +112,69 @@ import Image from "next/image"; // }, // ]; +interface Event { + id: number; + name: string; + description: string; + date: string; + time: string; + mode: string; +} + export default function Home() { + type EventCategory = "upcoming" | "past" | "ongoing"; + const [events, setEvents] = useState<{ + upcoming: Event[]; + past: Event[]; + ongoing: Event[]; + }>({ + upcoming: [], + past: [], + ongoing: [], + }); + const [displayedEvents, setDisplayedEvents] = useState([]); + const [selectedCategory, setSelectedCategory] = + useState("upcoming"); + + // Fetch events once on component mount + useEffect(() => { + async function fetchEvents() { + try { + const [upcomingRes, pastRes, ongoingRes] = await Promise.all([ + axios.get("/api/v1/get/events?category=upcoming"), + axios.get("/api/v1/get/events?category=past"), + axios.get("/api/v1/get/events?category=ongoing"), + ]); + + setEvents({ + upcoming: upcomingRes.data.slice(0, 3), + past: pastRes.data.slice(0, 3), + ongoing: ongoingRes.data.slice(0, 3), + }); + + // Default displayed events to "upcoming" + setDisplayedEvents(upcomingRes.data.slice(0, 3)); + } catch (error) { + console.error("Error fetching events:", error); + } + } + + fetchEvents(); + }, []); + + // Handle category toggle + const handleCategoryChange = (category: EventCategory) => { + setSelectedCategory(category); + setDisplayedEvents(events[category]); + }; + + // Category titles for dynamic title display + const categoryTitles: { [key in EventCategory]: string } = { + upcoming: "Upcoming ", + past: "Past ", + ongoing: "Ongoing ", + }; + return (
{/* */} @@ -177,132 +242,76 @@ export default function Home() {
-
+
-
-

- Upcoming Events -

-

- Check out our upcoming events and workshops to learn new skills, - network with fellow coders, and have fun! -

+

+ {categoryTitles[selectedCategory]} + Events +

+
+ {(["upcoming", "ongoing", "past"] as EventCategory[]).map( + (category) => ( + + ), + )}
+

+ Check out our events and workshops to learn new skills, network + with fellow coders, and have fun! +

-
- - - Intro to React Workshop - - Learn the fundamentals of React.js in this hands-on workshop. - - - -
-
- -

- June 15, 2024 -

-
-
- -

- 6:00 PM - 8:00 PM -

-
-
- -

Online

-
-
- - - - Register - - - - - - Hackathon: Build a Web App - - Join our 24-hour hackathon and build a web application from - scratch. - - - -
-
- -

- July 20-21, 2024 -

-
-
- -

- 9:00 AM - 9:00 AM -

-
-
- -

Online

-
-
- - - - Register - - - - - - Intro to Data Structures - - Dive into the fundamentals of data structures and algorithms. - - - -
-
- -

- August 5, 2024 -

-
-
- -

- 7:00 PM - 9:00 PM -

-
-
- -

Online

-
-
- - - - Register - - - + +
+ {displayedEvents.length > 0 ? ( + displayedEvents.map((event) => ( + + + {event.name} + {event.description} + + +
+
+ +

{formatDate(event.date)}

+
+
+ +

{formatTime(event.time)}

+
+
+ +

{event.mode?"Online":"Offline"}

+
+
+ + + + Register + + + + )) + ) : ( +
+

No {selectedCategory} events available. Check back soon for future updates.

+
+ )}
@@ -474,6 +483,35 @@ export default function Home() { ); } +function formatDate(dateString: string): string { + const [year, month, day] = dateString.split("-"); + const date = new Date(Number(year), Number(month) - 1, Number(day)); // Month is 0-indexed + + const formattedDay = date.getDate(); + const monthName = date.toLocaleString("default", { month: "long" }); + const formattedYear = date.getFullYear(); + + return `${formattedDay} ${monthName} ${formattedYear}`; +} + +const formatTime = (timeString: string): string => { + const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/; + const match = timeString.match(timeRegex); + if (!match) { + return 'Invalid Time Format'; + } + + let hours = parseInt(match[1], 10); + const minutes = parseInt(match[2], 10); + const ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; // Handle midnight (0 becomes 12) + const formattedMinutes = String(minutes).padStart(2, '0'); + + return `${hours}:${formattedMinutes} ${ampm}`; +}; + + function LaptopIcon( props: React.JSX.IntrinsicAttributes & React.SVGProps, ) {