Event details updated

OneCommunityGlobal · Feb 11, 2025 · 39af61d · 39af61d
1 parent 6483cba
commit 39af61d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 22 deletions.
diff --git a/src/components/CommunityPortal/Activities/RescheduleEvent.css b/src/components/CommunityPortal/Activities/RescheduleEvent.css
@@ -59,6 +59,9 @@
   margin: 0;
 }
 
+.confirm-date-button{
+  background-color: #0066CC ;
+}
 
 
 .modal-content {

diff --git a/src/components/CommunityPortal/Activities/RescheduleEvent.jsx b/src/components/CommunityPortal/Activities/RescheduleEvent.jsx
@@ -1,31 +1,33 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import './RescheduleEvent.css';
 
 function RescheduleEvent() {
   const [showModal, setShowModal] = useState(false);
   const [selectedDate, setSelectedDate] = useState(null);
+  const [selectedTime, setSelectedTime] = useState('');
   const [confirmStep, setConfirmStep] = useState(false);
   const [buttonClicked, setButtonClicked] = useState(false);
 
   const handleReschedule = () => {
-    setShowModal(true); // Show modal when clicked
-    setButtonClicked(true); // Hide the "Reschedule Event" button after clicking it
+    setShowModal(true);
+    setButtonClicked(true);
   };
 
   const handleConfirm = () => {
     // eslint-disable-next-line no-alert
-    alert(`Event rescheduled to: ${selectedDate?.toDateString()}`);
+    alert(`Event rescheduled to: ${selectedDate?.toDateString()} at ${selectedTime}`);
     setShowModal(false);
     setConfirmStep(false);
     setSelectedDate(null);
+    setSelectedTime('');
+  };
+  const formatTime = hour => {
+    const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
+    const period = hour < 12 ? 'AM' : 'PM';
+    return `${formattedHour < 10 ? `0${formattedHour}` : formattedHour}:00 ${period}`;
   };
-
-  useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log('Updated showModal state:', showModal);
-  }, [showModal]);
 
   return (
     <div className="reschedule-page">
@@ -44,9 +46,27 @@ function RescheduleEvent() {
                   <div className="event-details-header">
                     <h3>Event Name</h3>
                     <div className="event-details">
-                      <p>Time: September 2024</p>
                       <p>Location: San Francisco, CA 94108</p>
                       <p>Link: Event Link</p>
+                      <p>
+                        Time:
+                        <select
+                          value={selectedTime}
+                          onChange={e => setSelectedTime(e.target.value)}
+                          className="time-dropdown"
+                        >
+                          <option value="">Select time</option>
+                          {[...Array(12)].map((_, i) => {
+                            const hour = 8 + i * 2;
+                            const timeSlot = `${formatTime(hour)} - ${formatTime(hour + 2)}`;
+                            return (
+                              <option key={timeSlot} value={timeSlot}>
+                                {timeSlot}
+                              </option>
+                            );
+                          })}
+                        </select>
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -57,29 +77,29 @@ function RescheduleEvent() {
                       selected={selectedDate}
                       onChange={date => {
                         setSelectedDate(date);
-                        setConfirmStep(true);
+                        setConfirmStep(false); // Reset confirm step if date is changed
                       }}
                       inline
                     />
-                    {selectedDate && (
-                      <button
-                        type="button"
-                        onClick={() => setConfirmStep(true)}
-                        className="confirm-date-button"
-                      >
-                        Confirm Date
-                      </button>
-                    )}
                   </div>
                 </div>
+                {selectedDate && selectedTime && (
+                  <button
+                    type="button"
+                    onClick={() => setConfirmStep(true)}
+                    className="confirm-date-button"
+                  >
+                    Reschedule Event
+                  </button>
+                )}
               </>
             ) : (
               <>
                 <h2>Are you sure you want to reschedule?</h2>
                 <div className="event-details">
-                  <p>Time: {selectedDate?.toDateString()}</p>
                   <p>Location: San Francisco, CA 94108</p>
-                  <p>Link: Event Link</p>
+                  <p>Date: {selectedDate?.toDateString()}</p>
+                  <p>Time: {selectedTime}</p>
                 </div>
 
                 <button
@@ -97,6 +117,7 @@ function RescheduleEvent() {
                     setShowModal(false);
                     setConfirmStep(false);
                     setSelectedDate(null);
+                    setSelectedTime('');
                     setButtonClicked(false); // Show the reschedule button again when modal closes
                   }}
                 >