mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-26 13:05:59 -06:00
113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
import { useEffect, useState, useRef } from "react";
|
||
import TimeDateSelector from "./TimeDateSelector"; // 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);
|
||
const dialogRef = useRef(null);
|
||
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());
|
||
formObject.date = selectedTimeSlot["date"]; // Add the selected time slot to form data
|
||
formObject.startTime = selectedTimeSlot["startTime"];
|
||
console.log("Form Data:", formObject);
|
||
const res = await fetch(
|
||
"https://bajabackend.bajacloud.duckdns.org/SelectInterview",
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(formObject),
|
||
}
|
||
);
|
||
let data = await res.json();
|
||
console.log(data);
|
||
|
||
// dialogRef.current.showModal();
|
||
setIsButtonDisabled(false);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<form onSubmit={formsubmit}>
|
||
<label for="name">Name (What to call you):</label>
|
||
<input
|
||
type="text"
|
||
id="fname"
|
||
name="intervieweeName"
|
||
placeholder="Jaeinceins"
|
||
required
|
||
/>
|
||
<label for="email">UCalgary Email:</label>
|
||
<input
|
||
type="text"
|
||
id="email"
|
||
name="intervieweeEmail"
|
||
placeholder="jaeinceins.bhaja@ucalgary.ca"
|
||
required
|
||
/>
|
||
|
||
{/* Time Slot Selector */}
|
||
<TimeDateSelector
|
||
onTimeSlotSelect={(timeSlot) => setSelectedTimeSlot(timeSlot)}
|
||
/>
|
||
<button type="submit" disabled={isButtonDisabled}>
|
||
Submit
|
||
</button>
|
||
</form>
|
||
|
||
{/* 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>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default InterviewForm;
|