feat(InterviewBooking, TimeSlotSelector): Added Calender and Time Slot functionality, readjusted Test function, Added Footer

src/Interivew Booking/Database.json

@@ -0,0 +1,7 @@
+{
+  "body": {
+    "interviewDates": {
+      "2025-01-11": { "11:30:00": { "Meeting Duration": "30 min" } }
+    }
+  }
+}

src/Interivew Booking/InterviewBooking.jsx

@@ -1,5 +1,6 @@
 import InterviewForm from "./InterviewForm";
 import logo from "../Header/logo.webp";
+import Ender from "../Footer/Ender";
 /**
  * @param {null} null - requires onthing
  * @returns {JSX.Element} Page - HTML tags and JS functionality
@@ -14,6 +15,21 @@ const InterviewBooking = () => {
       <h1>UofC Baja Interview Form</h1>
       <p>Please kindly fill out the form and our team will contact you.</p>
       <InterviewForm />
+      <h4>
+        What to do if I cannot make it to any of the avaliable time slots or
+        need to rescedule?
+      </h4>
+      <p>
+        While we highly encourage sceduling an interview in one of the above
+        time slots, we recongize that not everyone can make it work with their
+        personal and university schedules.
+      </p>
+      <p>
+        Please email us at{" "}
+        <a href="mailto:uofcbaja@gmail.com">uofcbaja@gmail.com</a> to work out
+        an alternate interview time or for rescheduling.
+      </p>
+      <Ender />
     </>
   );
 };

src/Interivew Booking/InterviewForm.jsx

@@ -1,46 +1,109 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import TimeSlotSelector from "./TimeSlotSelector"; // Import the TimeSlotSelector component
+
+/**
+ * @param {null} null - Takes in nothing
+ * @returns {JSX.element} JSX - HTML and JS functionality
+ * @description Used for picking an interview slot
+ * @author Ahmad <ahmadmuhammadofficial@gmail.com>
+ * @todo CSS
+ */
 
 const InterviewForm = () => {
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
-  useEffect(() => {
+  const dialogRef = useRef(null);
-    test();
+  const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
-  }, []);
+
+  /**
+   * @param {String HTML} event - Takes in form info
+   * @returns {null} null - Returns in nothing
+   * @description
+   * @author Ahmad <ahmadmuhammadofficial@gmail.com>
+   * @todo CSS
+   */
   const formsubmit = async (event) => {
     event.preventDefault();
+
+    if (!selectedTimeSlot) {
+      alert("Please select a time slot!");
+      return;
+    }
+
     setIsButtonDisabled(true);
     await new Promise((res) => setTimeout(res, 1000));
     const formData = new FormData(event.target);
     const formObject = Object.fromEntries(formData.entries());
-    await console.log("Form Data:", formObject);
+    formObject.date = selectedTimeSlot["date"]; // Add the selected time slot to form data
-    setIsButtonDisabled(false);
+    formObject.startTime = selectedTimeSlot["startTime"];
-  };
+    console.log("Form Data:", formObject);
-  const test = async () => {
     const res = await fetch(
-      // "https://bajabackend.bajacloud.duckdns.org/getAppointments",
+      "https://bajabackend.bajacloud.duckdns.org/SelectInterview",
-      "https://randomfox.ca/floof",
+      {
-      { method: "GET" }
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formObject),
+      }
     );
-    let json = await res.json();
+
-    await console.log(json);
+    console.log(res.text);
+
+    // dialogRef.current.showModal();
+    setIsButtonDisabled(false);
   };
 
   return (
     <>
       <form onSubmit={formsubmit}>
         <label for="name">Name (What to call you):</label>
-        <input type="text" id="fname" name="name" placeholder="Jaeinceins" />
+        <input
+          type="text"
+          id="fname"
+          name="intervieweeName"
+          placeholder="Jaeinceins"
+          required
+        />
         <label for="email">UCalgary Email:</label>
         <input
           type="text"
           id="email"
-          name="email"
+          name="intervieweeEmail"
           placeholder="jaeinceins.bhaja@ucalgary.ca"
+          required
+        />
+
+        {/* Time Slot Selector */}
+        <TimeSlotSelector
+          onTimeSlotSelect={(timeSlot) => setSelectedTimeSlot(timeSlot)}
         />
         <button type="submit" disabled={isButtonDisabled}>
           Submit
         </button>
       </form>
-      <button onClick={test}> test</button>
+      {/* Success Dialog */}
+      <dialog ref={dialogRef}>
+        {" "}
+        {/* Add the `ref` attribute */}
+        <h2>Booking Successful!</h2>
+        <p>
+          Thank you for booking your interview slot. We’ll contact you soon.
+        </p>
+        <h4>
+          What to do if I cannot make it to any of the avaliable time slots or
+          need to rescedule?
+        </h4>
+        <p>
+          While we highly encourage sceduling an interview in one of the above
+          time slots, we recongize that not everyone can make it work with their
+          personal and university schedules.
+        </p>
+        <p>
+          Please email us at{" "}
+          <a href="mailto:uofcbaja@gmail.com">uofcbaja@gmail.com</a> to work out
+          an alternate interview time or for rescheduling.
+        </p>
+      </dialog>
     </>
   );
 };

src/Interivew Booking/TimeSlotSelector.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+
+const TimeSlotSelector = ({ onTimeSlotSelect }) => {
+  const [selectedDate, setSelectedDate] = useState();
+  const [timeSlots, setTimeSlots] = useState([]);
+  const [interviewDates, setInterviewDates] = useState([]);
+  useEffect(() => {
+    getInterviewDates();
+  }, []);
+  useEffect(() => {
+    if (selectedDate) {
+      const availableSlots =
+        interviewDates.interviewDates?.[selectedDate] || {};
+      setTimeSlots(Object.keys(availableSlots));
+    }
+  }, [selectedDate]);
+  /**
+   * @param {null} null - Takes in nothing
+   * @returns {null} null - Returns in nothing
+   * @description Hooking upto backend
+   * @author Ahmad <ahmadmuhammadofficial@gmail.com>
+   */
+  const getInterviewDates = async () => {
+    const res = await fetch(
+      "https://bajabackend.bajacloud.duckdns.org/getAppointments",
+      { method: "GET" }
+    );
+    let json = await res.json();
+    await setInterviewDates(json["body"]);
+  };
+
+  const handleDateChange = (e) => {
+    let date = e.target.value;
+    setSelectedDate(date); // Capture the selected date in YYYY-MM-DD format
+    onTimeSlotSelect({ date, startTime: null });
+  };
+
+  const handleTimeSlotChange = (e) => {
+    let startTime = e.target.value;
+    onTimeSlotSelect((prev) => ({ ...prev, startTime }));
+  };
+
+  return (
+    <div>
+      <h3>Select a Date:</h3>
+      {/* Replace Calendar with input type="date" */}
+      <input type="date" value={selectedDate} onChange={handleDateChange} />
+      {!selectedDate ? (
+        <>
+          <h4>Available Time Slots:</h4>
+          <p>Please select the a date to see time slots.</p>
+        </>
+      ) : (
+        <>
+          <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>
+          ) : (
+            <p>No available time slots for the selected date.</p>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TimeSlotSelector;