43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import useNavStore from "../store/navStore";
|
|
|
|
export const useUrlSync = () => {
|
|
const navigate = useNavigate();
|
|
const { celexId: paramCelexId, articleId: paramArticleId } = useParams();
|
|
|
|
const celexId = useNavStore.use.celexId();
|
|
const setCelexId = useNavStore.use.setCelexId();
|
|
const articleId = useNavStore.use.articleId();
|
|
const setArticleId = useNavStore.use.setArticleId();
|
|
|
|
// Effect to read from URL when URL changes
|
|
useEffect(() => {
|
|
if (paramCelexId && paramCelexId !== celexId) {
|
|
setCelexId(paramCelexId);
|
|
}
|
|
|
|
if (paramArticleId) {
|
|
const parsedArticleId = paramArticleId ? parseInt(paramArticleId) : null;
|
|
if (parsedArticleId && parsedArticleId !== articleId) {
|
|
setArticleId(parsedArticleId);
|
|
}
|
|
} else {
|
|
// If no articleId in URL, reset Zustand state
|
|
setArticleId(null);
|
|
}
|
|
}, [paramArticleId, paramArticleId]);
|
|
|
|
// Update the URL when Zustand changes
|
|
useEffect(() => {
|
|
if (!celexId) {
|
|
return;
|
|
}
|
|
let targetUrl = `/${celexId}`;
|
|
if (articleId !== null) {
|
|
targetUrl += `/articles/${articleId}`;
|
|
}
|
|
navigate(targetUrl);
|
|
}, [navigate, celexId, articleId]); // Only sync URL when Zustand changes
|
|
};
|