remove notifi

Reviewed-on: #2

src/main/index.ts

@@ -1,16 +1,18 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { app, shell, BrowserWindow, ipcMain, screen, globalShortcut } from 'electron'
-import path, { join } from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import icon from '../../resources/icon.png?asset'
+import { electronApp, is, optimizer } from '@electron-toolkit/utils'
+import { app, BrowserWindow, globalShortcut, ipcMain, Menu, screen, shell, Tray } from 'electron'
 import fs from 'fs'
+import path, { join } from 'path'
+import icon from '../../resources/icon.png?asset'
 
+let mainWindow: null | BrowserWindow = null
+let isQuiting = false
 function createWindow(): void {
     // Get Screen width, height
     const { width, height } = screen.getPrimaryDisplay().workAreaSize
 
-    const mainWindow = new BrowserWindow({
+    mainWindow = new BrowserWindow({
         width: width / 2,
         height: height / 2,
         show: false,
@@ -26,7 +28,7 @@ function createWindow(): void {
     mainWindow.setPosition(width / 2, height / 2)
 
     mainWindow.on('ready-to-show', () => {
-        mainWindow.show()
+        mainWindow?.show()
     })
 
     mainWindow.webContents.setWindowOpenHandler((details) => {
@@ -46,19 +48,19 @@ function createWindow(): void {
     mainWindow.webContents.once('did-finish-load', () => {
         const shortcut = 'Control+Shift+C'
 
-        mainWindow.on('focus', () => {
+        mainWindow?.on('focus', () => {
             globalShortcut.register(shortcut, () => {
                 const pos = screen.getCursorScreenPoint()
-                mainWindow.webContents.inspectElement(pos.x, pos.y)
-                mainWindow.webContents.focus() // optional: refocus back
+                mainWindow?.webContents.inspectElement(pos.x, pos.y)
+                mainWindow?.webContents.focus() // optional: refocus back
             })
         })
 
-        mainWindow.on('blur', () => {
+        mainWindow?.on('blur', () => {
             globalShortcut.unregister(shortcut)
         })
 
-        mainWindow.on('closed', () => {
+        mainWindow?.on('closed', () => {
             globalShortcut.unregister(shortcut)
         })
     })
@@ -70,6 +72,41 @@ function createWindow(): void {
     } else {
         mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
     }
+
+    // Khi bấm dấu X
+    mainWindow.on('close', (event) => {
+        if (!isQuiting) {
+            event.preventDefault()
+            mainWindow?.hide()
+        }
+    })
+}
+
+function createTray() {
+    const tray = new Tray(icon)
+
+    const contextMenu = Menu.buildFromTemplate([
+        {
+            label: 'Show',
+            click: () => {
+                mainWindow?.show()
+            }
+        },
+        {
+            label: 'Quit',
+            click: () => {
+                isQuiting = true
+                app.quit()
+            }
+        }
+    ])
+
+    tray.setToolTip('Zulip notes')
+    tray.setContextMenu(contextMenu)
+
+    tray.on('double-click', () => {
+        mainWindow?.show()
+    })
 }
 
 // This method will be called when Electron has finished
@@ -89,8 +126,12 @@ app.whenReady().then(() => {
     // IPC test
     ipcMain.on('ping', () => console.log('pong'))
 
+    // Create main window
     createWindow()
 
+    // Create tray icon
+    createTray()
+
     app.on('activate', function () {
         // On macOS it's common to re-create a window in the app when the
         // dock icon is clicked and there are no other windows open.
@@ -162,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'