Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add clear() to useSet #2535

Merged
merged 3 commits into from
Jan 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion docs/useSet.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,22 @@ React state hook that tracks a [Set](https://developer.mozilla.org/en-US/docs/We

## Usage

What is the difference between the "clear()" method and the "reset()" method?

The "reset()" method returns the "Set" to the initial value passed during "useSet
The "clear()" method completely empties the "Set".

```jsx
import {useSet} from 'react-use';

const Demo = () => {
const [set, { add, has, remove, toggle, reset }] = useSet(new Set(['hello']));
const [set, { add, has, remove, toggle, reset, clear }] = useSet(new Set(['hello']));

return (
<div>
<button onClick={() => add(String(Date.now()))}>Add</button>
<button onClick={() => reset()}>Reset</button>
<button onClick={() => clear()}>Clear</button>
<button onClick={() => remove('hello')} disabled={!has('hello')}>
Remove 'hello'
</button>
Expand Down
3 changes: 2 additions & 1 deletion src/useSet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export interface StableActions<K> {
remove: (key: K) => void;
toggle: (key: K) => void;
reset: () => void;
clear: () => void;
}

export interface Actions<K> extends StableActions<K> {
Expand All @@ -25,7 +26,7 @@ const useSet = <K>(initialSet = new Set<K>()): [Set<K>, Actions<K>] => {
: new Set([...Array.from(prevSet), item])
);

return { add, remove, toggle, reset: () => setSet(initialSet) };
return { add, remove, toggle, reset: () => setSet(initialSet), clear: () => setSet(new Set()) };
}, [setSet]);

const utils = {
Expand Down
3 changes: 2 additions & 1 deletion stories/useSet.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import { useSet } from '../src';
import ShowDocs from './util/ShowDocs';

const Demo = () => {
const [set, { add, has, remove, reset, toggle }] = useSet(new Set(['hello']));
const [set, { add, has, remove, reset, clear, toggle }] = useSet(new Set(['hello']));

return (
<div>
<button onClick={() => add(String(Date.now()))}>Add</button>
<button onClick={() => reset()}>Reset</button>
<button onClick={() => clear()}>Clear</button>
<button onClick={() => remove('hello')} disabled={!has('hello')}>
Remove 'hello'
</button>
Expand Down
15 changes: 14 additions & 1 deletion tests/useSet.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ it('should init set and utils', () => {
remove: expect.any(Function),
toggle: expect.any(Function),
reset: expect.any(Function),
clear: expect.any(Function),
});
});

Expand Down Expand Up @@ -145,10 +146,21 @@ it('should reset to initial set provided', () => {
expect(result.current[0]).toEqual(new Set([1]));
});

it('should be empty', () => {
const { result } = setUp(new Set([1]));
const [, utils] = result.current;

act(() => {
utils.clear();
});

expect(result.current[0]).toEqual(new Set([]));
});

it('should memoized its utils methods', () => {
const { result } = setUp(new Set(['a', 'b']));
const [, utils] = result.current;
const { add, remove, reset, toggle } = utils;
const { add, remove, reset, clear, toggle } = utils;

act(() => {
add('foo');
Expand All @@ -158,4 +170,5 @@ it('should memoized its utils methods', () => {
expect(result.current[1].remove).toBe(remove);
expect(result.current[1].toggle).toBe(toggle);
expect(result.current[1].reset).toBe(reset);
expect(result.current[1].clear).toBe(clear);
});
Loading