utils#debounce TypeScript Examples

debouncedScrollIntoView = debounce((title: string) => {
  if (!isDesktop()) {
    const navElement = document.getElementById(generateNavId(title))

    if (navElement) {
      const { offsetLeft, parentElement } = navElement
      parentElement?.scroll({ left: offsetLeft, behavior: 'smooth' })
    }
  }
}, DEBOUNCE_DELAY)

useShouldRender = (
  isLazy: boolean,
  ref: React.MutableRefObject<HTMLDivElement | undefined>,
): boolean => {
  if (!isLazy) return true

  const onScreen = useOnScreen(ref, LAZY_LOAD_OVERSCAN)

  const [shouldRender, setShouldRender] = useState(true)

  const debouncedSetRender = useMemo(
    () =>
      debounce((value: boolean) => {
        setShouldRender(value)
      }, UPDATE_SCREEN_DELAY),
    [],
  )

  useEffect(() => {
    debouncedSetRender(onScreen)
  }, [onScreen])

  return shouldRender
}

useDebouncedNickname = (): [
  value: string,
  setValue: (newValue: string) => void,
] => {
  const { nickname, handleNicknameFetch } = useAuctions()
  const [value, setValue] = useState(nickname)

  const debouncedFetch = useMemo(
    () =>
      debounce(
        (newNickname: string) => handleNicknameFetch(newNickname),
        DEBOUNCE_DELAY,
      ),
    [handleNicknameFetch],
  )

  const setValueAndDispatch = useCallback(
    (newValue: string) => {
      setValue(newValue)
      debouncedFetch(newValue)
    },
    [debouncedFetch],
  )

  return [value, setValueAndDispatch]
}

function useDebouncedFilter<T>(
  key: keyof FilterOptions,
  controlledValue: T,
): [value: T, setValue: (newValue: T) => void] {
  const { updateFilters } = useFilters()
  const [value, setValue] = useState<T>(controlledValue)

  const debouncedUpdateFilter = useMemo(
    () =>
      debounce((newValue: T) => updateFilters(key, newValue), DEBOUNCE_DELAY),
    [key, updateFilters],
  )

  const setValueAndDispatch = useCallback(
    (newValue: T) => {
      setValue(newValue)
      debouncedUpdateFilter(newValue)
    },
    [debouncedUpdateFilter],
  )

  useEffect(() => {
    setValue(controlledValue)
  }, [controlledValue])

  return [value, setValueAndDispatch]
}

function useDebouncedFilter<T>(
  key: keyof BlogFilterOptions,
  initialValue: T,
): [value: T, setValue: (newValue: T) => void] {
  const { dispatchFetchPosts } = useFetchPosts()
  const [value, setValue] = useState<T>(initialValue)

  const debouncedUpdateFilter = useMemo(
    () =>
      debounce(
        (newValue: T) =>
          dispatchFetchPosts({
            type: 'APPLY_FILTERS',
            filterOptions: {
              [key]: newValue,
            },
          }),
        DEBOUNCE_DELAY,
      ),
    [key, dispatchFetchPosts],
  )

  const setValueAndDispatch = useCallback(
    (newValue: T) => {
      setValue(newValue)
      debouncedUpdateFilter(newValue)
    },
    [debouncedUpdateFilter],
  )

  return [value, setValueAndDispatch]
}

Paginator = ({
  className,
  currentPage: currentPageProp,
  pageSize = 1,
  totalItems,
  onChange,
  noItemsMessage = 'No items',
  ...props
}: PaginatorProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [currentPage, setCurrentPage] = useState<number>(currentPageProp ?? 1)
  const derivedCurrentPage = currentPageProp ?? currentPage

  const { hasPrev, hasNext, startOffset, endOffset, pageCount } = usePagination(
    derivedCurrentPage,
    pageSize,
    totalItems,
  )

  const trackerDisplay =
    totalItems > 0
      ? `${startOffset} - ${endOffset} ${common.Of} ${totalItems}`
      : noItemsMessage

  const changePage = debounce((newPage: number) => {
    setCurrentPage(newPage)
    onChange?.(newPage)
  }, 0)

  const handleKeyPress = (event: React.KeyboardEvent) => {
    const { ctrlKey, shiftKey } = event
    const increment = 1 * (+!ctrlKey || 10) * (+!shiftKey || 100)
    const newPage = {
      ArrowUp: derivedCurrentPage + increment,
      ArrowRight: derivedCurrentPage + increment,
      ArrowDown: derivedCurrentPage - increment,
      ArrowLeft: derivedCurrentPage - increment,
    }[event.code]

    if (newPage) {
      event.preventDefault()
      changePage(clampValue(newPage, [1, pageCount]))
    }
  }

  return (
    <div
      tabIndex={0}
      onKeyDown={handleKeyPress}
      className={clsx('text-right', className)}
      {...props}
    >
      <span className="text-tsm text-onSurface mb-2 block tracking-wider">
        {trackerDisplay}
      </span>

      <div className="flex gap-4">
        <Cursor
          aria-label={common.Paginator.FirstLabel}
          disabled={!hasPrev}
          onClick={() => changePage(1)}
        >
          <Icon
            disabled={!hasPrev}
            icon={<LastIcon style={{ transform: 'rotate(180deg)' }} />}
          />
        </Cursor>
        <Cursor
          aria-label={common.Paginator.PreviousLabel}
          disabled={!hasPrev}
          onClick={() => changePage(derivedCurrentPage - 1)}
        >
          <Icon
            disabled={!hasPrev}
            icon={<NextIcon style={{ transform: 'rotate(180deg)' }} />}
          />
        </Cursor>

        <Cursor
          aria-label={common.Paginator.NextLabel}
          disabled={!hasNext}
          onClick={() => changePage(derivedCurrentPage + 1)}
        >
          <Icon disabled={!hasNext} icon={<NextIcon />} />
        </Cursor>
        <Cursor
          aria-label={common.Paginator.LastLabel}
          disabled={!hasNext}
          onClick={() => changePage(pageCount)}
        >
          <Icon disabled={!hasNext} icon={<LastIcon />} />
        </Cursor>
      </div>
    </div>
  )
}

RangeSliderInput = ({
  className,
  min,
  max,
  onChange,
  value: propValue = [min, max],
  ...props
}: RangeSliderInputProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [cursorAValue, setCursorAValue] = useState(propValue[0])
  const [cursorBValue, setCursorBValue] = useState(propValue[1])

  const [currentCursor, setCurrentCursor] = useState<'A' | 'B'>('A')
  const [currentTrackCursor, setCurrentTrackCursor] = useState<
    'A' | 'B' | null
  >(null)

  const isMounted = useIsMounted()
  const track = useDrag()

  const trackRef = useRef<HTMLDivElement>(null)
  const trackWidth: number = trackRef.current?.offsetWidth ?? 1

  const positionToValue = useCallback(
    (position: number): number =>
      Math.round((max - min) * (position / trackWidth) + min),
    [min, max, trackWidth],
  )

  useEffect(() => {
    if (track.isMousePressed) {
      const { x } = track.position
      const trackValue = clampValue(positionToValue(x), [min, max])

      const newCurrentCursor =
        Math.abs(trackValue - cursorAValue) <=
        Math.abs(trackValue - cursorBValue)
          ? 'A'
          : 'B'

      setCurrentCursor(newCurrentCursor)

      if (currentTrackCursor) {
        const updateCurrentCursorValue = {
          A: setCursorAValue,
          B: setCursorBValue,
        }[currentTrackCursor]
        updateCurrentCursorValue(trackValue)
      } else {
        const updateCurrentCursorValue = {
          A: setCursorAValue,
          B: setCursorBValue,
        }[newCurrentCursor]
        setCurrentTrackCursor(newCurrentCursor)
        updateCurrentCursorValue(trackValue)
      }
    } else {
      setCurrentTrackCursor(null)
    }
  }, [
    track.position.x,
    track.isMousePressed,
    cursorAValue,
    cursorBValue,
    max,
    min,
    positionToValue,
    currentTrackCursor,
  ])

  const handleKeyPress = (event: React.KeyboardEvent) => {
    const { ctrlKey, shiftKey } = event
    const increment = 1 * (+!ctrlKey || 10) * (+!shiftKey || 100)
    const action = {
      ArrowUp: (value: number) => value + increment,
      ArrowRight: (value: number) => value + increment,
      ArrowDown: (value: number) => value - increment,
      ArrowLeft: (value: number) => value - increment,
    }[event.code]

    if (!action) return

    event.nativeEvent.preventDefault()

    if (currentCursor === 'A') {
      setCursorAValue((prev) => clampValue(action(prev), [min, max]))
    } else {
      setCursorBValue((prev) => clampValue(action(prev), [min, max]))
    }
  }

  const dispatchOnChange = useMemo(
    () =>
      debounce((aValue, bValue) => {
        onChange?.([aValue, bValue].sort((a, b) => a - b) as [number, number])
      }, 500),
    [onChange],
  )

  useEffect(() => {
    if (isMounted) dispatchOnChange(cursorAValue, cursorBValue)
  }, [dispatchOnChange, cursorAValue, cursorBValue])

  useLayoutEffect(() => {
    const [newMin, newMax] = propValue
    setCursorAValue(newMin)
    setCursorBValue(newMax)
  }, [propValue])

  const trackFillLeft =
    normalize(Math.min(cursorAValue, cursorBValue), [min, max]) * 100
  const trackFillRight =
    normalize(Math.max(cursorAValue, cursorBValue), [min, max]) * 100

  const cursorAPosition =
    normalize(clampValue(cursorAValue, [min, max]), [min, max]) * 100
  const cursorBPosition =
    normalize(clampValue(cursorBValue, [min, max]), [min, max]) * 100

  return (
    <div
      className={clsx('flex w-[270px] items-center gap-3', className)}
      {...props}
    >
      <ValueDisplay>
        {clampValue(Math.min(cursorAValue, cursorBValue), [min, max])}
      </ValueDisplay>
      <div className="w-full">
        <TrackFill
          ref={trackRef}
          tabIndex={0}
          onKeyDown={(event) => handleKeyPress(event)}
          isMousePressed={track.isMousePressed}
          {...track.binders}
        >
          <Cursor
            role="slider"
            aria-label={common.ChangeValueLabel}
            aria-valuenow={cursorAValue}
            aria-valuemax={max}
            aria-valuemin={min}
            style={{ left: `${cursorAPosition}%` }}
          />
          <Cursor
            role="slider"
            aria-label={common.ChangeValueLabel}
            aria-valuenow={cursorBValue}
            aria-valuemax={max}
            aria-valuemin={min}
            style={{ left: `${cursorBPosition}%` }}
          />

          <div
            className="bg-primary absolute top-0 h-full opacity-70"
            style={{
              left: `${trackFillLeft}%`,
              width: `${trackFillRight - trackFillLeft}%`,
            }}
          />
        </TrackFill>
      </div>
      <ValueDisplay>
        {clampValue(Math.max(cursorAValue, cursorBValue), [min, max])}
      </ValueDisplay>
    </div>
  )
}

SliderInput = ({
  className,
  style,
  min,
  max,
  onChange,
  value: propValue = min,
  ...props
}: SliderInputProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [value, setValue] = useState<number>(propValue)
  const [sliderInputValue, setSliderInputValue] = useState<string>(
    propValue.toString(),
  )

  const inputRef = useRef<HTMLInputElement>(null)
  const trackRef = useRef<HTMLDivElement>(null)
  const trackWidth: number = trackRef.current?.offsetWidth ?? 1

  const positionToValue = useCallback(
    (position: number): number =>
      Math.round((max - min) * (position / trackWidth) + min),
    [min, max, trackWidth],
  )

  const valueToTrackPercentage = (currentValue: number): string =>
    `${clampValue(normalize(currentValue, [min, max]), [0, 1]) * 100}%`

  const isMounted = useIsMounted()
  const { binders, isMousePressed, position } = useDrag()

  const cursorPosition = clampValue(position.x, [0, trackWidth])
  const intSliderInputValue = strToInt(sliderInputValue)
  const isValid =
    sliderInputValue === '-' ||
    sliderInputValue === clampValue(intSliderInputValue, [min, max]).toString()

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const matches = event.target.value.match(/^-?[0-9]*/) ?? ['']
    const sanitized = matches[0]
    const newValue = strToInt(sanitized)

    if (Number.isNaN(newValue) || newValue < min) {
      setSliderInputValue(sanitized)
    } else {
      const boundedValue = clampValue(newValue, [min, max])
      setValue(boundedValue)
      setSliderInputValue(boundedValue.toString())
    }
  }

  const handleInputBlur = (event: React.FocusEvent) => {
    if (!isValid || (event.target as HTMLInputElement).value === '-') {
      setSliderInputValue(min.toString())
      setValue(min)
    }
  }

  const handleInputKeyPress = (event: React.KeyboardEvent) => {
    const { ctrlKey, shiftKey } = event
    const increment = 1 * (+!ctrlKey || 10) * (+!shiftKey || 100)
    const action = {
      ArrowUp: (prev: number) => prev + increment,
      ArrowDown: (prev: number) => prev - increment,
    }[event.code]

    if (!action) return

    event.nativeEvent.preventDefault()
    setValue((prev) => clampValue(action(prev), [min, max]))
  }

  const handleTrackKeyPress = (event: React.KeyboardEvent) => {
    const { ctrlKey, shiftKey } = event
    const increment = 1 * (+!ctrlKey || 10) * (+!shiftKey || 100)
    const action = {
      ArrowUp: (prev: number) => prev + increment,
      ArrowRight: (prev: number) => prev + increment,
      ArrowDown: (prev: number) => prev - increment,
      ArrowLeft: (prev: number) => prev - increment,
    }[event.code]

    if (!action) return

    event.nativeEvent.preventDefault()
    setValue((prev) => clampValue(action(prev), [min, max]))
  }

  useEffect(() => {
    if (isMousePressed) {
      const newValue = positionToValue(cursorPosition)
      setValue(newValue)
    }
  }, [isMousePressed, positionToValue, cursorPosition])

  const dispatchSyntheticEvent = useMemo(
    () =>
      debounce(() => {
        const event = new Event('input', { bubbles: true })
        inputRef.current?.dispatchEvent(event)
      }, 250),
    [],
  )

  useEffect(() => {
    setSliderInputValue(value.toString())
    if (isMounted) dispatchSyntheticEvent()
  }, [value, dispatchSyntheticEvent])

  useLayoutEffect(() => {
    setValue(propValue)
  }, [propValue])

  return (
    <div
      className={clsx('flex w-[270px] items-center gap-3 pl-2', className)}
      style={style}
    >
      <div style={{ width: '100%' }}>
        <TrackFill
          ref={trackRef}
          isMousePressed={isMousePressed}
          tabIndex={0}
          onKeyDown={handleTrackKeyPress}
          {...binders}
        >
          <Cursor
            role="slider"
            aria-label={common.ChangeValueLabel}
            aria-valuenow={value}
            aria-valuemax={max}
            aria-valuemin={min}
            style={{ left: valueToTrackPercentage(value) }}
          />
          <div
            className="bg-primary after:bg-primary pointer-events-none absolute top-0 left-0 h-full after:pointer-events-none after:absolute after:right-full after:top-0 after:h-full after:w-[7px]"
            style={{ width: valueToTrackPercentage(value) }}
          />
        </TrackFill>
      </div>
      <input
        aria-label={props['aria-label']}
        aria-labelledby={props['aria-labelledby']}
        aria-invalid={!isValid}
        value={sliderInputValue}
        onChange={handleInputChange}
        onBlur={handleInputBlur}
        onKeyDown={handleInputKeyPress}
        className={clsx(
          'text-tsm selection:bg-primary selection:text-onPrimary w-10 shrink-0 rounded-lg border-none py-[7px] text-center outline-none transition-colors',
          isValid
            ? 'bg-primaryVariant text-onSurface'
            : 'bg-red text-onPrimary selection',
        )}
      />
      <input
        hidden
        aria-invalid={!isValid}
        value={value}
        onInput={(event) =>
          onChange?.(event as React.ChangeEvent<HTMLInputElement>)
        }
        ref={inputRef}
        {...props}
      />
    </div>
  )
}