bug fix

DFanso · Jan 3, 2024 · 32bfef7 · 32bfef7
1 parent 9afe2fa
commit 32bfef7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 32 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,10 +1,12 @@
 import "./App.css";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import axios from "axios";
 import { LoadingProvider } from "./components/LoadingContext";
 
+import { UserProvider, UserContext } from "./components/UserContext";
+
 import Home from "./components/pages/Home";
 import Login from "./components/pages/Login";
 import About from "./components/pages/About";
@@ -22,7 +24,7 @@ import Navigation from "./components/Navigation";
 import UserNavbar from "./components/UserNavbar";
 import Footer from "./components/Footer";
 import UserProfile from "./components/pages/UserProfile";
-import { UserProvider } from "./components/UserContext";
+
 import NotFound from "./components/pages/NotFound";
 import PaymentSuccess from "./components/pages/PaymentSuccess";
 import { useSelector } from "react-redux";
@@ -32,40 +34,39 @@ import { login } from "./components/actions/authActions";
 
 function App() {
   const [isUserLoggedIn, setIsUserLoggedIn] = useState(false);
+  const { setUserData, userData } = useContext(UserContext); // Use setUserData from UserContext
   const dispatch = useDispatch();
-  // useSelector and other code remains the same
   const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
+
   useEffect(() => {
-    const token = localStorage.getItem("token");
-    console.log("token: " + token);
-    if (token) {
-      fetchUserData(token)
-        .then((userData) => {
-          if (userData) {
+    const fetchUserData = async () => {
+      const token = localStorage.getItem("token");
+      if (token) {
+        try {
+          const profileResponse = await axios.get(
+            `${process.env.REACT_APP_API_PATH}/users/profile`,
+            {
+              headers: {
+                Authorization: `Bearer ${token}`, // Use the token from localStorage
+              },
+            }
+          );
+
+          if (profileResponse.data) {
+            setUserData(profileResponse.data); // Update with actual data
             dispatch(login());
-            setIsUserLoggedIn(true);
+            setIsUserLoggedIn(true); // Set logged in state to true
           }
-        })
-        .catch((error) => {
+        } catch (error) {
           console.error("Error fetching user data:", error);
-        });
-    }
-  }, []);
-
-  const fetchUserData = async (token) => {
-    try {
-      const response = await axios.get(
-        `${process.env.REACT_APP_API_PATH}/users/profile`,
-        {
-          headers: { Authorization: `Bearer ${token}` },
+          // Handle error appropriately
         }
-      );
-      return response.data; // Assuming the response data is the user data you need
-    } catch (error) {
-      console.error("Error in API call:", error);
-      throw error; // Re-throw the error to handle it in the calling function
-    }
-  };
+      }
+    };
+
+    fetchUserData();
+  }, [dispatch, setUserData]);
+
   return (
     <LoadingProvider>
       <UserProvider>
@@ -84,7 +85,7 @@ function App() {
             <Route path="/reset-password" element={<ResetPassword />} />
             <Route path="/movie/:id" element={<MoviePage />} />
             <Route path="/booking/:id" element={<Booking />} />
-            <Route path="/seating" element={<Seating />} />
+            <Route path="/seating/:showTimeId/:id" element={<Seating />} />
             <Route path="/user-profile" element={<UserProfile />} />
             <Route path="/not-found" Component={NotFound} />
             <Route path="/payment-success" Component={PaymentSuccess} />

diff --git a/client/src/components/UserContext.js b/client/src/components/UserContext.js
@@ -1,6 +1,9 @@
 import React, { createContext, useState } from "react";
 
-export const UserContext = createContext();
+export const UserContext = React.createContext({
+  userData: null,
+  setUserData: () => {},
+});
 
 export const UserProvider = ({ children }) => {
   const [userData, setUserData] = useState({});

diff --git a/client/src/components/UserInformationComponent.js b/client/src/components/UserInformationComponent.js
@@ -4,6 +4,7 @@ import "./css/UserInformationComponent.css";
 
 function UserInformationComponent() {
   const { userData } = useContext(UserContext);
+  console.log(userData);
   return (
     <div className="user-information">
       <form>
@@ -19,7 +20,7 @@ function UserInformationComponent() {
         <div className="form-group">
           <label htmlFor="email">Email</label>
           <p>{userData.email || "Email not set"}</p>
-        </div>        
+        </div>
         <div className="button-container">
           <a href="/forgot-password">
             <button type="button">Reset Password</button>