From ef3681064f4deef01f70c153a2eddbea419c35cf Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayush1009208@gmail.com>
Date: Tue, 24 Sep 2024 22:54:38 +0530
Subject: [PATCH] Final fix 2

---
 app/(default)/events/page.tsx | 275 ++++++++++++++++++++--------------
 1 file changed, 163 insertions(+), 112 deletions(-)

diff --git a/app/(default)/events/page.tsx b/app/(default)/events/page.tsx
index 0ed8ece..0644fe3 100644
--- a/app/(default)/events/page.tsx
+++ b/app/(default)/events/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { db, auth } from "@/Firebase";
+import { db, auth, storage } from "@/Firebase";
 import {
   collection,
   addDoc,
@@ -13,6 +13,7 @@ import {
   deleteDoc,
   getDoc,
 } from "firebase/firestore";
+import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { onAuthStateChanged } from "firebase/auth";
 import "./EventCard.css";
 import Image from "next/image";
@@ -31,7 +32,7 @@ const EventCard: React.FC = () => {
   const [eventName, setEventName] = useState("");
   const [description, setDescription] = useState("");
   const [imageUrl, setImageUrl] = useState("");
-  const [imageFile, setImageFile] = useState<File | null>(null); // Declare imageFile
+  const [imageFile, setImageFile] = useState<File | null>(null);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
   const [formVisible, setFormVisible] = useState(false);
@@ -40,71 +41,59 @@ const EventCard: React.FC = () => {
   const [eventDataToEdit, setEventDataToEdit] = useState<Event | null>(null);
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
 
+  // Fetch admin status
   useEffect(() => {
     const checkAdminStatus = async () => {
-      onAuthStateChanged(auth, async (user) => {
-        if (user) {
-          const uid = user.uid;
-          try {
-            const adminDocRef = await doc(db, "admin", uid);
-            const adminDocSnap = await getDoc(adminDocRef);
-            if (adminDocSnap.exists()) {
-              setIsAdmin(true);
-            }
-          } catch (error) {
-            console.log("Error getting document:", error);
-          }
-        }
-      });
+      const user = auth.currentUser;
+      if (user) {
+        const adminDocSnap = await getDoc(doc(db, "admin", user.uid));
+        setIsAdmin(adminDocSnap.exists());
+      }
     };
-
-    checkAdminStatus();
+    onAuthStateChanged(auth, checkAdminStatus);
   }, []);
 
+  // Fetch events from Firestore
   useEffect(() => {
     const fetchEvents = async () => {
       const q = query(collection(db, "events"), orderBy("startDate"));
       const querySnapshot = await getDocs(q);
-      const eventsList: Event[] = [];
-      querySnapshot.forEach((doc) => {
-        const eventData = doc.data() as Event;
-        eventData.id = doc.id;
-        eventsList.push(eventData);
-      });
+      const eventsList: Event[] = querySnapshot.docs.map((doc) => ({
+        ...doc.data(),
+        id: doc.id,
+      })) as Event[];
       setEvents(eventsList);
     };
     fetchEvents();
   }, []);
 
+  const uploadImage = async (file: File) => {
+    const imageRef = ref(storage, `eventImages/${file.name}`);
+    await uploadBytes(imageRef, file);
+    return await getDownloadURL(imageRef);
+  };
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const newEvent: Event = {
-      eventName,
-      description,
-      imageUrl: imageFile ? URL.createObjectURL(imageFile) : '',
-      startDate,
-      endDate,
-    };
-
     try {
-      await addDoc(collection(db, "events"), newEvent);
+      const imageUrl = imageFile ? await uploadImage(imageFile) : "";
+      const newEvent: Event = {
+        eventName,
+        description,
+        imageUrl,
+        startDate,
+        endDate,
+      };
 
+      const docRef = await addDoc(collection(db, "events"), newEvent);
       setEvents((prevEvents) =>
-        [...prevEvents, newEvent].sort(
-          (a, b) =>
-            new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+        [...prevEvents, { ...newEvent, id: docRef.id }].sort(
+          (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
         )
       );
 
-      setEventName("");
-      setDescription("");
-      setImageUrl("");
-      setImageFile(null); // Clear image file after submission
-      setStartDate("");
-      setEndDate("");
-
-      setFormVisible(false);
+      resetForm();
     } catch (error) {
       console.error("Error adding document: ", error);
     }
@@ -114,47 +103,27 @@ const EventCard: React.FC = () => {
     e.preventDefault();
     if (!eventDataToEdit || !eventDataToEdit.id) return;
 
-    const updatedEvent = {
-      eventName,
-      description,
-      imageUrl: imageFile ? URL.createObjectURL(imageFile) : eventDataToEdit.imageUrl,
-      startDate,
-      endDate,
-    };
-
     try {
-      const eventRef = doc(db, "events", eventDataToEdit.id);
-      await updateDoc(eventRef, {
-        eventName: eventToEdit,
-        description: description,
-        imageUrl: imageUrl,
-        startDate: startDate,
-        endDate: endDate,
-      });
+      const updatedImageUrl = imageFile ? await uploadImage(imageFile) : eventDataToEdit.imageUrl;
+      const updatedEvent = {
+        eventName,
+        description,
+        imageUrl: updatedImageUrl,
+        startDate,
+        endDate,
+      };
 
+      await updateDoc(doc(db, "events", eventDataToEdit.id), updatedEvent);
       setEvents((prevEvents) =>
         prevEvents
           .map((event) =>
-            event.id === eventDataToEdit.id
-              ? {
-                  ...eventDataToEdit,
-                  eventName,
-                  description,
-                  imageUrl,
-                  startDate,
-                  endDate,
-                }
-              : event
-          )
-          .sort(
-            (a, b) =>
-              new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+            event.id === eventDataToEdit.id ? { ...updatedEvent, id: event.id } : event
           )
+          .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
       );
 
       setEditFormVisible(false);
-      setEventToEdit("");
-      setImageFile(null); // Clear image file after submission
+      resetForm();
     } catch (error) {
       console.error("Error updating document: ", error);
     }
@@ -165,23 +134,18 @@ const EventCard: React.FC = () => {
 
     try {
       await deleteDoc(doc(db, "events", eventDataToEdit.id));
-      setEvents((prevEvents) =>
-        prevEvents.filter((event) => event.id !== eventDataToEdit.id)
-      );
+      setEvents((prevEvents) => prevEvents.filter((event) => event.id !== eventDataToEdit.id));
       setEditFormVisible(false);
-      setEventToEdit("");
     } catch (error) {
       console.error("Error deleting document: ", error);
     }
   };
 
-  const handleEventToEditChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const eventName = e.target.value;
-    setEventToEdit(eventName);
-
+  const handleEventToEditChange = (eventName: string) => {
     const selectedEvent = events.find((event) => event.eventName === eventName);
     if (selectedEvent) {
       setEventDataToEdit(selectedEvent);
+      setEventName(selectedEvent.eventName);
       setDescription(selectedEvent.description);
       setImageUrl(selectedEvent.imageUrl);
       setStartDate(selectedEvent.startDate);
@@ -191,28 +155,30 @@ const EventCard: React.FC = () => {
     }
   };
 
+  const resetForm = () => {
+    setEventName("");
+    setDescription("");
+    setImageFile(null);
+    setImageUrl("");
+    setStartDate("");
+    setEndDate("");
+    setFormVisible(false);
+  };
+
   const currentDate = new Date();
-  const upcomingEvents = events.filter(
-    (event) => new Date(event.startDate) > currentDate
-  );
+  const upcomingEvents = events.filter((event) => new Date(event.startDate) > currentDate);
   const ongoingEvents = events.filter(
-    (event) =>
-      new Date(event.startDate) <= currentDate &&
-      new Date(event.endDate) >= currentDate
-  );
-  const pastEvents = events.filter(
-    (event) => new Date(event.endDate) < currentDate
+    (event) => new Date(event.startDate) <= currentDate && new Date(event.endDate) >= currentDate
   );
+  const pastEvents = events.filter((event) => new Date(event.endDate) < currentDate);
 
   const renderEventCards = (events: Event[]) => {
-    if (!events || events.length === 0) {
-      return <p>No events to display</p>;
-    }
+    if (!events || events.length === 0) return <p>No events to display</p>;
 
     return (
       <div className="event-cards-container">
-        {events.map((event, index) => (
-          <div key={index} className="event-card">
+        {events.map((event) => (
+          <div key={event.id} className="event-card">
             <div className="event-card-inner">
               <div className="event-card-front">
                 <div className="event-container">
@@ -235,12 +201,12 @@ const EventCard: React.FC = () => {
               </div>
               <div className="event-card-back">
                 <Image
-                  src={event.imageUrl || 'https://via.placeholder.com/150'}
-                  alt={event.eventName || 'Event image'}
+                  src={event.imageUrl || "https://via.placeholder.com/150"}
+                  alt={event.eventName || "Event image"}
                   width={300}
                   height={200}
                 />
-                <p>{event.description || 'No description available'}</p>
+                <p>{event.description || "No description available"}</p>
               </div>
             </div>
           </div>
@@ -259,6 +225,7 @@ const EventCard: React.FC = () => {
 
           {formVisible && (
             <form onSubmit={handleSubmit} style={{ marginBottom: "20px" }}>
+              {/* Form fields */}
               <div>
                 <label>Event Name:</label>
                 <input
@@ -284,7 +251,6 @@ const EventCard: React.FC = () => {
                   onChange={(e) => {
                     if (e.target.files) {
                       setImageFile(e.target.files[0]);
-                      setImageUrl(URL.createObjectURL(e.target.files[0]));
                     }
                   }}
                   required
@@ -305,24 +271,109 @@ const EventCard: React.FC = () => {
                   type="date"
                   value={endDate}
                   onChange={(e) => setEndDate(e.target.value)}
+                  required
                 />
               </div>
-              <button type="submit">Add Event</button>
+              <button type="submit">Submit</button>
             </form>
           )}
-        </>
-      )}
 
-      <h2>Ongoing Events</h2>
-      {renderEventCards(ongoingEvents)}
+          <button onClick={() => setEditFormVisible(!editFormVisible)}>
+            {editFormVisible ? "Hide Edit Form" : "Show Edit Form"}
+          </button>
 
-      <h2>Upcoming Events</h2>
-      {renderEventCards(upcomingEvents)}
+          {editFormVisible && (
+            <form onSubmit={handleEditSubmit}>
+              <div>
+                <label>Select Event to Edit:</label>
+                <select
+                  value={eventToEdit}
+                  onChange={(e) => {
+                    setEventToEdit(e.target.value);
+                    handleEventToEditChange(e.target.value);
+                  }}
+                  required
+                >
+                  <option value="">Select an event</option>
+                  {events.map((event) => (
+                    <option key={event.id} value={event.eventName}>
+                      {event.eventName}
+                    </option>
+                  ))}
+                </select>
+              </div>
 
-      <h2>Past Events</h2>
-      {renderEventCards(pastEvents)}
+              {eventDataToEdit && (
+                <>
+                  <div>
+                    <label>Event Name:</label>
+                    <input
+                      type="text"
+                      value={eventName}
+                      onChange={(e) => setEventName(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label>Description:</label>
+                    <textarea
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label>Image Upload:</label>
+                    <input
+                      type="file"
+                      accept="image/*"
+                      onChange={(e) => {
+                        if (e.target.files) {
+                          setImageFile(e.target.files[0]);
+                        }
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <label>Start Date:</label>
+                    <input
+                      type="date"
+                      value={startDate}
+                      onChange={(e) => setStartDate(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label>End Date:</label>
+                    <input
+                      type="date"
+                      value={endDate}
+                      onChange={(e) => setEndDate(e.target.value)}
+                      required
+                    />
+                  </div>
+
+                  <button type="submit">Update</button>
+                  <button type="button" onClick={handleRemoveEvent}>
+                    Remove Event
+                  </button>
+                </>
+              )}
+            </form>
+          )}
+        </>
+      )}
+
+      <div>
+        <h2>Upcoming Events</h2>
+        {renderEventCards(upcomingEvents)}
+        <h2>Ongoing Events</h2>
+        {renderEventCards(ongoingEvents)}
+        <h2>Past Events</h2>
+        {renderEventCards(pastEvents)}
+      </div>
     </div>
   );
 };
 
-export default EventCard;
+export default EventCard;
\ No newline at end of file