Handle team delete event from web view

Author: Rokt33r

src/components/App.tsx

@@ -44,6 +44,9 @@ import {
   BoostHubTeamUpdateEvent,
   listenBoostHubTeamUpdateEvent,
   unlistenBoostHubTeamUpdateEvent,
+  BoostHubTeamDeleteEvent,
+  listenBoostHubTeamDeleteEvent,
+  unlistenBoostHubTeamDeleteEvent,
 } from '../lib/events'
 import {
   useCheckedFeatures,
@@ -219,24 +222,27 @@ const App = () => {
 
   useEffect(() => {
     const boostHubTeamCreateEventHandler = (event: BoostHubTeamCreateEvent) => {
-      const team = event.detail.team
+      const createdTeam = event.detail.team
       setGeneralStatus((previousGeneralStatus) => {
+        const teamMap =
+          previousGeneralStatus.boostHubTeams!.reduce((map, team) => {
+            map.set(team.id, team)
+            return map
+          }, new Map()) || new Map()
+        teamMap.set(createdTeam.id, {
+          id: createdTeam.id,
+          name: createdTeam.name,
+          domain: createdTeam.domain,
+          iconUrl:
+            createdTeam.icon != null
+              ? getBoostHubTeamIconUrl(createdTeam.icon.location)
+              : undefined,
+        })
         return {
-          boostHubTeams: [
-            ...previousGeneralStatus.boostHubTeams!,
-            {
-              id: team.id,
-              name: team.name,
-              domain: team.domain,
-              iconUrl:
-                team.icon != null
-                  ? getBoostHubTeamIconUrl(team.icon.location)
-                  : undefined,
-            },
-          ],
+          boostHubTeams: [...teamMap.values()],
         }
       })
-      push(`/app/boosthub/teams/${team.domain}`)
+      push(`/app/boosthub/teams/${createdTeam.domain}`)
     }
 
     const boostHubTeamUpdateEventHandler = (event: BoostHubTeamUpdateEvent) => {
@@ -262,11 +268,29 @@ const App = () => {
       })
     }
 
+    const boostHubTeamDeleteEventHandler = (event: BoostHubTeamDeleteEvent) => {
+      const deletedTeam = event.detail.team
+      setGeneralStatus((previousGeneralStatus) => {
+        const teamMap =
+          previousGeneralStatus.boostHubTeams!.reduce((map, team) => {
+            map.set(team.id, team)
+            return map
+          }, new Map()) || new Map()
+        teamMap.delete(deletedTeam.id)
+        return {
+          boostHubTeams: [...teamMap.values()],
+        }
+      })
+      push(`/app`)
+    }
+
     listenBoostHubTeamCreateEvent(boostHubTeamCreateEventHandler)
     listenBoostHubTeamUpdateEvent(boostHubTeamUpdateEventHandler)
+    listenBoostHubTeamDeleteEvent(boostHubTeamDeleteEventHandler)
     return () => {
       unlistenBoostHubTeamCreateEvent(boostHubTeamCreateEventHandler)
       unlistenBoostHubTeamUpdateEvent(boostHubTeamUpdateEventHandler)
+      unlistenBoostHubTeamDeleteEvent(boostHubTeamDeleteEventHandler)
     }
   }, [push, setGeneralStatus])
 

src/components/atoms/BoostHubWebview.tsx

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

src/lib/events.ts

@@ -89,7 +89,7 @@ export const {
   BoostHubTeamCreateEventName
 )
 
-const BoostHubTeamUpdateEventName = 'BoostHub:teamCreate'
+const BoostHubTeamUpdateEventName = 'BoostHub:teamUpdate'
 interface BoostHubTeamUpdateEventDetail {
   team: {
     id: string
@@ -100,11 +100,31 @@ interface BoostHubTeamUpdateEventDetail {
     }
   }
 }
-export type BoostHubTeamUpdateEvent = CustomEvent<BoostHubTeamCreateEventDetail>
+export type BoostHubTeamUpdateEvent = CustomEvent<BoostHubTeamUpdateEventDetail>
 export const {
   dispatch: dispatchBoostHubTeamUpdateEvent,
   listen: listenBoostHubTeamUpdateEvent,
   unlisten: unlistenBoostHubTeamUpdateEvent,
 } = createCustomEventHelper<BoostHubTeamUpdateEventDetail>(
   BoostHubTeamUpdateEventName
 )
+
+const BoostHubTeamDeleteEventName = 'BoostHub:teamDelete'
+interface BoostHubTeamDeleteEventDetail {
+  team: {
+    id: string
+    name: string
+    domain: string
+    icon?: {
+      location: string
+    }
+  }
+}
+export type BoostHubTeamDeleteEvent = CustomEvent<BoostHubTeamDeleteEventDetail>
+export const {
+  dispatch: dispatchBoostHubTeamDeleteEvent,
+  listen: listenBoostHubTeamDeleteEvent,
+  unlisten: unlistenBoostHubTeamDeleteEvent,
+} = createCustomEventHelper<BoostHubTeamDeleteEventDetail>(
+  BoostHubTeamDeleteEventName
+)