From bdc69c18c1986544497b6974ffe5d8e073e4be6d Mon Sep 17 00:00:00 2001 From: crupest Date: Thu, 14 Sep 2023 18:58:44 +0800 Subject: ... --- FrontEnd/src/components/hooks/index.ts | 1 + .../components/hooks/useAutoUnsubscribePromise.tsx | 23 ++++++++++++++++++++++ FrontEnd/src/components/index.css | 1 + 3 files changed, 25 insertions(+) create mode 100644 FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx (limited to 'FrontEnd/src/components') diff --git a/FrontEnd/src/components/hooks/index.ts b/FrontEnd/src/components/hooks/index.ts index 771b0e2a..98ce729e 100644 --- a/FrontEnd/src/components/hooks/index.ts +++ b/FrontEnd/src/components/hooks/index.ts @@ -2,3 +2,4 @@ export { useMobile } from "./responsive"; export { default as useClickOutside } from "./useClickOutside"; export { default as useScrollToBottom } from "./useScrollToBottom"; export { default as useWindowLeave } from "./useWindowLeave"; +export { default as useAutoUnsubscribePromise } from "./useAutoUnsubscribePromise"; diff --git a/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx new file mode 100644 index 00000000..78e21151 --- /dev/null +++ b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx @@ -0,0 +1,23 @@ +import { useEffect, DependencyList } from "react"; + +export default function useAutoUnsubscribePromise( + promiseGenerator: () => Promise | null | undefined, + resultHandler: (data: T) => void, + dependencies?: DependencyList | undefined, +) { + useEffect(() => { + let subscribe = true; + const promise = promiseGenerator(); + if (promise) { + void promise.then((data) => { + if (subscribe) { + resultHandler(data); + } + }); + + return () => { + subscribe = false; + }; + } + }, dependencies); +} diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css index de156e0e..83b48318 100644 --- a/FrontEnd/src/components/index.css +++ b/FrontEnd/src/components/index.css @@ -16,6 +16,7 @@ body { textarea { transition: border-color 0.3s; border-color: var(--cru-text-minor-color); + background: var(--cru-background-color); } textarea:hover { -- cgit v1.2.3