From 453f5c57416cc1b7427c193a999f19484a4492af Mon Sep 17 00:00:00 2001
From: jrhender <stampy@j-henderson.com>
Date: Fri, 9 Feb 2024 13:34:51 +0000
Subject: [PATCH] feat(CatNav menu): fix clicking from left nave

---
 app/components/CategoriesNav/Menu.tsx | 14 +++++---------
 app/routes/tags.$tag.tsx              | 28 +++++++++++++--------------
 app/routes/tags._index.tsx            |  2 +-
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
index 73dc3351..8cf8b42a 100644
--- a/app/components/CategoriesNav/Menu.tsx
+++ b/app/components/CategoriesNav/Menu.tsx
@@ -1,4 +1,3 @@
-import {useState} from 'react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import './menu.css'
@@ -11,7 +10,7 @@ interface CategoriesNavProps {
   /**
    * Selected article
    */
-  active: number
+  active: TagType
   /**
    * Callback function to handle click on article
    */
@@ -23,12 +22,9 @@ interface CategoriesNavProps {
 }
 
 export const CategoriesNav = ({categories, active, onChange, onClick}: CategoriesNavProps) => {
-  const [selected, setSelected] = useState(active || 0)
-
-  const handleClick = (index: number) => {
-    setSelected(index)
+  const handleClick = (newTag: TagType) => {
     if (onClick) {
-      onClick(index)
+      onClick(newTag)
     }
   }
 
@@ -44,9 +40,9 @@ export const CategoriesNav = ({categories, active, onChange, onClick}: Categorie
             key={`category-${category.tagId}`}
             className={[
               'category-autoLayoutHorizontal',
-              selected == category.tagId ? ['active'].join(' ') : '',
+              active.tagId == category.tagId ? ['active'].join(' ') : '',
             ].join(' ')}
-            onClick={() => handleClick(category.tagId)}
+            onClick={() => handleClick(category)}
           >
             <div className={'category-title'}>
               {category.name} ({category.questions.length})
diff --git a/app/routes/tags.$tag.tsx b/app/routes/tags.$tag.tsx
index 44e07d46..25f6639d 100644
--- a/app/routes/tags.$tag.tsx
+++ b/app/routes/tags.$tag.tsx
@@ -17,21 +17,21 @@ type Props = {
 }
 
 export const loader = async ({request, params}: Parameters<LoaderFunction>[0]) => {
-  const {tag} = params
-  if (!tag) {
+  const {tag: tagFromUrl} = params
+  if (!tagFromUrl) {
     throw Error('missing tag name')
   }
 
   try {
     const tags = await loadTags(request)
-    return {tag, ...tags}
+    return {...tags, tagFromUrl}
   } catch (error: unknown) {
-    console.error(`error fetching tag "${tag}":`, error)
+    console.error(`error fetching tag "${tagFromUrl}":`, error)
     return {
       error: error?.toString(),
       timestamp: new Date().toISOString(),
       data: new Array<TagType>(),
-      tag,
+      tagFromUrl,
     }
   }
 }
@@ -144,19 +144,19 @@ export function Tags({tags}: Props) {
 }
 
 export default function App() {
-  const {tag, data} = useLoaderData<ReturnType<typeof loader>>()
+  const {tagFromUrl, data} = useLoaderData<ReturnType<typeof loader>>()
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
   const [tagsFilter, setTagsFilter] = useState<string>('')
   const {toc} = useToC()
 
   const [sortBy] = useState<keyof typeof sortFuncs>('alphabetically')
 
-  const currentTagData = data.filter((tagData) => tagData.name === tag)[0]
   useEffect(() => {
     if (selectedTag === null) {
-      setSelectedTag(data.filter((tag) => tag.questions.length > 0)[0])
+      const dataForUrlTag = data.filter((tagData) => tagData.name === tagFromUrl)[0]
+      setSelectedTag(dataForUrlTag)
     }
-  }, [data, selectedTag])
+  }, [selectedTag, data, tagFromUrl])
   if (selectedTag === null) {
     return null
   }
@@ -175,22 +175,22 @@ export default function App() {
 
               // {title: "AI Safety", id: 1},
             }
-            active={Number(selectedTag)}
+            active={selectedTag}
             onClick={setSelectedTag}
             onChange={setTagsFilter}
           />
 
           {selectedTag === null ? null : (
             <div>
-              <h1 style={{marginTop: '0px'}}>{currentTagData.name}</h1>
-              {currentTagData.questions.length === 0 ? (
+              <h1 style={{marginTop: '0px'}}>{selectedTag.name}</h1>
+              {selectedTag.questions.length === 0 ? (
                 <div className={'no-questions'}>No questions found</div>
               ) : (
                 <p>
-                  {currentTagData.questions.length} pages tagged {`"${currentTagData.name}"`}
+                  {selectedTag.questions.length} pages tagged {`"${selectedTag.name}"`}
                 </p>
               )}
-              {selectedTag && <ListTable elements={currentTagData.questions} />}
+              {selectedTag && <ListTable elements={selectedTag.questions} />}
             </div>
           )}
         </div>
diff --git a/app/routes/tags._index.tsx b/app/routes/tags._index.tsx
index 285eead9..637bfd91 100644
--- a/app/routes/tags._index.tsx
+++ b/app/routes/tags._index.tsx
@@ -6,5 +6,5 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
   const tags = await loadTags(request)
   const {data = []} = tags ?? {}
   const defaultTag = data[0]
-  throw redirect(`${defaultTag.name}`)
+  throw redirect(`${encodeURIComponent(defaultTag.name)}`)
 }