diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx index 5fa7fbe0..483d874a 100644 --- a/app/components/CategoriesNav/Menu.tsx +++ b/app/components/CategoriesNav/Menu.tsx @@ -14,12 +14,16 @@ interface CategoriesNavProps { * Id of selected category */ activeCategoryId: number + /** + * Class name for the component + */ + className?: string } -export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => { +export const CategoriesNav = ({categories, activeCategoryId, className}: CategoriesNavProps) => { const [search, onSearch] = useState('') return ( -
+

Categories

diff --git a/app/routes/tags.$.tsx b/app/routes/tags.$.tsx index b2617700..b6cec77e 100644 --- a/app/routes/tags.$.tsx +++ b/app/routes/tags.$.tsx @@ -23,25 +23,25 @@ export default function Tags() { const [sortBy] = useState('alphabetically') useEffect(() => { - if (selectedTag !== currentTag) { - setSelectedTag(currentTag) + if (currentTag === undefined) { + setSelectedTag(null) + } else { + if (selectedTag !== currentTag) { + setSelectedTag(currentTag) + } } }, [selectedTag, tags, currentTag]) - if (selectedTag === null) { - return null - } - const isTagsPage = window.location.pathname.split('/').slice(-2)[0] === 'tags' + return (
- {mobile && !isTagsPage ? null : ( - tag.questions.length > 0).sort(sortFuncs[sortBy])} - activeCategoryId={selectedTag.tagId} - /> - )} - {(mobile && isTagsPage) || selectedTag === null ? null : ( + tag.questions.length > 0).sort(sortFuncs[sortBy])} + activeCategoryId={selectedTag?.tagId || 0} + className={mobile && selectedTag !== null ? 'desktop-only' : ''} + /> + {selectedTag === null ? null : (

{selectedTag.name}

diff --git a/app/routes/tags.all.tsx b/app/routes/tags.all.tsx index 99301768..030a39f3 100644 --- a/app/routes/tags.all.tsx +++ b/app/routes/tags.all.tsx @@ -6,15 +6,19 @@ import {reloadInBackgroundIfNeeded} from '~/server-utils/kv-cache' export const loader = async ({request, params}: Parameters[0]) => { const {data: tags, timestamp} = await loadTags(request) - const tagId = params['*'] && params['*'].split('/')[0] + let tagId = params['*'] && params['*'].split('/')[0] + if (tagId === '') { + tagId = undefined + } + const currentTag = tagId - ? tags.find(({tagId: checkedId, name}) => [checkedId.toString(), name].includes(tagId)) - : tags[0] + ? tags.find(({tagId: checkedId, name}) => [checkedId.toString(), name].includes(tagId!)) + : undefined - if (currentTag === undefined) { + if (currentTag === undefined && tagId !== undefined) { throw new Response(null, { status: 404, - statusText: 'Unable to find requested tag', + statusText: 'Unable to find requested tag -d', }) }