From dfb5058133e3e430e3e268f51489ff79f4380833 Mon Sep 17 00:00:00 2001
From: Adam Plewa <245901@edu.p.lodz.pl>
Date: Sat, 1 Jun 2024 18:56:45 +0200
Subject: [PATCH] 15. Dopracowanie logowania do aplikacji webowej

---
 WebApp/src/App.js                        | 25 +++++++++++++++++++-----
 WebApp/src/components/navbar/Navbar.jsx  | 14 +++++++++++--
 WebApp/src/components/navbar/navbar.scss |  2 +-
 WebApp/src/context/AuthContext.js        | 22 +++++++++++++++++++++
 WebApp/src/context/AuthReducer.js        | 18 +++++++++++++++++
 WebApp/src/index.js                      |  5 ++++-
 WebApp/src/pages/home/home.scss          |  1 -
 WebApp/src/pages/login/Login.jsx         |  6 +++++-
 8 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 WebApp/src/context/AuthContext.js
 create mode 100644 WebApp/src/context/AuthReducer.js

diff --git a/WebApp/src/App.js b/WebApp/src/App.js
index b1d55c7..db43ac9 100644
--- a/WebApp/src/App.js
+++ b/WebApp/src/App.js
@@ -1,16 +1,31 @@
 import Login from "./pages/login/Login";
 import Home from "./pages/home/Home";
-import { BrowserRouter, Routes, Route} from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
+import { useContext } from "react";
+import { AuthContext } from "./context/AuthContext";
 
 function App() {
   
+  const {currentUser} = useContext(AuthContext)
+
+  const RequireAuth = ({ children }) => {
+    return currentUser ? children : <Navigate to="/login" />;
+  };
+
   return (
       <BrowserRouter>
         <Routes>
-        <Route path="/">
-          <Route index element={<Home />} />
-          <Route path="login" element={<Login />} />
-        </Route>
+          <Route path="/">
+            <Route path="login" element={<Login />} />
+              <Route
+                index
+                element={
+                  <RequireAuth>
+                    <Home />
+                  </RequireAuth>
+                }
+              />
+          </Route>
         </Routes>
       </BrowserRouter>
   );
diff --git a/WebApp/src/components/navbar/Navbar.jsx b/WebApp/src/components/navbar/Navbar.jsx
index 58a9958..0bc09f6 100644
--- a/WebApp/src/components/navbar/Navbar.jsx
+++ b/WebApp/src/components/navbar/Navbar.jsx
@@ -1,15 +1,25 @@
+import { useContext } from "react";
 import "./navbar.scss";
 import LogoutIcon from '@mui/icons-material/Logout';
+import { AuthContext } from "../../context/AuthContext";
+import { useNavigate } from "react-router-dom";
 
 const Navbar = () => {
+  const { dispatch } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    dispatch({ type: "LOGOUT" });
+    navigate("/login");
+  };
 
   return (
     <div className="navbar">
       <div className="wrapper">
         <img className="logo-image" src="https://i.imgur.com/3U6VsFH.png" alt="logo"/>
         <div className="items">
-          <div className="item">
-            <LogoutIcon className="icon" />
+          <div className="item" onClick={handleLogout}>
+            <LogoutIcon className="icon"/>
           </div>
         </div>
       </div>
diff --git a/WebApp/src/components/navbar/navbar.scss b/WebApp/src/components/navbar/navbar.scss
index 9473ab0..921ab9e 100644
--- a/WebApp/src/components/navbar/navbar.scss
+++ b/WebApp/src/components/navbar/navbar.scss
@@ -1,5 +1,4 @@
 .navbar {
-  width: 100vw;
   min-height: 100px;
   //border-bottom: 0.5px solid rgb(231, 228, 228);
   display: flex;
@@ -34,6 +33,7 @@
         .icon {
           font-size: 50px;
           color: white;
+          cursor: pointer;
         }
       }
     }
diff --git a/WebApp/src/context/AuthContext.js b/WebApp/src/context/AuthContext.js
new file mode 100644
index 0000000..def028e
--- /dev/null
+++ b/WebApp/src/context/AuthContext.js
@@ -0,0 +1,22 @@
+import { createContext, useEffect, useReducer } from "react";
+import AuthReducer from "./AuthReducer";
+
+const INITIAL_STATE = {
+  currentUser: JSON.parse(localStorage.getItem("user")) || null,
+};
+
+export const AuthContext = createContext(INITIAL_STATE);
+
+export const AuthContextProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);
+
+  useEffect(() => {
+    localStorage.setItem("user", JSON.stringify(state.currentUser));
+  }, [state.currentUser]);
+
+  return (
+    <AuthContext.Provider value={{ currentUser: state.currentUser, dispatch }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/WebApp/src/context/AuthReducer.js b/WebApp/src/context/AuthReducer.js
new file mode 100644
index 0000000..24aaee7
--- /dev/null
+++ b/WebApp/src/context/AuthReducer.js
@@ -0,0 +1,18 @@
+const AuthReducer = (state, action) => {
+  switch (action.type) {
+    case "LOGIN": {
+      return {
+        currentUser: action.payload,
+      };
+    }
+    case "LOGOUT": {
+      return {
+        currentUser: null,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+export default AuthReducer;
diff --git a/WebApp/src/index.js b/WebApp/src/index.js
index 6e04ccb..a516aa1 100644
--- a/WebApp/src/index.js
+++ b/WebApp/src/index.js
@@ -1,8 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
+import { AuthContextProvider } from "./context/AuthContext";
 
 ReactDOM.render(
-  <App />,
+  <AuthContextProvider>
+    <App />
+  </AuthContextProvider>,
   document.getElementById("root")
 );
diff --git a/WebApp/src/pages/home/home.scss b/WebApp/src/pages/home/home.scss
index 71d7d1a..64c2a27 100644
--- a/WebApp/src/pages/home/home.scss
+++ b/WebApp/src/pages/home/home.scss
@@ -3,7 +3,6 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  width: 100vw;
   //overflow: hidden;
 
   .main
diff --git a/WebApp/src/pages/login/Login.jsx b/WebApp/src/pages/login/Login.jsx
index 394f084..3ff7a6c 100644
--- a/WebApp/src/pages/login/Login.jsx
+++ b/WebApp/src/pages/login/Login.jsx
@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import "./login.scss";
 import { signInWithEmailAndPassword } from "firebase/auth";
 import { auth } from "../../firebase";
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "../../context/AuthContext"
 
 const Login = () => {
   const [error, setError] = useState(false);
@@ -11,6 +12,8 @@ const Login = () => {
 
   const navigate = useNavigate();
 
+  const {dispatch} = useContext(AuthContext)
+
   const handleLogin = (e) => {
     e.preventDefault();
 
@@ -18,6 +21,7 @@ const Login = () => {
       .then((userCredential) => {
         // Signed in
         const user = userCredential.user;
+        dispatch({type:"LOGIN", payload:user})
         navigate("/");
       })
       .catch((error) => {