Skip to content

Commit 376d8bb

Browse files
bilalabbadbilalabbad
authored
Migrate to nuqs for search params management (#7369)
1 parent dfc7e68 commit 376d8bb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+381
-467
lines changed

‎frontend/app/package-lock.json‎

Lines changed: 43 additions & 86 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/app/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@
6767
"lucide-react": "^0.545.0",
6868
"monaco-editor": "^0.52.2",
6969
"monaco-graphql": "^1.7.1",
70+
"nuqs": "^2.7.1",
7071
"openapi-fetch": "^0.14.1",
7172
"prismjs": "^1.29.0",
72-
"query-string": "^9.2.2",
7373
"react": "^19.2.0",
7474
"react-accessible-treeview": "^2.11.2",
7575
"react-aria-components": "^1.13.0",
@@ -93,10 +93,10 @@
9393
"tailwind-merge": "^3.3.1",
9494
"tailwindcss-animate": "^1.0.7",
9595
"unidiff": "^1.0.4",
96-
"use-query-params": "^2.2.1",
9796
"vite": "^7.1.9",
9897
"vite-plugin-svgr": "^4.5.0",
99-
"vite-tsconfig-paths": "^5.1.4"
98+
"vite-tsconfig-paths": "^5.1.4",
99+
"zod": "^4.1.12"
100100
},
101101
"devDependencies": {
102102
"@biomejs/biome": "^2.2.5",

‎frontend/app/src/app/app.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { addCollection } from "@iconify-icon/react";
33
import mdiIcons from "@iconify-json/mdi/icons.json" with { type: "json" };
44
import { QueryClientProvider } from "@tanstack/react-query";
55
import { Provider } from "jotai";
6+
import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
67
import { ErrorBoundary } from "react-error-boundary";
78
import { RouterProvider } from "react-router";
89

@@ -25,18 +26,20 @@ addCollection(mdiIcons);
2526
export function App() {
2627
return (
2728
<ErrorBoundary FallbackComponent={ErrorBoundaryApp}>
28-
<Provider store={store}>
29-
<QueryClientProvider client={queryClient}>
30-
<ApolloProvider client={graphqlClient}>
31-
<AuthProvider>
32-
<ConfigProvider>
33-
<RouterProvider router={router} />
34-
</ConfigProvider>
35-
</AuthProvider>
36-
</ApolloProvider>
37-
<TanStackQueryDevtools buttonPosition="bottom-left" />
38-
</QueryClientProvider>
39-
</Provider>
29+
<NuqsAdapter>
30+
<Provider store={store}>
31+
<QueryClientProvider client={queryClient}>
32+
<ApolloProvider client={graphqlClient}>
33+
<AuthProvider>
34+
<ConfigProvider>
35+
<RouterProvider router={router} />
36+
</ConfigProvider>
37+
</AuthProvider>
38+
</ApolloProvider>
39+
<TanStackQueryDevtools buttonPosition="bottom-left" />
40+
</QueryClientProvider>
41+
</Provider>
42+
</NuqsAdapter>
4043
</ErrorBoundary>
4144
);
4245
}

‎frontend/app/src/app/router.tsx‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import queryString from "query-string";
21
import { RouterProvider } from "react-aria-components";
32
import {
43
createBrowserRouter,
@@ -11,14 +10,12 @@ import {
1110
useNavigate,
1211
} from "react-router";
1312
import { Slide, ToastContainer } from "react-toastify";
14-
import { QueryParamProvider } from "use-query-params";
1513

1614
import { ARTIFACT_OBJECT, NODE_OBJECT, PROPOSED_CHANGES_OBJECT } from "@/config/constants";
1715

1816
import { constructPath } from "@/shared/api/rest/fetch";
1917
import { ErrorBoundaryRouter } from "@/shared/components/errors/error-boundary-router";
2018
import type { BreadcrumbItem } from "@/shared/components/layout/breadcrumb-navigation/type";
21-
import { ReactRouter7Adapter } from "@/shared/libs/use-query-params";
2219

2320
import { RequireAuth } from "@/entities/authentication/ui/require-auth";
2421
import { BranchesProvider } from "@/entities/branches/ui/branches-provider";
@@ -48,25 +45,17 @@ function RootProviders({ children }: { children: React.ReactNode }) {
4845
const navigate = useNavigate();
4946

5047
return (
51-
<QueryParamProvider
52-
adapter={ReactRouter7Adapter}
53-
options={{
54-
searchStringToObject: queryString.parse,
55-
objectToSearchString: queryString.stringify,
56-
}}
57-
>
58-
<RouterProvider navigate={navigate} useHref={useAbsoluteHref}>
59-
<ToastContainer
60-
hideProgressBar={true}
61-
transition={Slide}
62-
autoClose={5000}
63-
closeOnClick={false}
64-
newestOnTop
65-
position="bottom-right"
66-
/>
67-
{children}
68-
</RouterProvider>
69-
</QueryParamProvider>
48+
<RouterProvider navigate={navigate} useHref={useAbsoluteHref}>
49+
<ToastContainer
50+
hideProgressBar={true}
51+
transition={Slide}
52+
autoClose={5000}
53+
closeOnClick={false}
54+
newestOnTop
55+
position="bottom-right"
56+
/>
57+
{children}
58+
</RouterProvider>
7059
);
7160
}
7261

‎frontend/app/src/config/qsp.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ export const QSP = {
1717
TASK_ID: "task_id",
1818
SEARCH: "search",
1919
STATUS: "status",
20-
};
20+
} as const;

‎frontend/app/src/entities/branches/ui/branches-provider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useAtom } from "jotai";
2+
import { useQueryState } from "nuqs";
23
import React, { useEffect } from "react";
34
import { useNavigate } from "react-router";
45
import { toast } from "react-toastify";
5-
import { StringParam, useQueryParam } from "use-query-params";
66

77
import { DEFAULT_BRANCH_NAME } from "@/config/constants";
88
import { QSP } from "@/config/qsp";
@@ -35,7 +35,7 @@ export function useCurrentBranch() {
3535
export const BranchesProvider = ({ children }: { children?: React.ReactNode }) => {
3636
const { data: branches, isPending, error } = useGetBranches();
3737
const [currentBranch, setCurrentBranch] = useAtom(currentBranchAtom);
38-
const [branchInQueryString] = useQueryParam(QSP.BRANCH, StringParam);
38+
const [branchInQueryString] = useQueryState(QSP.BRANCH);
3939
const navigate = useNavigate();
4040

4141
useEffect(() => {

‎frontend/app/src/entities/diff/artifact-diff/artifacts-diff.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
1111
import { proposedChangedState } from "@/entities/proposed-changes/stores/proposedChanges.atom";
1212
import "react-diff-view/style/index.css";
1313

14+
import { useQueryState } from "nuqs";
1415
import { useParams } from "react-router";
1516
import { toast } from "react-toastify";
16-
import { StringParam, useQueryParam } from "use-query-params";
1717

1818
import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
1919

@@ -22,9 +22,9 @@ import { ArtifactRepoDiff } from "./artifact-repo-diff";
2222
export const ArtifactsDiff = forwardRef((_, ref) => {
2323
const [artifactsDiff, setArtifactsDiff] = useState({});
2424
const { "*": branchName } = useParams();
25-
const [branchOnly] = useQueryParam(QSP.BRANCH_FILTER_BRANCH_ONLY, StringParam);
26-
const [timeFrom] = useQueryParam(QSP.BRANCH_FILTER_TIME_FROM, StringParam);
27-
const [timeTo] = useQueryParam(QSP.BRANCH_FILTER_TIME_TO, StringParam);
25+
const [branchOnly] = useQueryState(QSP.BRANCH_FILTER_BRANCH_ONLY);
26+
const [timeFrom] = useQueryState(QSP.BRANCH_FILTER_TIME_FROM);
27+
const [timeTo] = useQueryState(QSP.BRANCH_FILTER_TIME_TO);
2828
const [proposedChangesDetails] = useAtom(proposedChangedState);
2929
const [isLoading, setIsLoading] = useState(false);
3030

‎frontend/app/src/entities/diff/file-diff/file-content-diff.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ import { getProposedChangesFilesThreads } from "@/entities/proposed-changes/api/
2525
import { nodeSchemasAtom } from "@/entities/schema/stores/schema.atom";
2626
import "react-diff-view/style/index.css";
2727

28+
import { useQueryState } from "nuqs";
2829
import { useParams } from "react-router";
2930
import { toast } from "react-toastify";
3031
import sha from "sha1";
3132
import { diffLines, formatLines } from "unidiff";
32-
import { StringParam, useQueryParam } from "use-query-params";
3333

3434
import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
3535

@@ -102,9 +102,9 @@ export const FileContentDiff = (props: any) => {
102102
const { repositoryId, repositoryDisplayName, file, commitFrom, commitTo } = props;
103103

104104
const { proposedChangeId } = useParams();
105-
const [branchOnly] = useQueryParam(QSP.BRANCH_FILTER_BRANCH_ONLY, StringParam);
106-
const [timeFrom] = useQueryParam(QSP.BRANCH_FILTER_TIME_FROM, StringParam);
107-
const [timeTo] = useQueryParam(QSP.BRANCH_FILTER_TIME_TO, StringParam);
105+
const [branchOnly] = useQueryState(QSP.BRANCH_FILTER_BRANCH_ONLY);
106+
const [timeFrom] = useQueryState(QSP.BRANCH_FILTER_TIME_FROM);
107+
const [timeTo] = useQueryState(QSP.BRANCH_FILTER_TIME_TO);
108108
const auth = useAuth();
109109
const [schemaList] = useAtom(nodeSchemasAtom);
110110
const [isLoading, setIsLoading] = useState(false);

0 commit comments

Comments
 (0)