From 43dd15f3958160a625549bfd6de9adbe3d6e67b1 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 20 Dec 2023 15:30:28 -0300 Subject: [PATCH] fix: urls formed by get url filters function (#1473) * fix: urls formed by get url filters function * fix: prevent navigation and add function to reuse --- src/components/Common/Typography/Link.tsx | 3 ++- .../GrantRequestDueDiligenceSection.tsx | 5 ++++- src/helpers/browser.ts | 4 ++++ src/helpers/index.ts | 12 +++++++++--- src/hooks/usePreventNavigation.ts | 14 +++++++++----- 5 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/components/Common/Typography/Link.tsx b/src/components/Common/Typography/Link.tsx index 6538aaa74..31614c53f 100644 --- a/src/components/Common/Typography/Link.tsx +++ b/src/components/Common/Typography/Link.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames' import { withPrefix } from 'gatsby' +import { toGovernancePathname } from '../../../helpers/browser' import { navigate } from '../../../utils/locations' import './Link.css' @@ -30,7 +31,7 @@ export default function Link({ target, rel, href, onClick, className, ...props } const isBlank = e.currentTarget.target === TARGET_BLANK if (isLocal && href && !isBlank && !isMetaClick(e)) { - const internalPath = href.replace('/governance', '') + const internalPath = toGovernancePathname(href) e.preventDefault() navigate(internalPath) } diff --git a/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx b/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx index fa653b81e..bfe14f74f 100644 --- a/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx +++ b/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx @@ -102,7 +102,10 @@ export default function GrantRequestDueDiligenceSection({ key={`${item.concept}-${index}`} title={item.concept} subtitle={t('page.proposal_view.grant.breakdown_subtitle', { duration: item.duration })} - extra={Number(item.estimatedBudget).toLocaleString(undefined, CURRENCY_FORMAT_OPTIONS)} + extra={Number(item.estimatedBudget).toLocaleString( + undefined, + CURRENCY_FORMAT_OPTIONS as Intl.NumberFormatOptions + )} onClick={() => { setSelectedBudgetBreakdownConcept(item) setModalOpen(true) diff --git a/src/helpers/browser.ts b/src/helpers/browser.ts index a8a494943..a96367982 100644 --- a/src/helpers/browser.ts +++ b/src/helpers/browser.ts @@ -10,3 +10,7 @@ export function scrollToAnchor(anchor: string, pixelsOverAnchor = 0) { }) } } + +export function toGovernancePathname(pathname: string) { + return pathname.replace('/governance', '') +} diff --git a/src/helpers/index.ts b/src/helpers/index.ts index f830ae6e7..bfaad3ded 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -1,3 +1,5 @@ +import { FormatNumberOptions } from 'react-intl' + import { ChainId } from '@dcl/schemas/dist/dapps/chain-id' import logger from 'decentraland-gatsby/dist/entities/Development/logger' import isEthereumAddress from 'validator/lib/isEthereumAddress' @@ -6,13 +8,15 @@ import isURL from 'validator/lib/isURL' import { DEFAULT_CHAIN_ID } from '../constants' import { clientEnv } from '../utils/clientEnv' +import { toGovernancePathname } from './browser' + export const CURRENCY_FORMAT_OPTIONS = { style: 'currency', currency: 'USD', maximumFractionDigits: 0, -} as any +} as FormatNumberOptions -export function inBackground(fun: () => Promise) { +export function inBackground(fun: () => Promise) { Promise.resolve() .then(fun) .then((result) => logger.log('Completed background task', { result: JSON.stringify(result) })) @@ -53,7 +57,8 @@ export function getUrlFilters(filterKey: string, params: URLSearchParams, val newParams.delete('subtype') } const stringParams = newParams.toString() - return `${location.pathname}${stringParams === '' ? '' : '?' + stringParams}` + const pathname = toGovernancePathname(location.pathname) + return `${pathname}${stringParams === '' ? '' : '?' + stringParams}` } export const fetchWithTimeout = async (url: string, timeout = 10000, options?: RequestInit) => { @@ -75,6 +80,7 @@ export const fetchWithTimeout = async (url: string, timeout = 10000, options?: R export const isHttpsURL = (url: string) => isURL(url, { protocols: ['https'], require_protocol: true }) +// eslint-disable-next-line @typescript-eslint/no-explicit-any export function disableOnWheelInput(event: any) { // Prevent the input value change event.target.blur() diff --git a/src/hooks/usePreventNavigation.ts b/src/hooks/usePreventNavigation.ts index f1e5fa11d..d7e1e7c0e 100644 --- a/src/hooks/usePreventNavigation.ts +++ b/src/hooks/usePreventNavigation.ts @@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react' import { globalHistory, useLocation } from '@reach/router' +import { toGovernancePathname } from '../helpers/browser' import locations, { navigate } from '../utils/locations' import useFormatMessage from './useFormatMessage' @@ -16,7 +17,8 @@ function usePreventNavigation(isActive: boolean) { event.preventDefault() event.returnValue = '' } else if (!window.confirm(t('navigation.exit'))) { - navigate(`${currentLocation.pathname}${currentLocation.search}`) + const pathname = toGovernancePathname(currentLocation.pathname) + navigate(`${pathname}${currentLocation.search}`) } else { confirmBack.current = true navigate(location) @@ -31,17 +33,19 @@ function usePreventNavigation(isActive: boolean) { window.addEventListener('beforeunload', handleBeforeUnload) - const unsuscribe = globalHistory.listen(({ action, location }) => { + const unsubscribe = globalHistory.listen(({ action, location }) => { + const pathname = toGovernancePathname(location.pathname) + if ( isActive && - (action === 'POP' || (action === 'PUSH' && location.pathname === locations.proposals() && !confirmBack.current)) + (action === 'POP' || (action === 'PUSH' && pathname === locations.proposals() && !confirmBack.current)) ) { - preventNavigation(`${location.pathname}${location.search}`) + preventNavigation(`${pathname}${location.search}`) } }) return () => { - unsuscribe() + unsubscribe() window.removeEventListener('beforeunload', handleBeforeUnload) } // eslint-disable-next-line react-hooks/exhaustive-deps