From 583be5dcd25a18207bf81da200040fbe02663deb Mon Sep 17 00:00:00 2001
From: "ahmad.ahmad1" <ahmad.ahmad1@ucalgary.ca>
Date: Sat, 1 Feb 2025 16:01:19 -0700
Subject: [PATCH] feat(TimeSlotSelector): Mapped out time slot buttons.

---
 src/Interivew Booking/TimeSlotSelector.jsx | 35 +++++++++++++++-------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/Interivew Booking/TimeSlotSelector.jsx b/src/Interivew Booking/TimeSlotSelector.jsx
index 3162e46..e8d868e 100644
--- a/src/Interivew Booking/TimeSlotSelector.jsx	
+++ b/src/Interivew Booking/TimeSlotSelector.jsx	
@@ -36,7 +36,7 @@ const TimeSlotSelector = ({ onTimeSlotSelect }) => {
   };
 
   const handleTimeSlotChange = (e) => {
-    let startTime = e.target.value;
+    let startTime = e.target.innerHTML;
     onTimeSlotSelect((prev) => ({ ...prev, startTime }));
   };
 
@@ -53,17 +53,30 @@ const TimeSlotSelector = ({ onTimeSlotSelect }) => {
       ) : (
         <>
           <h4>Available Time Slots for {selectedDate}:</h4>
-          {timeSlots.length > 0 ? (
-            <select onChange={handleTimeSlotChange}>
-              <option value="">Select a time slot</option>
-              {timeSlots.map((time, index) => (
-                <option key={index} value={time}>
-                  {time}
-                </option>
-              ))}
-            </select>
+          {selectedDate === undefined ? (
+            <>
+              <p>Please select a date.</p>
+            </>
+          ) : timeSlots.length > 0 ? (
+            <>
+              {Object.values(timeSlots).map((time) => {
+                return (
+                  <button
+                    key={time}
+                    onClick={(self) => {
+                      console.log(self.target.innerHTML);
+                      handleTimeSlotChange(self);
+                    }}
+                  >
+                    {time}
+                  </button>
+                );
+              })}
+            </>
           ) : (
-            <p>No available time slots for the selected date.</p>
+            <>
+              <p>No available time slots for the selected date.</p>
+            </>
           )}
         </>
       )}