Merge pull request #1957 from streamr-dev/FRONT-1679-table-order-url

tumppi · web-flow · commit 5f24c5bb139c · 2024-12-03T09:53:10.000+02:00
[FRONT-1679] Keep view parameters in URL
diff --git a/src/components/ActionBars/NetworkActionBar.tsx b/src/components/ActionBars/NetworkActionBar.tsx
@@ -56,13 +56,15 @@ type Props = {
     searchEnabled: boolean
     placeholder?: string
     onSearch?: (term: string) => void
+    searchValue?: string
     leftSideContent?: ReactNode
     rightSideContent?: ReactNode
 }
 
 export const NetworkActionBar: FunctionComponent<Props> = ({
     searchEnabled,
     onSearch,
+    searchValue,
     placeholder,
     leftSideContent,
     rightSideContent,
@@ -72,7 +74,11 @@ export const NetworkActionBar: FunctionComponent<Props> = ({
             <div
                 className={'search-bar-wrap ' + (!searchEnabled ? 'search-disabled' : '')}
             >
-                <SearchBar onChange={onSearch} placeholder={placeholder} />
+                <SearchBar
+                    onChange={onSearch}
+                    placeholder={placeholder}
+                    value={searchValue}
+                />
             </div>
             {(leftSideContent || rightSideContent) && (
                 <div className="action-content-wrap">
diff --git a/src/hooks/useUrlParams.ts b/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])
+}
diff --git a/src/pages/OperatorsPage.tsx b/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,59 @@ 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
+    const [searchQuery, setSearchQuery] = useState(params.get('search') || '')
+
+    useUrlParams([
+        {
+            param: 'tab',
+            value: selectedTab,
+            defaultValue: DEFAULT_TAB,
+        },
+        {
+            param: 'orderBy',
+            value: orderBy,
+            defaultValue: DEFAULT_ORDER_BY,
+        },
+        {
+            param: 'orderDir',
+            value: orderDirection,
+            defaultValue: DEFAULT_ORDER_DIRECTION,
+        },
+        {
+            param: 'search',
+            value: searchQuery,
+            defaultValue: '',
+        },
+    ])
+
     const allOperatorsQuery = useAllOperatorsQuery({
         batchSize: PAGE_SIZE,
         searchQuery,
@@ -83,7 +108,7 @@ export const OperatorsPage = () => {
     const navigate = useNavigate()
 
     useEffect(() => {
-        if (!wallet) {
+        if (!wallet && !isWalletLoading) {
             navigate(
                 R.operators(
                     routeOptions(chainName, {
@@ -92,13 +117,14 @@ export const OperatorsPage = () => {
                 ),
             )
         }
-    }, [wallet, navigate, chainName])
+    }, [wallet, isWalletLoading, navigate, chainName])
 
     return (
         <Layout>
             <NetworkHelmet title="Operators" />
             <NetworkActionBar
                 searchEnabled={true}
+                searchValue={searchQuery}
                 onSearch={setSearchQuery}
                 leftSideContent={
                     <Tabs
diff --git a/src/pages/SponsorshipsPage.tsx b/src/pages/SponsorshipsPage.tsx
@@ -20,43 +20,84 @@ 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 initialFilters = {
+        ...defaultFilters,
+        ...Object.keys(defaultFilters).reduce((acc, key) => {
+            if (params.has(key)) {
+                return { ...acc, [key]: params.get(key) === 'true' }
+            }
+            return acc
+        }, {}),
+    }
+
+    const [filters, setFilters] = useState<SponsorshipFilters>(initialFilters)
 
     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 tab = params.get('tab')
+    const selectedTab = isTabOption(tab) ? tab : DEFAULT_TAB
+
+    const [searchQuery, setSearchQuery] = useState(params.get('search') || '')
+
+    useUrlParams([
+        {
+            param: 'tab',
+            value: selectedTab,
+            defaultValue: DEFAULT_TAB,
+        },
+        {
+            param: 'orderBy',
+            value: orderBy,
+            defaultValue: DEFAULT_ORDER_BY,
+        },
+        {
+            param: 'orderDir',
+            value: orderDirection,
+            defaultValue: DEFAULT_ORDER_DIRECTION,
+        },
+        {
+            param: 'search',
+            value: searchQuery,
+            defaultValue: '',
+        },
+        ...Object.entries(defaultFilters).map(([key, value]) => ({
+            param: key,
+            value: filters[key as keyof SponsorshipFilters].toString(),
+            defaultValue: value.toString(),
+        })),
+    ])
+
     const allSponsorshipsQuery = useAllSponsorshipsQuery({
         pageSize: PAGE_SIZE,
         searchQuery,
@@ -78,7 +119,7 @@ export const SponsorshipsPage = () => {
     const chainName = useCurrentChainSymbolicName()
 
     useEffect(() => {
-        if (!wallet) {
+        if (!wallet && !isWalletLoading) {
             navigate(
                 R.sponsorships(
                     routeOptions(chainName, {
@@ -87,7 +128,7 @@ export const SponsorshipsPage = () => {
                 ),
             )
         }
-    }, [wallet, navigate, chainName])
+    }, [wallet, navigate, chainName, isWalletLoading])
 
     const createSponsorship = useCreateSponsorship()
 
@@ -102,6 +143,7 @@ export const SponsorshipsPage = () => {
             <NetworkHelmet title="Sponsorships" />
             <NetworkActionBar
                 searchEnabled
+                searchValue={searchQuery}
                 onSearch={setSearchQuery}
                 leftSideContent={
                     <Tabs
diff --git a/src/shared/stores/wallet.ts b/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.
