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

src/Interivew Booking/InterviewBookMain.jsx

@@ -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

src/Interivew Booking/InterviewForm.jsx

@@ -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) {

src/Interivew Booking/TestDateSelector.jsx

@@ -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;

src/Interivew Booking/TimeDateSelector.jsx

@@ -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>
   );
 };