Blog page Tab Improvement.

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<blogCategories>(
     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<HTMLButtonElement>) => {
+    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'}
                             </div>
                           </div>
                           <div className='text-lg font-semibold'>