user profile -bug fix

DFanso · Jan 3, 2024 · 1f2063a · 1f2063a
1 parent f392605
commit 1f2063a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 31 deletions.
diff --git 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
@@ -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>
   );
 }