Merge pull request #64 from DFanso/api-connections-too

Api connections too booking delete
DFanso · Jan 5, 2024 · 7ddf766 · 7ddf766
2 parents 3bf778e + e069f35
commit 7ddf766
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 90 deletions.
diff --git a/admin/src/App.js b/admin/src/App.js
@@ -104,8 +104,14 @@ const App = () => {
                   />
                   <Route path="/delete-showtime" element={<DeleteShowtime />} />
                   <Route path="/add-booking" element={<AddBooking />} />
-                  <Route path="/update-booking" element={<UpdateBooking />} />
-                  <Route path="/delete-booking" element={<DeleteBooking />} />
+                  <Route
+                    path="/update-booking/:id"
+                    element={<UpdateBooking />}
+                  />
+                  <Route
+                    path="/delete-booking/:id"
+                    element={<DeleteBooking />}
+                  />
                   <Route path="/chat" element={<Chat />} />
                   <Route
                     path="/showtime-view/:id/:name"

diff --git a/admin/src/pages/AllBookings.js b/admin/src/pages/AllBookings.js
@@ -1,101 +1,151 @@
-import React, { useState } from 'react';
-import '../css/AllShowtimes.css';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom"; // if using react-router
+import { Link } from "react-router-dom";
 
-const showtimes = [
-    // Array of showtime objects
-    {
-        "id": 1,
-        "bookedSeat": "A1",
-        "time": "3:00 PM",
-        "price": "Rs.2000"
-    },
-    {
-        "id": 1,
-        "bookedSeat": "B1",
-        "time": "3:00 PM",
-        "price": "Rs.2500"
-    },
-    {
-        "id": 1,
-        "bookedSeat": "A1",
-        "time": "3:00 PM",
-        "price": "Rs.2000"
-    },
-    {
-        "id": 1,
-        "bookedSeat": "B1",
-        "time": "3:00 PM",
-        "price": "Rs.2500"
-    },
-    {
-        "id": 1,
-        "bookedSeat": "A1",
-        "time": "3:00 PM",
-        "price": "Rs.2000"
-    },
-    // ... add more showtime objects as needed
-];
+import "../css/AllShowtimes.css";
 
-const BookingCard = ({ showtime }) => {
-    return (
-        <div className="showtime-card">
-            <div className="showtime-info">
-                <h3>{showtime.title}</h3>
-                <p>Booked Seat: {showtime.bookedSeat}</p>
-                <p>Time: {showtime.time}</p>
-                <p>Price: {showtime.price}</p>
-                <div className="showtime-actions">
-                    <Link to="/update-booking" className="btn-link">
-                        <button className="btn update-btn">Update</button>
-                    </Link>
-                    <Link to="/delete-booking" className="btn-link">
-                        <button className="btn delete-btn">Delete</button>
-                    </Link>
-                </div>
-            </div>
+import Swal from "sweetalert2";
+
+const BookingCard = ({ booking, onDelete }) => {
+  const { movieId, selectedSeats, totalPrice, userId } = booking;
+  const movieName = movieId.name;
+  const userName = `${userId.firstName} ${userId.lastName}`;
+
+  const handleDelete = async () => {
+    const result = await Swal.fire({
+      title: "Are you sure?",
+      text: "You won't be able to revert this!",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Yes, delete it!",
+    });
+
+    if (result.isConfirmed) {
+      try {
+        const token = localStorage.getItem("admin-token");
+        const response = await fetch(
+          `${process.env.REACT_APP_API_PATH}/booking/${booking._id}`,
+          {
+            method: "DELETE",
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+
+        if (response.status !== 204) {
+          throw new Error("Failed to delete the booking.");
+        }
+
+        onDelete(booking._id); // Trigger refresh in parent component
+        Swal.fire("Deleted!", "The booking has been deleted.", "success");
+      } catch (error) {
+        Swal.fire("Error", error.message, "error");
+      }
+    }
+  };
+
+  return (
+    <div className="booking-card">
+      <div className="booking-info">
+        <h3>Movie: {movieName}</h3>
+        <p>User: {userName}</p>
+        <p>
+          Selected Seat:
+          <select>
+            {selectedSeats.map((seat, index) => (
+              <option key={index} value={seat}>
+                {seat}
+              </option>
+            ))}
+          </select>
+        </p>
+        <p>Total Price: ${totalPrice}</p>
+        <div className="booking-actions">
+          <Link to={`/update-booking/${booking._id}`} className="btn-link">
+            <button className="btn update-btn">Update</button>
+          </Link>
+
+          <button onClick={handleDelete} className="btn delete-btn">
+            Delete
+          </button>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 const BookingGrid = () => {
-    const [searchTerm, setSearchTerm] = useState('');
+  const [bookings, setBookings] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [refresh, setRefresh] = useState(false);
+  const { movieId } = useParams(); // Extract movieId from URL
+
+  useEffect(() => {
+    const fetchBookings = async () => {
+      const token = localStorage.getItem("admin-token");
+      try {
+        const response = await fetch(
+          `${process.env.REACT_APP_API_PATH}/booking/movie/${movieId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
 
-    const handleSearch = (event) => {
-        event.preventDefault();
-        console.log('Searching for:', searchTerm);
+        if (response.status !== 200) {
+          throw new Error("Error fetching bookings");
+        }
+        const data = await response.json();
+        setBookings(data);
+      } catch (error) {
+        Swal.fire("Error", error.message, "error");
+      }
     };
 
-    return (
-        <div>
-            <div className="add-showtime-button-container">
-                <Link to="/add-booking" className="btn-link">
-                    <button className="btn add-btn">Add Booking</button>
-                </Link>
-                <div className='search-container'>
-                    <input
-                        type="text"
-                        className="search-input"
-                        placeholder="Search bookings..."
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                    />
-                    <button className="search-button" onClick={handleSearch}>
-                        Search
-                    </button>
-                </div>
-                <div className='h3-con'>
-                    <h3 className='h3-st'>All bookings for</h3>
-                    <h3 className='h3-st-title'>Wonka</h3>
-                </div>
-            </div>
-            <div className="showtime-grid">
-                {showtimes.map((showtime, index) => (
-                    <BookingCard key={index} showtime={showtime} />
-                ))}
-            </div>
+    fetchBookings();
+  }, [movieId, refresh]); // Add refresh as a dependency
+  const handleSearch = (event) => {
+    event.preventDefault();
+    console.log("Searching for:", searchTerm);
+  };
+  const handleDelete = (deletedId) => {
+    setRefresh((prev) => !prev); // Toggle refresh to trigger re-fetch
+  };
+
+  return (
+    <div>
+      <div className="add-showtime-button-container">
+        <Link to="/add-booking" className="btn-link">
+          <button className="btn add-btn">Add Booking</button>
+        </Link>
+        <div className="search-container">
+          <input
+            type="text"
+            className="search-input"
+            placeholder="Search bookings..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <button className="search-button" onClick={handleSearch}>
+            Search
+          </button>
+        </div>
+        <div className="h3-con">
+          <h3 className="h3-st">All bookings for</h3>
+          <h3 className="h3-st-title">Wonka</h3>
         </div>
-    );
+      </div>
+      <div className="showtime-grid">
+        {bookings.map((booking, index) => (
+          <BookingCard key={index} booking={booking} onDelete={handleDelete} />
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default BookingGrid;