feat: improve display of clear filters button (#818)

asyncapi · Jun 10, 2022 · a3f96ac · a3f96ac
1 parent 6a3af98
commit a3f96ac
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -1,5 +1,6 @@
 import { useContext, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import NavBar from "../../components/navigation/NavBar";
 import Container from "../../components/layout/Container";
 import BlogContext from "../../context/BlogContext";
@@ -15,6 +16,7 @@ import Paragraph from "../../components/typography/Paragraph";
 import TextLink from "../../components/typography/TextLink";
 
 export default function BlogIndexPage() {
+  const router = useRouter();
   const { navItems } = useContext(BlogContext);
   const [posts, setPosts] = useState(
     navItems.sort((i1, i2) => {
@@ -40,6 +42,7 @@ export default function BlogIndexPage() {
       name: "tags",
     },
   ];
+  const showClearFilters = Object.keys(router.query).length > 0;
   return (
     <div>
       <Head title="Blog" />
@@ -90,9 +93,11 @@ export default function BlogIndexPage() {
               className="w-full mx-px md:mt-0 md:w-1/5 md: md:text-sm"
               checks={toFilter}
             />
-            <span className="text-sm leading-10">
-              <Link href="/blog" passHref><a> Clear filters </a></Link>
-            </span>
+            {showClearFilters && (
+              <span className="text-sm leading-10">
+                <Link href="/blog" passHref><a> Clear filters </a></Link>
+              </span>
+            )}
           </div>
           <div>
             {!Object.keys(posts).length ? (