From 11c13e6b33ac49efcace696654d9c9de7ad723ec Mon Sep 17 00:00:00 2001
From: Farid Salau <43255135+faridsalau@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:06:11 -0600
Subject: [PATCH] [PAY-3824] Fix navigation loop bug (#11078)

---
 .../components/nav/desktop/LeftNavLink.tsx    | 26 +++------
 packages/web/src/hooks/useRequiresAccount.ts  | 55 ++++++++++++++-----
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/packages/web/src/components/nav/desktop/LeftNavLink.tsx b/packages/web/src/components/nav/desktop/LeftNavLink.tsx
index 782dd4e5c3a..e244ae845dd 100644
--- a/packages/web/src/components/nav/desktop/LeftNavLink.tsx
+++ b/packages/web/src/components/nav/desktop/LeftNavLink.tsx
@@ -22,16 +22,7 @@ export const LeftNavLink = (props: LeftNavLinkProps) => {
 
   const requiresAccountOnClick = useRequiresAccountOnClick(
     (e) => {
-      onClick?.(e)
-    },
-    [onClick, to],
-    undefined,
-    undefined,
-    restriction
-  )
-
-  const handleClick = (e?: React.MouseEvent<Element>) => {
-    if (!!e && !e.defaultPrevented) {
+      // Only dispatch analytics if we're actually navigating
       if (to) {
         dispatch(
           make(Name.LINK_CLICKING, {
@@ -40,15 +31,16 @@ export const LeftNavLink = (props: LeftNavLinkProps) => {
           })
         )
       }
-      return requiresAccountOnClick(e)
-    } else {
-      e?.preventDefault()
-    }
-    return undefined
-  }
+      onClick?.(e)
+    },
+    [onClick, to, dispatch],
+    undefined,
+    undefined,
+    restriction
+  )
 
   return (
-    <NavLink to={to ?? ''} onClick={handleClick} draggable={false}>
+    <NavLink to={to ?? ''} onClick={requiresAccountOnClick} draggable={false}>
       <NavItem
         {...other}
         isSelected={to ? location.pathname.startsWith(to) : false}
diff --git a/packages/web/src/hooks/useRequiresAccount.ts b/packages/web/src/hooks/useRequiresAccount.ts
index 39909fc222b..0d2d8950872 100644
--- a/packages/web/src/hooks/useRequiresAccount.ts
+++ b/packages/web/src/hooks/useRequiresAccount.ts
@@ -1,4 +1,4 @@
-import { useEffect, MouseEvent as ReactMouseEvent, useCallback } from 'react'
+import { MouseEvent as ReactMouseEvent, useCallback, useEffect } from 'react'
 
 import { Status } from '@audius/common/models'
 import { accountSelectors } from '@audius/common/store'
@@ -13,8 +13,7 @@ import {
 } from 'common/store/pages/signon/actions'
 import { useSelector } from 'utils/reducer'
 
-const { getAccountStatus, getIsAccountComplete, getHasAccount } =
-  accountSelectors
+const { getAccountStatus, getIsAccountComplete } = accountSelectors
 
 export type RestrictionType = 'none' | 'guest' | 'account'
 
@@ -39,7 +38,6 @@ export const useRequiresAccountCallback = <T extends (...args: any) => any>(
   returnRouteOverride?: string,
   restriction: RestrictionType = 'account'
 ) => {
-  const hasAccount = useSelector(getHasAccount)
   const isAccountComplete = useSelector(getIsAccountComplete)
   const accountStatus = useSelector(getAccountStatus)
   const dispatch = useDispatch()
@@ -48,26 +46,53 @@ export const useRequiresAccountCallback = <T extends (...args: any) => any>(
 
   return useCallback(
     (...args: Parameters<T>) => {
-      if (
-        accountStatus !== Status.LOADING &&
-        !canAccess(restriction, hasAccount, isAccountComplete)
-      ) {
-        // Prevent the default event from occuring
+      // Wait for account status to be loaded before proceeding
+      if (accountStatus === Status.LOADING || accountStatus === Status.IDLE) {
         if (args[0]?.preventDefault) {
           args[0].preventDefault()
         }
+        return
+      }
+
+      const canAccessRoute = canAccess(
+        restriction,
+        accountStatus === Status.SUCCESS,
+        isAccountComplete
+      )
+
+      if (!canAccessRoute) {
+        // Prevent the default event from occurring
+        if (args[0]?.preventDefault) {
+          args[0].preventDefault()
+        }
+
+        // Set up return route before opening sign on
         dispatch(updateRouteOnExit(returnRoute))
         dispatch(updateRouteOnCompletion(returnRoute))
         dispatch(openSignOn(/** signIn */ false))
-        dispatch(showRequiresAccountToast(hasAccount && !isAccountComplete))
+        dispatch(
+          showRequiresAccountToast(
+            accountStatus === Status.SUCCESS && !isAccountComplete
+          )
+        )
         onOpenAuthModal?.()
-      } else {
-        // eslint-disable-next-line n/no-callback-literal
-        return callback(...args)
+        return
       }
+
+      // eslint-disable-next-line n/no-callback-literal
+      return callback(...args)
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hasAccount, isAccountComplete, dispatch, restriction, ...deps]
+    [
+      accountStatus,
+      restriction,
+      isAccountComplete,
+      callback,
+      dispatch,
+      returnRoute,
+      onOpenAuthModal,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps
+    ]
   )
 }