import { useEffect, useRef } from 'preact/hooks';
import { useLocation } from 'react-router-dom';

// Hook that runs a callback when the location changes
// Won't run on the first render

export default function useLocationChange(fn?: (() => void) | null): void {
  const location = useLocation();
  const currentLocationRef = useRef(location.pathname);
  useEffect(() => {
    if (!fn) return;
    // console.log('location', {
    //   current: currentLocationRef.current,
    //   next: location.pathname,
    // });
    if (
      currentLocationRef.current &&
      location.pathname !== currentLocationRef.current
    ) {
      fn();
    }
  }, [location.pathname, fn]);
}