Better hooks use

packages/web/components/templates/NavigationLayout.tsx

@@ -9,7 +9,7 @@ import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { setupAnalytics } from '../../lib/analytics'
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
-import { logout } from '../../lib/logout'
+import { logout, useLogout } from '../../lib/logout'
 import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme'
 import { useRegisterActions } from 'kbar'
 import { theme } from '../tokens/stitches.config'
@@ -108,6 +108,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     }
   }, [showLogout])
 
+  const { logout } = useLogout()
   // if (isLoading) {
   //   return (
   //     <HStack

packages/web/components/templates/PrimaryLayout.tsx

@@ -9,7 +9,7 @@ import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { setupAnalytics } from '../../lib/analytics'
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
-import { logout } from '../../lib/logout'
+import { logout, useLogout } from '../../lib/logout'
 import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme'
 import { updateTheme } from '../../lib/themeUpdater'
 import { Priority, useRegisterActions } from 'kbar'
@@ -96,6 +96,8 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
     }
   }, [showLogout])
 
+  const { logout } = useLogout()
+
   return (
     <>
       {props.pageMetaDataProps ? (

packages/web/components/templates/SettingsLayout.tsx

@@ -8,7 +8,7 @@ import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { PageMetaData } from '../patterns/PageMetaData'
 import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
-import { logout } from '../../lib/logout'
+import { logout, useLogout } from '../../lib/logout'
 import { SettingsMenu } from './navMenu/SettingsMenu'
 import { SettingsDropdown } from './navMenu/SettingsDropdown'
 import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth'
@@ -75,6 +75,8 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
     }
   }, [showLogout])
 
+  const { logout } = useLogout()
+
   return (
     <VStack
       alignment="start"

packages/web/lib/logout.ts

@@ -1,20 +1,24 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { deinitAnalytics } from './analytics'
 import { logoutMutation } from './networking/mutations/logoutMutation'
+import { useCallback } from 'react'
 
-export const logout = async () => {
-  const queryClient = useQueryClient()
-  await logoutMutation()
-  try {
-    const result = await logoutMutation()
-    if (!result) {
-      throw new Error('Logout failed')
+export const useLogout = () => {
+  const logout = useCallback(async () => {
+    const queryClient = useQueryClient()
+    await logoutMutation()
+    try {
+      const result = await logoutMutation()
+      if (!result) {
+        throw new Error('Logout failed')
+      }
+      deinitAnalytics()
+      queryClient.clear()
+      window.location.href = '/login'
+    } catch {
+      // TODO: display an error message instead
+      window.location.href = '/'
     }
-    deinitAnalytics()
-    queryClient.clear()
-    window.location.href = '/login'
-  } catch {
-    // TODO: display an error message instead
-    window.location.href = '/'
-  }
+  }, [])
+  return { logout }
 }