Skip to content

Commit

Permalink
[PAY-3824] Fix navigation loop bug (#11078)
Browse files Browse the repository at this point in the history
  • Loading branch information
faridsalau authored Jan 16, 2025
1 parent c243c3a commit 11c13e6
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 32 deletions.
26 changes: 9 additions & 17 deletions packages/web/src/components/nav/desktop/LeftNavLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand All @@ -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}
Expand Down
55 changes: 40 additions & 15 deletions packages/web/src/hooks/useRequiresAccount.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'

Expand All @@ -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()
Expand All @@ -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
]
)
}

Expand Down

0 comments on commit 11c13e6

Please sign in to comment.