From 1f2063a3cdf55abb364e15e92e1f2e75115d749b Mon Sep 17 00:00:00 2001
From: Vidwa De Seram <vidwadeseram2002@gmail.com>
Date: Wed, 3 Jan 2024 21:53:54 +0530
Subject: [PATCH] user profile -bug fix

---
 client/src/App.js                       |  4 +-
 client/src/components/BookingHistory.js | 69 ++++++++++++++-----------
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 6173d50..d7e4875 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -46,8 +46,8 @@ function App() {
   const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
   function ProtectedRoute({ children }) {
     const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
-
-    if (!isLoggedIn) {
+    const token = localStorage.getItem("token");
+    if (!isLoggedIn & token) {
       Swal.fire({
         title: "Unauthorized Access",
         text: "You need to log in to access this page",
diff --git a/client/src/components/BookingHistory.js b/client/src/components/BookingHistory.js
index 7e82719..e5ce8dd 100644
--- a/client/src/components/BookingHistory.js
+++ b/client/src/components/BookingHistory.js
@@ -2,8 +2,12 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import "./css/BookingHistory.css";
 
+import { TailSpin } from "react-loader-spinner";
+import { useLoading } from "./LoadingContext.js";
+
 function BookingHistory() {
   const [bookings, setBookings] = useState([]);
+  const { loading, setLoading } = useLoading();
   const convertTo12HourFormat = (time24) => {
     const [hours, minutes] = time24.split(":");
     const hours12 = hours % 12 || 12;
@@ -30,36 +34,43 @@ function BookingHistory() {
   }, []);
 
   return (
-    <div className="booking-history">
-      <h1>Booking History</h1>
-      <div className="booking-form-group-title">
-        <p>Date</p>
-        <p>Time</p>
-        <p>Movie Name</p>
-        <p>Seats</p>
-        <p>Seat price</p>
-        <p>otal Price</p>
-      </div>
-      {bookings.map((booking, index) => (
-        <div className="booking-form-group" key={index}>
-          <p className="booking-form-group-data">
-            {new Date(booking.movieId.startDate).toLocaleDateString()}
-          </p>
-          <p className="booking-form-group-data">
-            {convertTo12HourFormat(booking.movieId.showTimeId.startTime)}
-          </p>
-          <p className="booking-form-group-data">{booking.movieId.name}</p>
-          <p className="booking-form-group-data">
-            {booking.selectedSeats.join(", ")}
-          </p>
-          <p className="booking-form-group-data">
-            ${(booking.totalPrice / booking.selectedSeats.length).toFixed(2)}
-          </p>
-          <p className="booking-form-group-data">
-            ${booking.totalPrice.toFixed(2)}
-          </p>
+    <div className={`login-wrapper ${loading ? "blurred" : ""}`}>
+      {loading && (
+        <div className="loader-container">
+          <TailSpin color="#00BFFF" height={100} width={100} />
         </div>
-      ))}
+      )}
+      <div className="booking-history">
+        <h1>Booking History</h1>
+        <div className="booking-form-group-title">
+          <p>Date</p>
+          <p>Time</p>
+          <p>Movie Name</p>
+          <p>Seats</p>
+          <p>Seat price</p>
+          <p>otal Price</p>
+        </div>
+        {bookings.map((booking, index) => (
+          <div className="booking-form-group" key={index}>
+            <p className="booking-form-group-data">
+              {new Date(booking.movieId.startDate).toLocaleDateString()}
+            </p>
+            <p className="booking-form-group-data">
+              {convertTo12HourFormat(booking.showTimeId.startTime)}
+            </p>
+            <p className="booking-form-group-data">{booking.movieId.name}</p>
+            <p className="booking-form-group-data">
+              {booking.selectedSeats.join(", ")}
+            </p>
+            <p className="booking-form-group-data">
+              ${(booking.totalPrice / booking.selectedSeats.length).toFixed(2)}
+            </p>
+            <p className="booking-form-group-data">
+              ${booking.totalPrice.toFixed(2)}
+            </p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }