Merge pull request #30 from Minei3oat/socketio

Reconnect to websocket on access_token change

Author: domysh

frontend/src/App.tsx

@@ -13,7 +13,7 @@ import { Firewall } from './pages/Firewall';
 import { useQueryClient } from '@tanstack/react-query';
 import NFProxy from './pages/NFProxy';
 import ServiceDetailsNFProxy from './pages/NFProxy/ServiceDetails';
-import { useAuth } from './js/store';
+import { useAuthStore } from './js/store';
 
 function App() {
 
@@ -23,7 +23,7 @@ function App() {
   const [error, setError] = useState<string|null>()
   const [loadinBtn, setLoadingBtn] = useState(false);
   const queryClient = useQueryClient()
-  const { isAuthenticated, access_token } = useAuth()
+  const { access_token } = useAuthStore()
 
   useEffect(()=>{
     socketio.auth = { token: access_token || "" }
@@ -43,7 +43,7 @@ function App() {
     socketio.off("connect_error")
     socketio.disconnect()
   }
-},[isAuthenticated])
+  },[access_token])
 
   const getStatus = () =>{
     getstatus().then( res =>{

frontend/src/js/store.ts

@@ -42,21 +42,6 @@ export const useAuthStore = create<AuthState>()(
   )
 );
 
-// Hook personalizzati per un uso più facile nei componenti
-export const useAuth = () => {
-  const { access_token, setAccessToken, clearAccessToken, getAccessToken } = useAuthStore();
-  
-  const isAuthenticated = !!access_token;
-  
-  return {
-    access_token,
-    isAuthenticated,
-    setAccessToken,
-    clearAccessToken,
-    getAccessToken,
-  };
-};
-
 interface SessionState {
   home_section: string | null;
   setHomeSection: (section: string | null) => void;