diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index 67aaf5e74..30dabd0a5 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -9,7 +9,6 @@ const PATH = 'pages/blog/posts'; import TextTruncate from 'react-text-truncate'; import generateRssFeed from './generateRssFeed'; import { useRouter } from 'next/router'; -import useSetUrlParam from '~/lib/useSetUrlParam'; import { SectionContext } from '~/context'; type Author = { @@ -75,7 +74,6 @@ export default function StaticMarkdownPage({ filterTag: any; }) { const router = useRouter(); - const setParam = useSetUrlParam(); const [currentFilterTag, setCurrentFilterTag] = useState( filterTag || 'All', ); @@ -92,36 +90,17 @@ export default function StaticMarkdownPage({ setCurrentFilterTag(filterTag); }, [filterTag]); - const handleClick = (event: { currentTarget: { value: any } }) => { - const clickedTag = event.currentTarget.value; - setParam('type', clickedTag); - + const handleClick = (event: React.MouseEvent) => { + event.preventDefault(); // Prevent default scrolling behavior + const clickedTag = event.currentTarget.value as blogCategories; if (clickedTag === 'All') { - setParam('type', null); - } else { + setCurrentFilterTag('All'); + history.replaceState(null, '', '/blog'); // Update the URL without causing a scroll + } else if (isValidCategory(clickedTag)) { setCurrentFilterTag(clickedTag); - } - - // Check if the user is already on the "/blog" page - if (router.pathname === '/blog') { - if (router.query.type) { - // Remove the 'type' query parameter from the URL - setParam( - 'type', - router.query.type === clickedTag ? undefined : clickedTag, - ); - } - setCurrentFilterTag(clickedTag); - } else { - // If not on the "/blog" page, navigate to the "/blog" page with the type tag as a query parameter - router.replace( - { pathname: '/blog', query: { type: clickedTag } }, - undefined, - { shallow: true }, - ); + history.replaceState(null, '', `/blog?type=${clickedTag}`); // Update URL } }; - const recentBlog = blogPosts.sort((a, b) => { const dateA = new Date(a.frontmatter.date).getTime(); const dateB = new Date(b.frontmatter.date).getTime(); @@ -274,10 +253,18 @@ export default function StaticMarkdownPage({ onClick={(e) => { e.preventDefault(); e.stopPropagation(); - setParam('type', frontmatter.type); + + if (frontmatter.type) { + setCurrentFilterTag(frontmatter.type); + history.replaceState( + null, + '', + `/blog?type=${frontmatter.type}`, + ); + } }} > - {frontmatter.type} + {frontmatter.type || 'Unknown Type'}