From 45ca353b3fa357fc8b6fba792ff0567047c5847e Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Fri, 4 Mar 2022 01:24:52 +0100
Subject: [PATCH] webui: Add logout functionality

---
 webui/src/App.tsx                |  7 +++++--
 webui/src/layouts/AuthLayout.tsx | 14 ++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 0d72384..0b52622 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -6,7 +6,7 @@ import RegisterView from "./components/auth/RegisterView";
 import RequireAuth from "./features/auth/RequireAuth";
 import {useAppDispatch} from "./app/hooks";
 import broadcastChannel from "./app/broadcastChannel";
-import {receiveAuthUpdate} from "./features/auth/authSlice";
+import {logOut, receiveAuthUpdate} from "./features/auth/authSlice";
 
 function App() {
     const dispatch = useAppDispatch()
@@ -23,7 +23,10 @@ function App() {
                 <Route path={"login"} element={<LoginView/>} />
                 <Route path={"register"} element={<RegisterView/>} />
             </Route>
-            <Route path={"/"} element={<RequireAuth><h1>hi</h1></RequireAuth>}/>
+            <Route path={"/"} element={<RequireAuth><h1>hi</h1> <button onClick={() => {
+                dispatch(logOut())
+            }
+            }>Log out</button></RequireAuth>}/>
         </Routes>
     );
 }
diff --git a/webui/src/layouts/AuthLayout.tsx b/webui/src/layouts/AuthLayout.tsx
index 2267b57..de953ec 100644
--- a/webui/src/layouts/AuthLayout.tsx
+++ b/webui/src/layouts/AuthLayout.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 
 import styles from "./AuthLayout.module.scss";
 import {Link, useLocation, useNavigate, useOutlet} from "react-router-dom";
@@ -23,12 +23,14 @@ const AuthLayout = () => {
     const navigate = useNavigate()
 
 
-    if(authState.status == "logged_in") {
-        if(locationState && locationState.location) {
-            navigate(locationState.location, {replace: true})
+    useEffect(() => {
+        if(authState.status == "logged_in") {
+            if(locationState && locationState.location) {
+                navigate(locationState.location, {replace: true})
+            }
+            navigate("/", {replace: true})
         }
-        navigate("/", {replace: true})
-    }
+    }, [authState])
 
     return <div className={styles.auth}>
         <div className={styles.background}/>