src/main/index.ts

@@ -203,3 +203,11 @@ ipcMain.handle('get-config-file', async () => {
         return null
     }
 })
+
+ipcMain.handle('show-window', async () => {
+    mainWindow?.show()
+})
+
+ipcMain.handle('hide-window', async () => {
+    mainWindow?.hide()
+})

src/renderer/src/App.tsx

@@ -8,7 +8,6 @@ import {
     LoadingOverlay,
     MantineProvider,
     Skeleton,
-    Text,
     Title,
     Tooltip
 } from '@mantine/core'
@@ -18,18 +17,13 @@ import { Notifications } from '@mantine/notifications'
 import '@mantine/notifications/styles.css'
 import { Product } from '@renderer/types/Product'
 import { IconDotsVertical } from '@tabler/icons-react'
-import moment from 'moment'
 import { Suspense, useCallback, useEffect, useState } from 'react'
 import { listHotItem } from './api/products'
 import CardItem from './components/CardItem'
 import ConfigModal from './components/ConfigModal'
 import { pusher } from './pusher'
 import { theme } from './theme'
-import {
-    myNotificationStore,
-    playNotificationSound,
-    prependNotification
-} from './utils/Notificaton'
+import { myNotificationStore, playNotificationSound } from './utils/Notificaton'
 
 const PUSHER_CHANNEL = import.meta.env.VITE_PUSHER_CHANNEL
 const PUSHER_EVENT = 'App\\Events\\MessagePushed'
@@ -38,7 +32,7 @@ function App(): React.JSX.Element {
     const [newItems, setnewItems] = useState<Array<Product>>([])
     const [hotItem, setHotItem] = useState<any>([])
     const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [timeout, setTimeout] = useState(2000)
+    const [timeoutNoti, setTimeoutNoti] = useState(2000)
 
     const [opened, { open, close }] = useDisclosure(false)
 
@@ -51,7 +45,7 @@ function App(): React.JSX.Element {
                 return
             }
 
-            setTimeout(data.noti_timeout * 1000)
+            setTimeoutNoti(data.noti_timeout * 1000)
         } catch (error) {
             console.log('%csrc/renderer/src/App.tsx:48 error', 'color: #007acc;', error)
         }
@@ -66,35 +60,22 @@ function App(): React.JSX.Element {
             if (data.data && data.data?.id) {
                 setnewItems((prev: Array<Product>) => [data.data, ...prev])
 
-                // Show notification
-                prependNotification(
-                    {
-                        title: (
-                            <Title order={4} className="text-overflow-1-line">
-                                {data.data?.title}
-                            </Title>
-                        ),
-                        message: (
-                            <Box>
-                                <Text style={{ fontSize: 14 }} mb={2}>
-                                    Price: <span className="bold-text">${data.data?.price}</span>,
-                                    Site: <span className="bold-text">{data.data?.from_site}</span>,
-                                    Seller: <span className="bold-text">{data.data?.seller}</span>
-                                </Text>
-
-                                <Text style={{ fontSize: 12 }}>
-                                    {moment(new Date()).format('HH:mm A')}
-                                </Text>
-                            </Box>
-                        ),
-                        autoClose: isHotItem(data.data) ? false : timeout,
-                        color: 'orange'
-                    },
-                    () => isHotItem(data.data)
-                )
-
                 // Play sound effect
                 playNotificationSound()
+
+                window.electron.ipcRenderer.invoke('show-window')
+
+                let timeoutId: NodeJS.Timeout | null = null
+
+                if (timeoutId) {
+                    clearTimeout(timeoutId)
+                }
+
+                if (isHotItem(data.data)) return
+
+                timeoutId = setTimeout(() => {
+                    window.electron.ipcRenderer.invoke('hide-window')
+                }, timeoutNoti)
             }
         }
 
@@ -105,7 +86,7 @@ function App(): React.JSX.Element {
             pusher.unsubscribe(PUSHER_CHANNEL)
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [timeout, hotItem])
+    }, [timeoutNoti, hotItem])
 
     useEffect(() => {
         // load timeout config form local

src/renderer/src/components/ConfigModal.tsx

@@ -41,11 +41,6 @@ export default function ConfigModal(props: IConfigModalProps) {
         try {
             const data = await window.electron.ipcRenderer.invoke('get-config-file')
 
-            console.log(
-                '%csrc/renderer/src/components/ConfigModal.tsx:44 data',
-                'color: #007acc;',
-                data
-            )
             if (!data) return
 
             form.setValues({ timeout: data?.noti_timeout })

src/renderer/src/utils/Notificaton.ts

@@ -1,30 +1,3 @@
-// /* eslint-disable @typescript-eslint/explicit-function-return-type */
-// import { createNotificationsStore, NotificationData } from '@mantine/notifications'
-// import notifySound from '../assets/notifty.mp3'
-
-// export const myNotificationStore = createNotificationsStore()
-
-// export function prependNotification(notification: NotificationData, callback?: () => boolean) {
-//     const id = notification.id ?? crypto.randomUUID()
-//     myNotificationStore.updateState((current) => {
-//         const existing = current.notifications.filter((n) => n.id !== id)
-//         return {
-//             ...current,
-//             notifications: [
-//                 {
-//                     ...notification,
-//                     id
-//                 },
-//                 ...existing
-//             ]
-//         }
-//     })
-// }
-
-// export const playNotificationSound = () => {
-//     const audio = new Audio(notifySound)
-//     audio.play().catch((e) => console.error('Audio play failed:', e))
-// }
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { createNotificationsStore, NotificationData } from '@mantine/notifications'
 import notifySound from '../assets/notifty.mp3'