Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 13:54:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(interviewform): backend working with frontend, need to fix module errors and other react errors

Browse Source
This commit is contained in:
darkicewolf50 2025-02-22 17:11:34 -07:00
parent 82d151a159
commit dc8754d586
4 changed files with 26 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Interivew Booking/InterviewBookMain.jsx
View File

@ -1,7 +1,6 @@
import InterviewForm from "./InterviewForm";
import logo from "../Header/logo.webp";
import Ender from "../Footer/Ender";
import DateTimePicker from "./TestDateSelector";
/**
* @param {null} null - requires onthing
* @returns {JSX.Element} Page - HTML tags and JS functionality

18
src/Interivew Booking/InterviewForm.jsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState, useRef } from "react";
import { useState, useRef } from "react";
import TimeDateSelector from "./TimeDateSelector"; // Import the TimeSlotSelector component
/**
@ -15,10 +15,6 @@ const InterviewForm = () => {
const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
const [getTimeDates, setGetTimeDates] = useState('');
// useEffect(() => {
// console.log(selectedTimeSlot);
// }, [selectedTimeSlot]);
/**
* @param {String HTML} event - Takes in form info
* @returns {null} null - Returns in nothing
@ -54,6 +50,18 @@ const InterviewForm = () => {
body: JSON.stringify(formObject),
}
);
// const res = await fetch(
// "http://127.0.0.1:8000/SelectInterview",
// {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify(formObject),
// }
// );
let data = await res.json();
if (data["body"]["Success"] === true) {

114
src/Interivew Booking/TestDateSelector.jsx
View File

@ -1,114 +0,0 @@
import React, { useState, useEffect } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
// Mocking the API response
const mockApiResponse = {
body: {
interviewDates: {
'2024-09-16': {
'11:30:00': {
'Meeting Duration': '30 min',
},
},
'2025-02-25': {
'11:00:00': {
'Meeting Duration': '30 min',
},
'11:30:00': {
'Meeting Duration': '30 min',
},
},
'2025-02-15': {
'11:00:00': {
'Meeting Duration': '30 min',
},
},
},
},
};
const DateTimePicker = () => {
const [availableDates, setAvailableDates] = useState([]);
const [selectedDate, setSelectedDate] = useState(null);
const [availableTimes, setAvailableTimes] = useState([]);
const [selectedTime, setSelectedTime] = useState('');
useEffect(() => {
const interviewDates = mockApiResponse.body.interviewDates;
const dates = Object.keys(interviewDates); // Get the available dates
setAvailableDates(dates);
}, []);
// Function to check if a date is available (based on your API data)
const isDateAvailable = (date) => {
return availableDates.includes(date.toISOString().split('T')[0]);
};
// Handle date change
const handleDateChange = (date) => {
setSelectedDate(date);
const selectedDateString = date.toISOString().split('T')[0];
// Get available times for the selected date
const times = Object.keys(mockApiResponse.body.interviewDates[selectedDateString] || {});
setAvailableTimes(times);
setSelectedTime(''); // Reset selected time when date changes
};
// Handle time change
const handleTimeChange = (event) => {
setSelectedTime(event.target.value);
};
return (
<form>
<h2>Select Interview Date and Time</h2>
<label htmlFor="date-picker">Select a date:</label>
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
inline
filterDate={isDateAvailable} // Filter out unavailable dates
dateFormat="yyyy-MM-dd"
required // Make date selection required
/>
{selectedDate && (
<>
<label htmlFor="time-picker">Select a time:</label>
<select
id="time-picker"
value={selectedTime}
onChange={handleTimeChange}
required // Make time selection required
>
<option value="">--Select a time--</option>
{availableTimes.map((time) => (
<option key={time} value={time}>
{time}
</option>
))}
</select>
</>
)}
{selectedDate && selectedTime && (
<div>
<p>
You have selected:
<br />
Date: {selectedDate.toLocaleDateString()}
<br />
Time: {selectedTime}
</p>
</div>
)}
<button type="submit">Submit</button>
</form>
);
};
export default DateTimePicker;

18
src/Interivew Booking/TimeDateSelector.jsx
View File

@ -3,7 +3,7 @@ import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGet }) {
const [allDatesAvailable, setAllDatesAvailable] = useState([]);
const [allDatesAvailable, setAllDatesAvailable] = useState({});
const [selectedDate, setSelectedDate] = useState(null);
const [timeSlotsAvialable, setTimeSlotsAvialable] = useState([]);
const [selectedTime, setSelectedTime] = useState('');
@ -24,12 +24,15 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
"https://bajabackend.bajacloud.duckdns.org/getAppointments",
{ method: "GET" }
);
// const res = await fetch(
// "http://127.0.0.1:8000/getAppointments",
// { method: "GET" }
// );
let json = await res.json();
// console.log(json);
// can input dates right away, no other requirements to show it
let dates = await json["body"]["interviewDates"];
await setAllDatesAvailable(dates);
setAllDatesAvailable(await dates);
};
// helper section
@ -57,11 +60,13 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
let startTime = e.target.innerHTML;
setSelectedTime(startTime);
onTimeSlotSelect({"date": selectedDate.toLocaleDateString(), "startTime": startTime });
onTimeSlotSelect({"date": selectedDate.toLocaleDateString(), "startTime": selectedTime });
};
return (
<div>
{Object.keys(allDatesAvailable).length > 0 ? (
<>
<label htmlFor="date-picker"><h3>Select a Date:</h3></label>
<DatePicker
selected={selectedDate}
@ -118,6 +123,9 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
Time: {selectedTime}
</p>
</div>)} */}
</>
):
<p>Loading ...</p>}
</div>
);
};