Bookings Frontend

I redid my file structure and moved my axiosinstance into a folder in components called services. Then made api.jsx 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; } }; We now make bookings components in components folder Booking form 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 Consultation Installation Select Date: setBookingDate(e.target.value)} /> Schedule ); }; export default BookingForm; Then booking list 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; then BookingsPage 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; Finally add bookings route to app.jsx import BookingsPage from './components/BookingsPage' dun

Mar 30, 2025 - 23:53

I redid my file structure and moved my axiosinstance into a folder in components called services. Then made api.jsx

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

We now make bookings components in components folder

Booking form

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:
          
        

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

        
      
    
  );
};

export default BookingForm;

Then booking list

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

export default BookingList;

then BookingsPage

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;

Finally add bookings route to app.jsx

import BookingsPage from './components/BookingsPage'

                }/>

dun