Skip to content

Commit 4550e72

Browse files
dimaMachinadimaMachina
authored
refactor to use useSearchParams in website playground page (#2821)
* useSearchParams * a
1 parent 90aacb0 commit 4550e72

File tree

7 files changed

+62
-122
lines changed

7 files changed

+62
-122
lines changed

‎packages/plugin/src/index.browser.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/plugin/tsup.config.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const opts: Options = {
1515
VERSION: packageJson.version,
1616
},
1717
format: 'esm',
18-
minifySyntax: true,
1918
outExtension: () => ({ js: '.js' }),
2019
esbuildOptions(options, _context) {
2120
options.define!.window = 'undefined';
@@ -82,7 +81,7 @@ export default defineConfig([
8281
{
8382
...opts,
8483
entry: {
85-
'index.browser': 'src/index.browser.ts',
84+
'index.browser': 'src/index.ts',
8685
},
8786
outDir: 'dist',
8887
dts: false,
@@ -94,5 +93,18 @@ export default defineConfig([
9493
esbuildOptions(options, _context) {
9594
options.define!.window = 'true';
9695
},
96+
esbuildPlugins: [
97+
{
98+
name: 'remove-processor',
99+
setup(build) {
100+
build.onLoad({ filter: /processor\.ts$/ }, _args => {
101+
return {
102+
contents: 'export const processor = {}',
103+
loader: 'ts',
104+
};
105+
});
106+
},
107+
},
108+
],
97109
},
98110
]);

‎pnpm-lock.yaml‎

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

‎website/app/play/page.client.tsx‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
'use client';
22

3-
import { FC, ReactNode, useRef } from 'react';
4-
import debounce from 'lodash.debounce';
5-
import { StringParam, useQueryParam, withDefault } from 'use-query-params';
3+
import { FC, ReactNode, useCallback } from 'react';
4+
import { ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from 'next/navigation';
65
import { ConfigName, configs, rules } from '@graphql-eslint/eslint-plugin';
76
import { asArray } from '@graphql-tools/utils';
87
import { GraphQLEditor } from './graphql-editor';
@@ -30,14 +29,28 @@ const operationsRulesOptions = Object.entries(rules)
3029
const schemaConfigsOptions = schemaConfigs.map(name => ({ key: name, name }));
3130
const operationsConfigsOptions = operationsConfigs.map(name => ({ key: name, name }));
3231

33-
function useDebouncedQueryParams<TypeToEncode, TypeFromDecode = TypeToEncode>(
34-
...args: Parameters<typeof useQueryParam<TypeToEncode, TypeFromDecode>>
35-
): ReturnType<typeof useQueryParam<TypeToEncode, TypeFromDecode>> {
36-
const [query, setQuery] = useQueryParam(...args);
37-
const fn = useRef<typeof setQuery>();
38-
fn.current ||= debounce(setQuery, 500);
32+
// Get a new searchParams string by merging the current
33+
// searchParams with a provided key/value pair
34+
const createQueryString = (searchParams: ReadonlyURLSearchParams, name: string, value: string) => {
35+
const params = new URLSearchParams(searchParams.toString());
36+
params.set(name, value);
3937

40-
return [query, fn.current];
38+
return '?' + params.toString();
39+
};
40+
41+
function useSetterSearchParams(
42+
paramKey: string,
43+
defaultValue = '',
44+
): [string, (value: string) => void] {
45+
const pathname = usePathname();
46+
const router = useRouter();
47+
const searchParams = useSearchParams();
48+
49+
const handleChange = useCallback((value: string) => {
50+
router.push(pathname + createQueryString(searchParams, paramKey, value));
51+
}, []);
52+
53+
return [searchParams.get(paramKey) ?? defaultValue, handleChange];
4154
}
4255

4356
export const ClientPage: FC<{
@@ -46,21 +59,15 @@ export const ClientPage: FC<{
4659
children: ReactNode;
4760
headingClass: string;
4861
}> = ({ defaultSchema, defaultOperation, children, headingClass }) => {
49-
const [schemaConfig, setSchemaConfig] = useDebouncedQueryParams(
50-
'sc',
51-
withDefault(StringParam, 'schema-recommended'),
52-
);
53-
const [schemaRule, setSchemaRule] = useDebouncedQueryParams<string>('sr');
54-
const [operationConfig, setOperationConfig] = useDebouncedQueryParams(
62+
const [schemaConfig, setSchemaConfig] = useSetterSearchParams('sc', 'schema-recommended');
63+
const [schemaRule, setSchemaRule] = useSetterSearchParams('sr');
64+
const [operationConfig, setOperationConfig] = useSetterSearchParams(
5565
'oc',
56-
withDefault(StringParam, 'operations-recommended'),
57-
);
58-
const [operationRule, setOperationRule] = useDebouncedQueryParams<string>('or');
59-
const [schema, setSchema] = useDebouncedQueryParams('s', withDefault(StringParam, defaultSchema));
60-
const [operation, setOperation] = useDebouncedQueryParams(
61-
'o',
62-
withDefault(StringParam, defaultOperation),
66+
'operations-recommended',
6367
);
68+
const [operationRule, setOperationRule] = useSetterSearchParams('or');
69+
const [schema, setSchema] = useSetterSearchParams('s', defaultSchema);
70+
const [operation, setOperation] = useSetterSearchParams('o', defaultOperation);
6471

6572
return (
6673
<>

‎website/app/play/page.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { clsx } from 'clsx';
33
import { Linter } from 'eslint';
44
import { parser } from '@graphql-eslint/eslint-plugin';
55
import { ClientPage } from './page.client';
6-
import { QueryParamProvider } from './query-params-provider';
76

87
export const metadata = {
98
title: 'Playground',
@@ -55,25 +54,23 @@ const PlayPage: FC = () => {
5554
)}
5655
>
5756
<Suspense fallback="Loading...">
58-
<QueryParamProvider>
59-
<ClientPage
60-
defaultOperation={DEFAULT_OPERATION}
61-
defaultSchema={DEFAULT_SCHEMA}
62-
headingClass={classes.heading}
63-
>
64-
<div>
65-
<h3 className={classes.heading}>VERSIONING</h3>
66-
<span className="flex justify-between text-sm">
67-
<span>ESLint</span>
68-
<span>{Linter.version}</span>
69-
</span>
70-
<span className="flex justify-between text-sm">
71-
<span>GraphQL-ESLint</span>
72-
<span>{parser.meta.version}</span>
73-
</span>
74-
</div>
75-
</ClientPage>
76-
</QueryParamProvider>
57+
<ClientPage
58+
defaultOperation={DEFAULT_OPERATION}
59+
defaultSchema={DEFAULT_SCHEMA}
60+
headingClass={classes.heading}
61+
>
62+
<div>
63+
<h3 className={classes.heading}>VERSIONING</h3>
64+
<span className="flex justify-between text-sm">
65+
<span>ESLint</span>
66+
<span>{Linter.version}</span>
67+
</span>
68+
<span className="flex justify-between text-sm">
69+
<span>GraphQL-ESLint</span>
70+
<span>{parser.meta.version}</span>
71+
</span>
72+
</div>
73+
</ClientPage>
7774
</Suspense>
7875
</div>
7976
);

‎website/app/play/query-params-provider.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎website/package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,15 @@
1919
"@theguild/components": "8.0.0-alpha-20241205144621-2f6170e406a6235f71ab4756e1dd369735420a88",
2020
"clsx": "^2.0.0",
2121
"graphql": "^16.9.0",
22-
"lodash.debounce": "^4.0.8",
2322
"lodash.uniqwith": "^4.5.0",
2423
"next": "15.0.3",
25-
"next-query-params": "5.0.1",
2624
"next-sitemap": "4.2.3",
2725
"react": "^18.3.1",
28-
"react-dom": "^18.3.1",
29-
"use-query-params": "^2.2.1"
26+
"react-dom": "^18.3.1"
3027
},
3128
"devDependencies": {
3229
"@svgr/webpack": "^8.1.0",
3330
"@theguild/tailwind-config": "0.6.1",
34-
"@types/lodash.debounce": "4.0.9",
3531
"@types/lodash.uniqwith": "4.5.9",
3632
"@types/node": "22.10.1",
3733
"@types/react": "18.3.13",

0 commit comments

Comments
 (0)