File size: 1,223 Bytes
8a37e0a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { selectSearchTerm } from 'features/gallery/store/gallerySelectors';
import { searchTermChanged } from 'features/gallery/store/gallerySlice';
import { debounce } from 'lodash-es';
import { useCallback, useMemo, useState } from 'react';

export const useGallerySearchTerm = () => {
  // Highlander!
  useAssertSingleton('gallery-search-state');

  const dispatch = useAppDispatch();
  const searchTerm = useAppSelector(selectSearchTerm);

  const [localSearchTerm, setLocalSearchTerm] = useState(searchTerm);

  const debouncedSetSearchTerm = useMemo(() => {
    return debounce((val: string) => {
      dispatch(searchTermChanged(val));
    }, 1000);
  }, [dispatch]);

  const onChange = useCallback(
    (val: string) => {
      setLocalSearchTerm(val);
      debouncedSetSearchTerm(val);
    },
    [debouncedSetSearchTerm]
  );

  const onReset = useCallback(() => {
    debouncedSetSearchTerm.cancel();
    setLocalSearchTerm('');
    dispatch(searchTermChanged(''));
  }, [debouncedSetSearchTerm, dispatch]);

  return [localSearchTerm, onChange, onReset] as const;
};