From 68e65334304ff3ec18fa2456746fdf71b156931d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 21 Aug 2024 17:38:30 +0800
Subject: [PATCH] Better hooks use

---
 .../components/templates/NavigationLayout.tsx |  3 +-
 .../components/templates/PrimaryLayout.tsx    |  4 ++-
 .../components/templates/SettingsLayout.tsx   |  4 ++-
 packages/web/lib/logout.ts                    | 32 +++++++++++--------
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx
index 1ceca6440..0b6f78bde 100644
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/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
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 3789b64d4..e88a692ca 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/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 ? (
diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index 36859fdfd..e4178ced3 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/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"
diff --git a/packages/web/lib/logout.ts b/packages/web/lib/logout.ts
index d86c9bb6d..e9bea3e36 100644
--- a/packages/web/lib/logout.ts
+++ b/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 }
 }