From 44c29bae125fbb27bb2d687db48c5bab76ad9001 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sun, 18 Dec 2022 13:30:31 +0100
Subject: [PATCH] added extension handling for refetching aliases

---
 src/AuthContext/use-extension-handler.ts | 16 ++++++++++++++++
 src/extension-types.ts                   |  5 +++++
 src/hooks/index.ts                       |  2 ++
 src/hooks/use-window-visible.ts          | 14 ++++++++++++++
 4 files changed, 37 insertions(+)
 create mode 100644 src/hooks/use-window-visible.ts

diff --git a/src/AuthContext/use-extension-handler.ts b/src/AuthContext/use-extension-handler.ts
index 18ad402..a236fdb 100644
--- a/src/AuthContext/use-extension-handler.ts
+++ b/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],
diff --git a/src/extension-types.ts b/src/extension-types.ts
index 687e3c4..3d8afb6 100644
--- a/src/extension-types.ts
+++ b/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
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 6861b1c..d373c85 100644
--- a/src/hooks/index.ts
+++ b/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"
diff --git a/src/hooks/use-window-visible.ts b/src/hooks/use-window-visible.ts
new file mode 100644
index 0000000..7764499
--- /dev/null
+++ b/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
+}