Function useFormErrorScrollIntoView

ui/src/hooks.ts:37–74

(errors?: FieldErrors)

};

export const useFormErrorScrollIntoView = (errors?: FieldErrors) => {
  const errorRef = useRef(errors);
  const beforeScroll = useRef<(names: string[]) => void>();

  useEffect(() => {
    errorRef.current = errors;
  }, [errors]);

  const scrollToError = useCallback(() => {
    if(errorRef.current) {
      const names = Object.keys(errorRef.current);
      if(beforeScroll.current) {
        beforeScroll.current(names);
      }
      setTimeout(() => {
        document.querySelector(`[name=${names[0]}]`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
    }
  }, [errorRef]);

  const registerErrorName = useCallback((name: string) => {
    return {
      ref: (ref: unknown) => {
        (ref as HTMLElement)?.setAttribute('name', name);
      }
    };
  }, []);

  const setBeforeScrollCallback = useCallback((fc: (names: string[]) => void) => {
    beforeScroll.current = fc;
  }, [beforeScroll]);

  return {
    scrollToError,
    registerErrorName,
    setBeforeScrollCallback,
  };
};

export const useQuery = () => {
  const { search } = useLocation();