Merge pull request #58 from DFanso/api-connections

logout -done
DFanso · Jan 5, 2024 · 592de26 · 592de26
2 parents 5c08a2f + 877ac58
commit 592de26
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 66 deletions.
diff --git a/admin/src/App.js b/admin/src/App.js
@@ -31,55 +31,49 @@ import { UserContext } from "./pages/auth/UserContext"; // Import UserContext
 import { UserProvider } from "./pages/auth/UserContext";
 
 const App = () => {
-  const { updateUserData } = useContext(UserContext); // Use updateUserData from UserContext
+  const { userData, updateUserData } = useContext(UserContext);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
-  const checkUserLoggedIn = async () => {
-    const token = localStorage.getItem("admin-token"); // Use a different token key for admin
-    if (token) {
-      try {
-        const profileResponse = await axios.get(
-          `${process.env.REACT_APP_API_PATH}/users/profile`, // API endpoint for admin profile
-          {
-            headers: {
-              Authorization: `Bearer ${token}`, // Use the token from localStorage
-            },
-          }
-        );
+  useEffect(() => {
+    const checkUserLoggedIn = async () => {
+      const token = localStorage.getItem("admin-token");
+      if (token) {
+        try {
+          const profileResponse = await axios.get(
+            `${process.env.REACT_APP_API_PATH}/users/profile`,
+            { headers: { Authorization: `Bearer ${token}` } }
+          );
 
-        if (profileResponse.data && profileResponse.data.type === "ADMIN") {
-          updateUserData(profileResponse.data);
-          setIsLoggedIn(true);
-        } else {
-          // Handle non-admin user
+          if (profileResponse.data && profileResponse.data.type === "ADMIN") {
+            updateUserData(profileResponse.data);
+            setIsLoggedIn(true);
+          } else {
+            Swal.fire({
+              title: "Access Denied",
+              text: "You are not authorized to access the admin panel.",
+              icon: "error",
+              confirmButtonText: "OK",
+            });
+            localStorage.removeItem("admin-token");
+            setIsLoggedIn(false);
+          }
+        } catch (error) {
+          console.error("Error fetching admin data:", error);
           Swal.fire({
-            title: "Access Denied",
-            text: "You are not authorized to access the admin panel.",
+            title: "Error",
+            text: "An error occurred while fetching user data.",
             icon: "error",
             confirmButtonText: "OK",
           });
-          localStorage.removeItem("admin-token"); // Optionally remove the token
           setIsLoggedIn(false);
-          return <Navigate to="/movies-view" />;
         }
-      } catch (error) {
-        console.error("Error fetching admin data:", error);
-        Swal.fire({
-          title: "Error",
-          text: "An error occurred while fetching user data.",
-          icon: "error",
-          confirmButtonText: "OK",
-        });
+      } else {
+        setIsLoggedIn(false);
       }
-    }
-  };
-  useEffect(() => {
-    checkUserLoggedIn();
-  }, []);
+    };
 
-  const handleLogin = () => {
-    setIsLoggedIn(true);
-  };
+    checkUserLoggedIn();
+  }, [updateUserData]); // Removed isLoggedIn from dependency array
 
   return (
     <UserProvider>
@@ -132,7 +126,7 @@ const App = () => {
           </div>
         ) : (
           <Routes>
-            <Route path="/login" element={<Login onLogin={handleLogin} />} />
+            <Route path="/login" element={<Login />} />
             <Route path="/register-page" element={<RegisterPage />} />
             <Route path="*" element={<Navigate replace to="/login" />} />
           </Routes>

diff --git a/admin/src/components/Header.js b/admin/src/components/Header.js
@@ -1,32 +1,61 @@
-import React from 'react';
+import React, { useState, useContext } from "react";
+import { useNavigate } from "react-router-dom";
 
+import Swal from "sweetalert2";
+
+import { UserContext } from "../pages/auth/UserContext";
 const Header = () => {
-    return (
-        <div style={{
-            backgroundColor: 'black',
-            color: 'white',
-            height: '65px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            paddingLeft: '20px',
-            paddingRight: '20px',
-        }}>
-            <span>CINEMAGIC</span>
-            <button style={{
-                backgroundColor: '#f0f0f0',
-                color: 'black',
-                padding: '10px 20px',
-                border: 'none',
-                borderRadius: '5px',
-                cursor: 'pointer',
-                fontSize: '1rem',
-                fontWeight: 'bold'
-            }}>
-                Log Out
-            </button>
-        </div>
-    );
+  const navigate = useNavigate();
+  const { updateUserData } = useContext(UserContext);
+
+  const handleLogout = () => {
+    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, log out!",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        updateUserData({});
+        localStorage.removeItem("admin-token");
+        navigate("/login");
+      }
+    });
+  };
+  return (
+    <div
+      style={{
+        backgroundColor: "black",
+        color: "white",
+        height: "65px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingLeft: "20px",
+        paddingRight: "20px",
+      }}
+    >
+      <span>CINEMAGIC</span>
+      <button
+        onClick={handleLogout}
+        style={{
+          backgroundColor: "#f0f0f0",
+          color: "black",
+          padding: "10px 20px",
+          border: "none",
+          borderRadius: "5px",
+          cursor: "pointer",
+          fontSize: "1rem",
+          fontWeight: "bold",
+        }}
+      >
+        Log Out
+      </button>
+    </div>
+  );
 };
 
 export default Header;