fix: search

BuiltByMom · Dec 19, 2024 · 09f7ccc · 09f7ccc
1 parent bb8ea77
commit 09f7ccc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/app/components/List.tsx b/app/components/List.tsx
@@ -296,13 +296,19 @@ function TokenListContent({list}: {list: TTokenListItem}): ReactElement {
 						onChange={(e): void => {
 							set_search(e.target.value || '');
 							set_currentPage(1);
+
+							const searchParams = new URLSearchParams(window.location.search);
+
 							if (!e.target.value) {
-								const {search, ...queryNoSearch} = params;
-								search;
-								router.push(`/${queryNoSearch}`);
+								searchParams.delete('search');
 							} else {
-								router.push(`/${params.toString()}&search=${e.target.value}`);
+								searchParams.set('search', e.target.value);
 							}
+
+							const newSearch = searchParams.toString();
+							const currentPath = window.location.pathname;
+							const newPath = newSearch ? `${currentPath}?${newSearch}` : currentPath;
+							router.push(newPath);
 						}}
 					/>
 				</div>
@@ -313,15 +319,22 @@ function TokenListContent({list}: {list: TTokenListItem}): ReactElement {
 						}
 						value={network}
 						onChange={(e): void => {
-							set_network(Number(e.target.value));
+							const newNetwork = Number(e.target.value);
+							set_network(newNetwork);
 							set_currentPage(1);
-							if (Number(e.target.value) === -1) {
-								const {network, ...queryNoNetwork} = params;
-								network;
-								router.push(`/${queryNoNetwork}`);
+
+							const searchParams = new URLSearchParams(window.location.search);
+
+							if (newNetwork === -1) {
+								searchParams.delete('network');
 							} else {
-								router.push(`/${params.toString()}&network=${e.target.value}`);
+								searchParams.set('network', newNetwork.toString());
 							}
+
+							const newSearch = searchParams.toString();
+							const currentPath = window.location.pathname;
+							const newPath = newSearch ? `${currentPath}?${newSearch}` : currentPath;
+							router.push(newPath);
 						}}>
 						<option value={-1}>{'All Networks'}</option>
 						{availableNetworks.map(

diff --git a/app/components/Lists.tsx b/app/components/Lists.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, {Fragment, useMemo, useState} from 'react';
-import {useParams, useRouter} from 'next/navigation';
+import {useRouter} from 'next/navigation';
 import * as chains from 'wagmi/chains';
 import axios from 'axios';
 import useSWR from 'swr';
@@ -45,7 +45,6 @@ export function Filters({
 	set_search: (value: string) => void;
 	set_network: (value: number) => void;
 }): ReactElement {
-	const params = useParams();
 	const router = useRouter();
 
 	return (
@@ -59,13 +58,18 @@ export function Filters({
 					placeholder={'Search'}
 					onChange={(e): void => {
 						set_search(e.target.value || '');
+						const searchParams = new URLSearchParams(window.location.search);
+
 						if (!e.target.value) {
-							const {search, ...queryNoSearch} = params;
-							search;
-							router.push(`/${queryNoSearch}`);
+							searchParams.delete('search');
 						} else {
-							router.push(`/${params.toString()}&search=${e.target.value}`);
+							searchParams.set('search', e.target.value);
 						}
+
+						const newSearch = searchParams.toString();
+						const currentPath = window.location.pathname;
+						const newPath = newSearch ? `${currentPath}?${newSearch}` : currentPath;
+						router.push(newPath);
 					}}
 				/>
 			</div>
@@ -76,14 +80,21 @@ export function Filters({
 					}
 					value={network}
 					onChange={(e): void => {
-						set_network(Number(e.target.value));
-						if (Number(e.target.value) === -1) {
-							const {network, ...queryNoNetwork} = params;
-							network;
-							router.push(`/${queryNoNetwork}`);
+						const newNetwork = Number(e.target.value);
+						set_network(newNetwork);
+
+						const searchParams = new URLSearchParams(window.location.search);
+
+						if (newNetwork === -1) {
+							searchParams.delete('network');
 						} else {
-							router.push(`/${params.toString()}&network=${e.target.value}`);
+							searchParams.set('network', newNetwork.toString());
 						}
+
+						const newSearch = searchParams.toString();
+						const currentPath = window.location.pathname;
+						const newPath = newSearch ? `${currentPath}?${newSearch}` : currentPath;
+						router.push(newPath);
 					}}>
 					<option value={-1}>{'All Networks'}</option>
 					{allSupportedChains.map(

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.