Add url param saving to Stream and Project listing as well

Author: tumppi

src/components/ActionBar.tsx

@@ -23,7 +23,7 @@ import { ProjectFilter } from '~/types'
 import { useCurrentChainSymbolicName } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
 
-enum TabOption {
+export enum TabOption {
     Any = 'all',
     Owned = 'my',
 }
@@ -32,7 +32,7 @@ export function isOwnedTabOption(value: unknown) {
     return value === TabOption.Owned
 }
 
-function isTabOption(value: unknown): value is TabOption {
+export function isTabOption(value: unknown): value is TabOption {
     return value === TabOption.Any || value === TabOption.Owned
 }
 

src/hooks/useUrlParams.ts

@@ -32,8 +32,10 @@ export function useUrlParams<T extends string>(params: UrlParamConfig<T>[]) {
                 const newParams = new URLSearchParams(prevParams)
 
                 params.forEach(({ param, value, defaultValue }) => {
-                    if (value !== defaultValue) {
-                        newParams.set(param, value || defaultValue)
+                    if (value === '' || value === undefined) {
+                        newParams.delete(param)
+                    } else if (value !== defaultValue) {
+                        newParams.set(param, value)
                     } else {
                         newParams.delete(param)
                     }

src/pages/OperatorsPage.tsx

@@ -48,16 +48,17 @@ export const OperatorsPage = () => {
     const wallet = useWalletAccount()
     const isWalletLoading = useIsWalletLoading()
 
-    const { orderBy, orderDirection, setOrder } = useTableOrder<string>({
-        orderBy: DEFAULT_ORDER_BY,
-        orderDirection: DEFAULT_ORDER_DIRECTION,
-    })
-
     const [params] = useSearchParams()
     const tab = params.get('tab')
     const selectedTab = isTabOption(tab) ? tab : DEFAULT_TAB
     const [searchQuery, setSearchQuery] = useState(params.get('search') || '')
 
+    const { orderBy, orderDirection, setOrder } = useTableOrder<string>({
+        orderBy: params.get('orderBy') || DEFAULT_ORDER_BY,
+        orderDirection:
+            (params.get('orderDir') as OrderDirection) || DEFAULT_ORDER_DIRECTION,
+    })
+
     useUrlParams([
         {
             param: 'tab',

src/pages/ProjectListingPage.tsx

@@ -2,7 +2,11 @@ import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'
 import isEqual from 'lodash/isEqual'
 import React, { useReducer } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import ActionBar, { isOwnedTabOption } from '~/components/ActionBar'
+import ActionBar, {
+    isOwnedTabOption,
+    isTabOption,
+    TabOption,
+} from '~/components/ActionBar'
 import Layout from '~/components/Layout'
 import { MaxSearchPhraseLength, Minute } from '~/consts'
 import { Projects, ProjectsContainer } from '~/marketplace/components/Projects'
@@ -13,12 +17,13 @@ import useModal from '~/shared/hooks/useModal'
 import { useWalletAccount } from '~/shared/stores/wallet'
 import { ProjectFilter } from '~/types'
 import { useCurrentChainId } from '~/utils/chains'
+import { useUrlParams } from '~/hooks/useUrlParams'
+import { TheGraph } from '~/shared/types'
 
-const DefaultFilter: ProjectFilter = {
-    search: '',
-}
-
-const PageSize = 16
+const PAGE_SIZE = 20
+const DEFAULT_TAB = TabOption.Any
+const DEFAULT_SEARCH = ''
+const DEFAULT_TYPE = ''
 
 function filterReducer(
     state: ProjectFilter,
@@ -32,13 +37,38 @@ function filterReducer(
 }
 
 export default function ProjectListingPage() {
+    const [params] = useSearchParams()
+
+    const DefaultFilter: ProjectFilter = {
+        search: params.get('search') || DEFAULT_SEARCH,
+        type: (params.get('type') as TheGraph.ProjectType) || DEFAULT_TYPE,
+    }
+
     const [filter, setFilter] = useReducer(filterReducer, DefaultFilter)
 
     const account = useWalletAccount()
 
-    const [params] = useSearchParams()
+    const tab = params.get('tab')
+    const selectedTab = isTabOption(tab) ? tab : DEFAULT_TAB
+    const owner = isOwnedTabOption(selectedTab) ? account : undefined
 
-    const owner = isOwnedTabOption(params.get('tab')) ? account : undefined
+    useUrlParams([
+        {
+            param: 'tab',
+            value: selectedTab,
+            defaultValue: DEFAULT_TAB,
+        },
+        {
+            param: 'search',
+            value: filter.search,
+            defaultValue: DEFAULT_SEARCH,
+        },
+        {
+            param: 'type',
+            value: filter.type,
+            defaultValue: DEFAULT_TYPE,
+        },
+    ])
 
     const { api: createProductModal } = useModal('marketplace.createProduct')
 
@@ -51,7 +81,7 @@ export default function ProjectListingPage() {
 
             const params = {
                 chainId: currentChainId,
-                first: PageSize,
+                first: PAGE_SIZE,
                 owner,
                 projectType,
                 skip,

src/pages/SponsorshipsPage.tsx

@@ -28,6 +28,7 @@ import {
 } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
 import { useUrlParams } from '~/hooks/useUrlParams'
+import { OrderDirection } from '~/types'
 
 enum TabOption {
     AllSponsorships = 'all',
@@ -61,8 +62,9 @@ export const SponsorshipsPage = () => {
     const isWalletLoading = useIsWalletLoading()
 
     const { orderBy, orderDirection, setOrder } = useTableOrder<string>({
-        orderBy: DEFAULT_ORDER_BY,
-        orderDirection: DEFAULT_ORDER_DIRECTION,
+        orderBy: params.get('orderBy') || DEFAULT_ORDER_BY,
+        orderDirection:
+            (params.get('orderDir') as OrderDirection) || DEFAULT_ORDER_DIRECTION,
     })
 
     const tab = params.get('tab')

src/pages/StreamsPage.tsx

@@ -27,15 +27,22 @@ import { useWalletAccount } from '~/shared/stores/wallet'
 import { COLORS, TABLET } from '~/shared/utils/styled'
 import { useCurrentChainFullName, useCurrentChainSymbolicName } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
+import { useUrlParams } from '~/hooks/useUrlParams'
+import { OrderDirection } from '~/types'
 
-export function StreamsPage() {
-    const [search, setSearch] = useState('')
+const DEFAULT_ORDER_BY = 'peerCount'
+const DEFAULT_ORDER_DIRECTION = 'desc'
+const DEFAULT_TAB = StreamsTabOption.All
+const DEFAULT_SEARCH = ''
 
+export function StreamsPage() {
     const [params] = useSearchParams()
 
+    const [search, setSearch] = useState(params.get('search') || DEFAULT_SEARCH)
+
     const tabParam = params.get('tab')
 
-    const tab = isStreamsTabOption(tabParam) ? tabParam : StreamsTabOption.All
+    const tab = isStreamsTabOption(tabParam) ? tabParam : DEFAULT_TAB
 
     const navigate = useNavigate()
 
@@ -55,10 +62,37 @@ export function StreamsPage() {
     )
 
     const {
-        orderBy = 'peerCount',
-        orderDirection = 'desc',
+        orderBy = DEFAULT_ORDER_BY,
+        orderDirection = DEFAULT_ORDER_DIRECTION,
         setOrder,
-    } = useTableOrder<StreamsOrderBy>()
+    } = useTableOrder<StreamsOrderBy>({
+        orderBy: (params.get('orderBy') as StreamsOrderBy) || DEFAULT_ORDER_BY,
+        orderDirection:
+            (params.get('orderDir') as OrderDirection) || DEFAULT_ORDER_DIRECTION,
+    })
+
+    useUrlParams([
+        {
+            param: 'tab',
+            value: tab,
+            defaultValue: DEFAULT_TAB,
+        },
+        {
+            param: 'search',
+            value: search,
+            defaultValue: DEFAULT_SEARCH,
+        },
+        {
+            param: 'orderBy',
+            value: orderBy,
+            defaultValue: DEFAULT_ORDER_BY,
+        },
+        {
+            param: 'orderDir',
+            value: orderDirection,
+            defaultValue: DEFAULT_ORDER_DIRECTION,
+        },
+    ])
 
     const streamsQuery = useStreamsQuery({
         orderBy,