feat: server transfer rotation

src/hooks/useAuth.tsx

@@ -1,6 +1,6 @@
 import { getProfile, login as loginRequest } from "@/api/user"
 import { AuthContextProps } from "@/types"
-import { createContext, useContext, useEffect, useMemo } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
@@ -25,15 +25,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
                 const user = await getProfile()
                 user.role = user.role || 0
                 setProfile(user)
-            } catch (error: any) {
+            } catch {
                 setProfile(undefined)
             }
         })()
-    }, [])
+    }, [setProfile])
 
     const navigate = useNavigate()
 
-    const login = async (username: string, password: string) => {
+    const login = useCallback(async (username: string, password: string) => {
         try {
             await loginRequest(username, password)
             const user = await getProfile()
@@ -48,9 +48,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
                 toast(msg || t("NetworkError"))
             }
         }
-    }
+    }, [navigate, setProfile, t])
 
-    const loginOauth2 = async () => {
+    const loginOauth2 = useCallback(async () => {
         try {
             const user = await getProfile()
             user.role = user.role || 0
@@ -61,9 +61,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         } finally {
             window.history.replaceState({}, document.title, window.location.pathname)
         }
-    }
+    }, [navigate, setProfile])
 
-    const logout = () => {
+    const logout = useCallback(() => {
         document.cookie.split(";").forEach(function (c) {
             document.cookie = c
                 .replace(/^ +/, "")
@@ -71,7 +71,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         })
         setProfile(undefined)
         navigate("/dashboard/login", { replace: true })
-    }
+    }, [navigate, setProfile])
 
     const value = useMemo(
         () => ({
@@ -80,7 +80,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
             loginOauth2,
             logout,
         }),
-        [profile],
+        [profile, login, loginOauth2, logout],
     )
     return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
 }

src/hooks/useMediaQuery.tsx

@@ -1,19 +1,16 @@
-import { useEffect, useState } from "react"
+import { useCallback, useSyncExternalStore } from "react"
 
 export function useMediaQuery(query: string) {
-    const [value, setValue] = useState(false)
+    const subscribe = useCallback(
+        (callback: () => void) => {
+            const result = matchMedia(query)
+            result.addEventListener("change", callback)
+            return () => result.removeEventListener("change", callback)
+        },
+        [query],
+    )
 
-    useEffect(() => {
-        function onChange(event: MediaQueryListEvent) {
-            setValue(event.matches)
-        }
+    const getSnapshot = useCallback(() => matchMedia(query).matches, [query])
 
-        const result = matchMedia(query)
-        result.addEventListener("change", onChange)
-        setValue(result.matches)
-
-        return () => result.removeEventListener("change", onChange)
-    }, [query])
-
-    return value
+    return useSyncExternalStore(subscribe, getSnapshot, () => false)
 }

src/hooks/useNotfication.tsx

@@ -54,7 +54,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({
                     setNotifier(undefined)
                 }
             })()
-    }, [location.pathname])
+    }, [location.pathname, setNotifier, setNotifierGroup, withNotifier, withNotifierGroup])
 
     const value: NotificationContextProps = useMemo(
         () => ({

src/hooks/useServer.tsx

@@ -54,7 +54,7 @@ export const ServerProvider: React.FC<ServerProviderProps> = ({
                     setServer(undefined)
                 }
             })()
-    }, [location.pathname])
+    }, [location.pathname, setServer, setServerGroup, withServer, withServerGroup])
 
     const value: ServerContextProps = useMemo(
         () => ({

src/hooks/useTerminal.ts

@@ -5,18 +5,19 @@ import { useEffect, useState } from "react"
 export default function useTerminal(serverId?: number) {
     const [terminal, setTerminal] = useState<ModelCreateTerminalResponse | null>(null)
 
-    async function fetchTerminal() {
-        try {
-            const response = await createTerminal(serverId!)
-            setTerminal(response)
-        } catch (error) {
-            console.error("Failed to fetch terminal:", error)
-        }
-    }
-
     useEffect(() => {
         if (!serverId) return
-        fetchTerminal()
+        let cancelled = false
+        createTerminal(serverId)
+            .then((response) => {
+                if (!cancelled) setTerminal(response)
+            })
+            .catch((error) => {
+                console.error("Failed to fetch terminal:", error)
+            })
+        return () => {
+            cancelled = true
+        }
     }, [serverId])
 
     return terminal