Store orderBy and orderDir in URL for operators and sponsorships pages

Author: tumppi

src/hooks/useUrlParams.ts

@@ -0,0 +1,46 @@
+import { useSearchParams } from 'react-router-dom'
+import { useEffect } from 'react'
+
+interface UrlParamConfig<T extends string> {
+    param: string
+    value: T | undefined
+    defaultValue: T
+}
+
+export function useUrlParams<T extends string>(params: UrlParamConfig<T>[]) {
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    useEffect(() => {
+        // Check if current params are different from desired params
+        let needsUpdate = false
+        const currentParams = new URLSearchParams(searchParams)
+
+        params.forEach(({ param, value, defaultValue }) => {
+            const currentValue = currentParams.get(param)
+            const targetValue = value !== defaultValue ? value || defaultValue : null
+
+            if (targetValue === null && currentValue !== null) {
+                needsUpdate = true
+            } else if (targetValue !== null && targetValue !== currentValue) {
+                needsUpdate = true
+            }
+        })
+
+        // Only update if necessary
+        if (needsUpdate) {
+            setSearchParams((prevParams) => {
+                const newParams = new URLSearchParams(prevParams)
+
+                params.forEach(({ param, value, defaultValue }) => {
+                    if (value !== defaultValue) {
+                        newParams.set(param, value || defaultValue)
+                    } else {
+                        newParams.delete(param)
+                    }
+                })
+
+                return newParams
+            })
+        }
+    }, [params, searchParams, setSearchParams])
+}

src/pages/OperatorsPage.tsx

@@ -19,7 +19,7 @@ import { useTableOrder } from '~/hooks/useTableOrder'
 import { Operator } from '~/parsers/Operator'
 import { ScrollTableCore } from '~/shared/components/ScrollTable/ScrollTable'
 import Tabs, { Tab } from '~/shared/components/Tabs'
-import { useWalletAccount } from '~/shared/stores/wallet'
+import { useIsWalletLoading, useWalletAccount } from '~/shared/stores/wallet'
 import { OrderDirection } from '~/types'
 import { saveOperator } from '~/utils'
 import {
@@ -28,34 +28,55 @@ import {
     useCurrentChainSymbolicName,
 } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
-
-const PAGE_SIZE = 20
+import { useUrlParams } from '~/hooks/useUrlParams'
 
 enum TabOption {
     AllOperators = 'all',
     MyDelegations = 'my',
 }
 
+const PAGE_SIZE = 20
+const DEFAULT_ORDER_BY = 'totalValue'
+const DEFAULT_ORDER_DIRECTION = 'desc'
+const DEFAULT_TAB = TabOption.AllOperators
+
 function isTabOption(value: unknown): value is TabOption {
     return value === TabOption.AllOperators || value === TabOption.MyDelegations
 }
 
 export const OperatorsPage = () => {
-    const [params] = useSearchParams()
-
-    const tab = params.get('tab')
-
-    const selectedTab = isTabOption(tab) ? tab : TabOption.AllOperators
-
     const [searchQuery, setSearchQuery] = useState('')
 
     const wallet = useWalletAccount()
+    const isWalletLoading = useIsWalletLoading()
 
     const { orderBy, orderDirection, setOrder } = useTableOrder<string>({
-        orderBy: 'totalValue',
-        orderDirection: 'desc',
+        orderBy: DEFAULT_ORDER_BY,
+        orderDirection: DEFAULT_ORDER_DIRECTION,
     })
 
+    const [params] = useSearchParams()
+    const tab = params.get('tab')
+    const selectedTab = isTabOption(tab) ? tab : DEFAULT_TAB
+
+    useUrlParams([
+        {
+            param: 'tab',
+            value: selectedTab,
+            defaultValue: DEFAULT_TAB,
+        },
+        {
+            param: 'orderBy',
+            value: orderBy,
+            defaultValue: DEFAULT_ORDER_BY,
+        },
+        {
+            param: 'orderDir',
+            value: orderDirection,
+            defaultValue: DEFAULT_ORDER_DIRECTION,
+        },
+    ])
+
     const allOperatorsQuery = useAllOperatorsQuery({
         batchSize: PAGE_SIZE,
         searchQuery,
@@ -83,7 +104,7 @@ export const OperatorsPage = () => {
     const navigate = useNavigate()
 
     useEffect(() => {
-        if (!wallet) {
+        if (!wallet && !isWalletLoading) {
             navigate(
                 R.operators(
                     routeOptions(chainName, {
@@ -92,7 +113,7 @@ export const OperatorsPage = () => {
                 ),
             )
         }
-    }, [wallet, navigate, chainName])
+    }, [wallet, isWalletLoading, navigate, chainName])
 
     return (
         <Layout>

src/pages/SponsorshipsPage.tsx

@@ -20,43 +20,64 @@ import {
 } from '~/hooks/sponsorships'
 import { useTableOrder } from '~/hooks/useTableOrder'
 import Tabs, { Tab } from '~/shared/components/Tabs'
-import { useWalletAccount } from '~/shared/stores/wallet'
+import { useWalletAccount, useIsWalletLoading } from '~/shared/stores/wallet'
 import {
     useCurrentChainFullName,
     useCurrentChainId,
     useCurrentChainSymbolicName,
 } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
-
-const PAGE_SIZE = 20
+import { useUrlParams } from '~/hooks/useUrlParams'
 
 enum TabOption {
     AllSponsorships = 'all',
     MySponsorships = 'my',
 }
 
+const PAGE_SIZE = 20
+const DEFAULT_ORDER_BY = 'remainingWei'
+const DEFAULT_ORDER_DIRECTION = 'desc'
+const DEFAULT_TAB = TabOption.AllSponsorships
+
 function isTabOption(value: unknown): value is TabOption {
     return value === TabOption.AllSponsorships || value === TabOption.MySponsorships
 }
 
 export const SponsorshipsPage = () => {
-    const [params] = useSearchParams()
-
-    const tab = params.get('tab')
-
-    const selectedTab = isTabOption(tab) ? tab : TabOption.AllSponsorships
-
     const [searchQuery, setSearchQuery] = useState('')
 
     const [filters, setFilters] = useState<SponsorshipFilters>(defaultFilters)
 
     const wallet = useWalletAccount()
+    const isWalletLoading = useIsWalletLoading()
 
     const { orderBy, orderDirection, setOrder } = useTableOrder<string>({
-        orderBy: 'remainingWei',
-        orderDirection: 'desc',
+        orderBy: DEFAULT_ORDER_BY,
+        orderDirection: DEFAULT_ORDER_DIRECTION,
     })
 
+    const [params] = useSearchParams()
+    const tab = params.get('tab')
+    const selectedTab = isTabOption(tab) ? tab : DEFAULT_TAB
+
+    useUrlParams([
+        {
+            param: 'tab',
+            value: selectedTab,
+            defaultValue: DEFAULT_TAB,
+        },
+        {
+            param: 'orderBy',
+            value: orderBy,
+            defaultValue: DEFAULT_ORDER_BY,
+        },
+        {
+            param: 'orderDir',
+            value: orderDirection,
+            defaultValue: DEFAULT_ORDER_DIRECTION,
+        },
+    ])
+
     const allSponsorshipsQuery = useAllSponsorshipsQuery({
         pageSize: PAGE_SIZE,
         searchQuery,
@@ -78,7 +99,7 @@ export const SponsorshipsPage = () => {
     const chainName = useCurrentChainSymbolicName()
 
     useEffect(() => {
-        if (!wallet) {
+        if (!wallet && !isWalletLoading) {
             navigate(
                 R.sponsorships(
                     routeOptions(chainName, {
@@ -87,7 +108,7 @@ export const SponsorshipsPage = () => {
                 ),
             )
         }
-    }, [wallet, navigate, chainName])
+    }, [wallet, navigate, chainName, isWalletLoading])
 
     const createSponsorship = useCreateSponsorship()
 

src/shared/stores/wallet.ts

@@ -161,6 +161,7 @@ export async function getWalletAccount({
 interface WalletStore {
     account: string | undefined
     ens: Record<string, string | undefined>
+    isLoading: boolean
 }
 
 const useWalletStore = create<WalletStore>((set, get) => {
@@ -219,13 +220,20 @@ const useWalletStore = create<WalletStore>((set, get) => {
             onAccountsChange(accounts)
         } catch (e) {
             console.warn('Provider setup failed', e)
+        } finally {
+            set((current) =>
+                produce(current, (next) => {
+                    next.isLoading = false
+                }),
+            )
         }
     })
 
     return {
         account: undefined,
 
         ens: {},
+        isLoading: true,
     }
 })
 
@@ -238,6 +246,14 @@ export function useWalletAccount() {
     return useWalletStore().account
 }
 
+/**
+ * A hook that gives you the loading state of the wallet.
+ * @returns a boolean value indicating whether the wallet is loading.
+ */
+export function useIsWalletLoading() {
+    return useWalletStore().isLoading
+}
+
 /**
  * A hook that gives you an ENS domain for an account address.
  * @returns either an ENS domain name, or an empty string.