Merge pull request #102 from acelaya-forks/feature/use-parsed-query-hook

Add useParsedQuery hook

CHANGELOG.md

@@ -4,9 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.4.1] - 2023-12-15
 ### Added
-* *Nothing*
+* Add `useParsedQuery` hook
+* Add `getSystemPreferredTheme` helper function
 
 ### Changed
 * Replace `classnames` package with `clsx`

package.json

@@ -60,6 +60,7 @@
     "axe-core": "^4.8.2",
     "bootstrap": "5.2.3",
     "eslint": "^8.55.0",
+    "history": "^5.3.0",
     "jsdom": "^23.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.69.5",

src/hooks/index.ts

@@ -1,5 +1,7 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
+import { parseQuery } from '../utils';
 
 type ToggleResult = [boolean, () => void, () => void, () => void];
 
@@ -44,3 +46,8 @@ export const useDomId = (): string => {
 };
 
 export const useElementRef = <T>() => useRef<T | null>(null);
+
+export const useParsedQuery = <T>(): T => {
+  const { search } = useLocation();
+  return useMemo(() => parseQuery<T>(search), [search]);
+};

src/theme/index.ts

@@ -15,3 +15,7 @@ export type Theme = 'dark' | 'light';
 export const changeThemeInMarkup = (theme: Theme) => document.querySelector('html')?.setAttribute('data-theme', theme);
 
 export const isDarkThemeEnabled = (): boolean => document.querySelector('html')?.getAttribute('data-theme') === 'dark';
+
+export const getSystemPreferredTheme = (_matchMedia = window.matchMedia.bind(window)): Theme => (
+  _matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+);

test/hooks/index.test.tsx

@@ -1,5 +1,7 @@
-import { screen } from '@testing-library/react';
-import { useTimeoutToggle } from '../../src';
+import { render, screen } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { useParsedQuery, useTimeoutToggle } from '../../src';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('useTimeoutToggle', () => {
@@ -40,3 +42,33 @@ describe('useTimeoutToggle', () => {
     expect(clearTimeout).toHaveBeenCalledOnce();
   });
 });
+
+describe('useParsedQuery', () => {
+  const FakeComponent = () => {
+    const { foo, bar } = useParsedQuery<{ foo?: string; bar?: number }>();
+
+    return (
+      <div>
+        <span data-testid="foo">{foo}</span>
+        <span data-testid="bar">{bar}</span>
+      </div>
+    );
+  };
+  const setUp = (search: string) => {
+    const history = createMemoryHistory();
+    history.push({ search });
+
+    render(
+      <Router location={history.location} navigator={history}>
+        <FakeComponent />
+      </Router>,
+    );
+  };
+
+  it('parses query as expected', () => {
+    setUp('foo=hello&bar=123');
+
+    expect(screen.getByTestId('foo')).toHaveTextContent('hello');
+    expect(screen.getByTestId('bar')).toHaveTextContent('123');
+  });
+});

test/theme/index.test.ts

@@ -0,0 +1,13 @@
+import { getSystemPreferredTheme } from '../../src';
+
+describe('getSystemPreferredTheme', () => {
+  it.each([
+    { matches: true, expectedTheme: 'dark' },
+    { matches: false, expectedTheme: 'light' },
+  ])('returns expected theme', ({ matches, expectedTheme }) => {
+    const matchMedia = vi.fn().mockReturnValue({ matches });
+
+    expect(getSystemPreferredTheme(matchMedia)).toEqual(expectedTheme);
+    expect(matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
+  });
+});