Handle account delete event from boost hub webview

Author: Rokt33r

src/components/App.tsx

@@ -47,6 +47,9 @@ import {
   BoostHubTeamDeleteEvent,
   listenBoostHubTeamDeleteEvent,
   unlistenBoostHubTeamDeleteEvent,
+  dispatchBoostHubLoginRequestEvent,
+  listenBoostHubAccountDeleteEvent,
+  unlistenBoostHubAccountDeleteEvent,
 } from '../lib/events'
 import {
   useCheckedFeatures,
@@ -160,14 +163,6 @@ const App = () => {
       }
       const { user, teams } = await fetchDesktopGlobalData()
       if (user == null) {
-        setPreferences({
-          'boosthub.user': undefined,
-        })
-        setGeneralStatus({
-          boostHubTeams: [],
-        })
-        return
-        // User's auth is invalidated. Should go to auth page
         messageBox({
           title: 'Boost Hub login is required',
           message: 'Your BoostHub session has been expired.',
@@ -176,6 +171,10 @@ const App = () => {
           iconType: DialogIconTypes.Warning,
           onClose: (value: number | null) => {
             if (value === 0) {
+              push(`/app/boosthub/login`)
+              setTimeout(() => {
+                dispatchBoostHubLoginRequestEvent()
+              }, 1000)
               return
             }
 
@@ -269,6 +268,7 @@ const App = () => {
     }
 
     const boostHubTeamDeleteEventHandler = (event: BoostHubTeamDeleteEvent) => {
+      push(`/app`)
       const deletedTeam = event.detail.team
       setGeneralStatus((previousGeneralStatus) => {
         const teamMap =
@@ -281,18 +281,29 @@ const App = () => {
           boostHubTeams: [...teamMap.values()],
         }
       })
+    }
+
+    const boostHubAccountDeleteEventHandler = () => {
       push(`/app`)
+      setPreferences({
+        'boosthub.user': undefined,
+      })
+      setGeneralStatus({
+        boostHubTeams: [],
+      })
     }
 
     listenBoostHubTeamCreateEvent(boostHubTeamCreateEventHandler)
     listenBoostHubTeamUpdateEvent(boostHubTeamUpdateEventHandler)
     listenBoostHubTeamDeleteEvent(boostHubTeamDeleteEventHandler)
+    listenBoostHubAccountDeleteEvent(boostHubAccountDeleteEventHandler)
     return () => {
       unlistenBoostHubTeamCreateEvent(boostHubTeamCreateEventHandler)
       unlistenBoostHubTeamUpdateEvent(boostHubTeamUpdateEventHandler)
       unlistenBoostHubTeamDeleteEvent(boostHubTeamDeleteEventHandler)
+      unlistenBoostHubAccountDeleteEvent(boostHubAccountDeleteEventHandler)
     }
-  }, [push, setGeneralStatus])
+  }, [push, setPreferences, setGeneralStatus])
 
   useBoostNoteProtocol()
 

src/components/Router.tsx

@@ -11,6 +11,7 @@ import WikiNotePage from './pages/WikiNotePage'
 import { values } from '../lib/db/utils'
 import BoostHubTeamsShowPage from './pages/BoostHubTeamsShowPage'
 import BoostHubTeamsCreatePage from './pages/BoostHubTeamsCreatePage'
+import BoostHubAccountDeletePage from './pages/BoostHubAccountDeletePage'
 import {
   BoostHubNavigateRequestEvent,
   listenBoostHubNavigateRequestEvent,
@@ -45,10 +46,15 @@ const Router = () => {
         openNew(url)
         return
       }
-      const firstPathname = pathname!.slice(1).split('/')[0]
-      switch (firstPathname) {
+      const pathnameElements = pathname!.slice(1).split('/')
+      const firstPathnameElement = pathnameElements[0]
+      switch (firstPathnameElement) {
         case 'account':
-          // TODO: Handle account delete
+          if (pathnameElements[1] === 'delete') {
+            push('/app/boosthub/account/delete')
+          } else {
+            openNew(url)
+          }
           break
         case '':
         case 'api':
@@ -70,7 +76,7 @@ const Router = () => {
           openNew(url)
           break
         default:
-          push(`/app/boosthub/teams/${firstPathname}`)
+          push(`/app/boosthub/teams/${firstPathnameElement}`)
           break
       }
     }
@@ -115,6 +121,8 @@ function useContent(
       return <BoostHubLoginPage />
     case 'boosthub.teams.create':
       return <BoostHubTeamsCreatePage />
+    case 'boosthub.account.delete':
+      return <BoostHubAccountDeletePage />
     case 'boosthub.teams.show':
       return null
     case 'storages.notes':

src/components/atoms/BoostHubWebview.tsx

@@ -29,6 +29,7 @@ import {
   dispatchBoostHubTeamCreateEvent,
   dispatchBoostHubTeamUpdateEvent,
   dispatchBoostHubTeamDeleteEvent,
+  dispatchBoostHubAccountDeleteEvent,
 } from '../../lib/events'
 
 export interface WebviewControl {
@@ -139,6 +140,8 @@ const BoostHubWebview = ({
           break
         case 'team-delete':
           dispatchBoostHubTeamDeleteEvent({ team: event.args[0] })
+        case 'account-delete':
+          dispatchBoostHubAccountDeleteEvent()
         default:
           console.log('Unhandled ipc message event', event.channel, event.args)
           break

src/components/organisms/BoostHubIntroModal.tsx

@@ -26,7 +26,6 @@ const BoostHubIntroModal = () => {
     checkFeature(featureBoostHubIntro)
     push(`/app/boosthub/login`)
     setTimeout(() => {
-      console.log('reqqq')
       dispatchBoostHubLoginRequestEvent()
     }, 1000)
   }, [checkFeature, push])

src/components/pages/BoostHubAccountDeletePage.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { boostHubAccountDeletePageUrl } from '../../lib/boosthub'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
+import { mdiAccountGroup } from '@mdi/js'
+import styled from '../../lib/styled'
+import BoostHubWebview from '../atoms/BoostHubWebview'
+
+const BoostHubAccountDeletePage = () => {
+  return (
+    <PageContainer>
+      <PageDraggableHeader
+        iconPath={mdiAccountGroup}
+        label='Delete Boost Hub Account'
+      />
+      <WebViewContainer>
+        <BoostHubWebview src={boostHubAccountDeletePageUrl} />
+      </WebViewContainer>
+    </PageContainer>
+  )
+}
+
+export default BoostHubAccountDeletePage
+
+const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`
+
+const WebViewContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+`

src/lib/boosthub.tsx

@@ -14,6 +14,8 @@ export const boostHubWebViewUserAgent = `${navigator.userAgent} BoostNote ${proc
 
 const boostHubDesktopLoginPageUrl = `${boostHubBaseUrl}/desktop/login`
 
+export const boostHubAccountDeletePageUrl = `${boostHubBaseUrl}/account/delete`
+
 export const boostHubLearnMorePageUrl = `${boostHubBaseUrl}/features`
 
 export function openLoginPage(state: string) {

src/lib/events.ts

@@ -128,3 +128,11 @@ export const {
 } = createCustomEventHelper<BoostHubTeamDeleteEventDetail>(
   BoostHubTeamDeleteEventName
 )
+
+const BoostHubAccountDeleteEventName = 'BoostHub:accountDelete'
+export type BoostHubAccountDeleteEvent = CustomEvent
+export const {
+  dispatch: dispatchBoostHubAccountDeleteEvent,
+  listen: listenBoostHubAccountDeleteEvent,
+  unlisten: unlistenBoostHubAccountDeleteEvent,
+} = createCustomEventHelper(BoostHubAccountDeleteEventName)

src/lib/routeParams.ts

@@ -47,6 +47,10 @@ export interface BoostHubTeamsCreateRouteParams extends BaseRouteParams {
   name: 'boosthub.teams.create'
 }
 
+export interface BoostHubAccountDeleteRouteParams extends BaseRouteParams {
+  name: 'boosthub.account.delete'
+}
+
 export interface UnknownRouteParams extends BaseRouteParams {
   name: 'unknown'
 }
@@ -60,6 +64,7 @@ export type AllRouteParams =
   | UnknownRouteParams
   | BoostHubTeamsShowRouteParams
   | BoostHubTeamsCreateRouteParams
+  | BoostHubAccountDeleteRouteParams
   | BoostHubLoginRouteParams
 
 export const useRouteParams = () => {
@@ -73,6 +78,13 @@ export const useRouteParams = () => {
           return {
             name: 'boosthub.login',
           }
+        case 'account':
+          if (names[2] === 'delete') {
+            return {
+              name: 'boosthub.account.delete',
+            }
+          }
+          break
         default:
         case 'teams':
           const domain = names[2]
@@ -198,6 +210,7 @@ export const useActiveStorageId = () => {
     switch (routeParams.name) {
       default:
         return routeParams.storageId
+      case 'boosthub.account.delete':
       case 'boosthub.teams.create':
       case 'boosthub.teams.show':
       case 'boosthub.login':