packages/pass/hooks/useSessionLockPinSubmitEffect.ts

   1 import { useEffect, useRef } from 'react';
   2
   3 import { SESSION_LOCK_PIN_LENGTH } from '../components/Lock/constants';
   4 import { useDebouncedValue } from './useDebouncedValue';
   5
   6 type UseSessionLockPinOptions = {
   7     onSubmit: (pin: string) => void;
   8 };
   9
  10 /* Calls onSubmit when the PIN has reached the necessary length */
  11 export const useSessionLockPinSubmitEffect = (pin: string, { onSubmit }: UseSessionLockPinOptions) => {
  12     const value = useDebouncedValue(pin, 150);
  13     const onSubmitRef = useRef(onSubmit);
  14
  15     useEffect(() => {
  16         onSubmitRef.current = onSubmit;
  17     }, [onSubmit]);
  18
  19     useEffect(() => {
  20         const safePin = value.replaceAll(/\s+/g, '');
  21         if (safePin.length === SESSION_LOCK_PIN_LENGTH) onSubmitRef.current(value);
  22     }, [value]);
  23 };