From cb997ea534b3e97cdd05936f1b0a7a16914011fe Mon Sep 17 00:00:00 2001
From: Cowjiang <cowjiang@163.com>
Date: Thu, 25 Jan 2024 19:35:12 +0800
Subject: [PATCH] feat: add duration option to NotificationBar

---
 src/App.tsx                        |  8 ++++++--
 src/components/NotificationBar.tsx | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c718b7d..e03ea29 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,12 +13,16 @@ function App() {
   const navigate = useNavigate()
 
   const {isLoading, isAdmin, setLoading, checkAdmin, restartAsAdmin} = useAppStore()
-  const {getServiceState} = useZeroTierStore()
+  const {getServiceState, getServiceStartType} = useZeroTierStore()
 
   const {setNotification} = useNotification()
 
   useEffect(() => {
-    Promise.all([checkAdmin(), getServiceState()]).finally(() => setLoading(false))
+    Promise.all([
+      checkAdmin(),
+      getServiceState(),
+      getServiceStartType()
+    ]).finally(() => setLoading(false))
   }, [])
 
   useEffect(() => {
diff --git a/src/components/NotificationBar.tsx b/src/components/NotificationBar.tsx
index 860558b..6f37fcb 100644
--- a/src/components/NotificationBar.tsx
+++ b/src/components/NotificationBar.tsx
@@ -8,6 +8,7 @@ type NotificationBarOptions = {
   children?: ReactNode
   hideCloseButton?: boolean
   animate?: boolean
+  duration?: number
   onClose?: () => void
 }
 
@@ -73,15 +74,27 @@ function NotificationProvider({children}: { children: ReactNode }) {
   const [options, setOptions] = useState<NotificationBarProps>(initialOptions)
   const [hidden, setHidden] = useState(true)
 
+  const [autoCloseTimer, setAutoCloseTimer] = useState<number | undefined>(undefined)
+
   const setNotification = (options: NotificationBarOptions) => {
+    clearTimer()
     setOptions({...initialOptions, ...options})
-    setTimeout(() => setHidden(false), options.animate ? 250 : 0)
+    setTimeout(() => setHidden(false), 0)
+    options.duration && setAutoCloseTimer(setTimeout(closeNotification, options.duration))
   }
   const closeNotification = () => {
+    clearTimer()
     setHidden(true)
     setTimeout(() => setOptions(initialOptions), options.animate ? 250 : 0)
   }
 
+  const clearTimer = () => {
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer)
+      setAutoCloseTimer(undefined)
+    }
+  }
+
   return (
     <NotificationContext.Provider value={{setNotification, closeNotification}}>
       {children}