Execute user streaming for all authorized accounts for notification

renderer/components/layouts/account.tsx

@@ -1,9 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { FaPlus } from 'react-icons/fa6'
 import { Account, db } from '@/db'
 import NewAccount from '@/components/accounts/New'
 import { Avatar, Dropdown } from 'flowbite-react'
 import { useRouter } from 'next/router'
+import { useIntl } from 'react-intl'
+import generateNotification from '@/utils/notification'
+import generator, { Entity, WebSocketInterface } from 'megalodon'
 
 type LayoutProps = {
   children: React.ReactNode
@@ -13,6 +16,8 @@ export default function Layout({ children }: LayoutProps) {
   const [accounts, setAccounts] = useState<Array<Account>>([])
   const [openNewModal, setOpenNewModal] = useState(false)
   const router = useRouter()
+  const { formatMessage } = useIntl()
+  const streamings = useRef<Array<WebSocketInterface>>([])
 
   useEffect(() => {
     const fn = async () => {
@@ -21,8 +26,34 @@ export default function Layout({ children }: LayoutProps) {
       if (acct.length === 0) {
         setOpenNewModal(true)
       }
+      acct.forEach(async account => {
+        // Start user streaming for notification
+        const client = generator(account.sns, account.url, account.access_token, 'Whalebird')
+        const instance = await client.getInstance()
+        const ws = generator(account.sns, instance.data.urls.streaming_api, account.access_token, 'Whalebird')
+        const socket = ws.userSocket()
+        streamings.current = [...streamings.current, socket]
+        socket.on('connect', () => {
+          console.log(`connect to user streaming for ${account.domain}`)
+        })
+        socket.on('notification', (notification: Entity.Notification) => {
+          const [title, body] = generateNotification(notification, formatMessage)
+          if (title.length > 0) {
+            new window.Notification(title, { body: body })
+          }
+        })
+      })
     }
     fn()
+
+    return () => {
+      streamings.current.forEach(streaming => {
+        streaming.removeAllListeners()
+        streaming.stop()
+      })
+      streamings.current = []
+      console.log('close user streaming')
+    }
   }, [])
 
   const closeNewModal = async () => {

renderer/pages/accounts/[id]/[timeline].tsx

@@ -1,18 +1,14 @@
 import { useRouter } from 'next/router'
 import Timeline from '@/components/timelines/Timeline'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Account, db } from '@/db'
-import generator, { Entity, MegalodonInterface, WebSocketInterface } from 'megalodon'
+import generator, { MegalodonInterface } from 'megalodon'
 import Notifications from '@/components/timelines/Notifications'
-import generateNotification from '@/utils/notification'
-import { useIntl } from 'react-intl'
 
 export default function Page() {
   const router = useRouter()
   const [account, setAccount] = useState<Account | null>(null)
   const [client, setClient] = useState<MegalodonInterface>(null)
-  const streaming = useRef<WebSocketInterface | null>(null)
-  const { formatMessage } = useIntl()
 
   useEffect(() => {
     if (router.query.id) {
@@ -23,33 +19,10 @@ export default function Page() {
           setAccount(a)
           const c = generator(a.sns, a.url, a.access_token, 'Whalebird')
           setClient(c)
-
-          // Start user streaming for notification
-          const instance = await c.getInstance()
-          const ws = generator(a.sns, instance.data.urls.streaming_api, a.access_token, 'Whalebird')
-          streaming.current = ws.userSocket()
-          streaming.current.on('connect', () => {
-            console.log('connect to user streaming')
-          })
-          streaming.current.on('notification', (notification: Entity.Notification) => {
-            const [title, body] = generateNotification(notification, formatMessage)
-            if (title.length > 0) {
-              new window.Notification(title, { body: body })
-            }
-          })
         }
       }
       f()
     }
-
-    return () => {
-      if (streaming.current) {
-        streaming.current.removeAllListeners()
-        streaming.current.stop()
-        streaming.current = null
-        console.log('close user streaming')
-      }
-    }
   }, [router.query.id])
 
   if (!account || !client) return null