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
decentraland · Dec 20, 2023 · 43dd15f · 43dd15f
1 parent 325b5eb
commit 43dd15f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<any>) {
+export function inBackground(fun: () => Promise<unknown>) {
   Promise.resolve()
     .then(fun)
     .then((result) => logger.log('Completed background task', { result: JSON.stringify(result) }))
@@ -53,7 +57,8 @@ export function getUrlFilters<T>(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
@@ -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
-Original file line number
+Diff line change
@@ Expand Up @@
         })
       }
     }
+    export function toGovernancePathname(pathname: string) {
+      return pathname.replace('/governance', '')
+    }