add docs and unit tests for useQueryParams hook

README.md

@@ -53,6 +53,7 @@ yarn add react-recipes
 | 🥒 [`useOnlineStatus`](./docs/useOnlineStatus.md)           | onlineStatus                                                  | -                                                                                       |
 | 🍿 [`usePrevious`](./docs/usePrevious.md)                   | previous                                                      | (value)                                                                                 |
 | 🖨 [`usePrint`](./docs/usePrint.md)                          | { ref, handlePrint }                                          | (style = {})                                                                            |
+| :question: [`useQueryParams`](./docs/useQueryParams.md)     | { getParams, setParams }                                      | -                                                                                       |
 | 🍣 [`useScript`](./docs/useScript.md)                       | [loaded, error]                                               | (src)                                                                                   |
 | 🍖 [`useSpeechRecognition`](./docs/useSpeechRecognition.md) | { supported, listen, listening, stop }                        | ({ onEnd, onResult, onError })                                                          |
 | 🍗 [`useSpeechSynthesis`](./docs/useSpeechSynthesis.md)     | { supported, speak, speaking, cancel, voices, pause, resume } | ({ onEnd, onResult, onError, onBoundary, onPause, onResume })                           |

__tests__/useQueryParams.test.js

@@ -0,0 +1,37 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useQueryParams from '../src/useQueryParams';
+
+describe('useQueryParams', () => {
+  it('sets query params correctly', () => {
+    const newParams = { page: '1', order: 'ASC' };
+    const { result } = renderHook(() => useQueryParams());
+
+    act(() => {
+      result.current.setParams(newParams);
+    });
+    const params = result.current.getParams();
+    expect(params).toStrictEqual(newParams);
+  });
+
+  it('clears query params', () => {
+    const { result } = renderHook(() => useQueryParams());
+
+    act(() => {
+      result.current.setParams();
+    });
+    const params = result.current.getParams();
+    expect(params).toStrictEqual({});
+  });
+
+  it('read query params correctly', () => {
+    delete window.location;
+    window.location = new URL('https://test.com/testing?param1=test&testing=true');
+
+    const { result } = renderHook(() => useQueryParams());
+    let params;
+    act(() => {
+      params = result.current.getParams();
+    });
+    expect(params).toStrictEqual({ param1: 'test', testing: 'true' });
+  });
+});

docs/useQueryParams.md

@@ -0,0 +1,39 @@
+# 📍 `useQueryParams`
+
+Read and manipulate window.location
+
+## Usage
+
+```js
+import { useQueryParams } from 'react-recipes';
+
+function App() {
+  const { getParams, setParams } = useQueryParams();
+
+  const params = getParams();
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setParams({ page: 1, order: 'ASC' });
+        }}
+      >
+        Set Params
+      </button>
+      <button
+        onClick={() => {
+          setParams({});
+        }}
+      >
+        Clear params
+      </button>
+      {Object.entries(params).map(([paramKey, paramValue]) => (
+        <p>
+          {paramKey}: {paramValue}
+        </p>
+      ))}
+    </div>
+  );
+}
+```

src/useQueryParams.js

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 import useLocation from './useLocation';
 
-// getParams & setParams
-
 export default function useQueryParams() {
   const {
     replace, search,
@@ -15,18 +13,8 @@ export default function useQueryParams() {
   };
 
   const setParams = (params) => {
-    console.log(params);
-    const urlSearchParams = new URLSearchParams(params);
-    replace(`?${urlSearchParams.toString()}`);
-
-    console.log(urlSearchParams.toString());
-    // urlSearchParams.forEach((item) => console.log(item));
-    // const urlSearchParams = new URLSearchParams();
-    // Object.entries(params).forEach(([key, value]) => {
-    //   console.log(key, value);
-    //   urlSearchParams.append(key, value);
-    // });
-    // replace(`?${urlSearchParams.toString()}`);
+    const stringfiedUrlSearchParams = new URLSearchParams(params).toString();
+    replace(`?${stringfiedUrlSearchParams}`);
   };
 
   useEffect(() => {
@@ -37,3 +25,34 @@ export default function useQueryParams() {
     getParams, setParams,
   };
 }
+
+// Usage
+
+// function App() {
+//   const { getParams, setParams } = useQueryParams();
+//   const params = getParams();
+//
+//   return (
+//     <div>
+//       <button
+//         onClick={() => {
+//           setParams({ page: 1, order: 'ASC' });
+//         }}
+//       >
+//         Set Params
+//       </button>
+//       <button
+//         onClick={() => {
+//           setParams({});
+//         }}
+//       >
+//         Clear params
+//       </button>
+//       {Object.entries(params).map(([paramKey, paramValue]) => (
+//         <p>
+//           {paramKey}: {paramValue}
+//         </p>
+//       ))}
+//     </div>
+//   );
+// }