From 0ec194b82420981ef15f7b2879b7f4ff0d499b2b Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayush1009208@gmail.com>
Date: Tue, 24 Sep 2024 23:55:51 +0530
Subject: [PATCH] Login button fix

---
 app/(default)/events/EventCard.css |  14 ++-
 app/(default)/events/page.tsx      | 177 ++++++++++++++++-------------
 2 files changed, 108 insertions(+), 83 deletions(-)

diff --git a/app/(default)/events/EventCard.css b/app/(default)/events/EventCard.css
index 21221da..449977a 100644
--- a/app/(default)/events/EventCard.css
+++ b/app/(default)/events/EventCard.css
@@ -32,7 +32,6 @@ h2 {
   transform: rotateY(180deg);
 }
 
-
 .event-card-front,
 .event-card-back {
   width: 100%;
@@ -116,7 +115,12 @@ h2 {
   font-size: 1em;
 }
 
-button {
+/* Updated button styles */
+.toggle-form-button,
+.toggle-edit-button,
+.submit-event-button,
+.update-event-button,
+.remove-event-button {
   margin-top: 70px !important;
   background-color: black;
   color: yellow;
@@ -129,7 +133,11 @@ button {
   margin: 10px;
 }
 
-button:hover {
+.toggle-form-button:hover,
+.toggle-edit-button:hover,
+.submit-event-button:hover,
+.update-event-button:hover,
+.remove-event-button:hover {
   background-color: yellow;
   color: black;
 }
diff --git a/app/(default)/events/page.tsx b/app/(default)/events/page.tsx
index 0644fe3..17f25ef 100644
--- a/app/(default)/events/page.tsx
+++ b/app/(default)/events/page.tsx
@@ -44,13 +44,23 @@ const EventCard: React.FC = () => {
   // Fetch admin status
   useEffect(() => {
     const checkAdminStatus = async () => {
-      const user = auth.currentUser;
-      if (user) {
-        const adminDocSnap = await getDoc(doc(db, "admin", user.uid));
-        setIsAdmin(adminDocSnap.exists());
-      }
+      onAuthStateChanged(auth, async (user) => {
+        if (user) {
+          const uid = user.uid;
+          try {
+            const adminDocRef = doc(db, "admin", uid);
+            const adminDocSnap = await getDoc(adminDocRef);
+            if (adminDocSnap.exists()) {
+              setIsAdmin(true);
+            }
+          } catch (error) {
+            console.log("Error getting document:", error);
+          }
+        }
+      });
     };
-    onAuthStateChanged(auth, checkAdminStatus);
+
+    checkAdminStatus();
   }, []);
 
   // Fetch events from Firestore
@@ -219,8 +229,11 @@ const EventCard: React.FC = () => {
     <div>
       {isAdmin && (
         <>
-          <button onClick={() => setFormVisible(!formVisible)}>
-            {formVisible ? "Hide Form" : "Show Form"}
+          <button
+            className="toggle-form-button"
+            onClick={() => setFormVisible(!formVisible)}
+          >
+            {formVisible ? "Hide Event Form" : "Add New Event"}
           </button>
 
           {formVisible && (
@@ -274,16 +287,21 @@ const EventCard: React.FC = () => {
                   required
                 />
               </div>
-              <button type="submit">Submit</button>
+              <button type="submit" className="submit-event-button">
+                Add Event
+              </button>
             </form>
           )}
 
-          <button onClick={() => setEditFormVisible(!editFormVisible)}>
-            {editFormVisible ? "Hide Edit Form" : "Show Edit Form"}
+          <button
+            className="toggle-edit-button"
+            onClick={() => setEditFormVisible(!editFormVisible)}
+          >
+            {editFormVisible ? "Hide Edit Form" : "Edit Event"}
           </button>
 
           {editFormVisible && (
-            <form onSubmit={handleEditSubmit}>
+            <form onSubmit={handleEditSubmit} style={{ marginBottom: "20px" }}>
               <div>
                 <label>Select Event to Edit:</label>
                 <select
@@ -292,9 +310,8 @@ const EventCard: React.FC = () => {
                     setEventToEdit(e.target.value);
                     handleEventToEditChange(e.target.value);
                   }}
-                  required
                 >
-                  <option value="">Select an event</option>
+                  <option value="">Select Event</option>
                   {events.map((event) => (
                     <option key={event.id} value={event.eventName}>
                       {event.eventName}
@@ -302,78 +319,78 @@ const EventCard: React.FC = () => {
                   ))}
                 </select>
               </div>
-
-              {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>
-                </>
-              )}
+              <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" className="update-event-button">
+                Update Event
+              </button>
+              <button
+                type="button"
+                className="remove-event-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>
+      <h2>Upcoming Events</h2>
+      {renderEventCards(upcomingEvents)}
+
+      <h2>Ongoing Events</h2>
+      {renderEventCards(ongoingEvents)}
+
+      <h2>Past Events</h2>
+      {renderEventCards(pastEvents)}
     </div>
   );
 };
 
-export default EventCard;
\ No newline at end of file
+export default EventCard;