Router go back inapp

src/cloud/pages/cooperate.tsx

@@ -19,6 +19,8 @@ import { SerializedDoc } from '../interfaces/db/doc'
 import { SerializedOpenInvite } from '../interfaces/db/openInvite'
 import { boostHubBaseUrl } from '../lib/consts'
 import { getOpenInviteURL, getTeamURL } from '../lib/utils/patterns'
+import { mdiClose } from '@mdi/js'
+import Button from '../../shared/components/atoms/Button'
 
 const CooperatePage = () => {
   const [name, setName] = useState<string>('')
@@ -161,7 +163,24 @@ const CooperatePage = () => {
   }
 
   if (state === 'usage') {
-    return <UsagePage onUsage={onUsageCallback} sending={sending} />
+    return (
+      <>
+        {usingElectron && (
+          <ElectronButtonContainer>
+            <Button
+              variant='icon'
+              iconSize={34}
+              iconPath={mdiClose}
+              onClick={() => {
+                sendToElectron('router', 'back')
+              }}
+              className='electron__goback'
+            />
+          </ElectronButtonContainer>
+        )}
+        <UsagePage onUsage={onUsageCallback} sending={sending} />
+      </>
+    )
   }
 
   return (
@@ -170,6 +189,19 @@ const CooperatePage = () => {
       subtitle='Please tell us your team information.'
       contentWidth={600}
     >
+      {usingElectron && (
+        <ElectronButtonContainer>
+          <Button
+            variant='icon'
+            iconSize={34}
+            iconPath={mdiClose}
+            onClick={() => {
+              sendToElectron('router', 'back')
+            }}
+            className='electron__goback'
+          />
+        </ElectronButtonContainer>
+      )}
       <Container>
         <CreateTeamForm
           fullPage={true}
@@ -196,6 +228,15 @@ CooperatePage.getInitialProps = async (_params: GetInitialPropsParameters) => {
 
 export default CooperatePage
 
+const ElectronButtonContainer = styled.div`
+  .electron__goback {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 100;
+  }
+`
+
 const Container = styled.div`
   text-align: left;
 

src/components/Router.tsx

@@ -10,8 +10,10 @@ import BoostHubTeamsShowPage from './pages/BoostHubTeamsShowPage'
 import BoostHubTeamsCreatePage from './pages/BoostHubTeamsCreatePage'
 import BoostHubAccountDeletePage from './pages/BoostHubAccountDeletePage'
 import {
+  boostHubAppRouterEventEmitter,
   BoostHubNavigateRequestEvent,
   boostHubNavigateRequestEventEmitter,
+  BoostHubAppRouterEvent,
 } from '../lib/events'
 import { parse as parseUrl } from 'url'
 import { openNew } from '../lib/platform'
@@ -27,9 +29,28 @@ import NotFoundErrorPage from './pages/NotFoundErrorPage'
 const Router = () => {
   const routeParams = useRouteParams()
   const { storageMap } = useDb()
-  const { push } = useRouter()
+  const { push, goBack, goForward } = useRouter()
   const { generalStatus } = useGeneralStatus()
 
+  useEffect(() => {
+    const boostHubAppRouterEventHandler = (event: BoostHubAppRouterEvent) => {
+      switch (event.detail.target) {
+        case 'forward':
+          goForward()
+          return
+        case 'back':
+        default:
+          goBack()
+          return
+      }
+    }
+
+    boostHubAppRouterEventEmitter.listen(boostHubAppRouterEventHandler)
+    return () => {
+      boostHubAppRouterEventEmitter.unlisten(boostHubAppRouterEventHandler)
+    }
+  }, [goBack, goForward])
+
   useEffect(() => {
     const boostHubNavigateRequestHandler = (
       event: BoostHubNavigateRequestEvent

src/components/atoms/BoostHubWebview.tsx

@@ -31,6 +31,7 @@ import {
   boostHubSubscriptionUpdateEventEmitter,
   boosthubNotificationCountsEventEmitter,
   boostHubSidebarSpaceEventEmitter,
+  boostHubAppRouterEventEmitter,
 } from '../../lib/events'
 import { usePreferences } from '../../lib/preferences'
 import { openContextMenu, openExternal } from '../../lib/electronOnly'
@@ -142,6 +143,9 @@ const BoostHubWebview = ({
 
     const ipcMessageEventHandler = (event: IpcMessageEvent) => {
       switch (event.channel) {
+        case 'router':
+          boostHubAppRouterEventEmitter.dispatch({ target: event.args[0] })
+          break
         case 'sidebar-spaces':
           boostHubSidebarSpaceEventEmitter.dispatch()
           break

src/lib/events.ts

@@ -161,3 +161,9 @@ export const boostHubSubscriptionDeleteEventEmitter = createCustomEventEmitter<
 export const boostHubSidebarSpaceEventEmitter = createCustomEventEmitter(
   'BoostHub:sidebarSpace'
 )
+
+export type BoostHubAppRouterEventDetail = { target: 'back' | 'forward' }
+export type BoostHubAppRouterEvent = CustomEvent<BoostHubAppRouterEventDetail>
+export const boostHubAppRouterEventEmitter = createCustomEventEmitter<
+  BoostHubAppRouterEventDetail
+>('BoostHub:appRouter')