From f31f274218091257e6c5b3778313ea3e8000f5d9 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 26 Jul 2023 16:54:03 +0100 Subject: [PATCH] fix: use useLocationState for cleaner code, closes #4028 --- src/app/common/hooks/use-location-state.ts | 4 ---- src/app/components/receive/receive-collectible.tsx | 10 +++++----- .../collectibles/components/bitcoin/inscription.tsx | 5 +++-- .../features/settings-dropdown/settings-dropdown.tsx | 8 +++++--- src/app/pages/home/components/home-tabs.tsx | 5 +++-- src/app/pages/home/home.tsx | 3 ++- .../components/receive-tokens.layout.tsx | 9 +++------ src/app/pages/receive-tokens/receive-modal.tsx | 7 +++---- 8 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/app/common/hooks/use-location-state.ts b/src/app/common/hooks/use-location-state.ts index db1a95f496e..32ea45c1aef 100644 --- a/src/app/common/hooks/use-location-state.ts +++ b/src/app/common/hooks/use-location-state.ts @@ -5,15 +5,11 @@ import get from 'lodash.get'; import { isUndefined } from '@shared/utils'; -export function useLocationState(propName: string): string | undefined; -export function useLocationState(propName: string, defaultValue: string): string; export function useLocationState(propName: string, defaultValue?: string) { const location = useLocation(); return get(location, `state.${propName}`, defaultValue); } -export function useLocationStateWithCache(propName: string): T | undefined; -export function useLocationStateWithCache(propName: string, defaultValue: T): T; export function useLocationStateWithCache(propName: string, defaultValue?: T) { const location = useLocation(); const [value, setValue] = useState(defaultValue); diff --git a/src/app/components/receive/receive-collectible.tsx b/src/app/components/receive/receive-collectible.tsx index 849b5c3233d..85844cca0a3 100644 --- a/src/app/components/receive/receive-collectible.tsx +++ b/src/app/components/receive/receive-collectible.tsx @@ -1,14 +1,14 @@ import toast from 'react-hot-toast'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import BitcoinStampImg from '@assets/images/bitcoin-stamp.png'; import { Box, Stack, useClipboard } from '@stacks/ui'; import { HomePageSelectors } from '@tests/selectors/home.selectors'; -import get from 'lodash.get'; import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; import { OrdinalIcon } from '@app/components/icons/ordinal-icon'; import { useZeroIndexTaprootAddress } from '@app/query/bitcoin/ordinals/use-zero-index-taproot-address'; @@ -19,9 +19,9 @@ import { ReceiveCollectibleItem } from './receive-collectible-item'; export function ReceiveCollectible() { const analytics = useAnalytics(); - const location = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); + const accountIndex = useLocationState('accountIndex'); const navigate = useNavigate(); - const accountIndex = get(location.state, 'accountIndex', undefined); const btcAddressNativeSegwit = useCurrentAccountNativeSegwitAddressIndexZero(); const btcAddressTaproot = useZeroIndexTaprootAddress(accountIndex); @@ -55,7 +55,7 @@ export function ReceiveCollectible() { onCopyAddress={() => { void analytics.track('select_inscription_to_add_new_collectible'); navigate(RouteUrls.ReceiveCollectibleOrdinal, { - state: { btcAddressTaproot, backgroundLocation: location.state.backgroundLocation }, + state: { btcAddressTaproot, backgroundLocation }, }); }} title="Ordinal inscription" diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx index 079ce31291d..2431b80e080 100644 --- a/src/app/features/collectibles/components/bitcoin/inscription.tsx +++ b/src/app/features/collectibles/components/bitcoin/inscription.tsx @@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { Inscription as InscriptionType } from '@shared/models/inscription.model'; import { RouteUrls } from '@shared/route-urls'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { OrdinalIconFull } from '@app/components/icons/ordinal-icon-full'; import { OrdinalMinimalIcon } from '@app/components/icons/ordinal-minimal-icon'; @@ -18,11 +19,11 @@ interface InscriptionProps { export function Inscription({ rawInscription }: InscriptionProps) { const inscription = convertInscriptionToSupportedInscriptionType(rawInscription); const navigate = useNavigate(); - const location = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); function openSendInscriptionModal() { navigate(RouteUrls.SendOrdinalInscription, { - state: { inscription, backgroundLocation: location }, + state: { inscription, backgroundLocation }, }); } diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/src/app/features/settings-dropdown/settings-dropdown.tsx index 9e859e9cdb9..71848890bfb 100644 --- a/src/app/features/settings-dropdown/settings-dropdown.tsx +++ b/src/app/features/settings-dropdown/settings-dropdown.tsx @@ -11,6 +11,7 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useDrawers } from '@app/common/hooks/use-drawers'; import { useKeyActions } from '@app/common/hooks/use-key-actions'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { useModifierKey } from '@app/common/hooks/use-modifier-key'; import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside'; import { useWalletType } from '@app/common/use-wallet-type'; @@ -47,6 +48,7 @@ export function SettingsDropdown() { const key = useCurrentKeyDetails(); const { isPressed: showAdvancedMenuOptions } = useModifierKey('alt', 120); const location = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); const handleClose = useCallback(() => setIsShowingSettings(false), [setIsShowingSettings]); @@ -97,7 +99,7 @@ export function SettingsDropdown() { void analytics.track('click_change_theme_menu_item'); navigate(RouteUrls.ChangeTheme, { relative: 'path', - state: { backgroundLocation: location }, + state: { backgroundLocation }, }); })} > @@ -152,7 +154,7 @@ export function SettingsDropdown() { void analytics.track('click_change_network_menu_item'); navigate(RouteUrls.SelectNetwork, { relative: 'path', - state: { backgroundLocation: location }, + state: { backgroundLocation }, }); })} > @@ -186,7 +188,7 @@ export function SettingsDropdown() { onClick={wrappedCloseCallback(() => navigate(RouteUrls.SignOutConfirm, { relative: 'path', - state: { backgroundLocation: location }, + state: { backgroundLocation }, }) )} data-testid="settings-sign-out" diff --git a/src/app/pages/home/components/home-tabs.tsx b/src/app/pages/home/components/home-tabs.tsx index 2c84f1a5a1c..3e998d0ebbc 100644 --- a/src/app/pages/home/components/home-tabs.tsx +++ b/src/app/pages/home/components/home-tabs.tsx @@ -6,6 +6,7 @@ import type { StackProps } from '@stacks/ui'; import { RouteUrls } from '@shared/route-urls'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { Tabs } from '@app/components/tabs'; @@ -15,8 +16,8 @@ interface HomeTabsProps extends StackProps { // TODO #4013: Abstract this to generic RouteTab once choose-fee-tab updated export function HomeTabs({ children }: HomeTabsProps) { const navigate = useNavigate(); - const { pathname, state: locationState } = useLocation(); - const backgroundLocation = locationState?.backgroundLocation; + const { pathname } = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); const tabs = useMemo( () => [ diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index d280e58cab6..48574353665 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -4,6 +4,7 @@ import { RouteUrls } from '@shared/route-urls'; import { useTrackFirstDeposit } from '@app/common/hooks/analytics/transactions-analytics.hooks'; import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { useOnMount } from '@app/common/hooks/use-on-mount'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { Header } from '@app/components/header'; @@ -31,7 +32,7 @@ function HomeContainer({ account }: HomeContainerProps) { const navigate = useNavigate(); const location = useLocation(); - const backgroundLocation = location?.state?.backgroundLocation; + const backgroundLocation = useLocationState('backgroundLocation'); useTrackFirstDeposit(); useRouteHeader( diff --git a/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx b/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx index d3d6e71b8f5..8446f828605 100644 --- a/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx @@ -1,9 +1,10 @@ import { FiCopy } from 'react-icons/fi'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Box, Button, Flex, Text, color } from '@stacks/ui'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { AddressDisplayer } from '@app/components/address-displayer/address-displayer'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { Title } from '@app/components/typography'; @@ -21,11 +22,7 @@ interface ReceiveTokensLayoutProps { export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { const { address, accountName, onCopyAddressToClipboard, title, warning, hasSubtitle } = props; const navigate = useNavigate(); - const { - state: { - backgroundLocation: { pathname }, - }, - } = useLocation(); + const { pathname } = useLocationState('backgroundLocation'); return ( navigate(pathname)}> diff --git a/src/app/pages/receive-tokens/receive-modal.tsx b/src/app/pages/receive-tokens/receive-modal.tsx index 3f7c5d8f97d..ed053f2505c 100644 --- a/src/app/pages/receive-tokens/receive-modal.tsx +++ b/src/app/pages/receive-tokens/receive-modal.tsx @@ -1,6 +1,6 @@ import toast from 'react-hot-toast'; import { FiCopy } from 'react-icons/fi'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Box, Button, Flex, Stack, useClipboard } from '@stacks/ui'; import { color, truncateMiddle } from '@stacks/ui-utils'; @@ -9,6 +9,7 @@ import { HomePageSelectors } from '@tests/selectors/home.selectors'; import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { BtcIcon } from '@app/components/icons/btc-icon'; @@ -22,9 +23,7 @@ import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain export function ReceiveModal() { const analytics = useAnalytics(); const navigate = useNavigate(); - const { - state: { backgroundLocation }, - } = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); const stxAddress = useCurrentAccountStxAddressState(); const { onCopy: onCopyStacks } = useClipboard(stxAddress);