From 535eafdf95bc4ea68d352c03f52639e9b1de7e53 Mon Sep 17 00:00:00 2001 From: jrhender Date: Sat, 10 Feb 2024 11:20:09 +0000 Subject: [PATCH 1/2] 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}) => ( ))} - 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[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[0]) => { const tags = await loadTags(request) const {data = []} = tags ?? {} const defaultTag = data[0] - throw redirect(`${encodeURIComponent(defaultTag.name)}`) + throw redirect(`${defaultTag.tagId}/${defaultTag.name}`) } From f41fc68feaa9063d6b861b2cf4b0b431664c06d1 Mon Sep 17 00:00:00 2001 From: jrhender Date: Sat, 10 Feb 2024 11:28:58 +0000 Subject: [PATCH 2/2] feat(tags): use func to build tag URL --- app/components/ArticlesDropdown/index.tsx | 12 ++++++------ app/routes/tags.$tagId.$.tsx | 4 +++- app/routes/tags._index.tsx | 3 ++- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx index 00b41dff..28854803 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.$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) => ( ))} - diff --git a/app/routes/tags.$tagId.$.tsx b/app/routes/tags.$tagId.$.tsx index 190dbae0..67e3933a 100644 --- 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>() const [selectedTag, setSelectedTag] = useState(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 index 4e9ea4f8..e83173e1 100644 --- 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[0]) => { const tags = await loadTags(request) const {data = []} = tags ?? {} const defaultTag = data[0] - throw redirect(`${defaultTag.tagId}/${defaultTag.name}`) + throw redirect(buildTagUrl(defaultTag)) }