♿ fix tag link to use next/link in search page

craigary · May 5, 2021 · 926b271 · 926b271
1 parent 14eb44d
commit 926b271
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/components/Tags.js b/components/Tags.js
@@ -1,21 +1,27 @@
-const Tags = ({ tags, handleTagClick, selectedTag }) => {
+import Link from 'next/link'
+
+const Tags = ({ tags, currentTag }) => {
   if (!tags) return null
   return (
     <div className="tag-container">
       <ul className="flex max-w-full mt-4 overflow-x-auto">
-        {Object.keys(tags).map(key => (
-          <li
-            key={key}
-            onClick={() => handleTagClick(key)}
-            className={`mr-3 py-2 font-medium cursor-pointer  border px-4 whitespace-nowrap bg-gray-100 border-gray-100 text-gray-400 dark:bg-night dark:border-gray-800 dark:text-gray-300 ${
-              key === selectedTag
-                ? 'text-white bg-black border-black dark:bg-gray-600 dark:border-gray-600 dark:text-gray-300'
-                : ''
-            }`}
-          >
-            {`${key} (${tags[key]})`}
-          </li>
-        ))}
+        {Object.keys(tags).map(key => {
+          const selected = key === currentTag;
+          return (
+            <Link key={key} href={selected ? '/search' : `/tag/${encodeURIComponent(key)}`}>
+              <a>
+                <li
+                  className={`mr-3 py-2 font-medium border px-4 whitespace-nowrap bg-gray-100 border-gray-100 text-gray-400 dark:bg-night dark:border-gray-800 dark:text-gray-300 ${
+                    selected
+                      ? 'text-white bg-black border-black dark:bg-gray-600 dark:border-gray-600 dark:text-gray-300'
+                      : ''
+                  }`}
+                >
+                  {`${key} (${tags[key]})`}
+                </li>
+              </a>
+            </Link>
+        )})}
       </ul>
     </div>
   )

diff --git a/layouts/search.js b/layouts/search.js
@@ -1,14 +1,11 @@
-import { useRouter } from 'next/router'
 import { useState } from 'react'
 import BlogPost from '@/components/BlogPost'
 import Container from '@/components/Container'
 import Tags from '@/components/Tags'
 import PropTypes from 'prop-types'
 
 const SearchLayout = ({ tags, posts, currentTag }) => {
-  const router = useRouter()
   const [searchValue, setSearchValue] = useState('')
-  const [selectedTag, setSelectedTag] = useState('')
   let filteredBlogPosts = []
   if (posts) {
     filteredBlogPosts = posts.filter(post => {
@@ -18,14 +15,6 @@ const SearchLayout = ({ tags, posts, currentTag }) => {
     })
   }
 
-  const handleTagClick = key => {
-    if (key === currentTag) {
-      setSelectedTag('')
-      router.push('/search')
-    } else {
-      router.push(`/tag/${encodeURIComponent(key)}`)
-    }
-  }
   return (
     <Container>
       <div className="relative">
@@ -54,8 +43,7 @@ const SearchLayout = ({ tags, posts, currentTag }) => {
       </div>
       <Tags
         tags={tags}
-        handleTagClick={handleTagClick}
-        selectedTag={selectedTag || currentTag}
+        currentTag={currentTag}
       />
       <div className="article-container my-8">
         {!filteredBlogPosts.length && (