Merge pull request #24 from asmyshlyaev177/adjust_params

use first argument for `defaultState`
asmyshlyaev177 · Nov 10, 2024 · 7497331 · 7497331
2 parents 232e64d + 5768f61
commit 7497331
Show file tree

Hide file tree

Showing 20 changed files with 230 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 [![npm](https://img.shields.io/npm/v/state-in-url.svg)](https://www.npmjs.com/package/state-in-url)
 ![Tests](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml/badge.svg?branch=master)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
+[![Codacy Badge](https://app.codacy.com/project/badge/Coverage/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_coverage)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/)
 [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)]([https://github.com/semantic-release/semantic-release](https://github.com/asmyshlyaev177/state-in-url))
 ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg)
@@ -165,7 +166,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>
@@ -221,7 +222,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]) => {
@@ -320,7 +321,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 });
 }
 ```
 
@@ -426,7 +427,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]) => {
@@ -540,7 +541,7 @@ const userState = {
 };
 
 export const useUserState = () => {
-  const { urlState, setUrl } = useUrlState({ defaultState: userState });
+  const { urlState, setUrl } = useUrlState(userState);
 
   return { userState: urlState, setUserState: setUrl };;
 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx
@@ -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,
   });
@@ -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"

diff --git a/packages/example-nextjs14/src/app/Form-for-test.tsx b/packages/example-nextjs14/src/app/Form-for-test.tsx
@@ -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);

diff --git a/packages/example-nextjs14/src/app/Form.tsx b/packages/example-nextjs14/src/app/Form.tsx
@@ -15,8 +15,7 @@ export const Form = ({
   searchParams?: object;
   ghLink: string
 }) => {
-  const { urlState, setUrl } = useUrlState({
-    defaultState: form,
+  const { urlState, setUrl } = useUrlState(form, {
     searchParams,
   });
 

diff --git a/packages/example-nextjs14/src/app/Status-for-test.tsx b/packages/example-nextjs14/src/app/Status-for-test.tsx
@@ -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}>
@@ -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>

diff --git a/packages/example-nextjs14/src/app/Status.tsx b/packages/example-nextjs14/src/app/Status.tsx
@@ -14,8 +14,7 @@ export const Status = ({
   sp?: object;
   ghLink: string;
 }) => {
-  const { state } = useUrlState({
-    defaultState: form,
+  const { urlState } = useUrlState(form, {
     searchParams: sp,
     replace: false,
   });
@@ -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

diff --git a/...js14/src/app/components/CodeBlockForm.tsx → ...s14/src/app/components/CodeBlockState.tsx b/...js14/src/app/components/CodeBlockForm.tsx → ...s14/src/app/components/CodeBlockState.tsx
@@ -1,6 +1,6 @@
 import { File } from './File';
 
-export const CodeBlockForm = () => {
+export const CodeBlockState = () => {
   return (
       <File
         name="state"

diff --git a/packages/example-nextjs14/src/app/components/CodeBlocksNext.tsx b/packages/example-nextjs14/src/app/components/CodeBlocksNext.tsx
@@ -1,5 +1,5 @@
 import { File } from './File';
-import { CodeBlockForm } from './CodeBlockForm';
+import { CodeBlockState } from './CodeBlockState';
 
 export const CodeBlocks = () => {
   return (
@@ -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
@@ -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
@@ -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>

diff --git a/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx b/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx
@@ -1,5 +1,5 @@
 import { File } from './File';
-import { CodeBlockForm } from './CodeBlockForm';
+import { CodeBlockState } from './CodeBlockState';
 
 export const CodeBlocksRR = () => {
   return (
@@ -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
@@ -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
@@ -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>

diff --git a/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx
@@ -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,
   });
@@ -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"

diff --git a/packages/example-nextjs15/src/app/Form-for-test.tsx b/packages/example-nextjs15/src/app/Form-for-test.tsx
@@ -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);

diff --git a/packages/example-nextjs15/src/app/Status-for-test.tsx b/packages/example-nextjs15/src/app/Status-for-test.tsx
@@ -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}>
@@ -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>

diff --git a/packages/example-react-router6/src/FewComponents/Component.tsx b/packages/example-react-router6/src/FewComponents/Component.tsx
@@ -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,
   });
 

diff --git a/packages/example-react-router6/src/Form-for-test.tsx b/packages/example-react-router6/src/Form-for-test.tsx
@@ -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,
   });
 

diff --git a/packages/example-react-router6/src/Status-for-test.tsx b/packages/example-react-router6/src/Status-for-test.tsx
@@ -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}>
@@ -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>