From 60261d5387dfe0ad20783d4466b899c361e41067 Mon Sep 17 00:00:00 2001 From: 2004yash <134356616+2004yash@users.noreply.github.com> Date: Sun, 20 Oct 2024 00:01:59 +0530 Subject: [PATCH] events page done --- app/(default)/myevents/page.tsx | 574 +++++++++++--------------------- components/EventCard.tsx | 96 ++++++ components/EventForm.tsx | 146 ++++++++ components/EventUpdateForm.tsx | 164 +++++++++ components/Sidebar.tsx | 137 ++++++++ 5 files changed, 739 insertions(+), 378 deletions(-) create mode 100644 components/EventCard.tsx create mode 100644 components/EventForm.tsx create mode 100644 components/EventUpdateForm.tsx create mode 100644 components/Sidebar.tsx diff --git a/app/(default)/myevents/page.tsx b/app/(default)/myevents/page.tsx index 594b7af..72c71d3 100644 --- a/app/(default)/myevents/page.tsx +++ b/app/(default)/myevents/page.tsx @@ -1,417 +1,235 @@ "use client"; -import React, { useEffect, useState } from "react"; -import { CircleX } from "lucide-react"; -import cls from "./page.module.css"; -import Link from "next/link"; -import Image from "next/image"; -const MyEventCard = ({ - event, - onClick, -}: { - event: Event; - onClick: (event: Event) => void; -}) => { - return ( -
onClick(event)} - className={`max-w-sm bg-gray-900 text-white rounded-xl overflow-hidden shadow-lg m-4 transform hover:scale-105 transition-all ease-in-out duration-300 cursor-pointer`} - > -
- Event -
- -
-
-
- - {event.general_dates?.start.toLocaleDateString("en-US", { - day: "numeric", - })} - - - {event.general_dates?.start.toLocaleDateString("en-US", { - month: "short", - })} - -
- -
-

{event.event_name}

-
-
-

- {event.event_description[0]} -

-
-
- ); -}; - -export const Sidebar = ({ - event, - onClose, -}: { - event: Event | null; - onClose: () => void; -}) => { - const [isOpen, setIsOpen] = useState(false); +import { useState, useEffect } from "react"; +import { db, auth } from "../../../Firebase"; // Firebase setup +import { + collection, + getDocs, + doc, + deleteDoc, + getDoc, +} from "firebase/firestore"; +import { onAuthStateChanged } from "firebase/auth"; +import EventForm from "../../../components/EventForm"; +import EventUpdateForm from "../../../components/EventUpdateForm"; +import EventCard from "../../../components/EventCard"; // Import new EventCard component +import Sidebar from "../../../components/Sidebar"; // Import Sidebar component +// import Image from "next/image"; + +const EventsPage = () => { + const [showForm, setShowForm] = useState(false); // For toggling form visibility + const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false); + const [events, setEvents] = useState< + { + id: string; + eventName: string; + description: string; + eventDate: string; + lastDateOfRegistration: string; + dateCreated: string; + dateModified: string; + imageURL: string; // Adding imageURL field + registrationLink: string; + }[] + >([]); + + const [selectedEvent, setSelectedEvent] = useState<{ + id: string; + eventName: string; + description: string; + eventDate: string; + lastDateOfRegistration: string; + dateCreated: string; + dateModified: string; + imageURL: string; + registrationLink: string; + } | null>(null); // For sidebar details + + const [isSidebarOpen, setIsSidebarOpen] = useState(false); // Track sidebar state useEffect(() => { - if (event) { - setIsOpen(true); - } else { - setIsOpen(false); - } - }, [event]); - - return ( - event && ( -
-
- - -
- Event -
-
-

{event.event_name}

-
-
- {/* add a point blank logo here */} -
-

Host By {event.host_name}

-
- {event.general_dates && ( -
-
-

- {event.general_dates?.start.toLocaleDateString("en-US", { - month: "short", - })} -

-

- {event.general_dates?.start.toLocaleDateString("en-US", { - day: "numeric", - })} -

-
-
-

- {event.general_dates?.start.toLocaleDateString("en-US", { - weekday: "long", - month: "long", - day: "numeric", - })} -

-

- {event.general_dates?.start.toLocaleTimeString("en-US")} -{" "} - {event.general_dates?.end.toLocaleTimeString("en-US")} -

-
-
- )} - {(event.first_year_dates || event.second_year_dates) && ( -

- Dates -

- )} - {event.first_year_dates && ( -
-

First Year

-
-

- {event.first_year_dates?.start.toLocaleDateString("en-US", { - month: "short", - })} -

-

- {event.first_year_dates?.start.toLocaleDateString("en-US", { - day: "numeric", - })} -

-
-
-

- {event.first_year_dates?.start.toLocaleDateString("en-US", { - weekday: "long", - month: "long", - day: "numeric", - })} -

-

- {event.first_year_dates?.start.toLocaleTimeString("en-US")}{" "} - - {event.first_year_dates?.end.toLocaleTimeString("en-US")} -

-
-
- )} - {event.second_year_dates && ( -
-

- Second & Third Year -

-
-

- {event.second_year_dates?.start.toLocaleDateString( - "en-US", - { - month: "short", - } - )} -

-

- {event.second_year_dates?.start.toLocaleDateString( - "en-US", - { - day: "numeric", - } - )} -

-
- -
-

- {event.second_year_dates?.start.toLocaleDateString( - "en-US", - { - weekday: "long", - month: "long", - day: "numeric", - } - )} -

-

- {event.second_year_dates?.start.toLocaleTimeString("en-US")}{" "} - - {event.second_year_dates?.end.toLocaleTimeString("en-US")} -

-
-
- )} -
-

Registration

-
-

Welcome! To join the event, please register below.

- - Register - -
-
-
-
-

{event.event_description}

-
-
- -
-

- Important Links -

-
- {event.important_links.map((link, index) => ( -
-

{link.name} :

- - {link.link} - -
- ))} -
-
-
-
-
- ) - ); -}; - -interface Event { - bannerImageLink: string; - event_name: string; - host_name: string; - first_year_dates?: { - start: Date; - end: Date; - }; - second_year_dates?: { - start: Date; - end: Date; + const checkAdmin = async (uid: string) => { + try { + const docRef = doc(db, "admin", uid); + const docSnap = await getDoc(docRef); + if (docSnap.exists()) { + setIsAdminLoggedIn(true); + } else { + setIsAdminLoggedIn(false); + } + } catch (error) { + console.error("Error checking admin status:", error); + setIsAdminLoggedIn(false); + } + }; + + const unsubscribe = onAuthStateChanged(auth, (user) => { + if (user) { + checkAdmin(user.uid); + } else { + setIsAdminLoggedIn(false); + } + }); + + return () => unsubscribe(); + }, []); + + // Fetching data from Firebase + const fetchEvents = async () => { + const eventsCollection = collection(db, "myEvents"); + const eventSnapshot = await getDocs(eventsCollection); + + const eventList = eventSnapshot.docs.map((doc) => { + const data = doc.data(); + return { + id: doc.id, + eventName: data.eventName || "", + description: data.description || "", + eventDate: data.eventDate || "", + lastDateOfRegistration: data.lastDateOfRegistration || "", + dateCreated: data.dateCreated || "", + dateModified: data.dateModified || "", + imageURL: data.imageURL || "", + registrationLink: data.registrationLink || "", // Include registrationLink + }; + }); + + setEvents(eventList); }; - general_dates?: { - start: Date; - end: Date; - }; - registration_link: string; - event_description: string; - important_links: { - name: string; - link: string; - }[]; - createdAt: Date; -} - -const eventzz: Event[] = [ - { - bannerImageLink: - "https://img.freepik.com/premium-vector/business-conference-banner-template_85212-590.jpg", - event_name: "Startup Pitch Competition", - host_name: "InnovateX", - first_year_dates: { - start: new Date("2023-12-10T13:00:00"), - end: new Date("2023-12-10T18:00:00"), - }, - second_year_dates: { - start: new Date("2023-12-11T10:00:00"), - end: new Date("2023-12-11T17:00:00"), - }, - general_dates: { - start: new Date("2023-12-10T13:00:00"), - end: new Date("2023-12-10T18:00:00"), - }, - registration_link: "https://example.com/register/startup-pitch-competition", - event_description: - "The Startup Pitch Competition offers a platform for startups to showcase their innovative ideas to investors and industry leaders.", - important_links: [ - { - name: "Event Guidelines", - link: "https://innovatex.com/guidelines", - }, - { - name: "Register Here", - link: "https://innovatex.com/register", - }, - ], - createdAt: new Date(), - }, -]; - -const Page = () => { - const [selectedEvent, setSelectedEvent] = useState(null); - const today = new Date(); - const isUpcoming = (event: Event) => - event.general_dates && event.general_dates.start > today; - - const isOngoing = (event: Event) => - event.general_dates && - event.general_dates.start <= today && - event.general_dates.end >= today; + useEffect(() => { + fetchEvents(); + }, []); - const isPast = (event: Event) => - event.general_dates && - event.general_dates.end && - event.general_dates.end < today; + // Deleting an event + const deleteEvent = async (eventId: string) => { + await deleteDoc(doc(db, "myEvents", eventId)); + fetchEvents(); // Refresh event list + }; - const handleCardClick = (event: Event) => { + const handleEventSelect = (event: { + id: string; + eventName: string; + description: string; + eventDate: string; + lastDateOfRegistration: string; + dateCreated: string; + dateModified: string; + imageURL: string; + registrationLink: string; // Ensure registrationLink is included + }) => { setSelectedEvent(event); + setIsSidebarOpen(true); }; - const handleCloseSidebar = () => { - setSelectedEvent(null); + const handleSidebarClose = () => { + setIsSidebarOpen(false); }; - const upcomingEvents = eventzz.filter(isUpcoming); - const ongoingEvents = eventzz.filter(isOngoing); - const pastEvents = eventzz.filter(isPast); + // Dividing events into Past, Present, and Future based on eventDate + const today = new Date(); - return ( -
-

Events

+ const pastEvents = events.filter( + (event) => new Date(event.eventDate) < today + ); + const presentEvents = events.filter( + (event) => new Date(event.eventDate).toDateString() === today.toDateString() + ); + const futureEvents = events.filter( + (event) => new Date(event.eventDate) > today + ); -
-

Upcoming Events

- {upcomingEvents.length > 0 ? ( -
- {upcomingEvents.map((event, index) => ( - - ))} -
- ) : ( -

No upcoming events.

+ return ( +
+

Events

+
+ {isAdminLoggedIn && ( + )}
-
-

Ongoing Events

- {ongoingEvents.length > 0 ? ( -
- {ongoingEvents.map((event, index) => ( - } + + {/* Displaying the Events */} +
+ {/* Present Events */} +

Present Events

+ {presentEvents.length > 0 ? ( +
+ {presentEvents.map((event) => ( + ))}
) : ( -

No ongoing events.

+

No present events available.

)} -
-
-

Past Events

- {pastEvents.length > 0 ? ( -
- {pastEvents.map((event, index) => ( - Future Events + {futureEvents.length > 0 ? ( +
+ {futureEvents.map((event) => ( + ))}
) : ( -

No past events.

+

No future events available.

)}
- + {/* Past Events */} +

Past Events

+ {pastEvents.length > 0 ? ( +
+ {pastEvents.map((event) => ( + + ))} +
+ ) : ( +

No past events available.

+ )} - {selectedEvent && ( -
+ {/* Sidebar for Event Details */} + {isSidebarOpen && selectedEvent && ( + + )} + + {/* Event Update Form */} + {isAdminLoggedIn && selectedEvent && ( +
+

Update Event

+ +
)}
); }; -export default Page; +export default EventsPage; diff --git a/components/EventCard.tsx b/components/EventCard.tsx new file mode 100644 index 0000000..4afb601 --- /dev/null +++ b/components/EventCard.tsx @@ -0,0 +1,96 @@ +import Image from "next/image"; + +interface EventCardProps { + event: { + id: string; + eventName: string; + description: string; + eventDate: string; + lastDateOfRegistration: string; + dateCreated: string; + dateModified: string; + imageURL: string; + registrationLink: string; + }; + isAdminLoggedIn: boolean; + onDelete: (eventId: string) => void; + onSelect: (event: { + id: string; + eventName: string; + description: string; + eventDate: string; + lastDateOfRegistration: string; + dateCreated: string; + dateModified: string; + imageURL: string; + registrationLink: string; + }) => void; +} + +const EventCard: React.FC = ({ + event, + isAdminLoggedIn, + onDelete, + onSelect, +}) => { + // Extracting the day and month from the eventDate string + const eventDate = new Date(event.eventDate); + const day = eventDate.toLocaleString("en-US", { day: "2-digit" }); + const month = eventDate.toLocaleString("en-US", { month: "short" }); + + return ( +
onSelect(event)} + > + {/* Event Date Badge */} + + + {/* Event Image */} + {event.eventName} + + + {/* Event Content */} +
+
+

{day}

+

{month}

+
+

{event.eventName}

+

{event.description}

+ + {/* Admin Options */} + {isAdminLoggedIn && ( +
+ + +
+ )} +
+
+ ); +}; + +export default EventCard; diff --git a/components/EventForm.tsx b/components/EventForm.tsx new file mode 100644 index 0000000..ad903dc --- /dev/null +++ b/components/EventForm.tsx @@ -0,0 +1,146 @@ +import { useState } from "react"; +import { db } from "../Firebase"; +import { addDoc, collection } from "firebase/firestore"; + +const EventForm = () => { + const [eventName, setEventName] = useState(""); + const [eventDate, setEventDate] = useState(""); + const [lastDateOfRegistration, setLastDateOfRegistration] = useState(""); + const [description, setDescription] = useState(""); + const [imageURL, setImageURL] = useState(""); + const [registrationLink, setRegistrationLink] = useState(""); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const eventsCollection = collection(db, "myEvents"); + const currentDate = new Date().toISOString(); // Get current date/time in ISO format + + await addDoc(eventsCollection, { + eventName, + eventDate, + lastDateOfRegistration, + description, + imageURL, + registrationLink, + dateCreated: currentDate, + dateModified: currentDate, + }); + + alert("Event added successfully!"); + + // Clear form fields after submission + setEventName(""); + setEventDate(""); + setLastDateOfRegistration(""); + setDescription(""); + setImageURL(""); + setRegistrationLink(""); + } catch (error) { + console.error("Error adding event:", error); + } + }; + + return ( +
+

Add New Event

+ {/* Event Name */} +
+ + setEventName(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+ + {/* Event Date */} +
+ + setEventDate(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+ + {/* Last Date of Registration */} +
+ + setLastDateOfRegistration(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+ + {/* Description */} +
+ + +
+ + {/* Image URL */} +
+ + setImageURL(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+ + {/* Registration Link */} +
+ + setRegistrationLink(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+ + +
+ ); +}; + +export default EventForm; diff --git a/components/EventUpdateForm.tsx b/components/EventUpdateForm.tsx new file mode 100644 index 0000000..b5f35c9 --- /dev/null +++ b/components/EventUpdateForm.tsx @@ -0,0 +1,164 @@ +import { useState } from "react"; +import { db } from "../Firebase"; +import { doc, updateDoc } from "firebase/firestore"; + +interface EventUpdateFormProps { + eventId: string; + initialEventData: { + eventName: string; + eventDate: string; + lastDateOfRegistration: string; + description: string; + imageURL: string; + registrationLink: string; // Add this field to your initial data structure + }; +} + +const EventUpdateForm = ({ + eventId, + initialEventData, +}: EventUpdateFormProps) => { + const [eventName, setEventName] = useState(initialEventData.eventName); + const [eventDate, setEventDate] = useState(initialEventData.eventDate); + const [lastDateOfRegistration, setLastDateOfRegistration] = useState( + initialEventData.lastDateOfRegistration + ); + const [description, setDescription] = useState(initialEventData.description); + const [imageURL, setImageURL] = useState(initialEventData.imageURL); + const [registrationLink, setRegistrationLink] = useState(initialEventData.registrationLink); // New state for registration link + + const handleUpdate = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const eventDocRef = doc(db, "myEvents", eventId); + const currentDate = new Date().toISOString(); // Set dateModified to the current date/time + + await updateDoc(eventDocRef, { + eventName, + eventDate, + lastDateOfRegistration, + description, + imageURL, + registrationLink, // Include the registration link in the update + dateModified: currentDate, + }); + + alert("Event updated successfully!"); + } catch (error) { + console.error("Error updating event:", error); + } + }; + + return ( +
+

Update Event

+
+ + setEventName(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+
+ + setEventDate(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+
+ + setLastDateOfRegistration(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+
+ + +
+
+ + setImageURL(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+
+ + setRegistrationLink(e.target.value)} + className="w-full px-3 py-2 border rounded text-black" + required + /> +
+ + +
+ ); +}; + +export default EventUpdateForm; diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx new file mode 100644 index 0000000..75327f2 --- /dev/null +++ b/components/Sidebar.tsx @@ -0,0 +1,137 @@ +import Image from "next/image"; +import { + FaCalendarAlt, + FaMapMarkerAlt, + FaCheckCircle, + FaClock, + FaUserShield, +} from "react-icons/fa"; // Icons for various info +import { useState, useEffect } from "react"; + +interface SidebarProps { + event: { + id: string; + eventName: string; + description: string; + eventDate: string; + lastDateOfRegistration: string; + dateCreated: string; + dateModified: string; + imageURL: string; + } | null; + onClose: () => void; + registrationLink?: string; // Optionally pass a registration link +} + +const Sidebar: React.FC = ({ event, onClose, registrationLink }) => { + const [isVisible, setIsVisible] = useState(false); + + // Get current date + const currentDate = new Date().toISOString().split("T")[0]; + + // Trigger sidebar to open with animation when event is passed + useEffect(() => { + if (event) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }, [event]); + + if (!event) return null; // Return nothing if no event is selected + + return ( +
+
+ {/* Close Button */} + + + {/* Event Name */} +

+ {event.eventName} +

+ + {/* Image */} + {event.imageURL ? ( +
+ {event.eventName} +
+ ) : ( +
+ No image available +
+ )} + + {/* Event Details */} +
+
+ +

Event Date: {event.eventDate}

+
+
+ +

+ Last Registration Date: {event.lastDateOfRegistration} +

+
+
+ +

Location: Bengaluru, Karnataka

{" "} + {/* Can adjust dynamically if available */} +
+
+ + {/* Registration Section */} +
+
+ +

Approval Required

+
+ {event.lastDateOfRegistration >= currentDate && registrationLink && ( + + + + )} +
+ + {/* About Event */} +
+

+ About Event +

+

{event.description}

+
+
+
+ ); +}; + +export default Sidebar;