Try to open boost hub team settings when team route is active

Author: Rokt33r

src/components/App.tsx

@@ -50,13 +50,15 @@ import {
   dispatchBoostHubLoginRequestEvent,
   listenBoostHubAccountDeleteEvent,
   unlistenBoostHubAccountDeleteEvent,
+  dispatchBoostHubToggleSettingsEvent,
 } from '../lib/events'
 import {
   useCheckedFeatures,
   featureAppModeSelect,
   featureBoostHubIntro,
 } from '../lib/checkedFeatures'
 import BoostHubIntroModal from '../components/organisms/BoostHubIntroModal'
+import { useRouteParams } from '../lib/routeParams'
 
 const LoadingText = styled.div`
   margin: 30px;
@@ -104,6 +106,7 @@ const App = () => {
   } = usePreferences()
   const { messageBox } = useDialog()
   const { fetchDesktopGlobalData } = useBoostHub()
+  const routeParams = useRouteParams()
 
   useEffectOnce(() => {
     initialize()
@@ -212,12 +215,22 @@ const App = () => {
     run()
   })
 
+  const boostHubTeamsShowPageIsActive =
+    routeParams.name === 'boosthub.teams.show'
+
   useEffect(() => {
-    addIpcListener('preferences', togglePreferencesModal)
+    const handler = () => {
+      if (boostHubTeamsShowPageIsActive) {
+        dispatchBoostHubToggleSettingsEvent()
+      } else {
+        togglePreferencesModal()
+      }
+    }
+    addIpcListener('preferences', handler)
     return () => {
-      removeIpcListener('preferences', togglePreferencesModal)
+      removeIpcListener('preferences', handler)
     }
-  }, [togglePreferencesModal])
+  }, [togglePreferencesModal, boostHubTeamsShowPageIsActive])
 
   useEffect(() => {
     const boostHubTeamCreateEventHandler = (event: BoostHubTeamCreateEvent) => {

src/components/atoms/BoostHubWebview.tsx

@@ -37,6 +37,7 @@ export interface WebviewControl {
   goBack(): void
   goForward(): void
   openDevTools(): void
+  sendMessage(channel: string, ...args: any[]): void
 }
 
 interface BoostHubWebviewProps {
@@ -82,6 +83,10 @@ const BoostHubWebview = ({
     webviewRef.current!.openDevTools()
   }, [])
 
+  const sendMessage = useCallback((channel: string, ...args: any[]) => {
+    webviewRef.current!.send(channel, ...args)
+  }, [])
+
   useEffect(() => {
     if (controlRef == null) {
       return
@@ -91,8 +96,9 @@ const BoostHubWebview = ({
       goBack,
       goForward,
       openDevTools,
+      sendMessage,
     }
-  }, [controlRef, reload, goBack, goForward, openDevTools])
+  }, [controlRef, reload, goBack, goForward, openDevTools, sendMessage])
 
   useEffect(() => {
     const webview = webviewRef.current!

src/components/pages/BoostHubTeamsShowPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
 import { getBoostHubTeamPageUrl } from '../../lib/boosthub'
 import styled from '../../lib/styled'
 import { DidNavigateInPageEvent, DidNavigateEvent } from 'electron'
@@ -20,6 +20,10 @@ import {
 import Icon from '../atoms/Icon'
 import BoostHubWebview, { WebviewControl } from '../atoms/BoostHubWebview'
 import copy from 'copy-to-clipboard'
+import {
+  listenBoostHubToggleSettingsEvent,
+  unlistenBoostHubToggleSettingsEvent,
+} from '../../lib/events'
 
 interface BoostHubTeamsShowPageProps {
   active: boolean
@@ -86,6 +90,20 @@ const BoostHubTeamsShowPage = ({
     copy(url)
   }, [url])
 
+  useEffect(() => {
+    if (!active) {
+      return
+    }
+
+    const handler = () => {
+      webviewControlRef.current!.sendMessage('toggle-settings')
+    }
+    listenBoostHubToggleSettingsEvent(handler)
+    return () => {
+      unlistenBoostHubToggleSettingsEvent(handler)
+    }
+  }, [active])
+
   return (
     <Container key={domain} className={active ? 'active' : ''}>
       <div className='toolbar' onContextMenu={openToolbarContextMenu}>

src/lib/events.ts

@@ -153,3 +153,11 @@ export const {
   listen: listenBoostHubAccountDeleteEvent,
   unlisten: unlistenBoostHubAccountDeleteEvent,
 } = createCustomEventHelper(BoostHubAccountDeleteEventName)
+
+const BoostHubToggleSettingsEventName = 'BoostHub:toggleSettings'
+export type BoostHubToggleSettingsEvent = CustomEvent
+export const {
+  dispatch: dispatchBoostHubToggleSettingsEvent,
+  listen: listenBoostHubToggleSettingsEvent,
+  unlisten: unlistenBoostHubToggleSettingsEvent,
+} = createCustomEventHelper(BoostHubToggleSettingsEventName)