filter guides by tag

Author: davemooreuws

src/components/guides/GuideList.tsx

@@ -1,19 +1,24 @@
+'use client'
+
 import { Doc } from '@/content'
 import React from 'react'
-import { Separator } from '../ui/separator'
-import Link from 'next/link'
-import { cn } from '@/lib/utils'
-import { title } from 'radash'
 import GuideItem from './GuideItem'
 import { Checkbox } from '../ui/checkbox'
+import useParams from '@/hooks/useParams'
 
 interface Props {
   guides: Doc[]
   allTags: string[]
 }
 
 const GuideList: React.FC<Props> = ({ guides, allTags }) => {
-  allTags = ['python', 'node', 'go']
+  const { searchParams, setParams } = useParams()
+  const selectedTags = searchParams.get('tags')?.split(',') || []
+
+  const filteredGuides = guides.filter((guide) => {
+    if (!selectedTags.length) return true
+    return selectedTags.some((tag) => guide.tags?.includes(tag))
+  })
 
   return (
     <div className="mt-10 grid grid-cols-[280px,1fr]">
@@ -25,21 +30,37 @@ const GuideList: React.FC<Props> = ({ guides, allTags }) => {
           {allTags.map((tag) => (
             <li key={tag}>
               <div className="flex items-center space-x-4">
-                <Checkbox id={tag} />
+                <Checkbox
+                  id={tag}
+                  checked={selectedTags.includes(tag)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setParams('tags', [...selectedTags, tag].join(','))
+                    } else {
+                      setParams(
+                        'tags',
+                        selectedTags
+                          .filter((selectedTag) => selectedTag !== tag)
+                          .join(','),
+                      )
+                    }
+                  }}
+                  className="h-5 w-5 border-primary-400 data-[state=checked]:bg-primary"
+                />
                 <label
                   htmlFor={tag}
-                  className="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  className="cursor-pointer text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 >
-                  {title(tag)}
+                  {tag}
                 </label>
               </div>
             </li>
           ))}
         </ul>
       </aside>
       <ul className="space-y-4">
-        {guides.map((guide) => (
-          <li key={guide.title}>
+        {filteredGuides.map((guide) => (
+          <li key={guide.slug}>
             <GuideItem guide={guide} />
           </li>
         ))}

src/hooks/useLang.ts

@@ -1,5 +1,7 @@
 import { useSearchParams } from 'next/navigation'
 import { useCallback, useEffect } from 'react'
+import useParams from './useParams'
+import { set } from 'node_modules/cypress/types/lodash'
 
 export type LanguageId =
   | 'javascript'
@@ -28,7 +30,7 @@ const languages = ['javascript', 'python', 'go', 'typescript', 'dart']
 const LOCAL_STORAGE_KEY = 'nitric.docs.selected.language'
 
 const useLang = () => {
-  const searchParams = useSearchParams() || new URLSearchParams()
+  const { searchParams, setParams } = useParams()
 
   const queryParamLang = searchParams.get('lang') as LanguageId
 
@@ -45,17 +47,10 @@ const useLang = () => {
       )
 
       if (!id) {
-        currentParams.delete('lang')
+        setParams('lang', null)
       } else {
-        currentParams.set('lang', id)
-      }
-
-      const search = currentParams.toString()
-      const query = search ? `?${search}` : ''
-
-      window.history.pushState(null, '', query)
+        setParams('lang', id)
 
-      if (query) {
         // set language in local storage
         try {
           localStorage.setItem(LOCAL_STORAGE_KEY, id)

src/hooks/useParams.ts

@@ -0,0 +1,36 @@
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useCallback } from 'react'
+
+const useParams = () => {
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  const setParams = useCallback(
+    (name: string, value: string | null) => {
+      // Apparently this nonsense is necessary to update the URL.
+      //  See: https://github.com/vercel/next.js/discussions/47583
+      const currentParams = new URLSearchParams(
+        Array.from(searchParams.entries()),
+      )
+
+      if (!value) {
+        currentParams.delete(name)
+      } else {
+        currentParams.set(name, value)
+      }
+
+      const search = currentParams.toString()
+      const url = search ? `/docs${pathname}?${search}` : `/docs${pathname}`
+
+      window.history.pushState(null, '', url)
+    },
+    [searchParams, pathname],
+  )
+
+  return {
+    setParams,
+    searchParams,
+  }
+}
+
+export default useParams