Add search param and filters to url as well

Author: tumppi

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">

src/pages/OperatorsPage.tsx

@@ -45,8 +45,6 @@ function isTabOption(value: unknown): value is TabOption {
 }
 
 export const OperatorsPage = () => {
-    const [searchQuery, setSearchQuery] = useState('')
-
     const wallet = useWalletAccount()
     const isWalletLoading = useIsWalletLoading()
 
@@ -58,6 +56,7 @@ export const OperatorsPage = () => {
     const [params] = useSearchParams()
     const tab = params.get('tab')
     const selectedTab = isTabOption(tab) ? tab : DEFAULT_TAB
+    const [searchQuery, setSearchQuery] = useState(params.get('search') || '')
 
     useUrlParams([
         {
@@ -75,6 +74,11 @@ export const OperatorsPage = () => {
             value: orderDirection,
             defaultValue: DEFAULT_ORDER_DIRECTION,
         },
+        {
+            param: 'search',
+            value: searchQuery,
+            defaultValue: '',
+        },
     ])
 
     const allOperatorsQuery = useAllOperatorsQuery({
@@ -120,6 +124,7 @@ export const OperatorsPage = () => {
             <NetworkHelmet title="Operators" />
             <NetworkActionBar
                 searchEnabled={true}
+                searchValue={searchQuery}
                 onSearch={setSearchQuery}
                 leftSideContent={
                     <Tabs

src/pages/SponsorshipsPage.tsx

@@ -44,9 +44,18 @@ function isTabOption(value: unknown): value is TabOption {
 }
 
 export const SponsorshipsPage = () => {
-    const [searchQuery, setSearchQuery] = useState('')
-
-    const [filters, setFilters] = useState<SponsorshipFilters>(defaultFilters)
+    const [params] = useSearchParams()
+    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()
@@ -56,10 +65,11 @@ export const SponsorshipsPage = () => {
         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',
@@ -76,6 +86,16 @@ export const SponsorshipsPage = () => {
             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({
@@ -123,6 +143,7 @@ export const SponsorshipsPage = () => {
             <NetworkHelmet title="Sponsorships" />
             <NetworkActionBar
                 searchEnabled
+                searchValue={searchQuery}
                 onSearch={setSearchQuery}
                 leftSideContent={
                     <Tabs