Merge pull request #2535 from suisous/pr/suisous

feat: Add clear() to useSet

Author: streamich

docs/useSet.md

@@ -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>

src/useSet.ts

@@ -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> {
@@ -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 = {

stories/useSet.story.tsx

@@ -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>

tests/useSet.test.ts

@@ -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),
   });
 });
 
@@ -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');
@@ -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);
 });