Bookings Frontend

import AxiosInstance from "./AxiosInstance";  // ✅ Fix import

// Fetch user's bookings
export const fetchBookings = async () => {
  try {
    const response = await AxiosInstance.get("/bookings/");  // ✅ Use AxiosInstance
    return response.data;
  } catch (error) {
    console.error("❌ Error fetching bookings:", error.response?.data || error.message);
    throw error;
  }
};

// Create a new booking
export const createBooking = async (bookingData) => {
  try {
    const response = await AxiosInstance.post("/bookings/", bookingData);  // ✅ Use AxiosInstance
    return response.data;
  } catch (error) {
    console.error("❌ Error creating booking:", error.response?.data || error.message);
    throw error;
  }
};

// Delete a booking
export const deleteBooking = async (bookingId) => {
  try {
    await AxiosInstance.delete(`/bookings/${bookingId}/`);  // ✅ Use AxiosInstance
  } catch (error) {
    console.error("❌ Error deleting booking:", error.response?.data || error.message);
    throw error;
  }
};

import React, { useState } from "react";
import { createBooking } from "./services/api";

const BookingForm = ({ onBookingCreated }) => {
  const [bookingType, setBookingType] = useState("booking");
  const [bookingDate, setBookingDate] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Ensure the date is in the future
    const today = new Date().toISOString().split("T")[0]; // Get today's date in YYYY-MM-DD format
    if (bookingDate <= today) {
      alert("Please select a future date.");
      return;
    }

    try {
      const newBooking = await createBooking({
        booking_type: bookingType,
        booking_date: bookingDate,
      });

      alert("Booking created successfully!");
      onBookingCreated(newBooking); // Update the UI with the new booking
    } catch (error) {
      alert("Failed to create booking. Please try again.");
    }
  };

  return (
    
      Schedule a Booking
      
        
          Booking Type:
           setBookingType(e.target.value)}
          >
            Consultation
            Installation
          
        

        
          Select Date:
           setBookingDate(e.target.value)}
          />
        

        
          Schedule
        
      
    
  );
};

export default BookingForm;

import React, { useEffect, useState } from "react";
import { fetchBookings, deleteBooking } from "./services/api";

const BookingList = () => {
  const [bookings, setBookings] = useState([]); // ✅ Ensure an array as the initial state
  const [loading, setLoading] = useState(true); // Track loading state

  useEffect(() => {
    loadBookings();
  }, []);

  const loadBookings = async () => {
    try {
      setLoading(true);
      const data = await fetchBookings();

      if (Array.isArray(data)) {
        setBookings(data); // ✅ Ensure only an array is set
      } else {
        console.error("Unexpected response format:", data);
        setBookings([]); // Set an empty array to prevent errors
      }
    } catch (error) {
      console.error("Error loading bookings:", error);
      setBookings([]); // Prevent crash if error occurs
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (bookingId) => {
    if (window.confirm("Are you sure you want to cancel this booking?")) {
      try {
        await deleteBooking(bookingId);
        setBookings(bookings.filter((booking) => booking.id !== bookingId));
        alert("Booking canceled.");
      } catch (error) {
        alert("Failed to cancel booking.");
      }
    }
  };

  return (
    
      My Bookings

      {loading ? (
        Loading... // Show loading state
      ) : bookings.length === 0 ? (
        No bookings found.
      ) : (
        
          {bookings.map((booking) => (
            
              
                {booking.booking_type.toUpperCase()}
                {booking.booking_date}
              
               handleDelete(booking.booking_id)}
                className="text-red-500 hover:text-red-700"
              >
                Cancel
              
            
          ))}
        
      )}
    
  );
};

export default BookingList;

import React, { useState } from "react";
import BookingForm from "../components/BookingForm";
import BookingList from "../components/BookingList";

const BookingsPage = () => {
  const [refresh, setRefresh] = useState(false);

  return (
    
      Manage Your Bookings
       setRefresh(!refresh)} />
      
    
  );
};

export default BookingsPage;

import BookingsPage from './components/BookingsPage'

                }/>