From 4cbb5d51ebe90c7efefed9e906a234363edb4dcb Mon Sep 17 00:00:00 2001
From: jrhender <stampy@j-henderson.com>
Date: Sat, 10 Feb 2024 11:20:09 +0000
Subject: [PATCH] feat(tags): use tags/tagId/tagName as URL

---
 app/components/ArticlesDropdown/index.tsx       | 8 ++++----
 app/routes/{tags.$tag.tsx => tags.$tagId.$.tsx} | 6 +++---
 app/routes/tags._index.tsx                      | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename app/routes/{tags.$tag.tsx => tags.$tagId.$.tsx} (93%)

diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx
index b6d25ad2..00b41dff 100644
--- a/app/components/ArticlesDropdown/index.tsx
+++ b/app/components/ArticlesDropdown/index.tsx
@@ -1,6 +1,6 @@
 import type {Tag} from '~/server-utils/stampy'
 import {TOCItem, Category, ADVANCED, INTRODUCTORY} from '~/routes/questions.toc'
-import {sortFuncs} from '~/routes/tags.$tag'
+import {sortFuncs} from '~/routes/tags.$tagId.$'
 import Button from '~/components/Button'
 import './dropdown.css'
 
@@ -39,16 +39,16 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => (
       {categories
         ?.sort(sortFuncs['by number of questions'])
         .slice(0, 12)
-        .map(({rowId, name}) => (
+        .map(({rowId, name, tagId}) => (
           <Link
             key={rowId}
             className="articles-dropdown-teal-entry"
-            to={`/tags/${name}`}
+            to={`/tags/${tagId}/${name}`}
             text={name}
           />
         ))}
 
-      <Button action="/tags/" className="dropdown-button bordered grey dropdown-button-label">
+      <Button action="/tags" className="dropdown-button bordered grey dropdown-button-label">
         Browse all categories
       </Button>
     </div>
diff --git a/app/routes/tags.$tag.tsx b/app/routes/tags.$tagId.$.tsx
similarity index 93%
rename from app/routes/tags.$tag.tsx
rename to app/routes/tags.$tagId.$.tsx
index cb1e96f7..190dbae0 100644
--- a/app/routes/tags.$tag.tsx
+++ b/app/routes/tags.$tagId.$.tsx
@@ -9,13 +9,13 @@ import {ListTable} from '~/components/Table/ListTable'
 import {CategoriesNav} from '~/components/CategoriesNav/Menu'
 
 export const loader = async ({request, params}: Parameters<LoaderFunction>[0]) => {
-  const {tag: tagFromUrl} = params
+  const {tagId: tagFromUrl} = params
   if (!tagFromUrl) {
     throw Error('missing tag name')
   }
 
   const tags = await loadTags(request)
-  const currentTag = tags.data.find((tagData) => tagData.name === tagFromUrl)
+  const currentTag = tags.data.find((tagData) => tagData.tagId === Number(tagFromUrl))
   if (currentTag === undefined) {
     throw new Response(null, {
       status: 404,
@@ -65,7 +65,7 @@ export default function App() {
             }
             activeCategoryId={selectedTag.tagId}
             onClick={(selectedTag) => {
-              navigate(`../${selectedTag.name}`, {relative: 'path'})
+              navigate(`../${selectedTag.tagId}/${selectedTag.name}`, {relative: 'path'})
             }}
             onChange={setTagsFilter}
           />
diff --git a/app/routes/tags._index.tsx b/app/routes/tags._index.tsx
index 637bfd91..4e9ea4f8 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(`${encodeURIComponent(defaultTag.name)}`)
+  throw redirect(`${defaultTag.tagId}/${defaultTag.name}`)
 }