refactor: add useCallback, add methods and split effects

src/hooks/useLogout.tsx

@@ -1,16 +1,15 @@
 import { logout as nostrLogout } from 'nostr-login'
 import { clear } from '../utils/localStorage'
-import { useDispatch } from 'react-redux'
-import { Dispatch } from '../store/store'
 import { userLogOutAction } from '../store/actions'
 import { LoginMethod } from '../store/auth/types'
-import { useAppSelector } from './store'
+import { useAppDispatch, useAppSelector } from './store'
+import { useCallback } from 'react'
 
 export const useLogout = () => {
   const loginMethod = useAppSelector((state) => state.auth?.loginMethod)
-  const dispatch: Dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
-  const logout = () => {
+  const logout = useCallback(() => {
     // Log out of the nostr-login
     if (loginMethod === LoginMethod.nostrLogin) {
       nostrLogout()
@@ -21,7 +20,7 @@ export const useLogout = () => {
 
     // Clear the local storage states
     clear()
-  }
+  }, [dispatch, loginMethod])
 
   return logout
 }

src/layouts/Main.tsx

@@ -74,7 +74,6 @@ export const MainLayout = () => {
 
   useEffect(() => {
     const handleNostrAuth = (_: string, opts: NostrLoginAuthOptions) => {
-      console.log(opts.method)
       if (opts.type === 'logout') {
         logout()
       } else {
@@ -83,12 +82,22 @@ export const MainLayout = () => {
       }
     }
 
-    initNostrLogin({
-      darkMode: false,
-      noBanner: true,
-      onAuth: handleNostrAuth
-    })
+    ;(async () => {
+      try {
+        const options = {
+          methods: ['connect', 'extension', 'local'],
+          noBanner: true,
+          onAuth: handleNostrAuth
+        }
+        await initNostrLogin(options)
+        console.log('Nostr-Login initialized successfully')
+      } catch (error) {
+        console.error('Failed to initialize Nostr-Login', error)
+      }
+    })()
+  }, [dispatch, login, logout])
 
+  useEffect(() => {
     const metadataController = MetadataController.getInstance()
 
     const restoredState = loadState()
@@ -119,8 +128,7 @@ export const MainLayout = () => {
     } else {
       setIsLoading(false)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [dispatch, logout])
 
   useEffect(() => {
     if (authState && authState.loggedIn && usersAppData) {