added extension handling for refetching aliases

src/AuthContext/use-extension-handler.ts

@@ -5,6 +5,7 @@ import {useEvent} from "react-use"
 import {ExtensionKleckEvent} from "~/extension-types"
 import {User} from "~/server-types"
 import {AUTHENTICATION_PATHS} from "~/constants/values"
+import {queryClient} from "~/constants/react-query"
 
 export interface UseExtensionHandlerResult {
 	sharePassword: () => void
@@ -80,6 +81,21 @@ export default function useExtensionHandler(
 					}
 
 					break
+				case "refetch-aliases":
+					if (document.visibilityState !== "visible") {
+						return
+					}
+
+					;(async () => {
+						await Promise.allSettled([
+							queryClient.invalidateQueries({
+								queryKey: ["get_alias"],
+							}),
+							queryClient.invalidateQueries({
+								queryKey: ["get_aliases"],
+							}),
+						])
+					})()
 			}
 		},
 		[dispatchPasswordStatus],

src/extension-types.ts

@@ -14,11 +14,16 @@ interface ExtensionKleckMessageEnterPassword {
 	type: "enter-password"
 }
 
+interface ExtensionKleckMessageRefetchAliases {
+	type: "refetch-aliases"
+}
+
 export type ExtensionKleckMessage =
 	| ExtensionKleckMessagePasswordStatus
 	| ExtensionKleckMessageAskForPassword
 	| ExtensionKleckMessageUser
 	| ExtensionKleckMessageEnterPassword
+	| ExtensionKleckMessageRefetchAliases
 
 export type ExtensionKleckEvent = MessageEvent & {
 	detail: ExtensionKleckMessage

src/hooks/index.ts

@@ -16,3 +16,5 @@ export * from "./use-is-any-input-focused"
 export {default as useIsAnyInputFocused} from "./use-is-any-input-focused"
 export * from "./use-extension-handler"
 export {default as useExtensionHandler} from "./use-extension-handler"
+export * from "./use-window-visible"
+export {default as useWindowVisible} from "./use-window-visible"

src/hooks/use-window-visible.ts

@@ -0,0 +1,14 @@
+import {useCallback, useState} from "react"
+import {useEvent} from "react-use"
+
+export default function useWindowVisible(isVisibleByDefault = true): boolean {
+	const [isVisible, setIsVisible] = useState<boolean>(isVisibleByDefault)
+
+	const handleVisibilityChange = useCallback(() => {
+		setIsVisible(document.visibilityState === "visible")
+	}, [])
+
+	useEvent("visibilitychange", handleVisibilityChange, document)
+
+	return isVisible
+}