diff --git a/src/Agenda.js b/src/Agenda.js index 9e7a8d1..a7af315 100644 --- a/src/Agenda.js +++ b/src/Agenda.js @@ -10,7 +10,7 @@ import Filter from "./components/Filter" import produce from "immer" -import { useLocation, useHistory } from "react-router-dom" +import { useLocation, useNavigate } from "react-router-dom" import debounce from 'lodash.debounce' @@ -84,13 +84,13 @@ const Row = ({day, filters, events, ...rest}) => { } -const updateSearchInURL = debounce((history, location, columns) => { +const updateSearchInURL = debounce((navigate, location, columns) => { const search = new URLSearchParams() columns.filter(c => c).forEach(c => search.append("filter", c)) const state = {...location, search: "?" + search.toString()} if (state.search !== location.search && - location.pathname === history.location.pathname) { - history.push(state) + location.pathname === navigate.location.pathname) { + navigate.push(state) } }, 250) @@ -104,10 +104,10 @@ function Agenda(props, state) { const location = useLocation() const search = new URLSearchParams(location.search) const [columns, setColumns] = useState(search.getAll('filter')) - const history = useHistory() + const navigate = useNavigate() React.useEffect(() => { - const unlisten = history.listen((newLocation, action) => { + const unlisten = navigate.listen((newLocation, action) => { if (newLocation.pathname !== location.pathname) { updateSearchInURL.cancel() } @@ -120,8 +120,8 @@ function Agenda(props, state) { }, []) // eslint-disable-line react-hooks/exhaustive-deps React.useEffect(() => { - updateSearchInURL(history, location, columns) - }, [history, location, columns]) + updateSearchInURL(navigate, location, columns) + }, [navigate, location, columns]) let dom = nextDays(new DateTime({}), 40).map(d => d.toISODate())