feat(tags): use func to build tag URL

StampyAI · Feb 10, 2024 · 4367891 · 4367891
1 parent 4cbb5d5
commit 4367891
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git 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.$tagId.$'
+import {buildTagUrl, 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, tagId}) => (
+        .map((tag) => (
           <Link
-            key={rowId}
+            key={tag.rowId}
             className="articles-dropdown-teal-entry"
-            to={`/tags/${tagId}/${name}`}
-            text={name}
+            to={`/tags/${buildTagUrl(tag)}`}
+            text={tag.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.$tagId.$.tsx b/app/routes/tags.$tagId.$.tsx
@@ -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.tagId}/${selectedTag.name}`, {relative: 'path'})
+              navigate(`../${buildTagUrl(selectedTag)}`, {relative: 'path'})
             }}
             onChange={setTagsFilter}
           />

diff --git a/app/routes/tags._index.tsx b/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(`${defaultTag.tagId}/${defaultTag.name}`)
+  throw redirect(buildTagUrl(defaultTag))
 }