Skip to content

Commit

Permalink
refactor: use first argument for defaultState and second as object …
Browse files Browse the repository at this point in the history
…with other options
  • Loading branch information
asmyshlyaev177 committed Nov 10, 2024
1 parent 232e64d commit f218109
Show file tree
Hide file tree
Showing 18 changed files with 221 additions and 94 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ import { userState } from './userState';
function MyComponent() {
// can pass `replace` arg, it's control will `setUrl` will use `rounter.push` or `router.replace`, default replace=true
// can pass `searchParams` from server components
const { urlState, setUrl, setState } = useUrlState({ defaultState: userState });
const { urlState, setUrl, setState } = useUrlState(userState);

return (
<div>
Expand Down Expand Up @@ -221,7 +221,7 @@ import { form } from './form';

function TagsComponent() {
// `urlState` will infer from Form type!
const { urlState, setUrl } = useUrlState({ defaultState: form });
const { urlState, setUrl } = useUrlState(form);

const onChangeTags = React.useCallback(
(tag: (typeof tags)[number]) => {
Expand Down Expand Up @@ -320,7 +320,7 @@ import { useUrlState } from 'state-in-url/next';
import { form } from './form';

const Form = ({ searchParams }: { searchParams: object }) => {
const { urlState, setState, setUrl } = useUrlState({ defaultState: form, searchParams });
const { urlState, setState, setUrl } = useUrlState(form, { searchParams });
}
```

Expand Down Expand Up @@ -426,7 +426,7 @@ import { useUrlState } from 'state-in-url/react-router';
import { form } from './form';

function TagsComponent() {
const { urlState, setUrl, setState } = useUrlState({ defaultState: form });
const { urlState, setUrl, setState } = useUrlState(form);

const onChangeTags = React.useCallback(
(tag: (typeof tags)[number]) => {
Expand Down Expand Up @@ -540,7 +540,7 @@ const userState = {
};

export const useUserState = () => {
const { urlState, setUrl } = useUrlState({ defaultState: userState });
const { urlState, setUrl } = useUrlState(userState);

return { userState: urlState, setUserState: setUrl };;
}
Expand Down
19 changes: 17 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import { useUrlState } from 'state-in-url/next';
import { stateShape } from './state';

export const Comp1 = ({ searchParams }: { searchParams?: object }) => {
const { state, updateUrl } = useUrlState({
defaultState: stateShape,
const { urlState, setUrl } = useUrlState(stateShape, {
searchParams,
replace: false,
});
Expand All @@ -15,9 +14,9 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {
<div className="flex gap-2">
<h2>Per page select</h2>
<select
value={state.perPage}
value={urlState.perPage}
onChange={(ev) =>
updateUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
setUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
}
className=""
data-testid="select"
Expand Down
4 changes: 2 additions & 2 deletions packages/example-nextjs14/src/app/Form-for-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ export const Form = ({
delay?: number;
}) => {
const sp = useSearchParams();
const { urlState, setState, setUrl } = useUrlState({
defaultState: form,
const { urlState, setState, setUrl } = useUrlState(form, {
searchParams,
replace: sp.get('replace') === 'false' ? false : true,
});


React.useEffect(() => {
if (urlState?.tags?.length) {
const dateObj = urlState.tags.find((t) => t?.value?.time);
Expand Down
3 changes: 1 addition & 2 deletions packages/example-nextjs14/src/app/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ export const Form = ({
searchParams?: object;
ghLink: string
}) => {
const { urlState, setUrl } = useUrlState({
defaultState: form,
const { urlState, setUrl } = useUrlState(form, {
searchParams,
});

Expand Down
4 changes: 2 additions & 2 deletions packages/example-nextjs14/src/app/Status-for-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { form } from 'shared/form';
import { useUrlState } from 'state-in-url/next';

const Status = ({ className, sp }: { className?: string; sp?: object }) => {
const { state } = useUrlState({ defaultState: form, searchParams: sp });
const { urlState } = useUrlState(form, { searchParams: sp });

return (
<div className={className}>
Expand All @@ -18,7 +18,7 @@ const Status = ({ className, sp }: { className?: string; sp?: object }) => {
className="h-[330px] text-sm overflow-y-scrolltext-gray-600 bg-white p-4 rounded-md shadow-inner break-all whitespace-pre-wrap"
data-testid="parsed"
>
{JSON.stringify(state, null, 2)}
{JSON.stringify(urlState, null, 2)}
</pre>
</div>
</div>
Expand Down
5 changes: 2 additions & 3 deletions packages/example-nextjs14/src/app/Status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ export const Status = ({
sp?: object;
ghLink: string;
}) => {
const { state } = useUrlState({
defaultState: form,
const { urlState } = useUrlState(form, {
searchParams: sp,
replace: false,
});
Expand All @@ -34,7 +33,7 @@ export const Status = ({
break-all whitespace-pre-wrap"
data-testid="parsed"
>
{JSON.stringify(state, null, 2)}
{JSON.stringify(urlState, null, 2)}
</pre>
</div>
<SourceCodeBtn
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { File } from './File';

export const CodeBlockForm = () => {
export const CodeBlockState = () => {
return (
<File
name="state"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { File } from './File';
import { CodeBlockForm } from './CodeBlockForm';
import { CodeBlockState } from './CodeBlockState';

export const CodeBlocks = () => {
return (
Expand All @@ -8,7 +8,7 @@ export const CodeBlocks = () => {
<div className="text-center text-xl mt-2">
1. Define the state
</div>
<CodeBlockForm />
<CodeBlockState />

<div className="text-center text-xl mt-2">
2. Use it in any components
Expand All @@ -23,7 +23,8 @@ import { form } from './form';
export const ComponentA = () => {
// \`useHistory\` force to use window.history for navigation,
// no _rsc requests https://github.com/vercel/next.js/discussions/59167
const { urlState, setState, setUrl } = useUrlState({ defaultState: form, useHistory: true });// [!code highlight:1]
// see docs for all possible params https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState
const { urlState, setState, setUrl } = useUrlState(form, { useHistory: true });// [!code highlight:1]
return <>
<input
Expand All @@ -48,7 +49,7 @@ import { form } from './form';
// "searchParams" used to pass params from Server Components
export const ComponentB = ({ searchParams }: { searchParams?: object }) => {
const { urlState } = useUrlState({ defaultState: form, searchParams });// [!code highlight:1]
const { urlState } = useUrlState(form, { searchParams });// [!code highlight:1]
// [!code word:urlState]
return <div>name: {urlState.name}</div>
Expand Down
9 changes: 5 additions & 4 deletions packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { File } from './File';
import { CodeBlockForm } from './CodeBlockForm';
import { CodeBlockState } from './CodeBlockState';

export const CodeBlocksRR = () => {
return (
Expand All @@ -8,7 +8,7 @@ export const CodeBlocksRR = () => {
<div className="text-center text-xl mt-2">
1. Define the state
</div>
<CodeBlockForm />
<CodeBlockState />

<div className="text-center text-xl mt-2">
2. Use it in any components
Expand All @@ -19,7 +19,8 @@ export const CodeBlocksRR = () => {
import { form } from './form';
export const ComponentA = () => {
const { urlState, setUrl, setState } = useUrlState({ defaultState: form });// [!code highlight:1]
// see docs for all possible params https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState
const { urlState, setUrl, setState } = useUrlState(form, { replace: true });// [!code highlight:1]
return <>
<input
Expand All @@ -42,7 +43,7 @@ export const ComponentA = () => {
import { form } from './form';
export const ComponentB = () => {
const { urlState } = useUrlState({ defaultState: form });// [!code highlight:1]
const { urlState } = useUrlState(form);// [!code highlight:1]
// [!code word:urlState]
return <div>name: {urlState.name}</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import { useUrlState } from 'state-in-url/next';
import { stateShape } from './state';

export const Comp1 = ({ searchParams }: { searchParams?: object }) => {
const { state, updateUrl } = useUrlState({
defaultState: stateShape,
const { urlState, setUrl } = useUrlState(stateShape, {
searchParams,
replace: false,
});
Expand All @@ -15,9 +14,9 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {
<div className="flex gap-2">
<h2>Per page select</h2>
<select
value={state.perPage}
value={urlState.perPage}
onChange={(ev) =>
updateUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
setUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
}
className="text-black"
data-testid="select"
Expand Down
4 changes: 1 addition & 3 deletions packages/example-nextjs15/src/app/Form-for-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,11 @@ export const Form = ({
searchParams?: object;
}) => {
const sp = useSearchParams();
const { urlState, setState, setUrl } = useUrlState({
defaultState: form,
const { urlState, setState, setUrl } = useUrlState(form, {
searchParams,
replace: sp.get('replace') === 'false' ? false : true,
});


React.useEffect(() => {
if (urlState?.tags?.length) {
const dateObj = urlState.tags.find((t) => t?.value?.time);
Expand Down
4 changes: 2 additions & 2 deletions packages/example-nextjs15/src/app/Status-for-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { form } from 'shared/form';
import { useUrlState } from 'state-in-url/next';

const Status = ({ className, sp }: { className?: string; sp?: object }) => {
const { state } = useUrlState({ defaultState: form, searchParams: sp });
const { urlState } = useUrlState(form, { searchParams: sp });

return (
<div className={className}>
Expand All @@ -18,7 +18,7 @@ const Status = ({ className, sp }: { className?: string; sp?: object }) => {
className="h-[330px] text-sm overflow-y-scroll text-gray-600 bg-white p-4 rounded-md shadow-inner break-all whitespace-pre-wrap"
data-testid="parsed"
>
{JSON.stringify(state, null, 2)}
{JSON.stringify(urlState, null, 2)}
</pre>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import { useUrlState } from "state-in-url/react-router";
import { stateShape } from "./stateShape";

export const Component = () => {
const { urlState, setUrl } = useUrlState({
defaultState: stateShape,
const { urlState, setUrl } = useUrlState(stateShape, {
replace: false,
});

Expand Down
3 changes: 1 addition & 2 deletions packages/example-react-router6/src/Form-for-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { useUrlState } from "state-in-url/react-router";

export const Form = ({ className }: { className?: string }) => {
const [sp] = useSearchParams();
const { urlState, setState, setUrl } = useUrlState({
defaultState: form,
const { urlState, setState, setUrl } = useUrlState(form, {
replace: sp.get("replace") === "false" ? false : true,
});

Expand Down
4 changes: 2 additions & 2 deletions packages/example-react-router6/src/Status-for-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { form } from "shared/form";
import { useUrlState } from "state-in-url/react-router";

const Status = ({ className }: { className?: string }) => {
const { state } = useUrlState({ defaultState: form });
const { urlState } = useUrlState(form);

return (
<div className={className}>
Expand All @@ -17,7 +17,7 @@ const Status = ({ className }: { className?: string }) => {
break-all whitespace-pre-wrap"
data-testid="parsed"
>
{JSON.stringify(state, null, 2)}
{JSON.stringify(urlState, null, 2)}
</pre>
</div>
</div>
Expand Down
Loading

0 comments on commit f218109

Please sign in to comment.