From fdd4f849ee9ed8515a8f9b07cb6bdb1ee4b90e06 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Thu, 29 Feb 2024 06:12:31 +0200
Subject: [PATCH] requested changes

---
 app/components/CategoriesNav/Menu.tsx |  8 ++++++--
 app/routes/tags.$.tsx                 | 26 +++++++++++++-------------
 app/routes/tags.all.tsx               | 14 +++++++++-----
 3 files changed, 28 insertions(+), 20 deletions(-)

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 (
-    <div className={'categoriesGroup bordered col-4-5'}>
+    <div className={['categoriesGroup bordered col-4-5', className].join(' ')}>
       <h4>Categories</h4>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
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<keyof typeof sortFuncs>('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 (
     <Page>
       <main>
         <div className="article-container">
-          {mobile && !isTagsPage ? null : (
-            <CategoriesNav
-              categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
-              activeCategoryId={selectedTag.tagId}
-            />
-          )}
-          {(mobile && isTagsPage) || selectedTag === null ? null : (
+          <CategoriesNav
+            categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
+            activeCategoryId={selectedTag?.tagId || 0}
+            className={mobile && selectedTag !== null ? 'desktop-only' : ''}
+          />
+          {selectedTag === null ? null : (
             <article>
               <h1 className="padding-bottom-40">{selectedTag.name}</h1>
               <div className="padding-bottom-24">
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<LoaderFunction>[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',
     })
   }