fix: projects and proposal filters (#18)

decentraland · Apr 25, 2024 · 898657b · 898657b
1 parent f5c7b11
commit 898657b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/src/components/Common/Typography/Link.tsx b/src/components/Common/Typography/Link.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 
 import classNames from 'classnames'
 
-import { isLocalLink, isMetaClick, toGovernancePathname } from '../../../helpers/browser'
+import { isLocalLink, isMetaClick } from '../../../helpers/browser'
 
 import './Link.css'
 
@@ -22,9 +22,8 @@ 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 = toGovernancePathname(href)
       e.preventDefault()
-      navigate(internalPath)
+      navigate(href)
     }
   }
 

diff --git a/src/components/Search/CategoryFilter.tsx b/src/components/Search/CategoryFilter.tsx
@@ -8,6 +8,7 @@ import useFormatMessage from '../../hooks/useFormatMessage'
 import useURLSearchParams from '../../hooks/useURLSearchParams'
 import { NewGrantCategory, SubtypeAlternativeOptions, toGrantSubtype } from '../../types/grants'
 import { BiddingProcessType, GovernanceProcessType, ProposalType } from '../../types/proposals'
+import locations from '../../utils/locations'
 import { categoryIcons } from '../Category/CategoryBanner'
 import CategoryOption from '../Category/CategoryOption'
 import All from '../Icon/ProposalCategories/All'
@@ -61,7 +62,7 @@ function getGrantSubtypeHref(href: string | undefined, subtype: string) {
   } else {
     url.searchParams.set('subtype', subtype)
   }
-  const newHref = url.pathname + '?' + url.searchParams.toString()
+  const newHref = '?' + url.searchParams.toString()
   return newHref
 }
 
@@ -103,21 +104,25 @@ export default function CategoryFilter({
       {showAllFilter && (
         <CategoryOption
           type="all_proposals"
-          href={getUrlFilters(FILTER_KEY, params)}
+          href={locations.proposals(getUrlFilters(FILTER_KEY, params))}
           active={!type}
           className="CategoryFilter__CategoryOption"
           icon={<All />}
           title={t(`category.all_proposals_title`)}
         />
       )}
       {filters.map((filter, index) => {
+        const isAllProjectsSelected = filter === 'all_projects' && !params.toString().includes('type')
+        const newParams = getUrlFilters(FILTER_KEY, params, filter === 'all_projects' ? undefined : filter)
+        const projectParams = newParams ? `?${newParams.toString()}` : ''
+
         return (
           <CategoryOption
             key={'category_filter' + index}
             className="CategoryFilter__CategoryOption"
             type={filter}
-            href={getUrlFilters(FILTER_KEY, params, filter === ProjectTypeFilter.All ? undefined : filter)}
-            active={type === filter}
+            href={areProposals ? locations.proposals(newParams) : projectParams}
+            active={type === filter || isAllProjectsSelected}
             count={categoryCount?.[filter]}
             icon={getCategoryIcon(filter, 24)}
             title={t(`category.${filter}_title`)}
@@ -141,12 +146,12 @@ export default function CategoryFilter({
             title={t(`category.governance_process_title`)}
             subcategories={GOVERNANCE_GROUP}
             isSubcategoryActive={isGroupActive}
-            subcategoryHref={(_, subcategory) => getUrlFilters(FILTER_KEY, params, subcategory)}
+            subcategoryHref={(_, subcategory) => locations.proposals(getUrlFilters(FILTER_KEY, params, subcategory))}
           />
           <CategoryOption
             className="CategoryFilter__CategoryOption"
             type={ProposalType.Grant}
-            href={getUrlFilters(FILTER_KEY, params, ProposalType.Grant)}
+            href={locations.proposals(getUrlFilters(FILTER_KEY, params, ProposalType.Grant))}
             active={type === ProposalType.Grant}
             count={categoryCount?.[ProposalType.Grant]}
             icon={getCategoryIcon(ProposalType.Grant, 24)}
@@ -167,7 +172,7 @@ export default function CategoryFilter({
             title={t(`category.${ProjectTypeFilter.BiddingAndTendering}_title`)}
             subcategories={BIDDING_GROUP}
             isSubcategoryActive={isGroupActive}
-            subcategoryHref={(_, subcategory) => getUrlFilters(FILTER_KEY, params, subcategory)}
+            subcategoryHref={(_, subcategory) => locations.proposals(getUrlFilters(FILTER_KEY, params, subcategory))}
           />
         </>
       )}

diff --git a/src/components/Search/QuarterFilter.tsx b/src/components/Search/QuarterFilter.tsx
@@ -81,12 +81,12 @@ function QuarterFilter() {
               setSelectedYear(undefined)
               params.delete('year')
               params.delete('quarter')
-              navigate(`/projects/?${params.toString()}`)
+              navigate(`/projects?${params.toString()}`)
             } else {
               setSelectedYear(Number(value))
               params.set('year', String(value))
               params.delete('quarter')
-              navigate(`/projects/?${params.toString()}`)
+              navigate(`/projects?${params.toString()}`)
             }
           }}
           value={selectedYear}

diff --git a/src/components/Search/StatusFilter.tsx b/src/components/Search/StatusFilter.tsx
@@ -6,6 +6,7 @@ import useFormatMessage from '../../hooks/useFormatMessage'
 import useURLSearchParams from '../../hooks/useURLSearchParams'
 import { ProjectStatus } from '../../types/grants'
 import { ProposalStatus } from '../../types/proposals'
+import locations from '../../utils/locations'
 
 import { FilterProps } from './CategoryFilter'
 import FilterContainer from './FilterContainer'
@@ -20,18 +21,25 @@ export default function StatusFilter({ statusType }: FilterProps & { statusType:
   const params = useURLSearchParams()
   const status = params.get(FILTER_KEY)
   const isGrantFilter = isEqual(statusType, ProjectStatus)
+  const newParams = getUrlFilters(FILTER_KEY, params)
 
   return (
     <FilterContainer title={t('navigation.search.status_filter_title')}>
-      <FilterLabel label={t(`status.all`)} href={getUrlFilters(FILTER_KEY, params)} active={!status} />
+      <FilterLabel
+        label={t(`status.all`)}
+        href={isGrantFilter ? `?${newParams.toString()}` : locations.proposals(newParams)}
+        active={!status}
+      />
       {Object.values(statusType).map((value, index) => {
         const label = toSnakeCase(value)
         if (ProposalStatus.Deleted !== value) {
+          const newParams = getUrlFilters(FILTER_KEY, params, label)
+
           return (
             <FilterLabel
               key={'status_filter' + index}
               label={t(`${isGrantFilter ? 'grant_' : ''}status.${label}`)}
-              href={getUrlFilters(FILTER_KEY, params, label)}
+              href={isGrantFilter ? `?${newParams.toString()}` : locations.proposals(newParams)}
               active={status === label}
             />
           )

diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -44,18 +44,20 @@ export function getUncappedRoundedPercentage(value: number, total: number): numb
 }
 
 export function getUrlFilters<T>(filterKey: string, params: URLSearchParams, value?: T) {
-  if (typeof window === 'undefined') {
-    return ''
+  const newParams = new URLSearchParams(params)
+
+  if (value) {
+    newParams.set(filterKey, String(value))
+  } else {
+    newParams.delete(filterKey)
   }
 
-  const newParams = new URLSearchParams(params)
-  value ? newParams.set(filterKey, String(value)) : newParams.delete(filterKey)
   newParams.delete('page')
   if (filterKey === 'type') {
     newParams.delete('subtype')
   }
-  const stringParams = newParams.toString()
-  return `${stringParams === '' ? '' : '?' + stringParams}`
+
+  return newParams
 }
 
 export const fetchWithTimeout = async (url: string, timeout = 10000, options?: RequestInit) => {