feat(tags): use tagId for tag routes (#384)

changes the route for tag pages from tags/{tag name} to tags/{tag id}/{tag name}.
Only tag id is needed to navigate to the page.

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 {buildTagUrl, sortFuncs} from '~/routes/tags.$tagId.$'
 import Button from '~/components/Button'
 import './dropdown.css'
 
@@ -39,12 +39,12 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => (
       {categories
         ?.sort(sortFuncs['by number of questions'])
         .slice(0, 12)
-        .map(({rowId, name}) => (
+        .map((tag) => (
           <Link
-            key={rowId}
+            key={tag.rowId}
             className="articles-dropdown-teal-entry"
-            to={`/tags/${name}`}
-            text={name}
+            to={`/tags/${buildTagUrl(tag)}`}
+            text={tag.name}
           />
         ))}
 

app/routes/tags.$tag.tsx → 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,
@@ -31,6 +31,8 @@ export const sortFuncs = {
   'by number of questions': (a: TagType, b: TagType) => b.questions.length - a.questions.length,
 }
 
+export const buildTagUrl = (tag: TagType) => `${tag.tagId}/${tag.name}`
+
 export default function App() {
   const {currentTag, data} = useLoaderData<ReturnType<typeof loader>>()
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
@@ -65,7 +67,7 @@ export default function App() {
             }
             activeCategoryId={selectedTag.tagId}
             onClick={(selectedTag) => {
-              navigate(`../${selectedTag.name}`, {relative: 'path'})
+              navigate(`../${buildTagUrl(selectedTag)}`, {relative: 'path'})
             }}
             onChange={setTagsFilter}
           />

app/routes/tags._index.tsx

@@ -1,10 +1,11 @@
 import type {LoaderFunction} from '@remix-run/cloudflare'
 import {redirect} from '@remix-run/cloudflare'
 import {loadTags} from '~/server-utils/stampy'
+import {buildTagUrl} from './tags.$tagId.$'
 
 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(buildTagUrl(defaultTag))
 }