From 88a3e8ec3df3ab579136b7a89dbcd03007c3d2b5 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Wed, 28 Feb 2024 06:13:08 +0200
Subject: [PATCH 1/3] mobile categories + routes

---
 app/components/Article/article.css           |  3 +++
 app/components/CategoriesNav/Menu.tsx        |  8 +++----
 app/components/CategoriesNav/menu.css        | 25 ++++++++++++++++++++
 app/components/CategoriesNav/menu.module.css | 12 ----------
 app/hooks/isMobile.tsx                       | 25 ++++++++++++++++++++
 app/routes/tags.$.tsx                        | 17 +++++++------
 6 files changed, 66 insertions(+), 24 deletions(-)
 create mode 100644 app/components/CategoriesNav/menu.css
 delete mode 100644 app/components/CategoriesNav/menu.module.css
 create mode 100644 app/hooks/isMobile.tsx

diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index 328edba1..5ab46b31 100644
--- a/app/components/Article/article.css
+++ b/app/components/Article/article.css
@@ -140,4 +140,7 @@ h1.teal {
   article .footer-comtainer > div:nth-child(-n + 2) {
     flex: 1 1;
   }
+  article {
+    margin: 0;
+  }
 }
diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
index 2308e0ed..5fa7fbe0 100644
--- a/app/components/CategoriesNav/Menu.tsx
+++ b/app/components/CategoriesNav/Menu.tsx
@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import styles from './menu.module.css'
+import './menu.css'
 
 interface CategoriesNavProps {
   /**
@@ -19,7 +19,7 @@ interface CategoriesNavProps {
 export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={styles.categoriesGroup + ' bordered col-4-5'}>
+    <div className={'categoriesGroup bordered col-4-5'}>
       <h4>Categories</h4>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
@@ -30,9 +30,7 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
           <Link
             key={tagId}
             to={tagUrl({tagId, name})}
-            className={[styles.categoryTitle, activeCategoryId == tagId ? 'selected' : ''].join(
-              ' '
-            )}
+            className={['categoryTitle', activeCategoryId == tagId ? 'selected' : ''].join(' ')}
           >
             {name} ({questions.length})
           </Link>
diff --git a/app/components/CategoriesNav/menu.css b/app/components/CategoriesNav/menu.css
new file mode 100644
index 00000000..0805a1f9
--- /dev/null
+++ b/app/components/CategoriesNav/menu.css
@@ -0,0 +1,25 @@
+.categoriesGroup {
+  padding: var(--spacing-12);
+}
+.categoriesGroup > * {
+  padding: var(--spacing-16);
+}
+.categoryTitle {
+  padding: var(--spacing-24);
+  cursor: pointer;
+  display: inline-block;
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .categoriesGroup {
+    width: 100%;
+    height: 100%;
+  }
+  .categoriesGroup.bordered {
+    border: 0;
+    box-shadow: none;
+  }
+  .categoryTitle.selected {
+    background: inherit;
+  }
+}
diff --git a/app/components/CategoriesNav/menu.module.css b/app/components/CategoriesNav/menu.module.css
deleted file mode 100644
index 12a49e68..00000000
--- a/app/components/CategoriesNav/menu.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.categoriesGroup {
-  padding: var(--spacing-12);
-}
-.categoriesGroup > * {
-  padding: var(--spacing-16);
-}
-.categoryTitle {
-  padding: var(--spacing-24);
-  cursor: pointer;
-  display: inline-block;
-  width: 100%;
-}
diff --git a/app/hooks/isMobile.tsx b/app/hooks/isMobile.tsx
new file mode 100644
index 00000000..478d4186
--- /dev/null
+++ b/app/hooks/isMobile.tsx
@@ -0,0 +1,25 @@
+import {useState, useEffect} from 'react'
+
+export default function isMobile() {
+  const mobileWidth = 640
+  const [windowWidth, setWindowWidth] = useState<number>(0)
+
+  const isWindow = typeof window !== 'undefined'
+
+  const getWidth = () => (isWindow ? window.innerWidth : windowWidth)
+
+  const resize = () => setWindowWidth(getWidth())
+
+  useEffect(() => {
+    if (isWindow) {
+      setWindowWidth(getWidth())
+
+      window.addEventListener('resize', resize)
+
+      return () => window.removeEventListener('resize', resize)
+    }
+    //eslint-disable-next-line
+  }, [isWindow])
+
+  return windowWidth <= mobileWidth
+}
diff --git a/app/routes/tags.$.tsx b/app/routes/tags.$.tsx
index 10596438..1677b191 100644
--- a/app/routes/tags.$.tsx
+++ b/app/routes/tags.$.tsx
@@ -5,7 +5,7 @@ import ListTable from '~/components/Table'
 import {loader} from '~/routes/tags.all'
 import {CategoriesNav} from '~/components/CategoriesNav/Menu'
 import type {Tag as TagType} from '~/server-utils/stampy'
-
+import isMobile from '~/hooks/isMobile'
 export {loader}
 
 export const sortFuncs = {
@@ -15,6 +15,7 @@ export const sortFuncs = {
 }
 
 export default function Tags() {
+  const mobile = isMobile()
   const {data} = useLoaderData<ReturnType<typeof loader>>()
   const {currentTag, tags} = data
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
@@ -29,16 +30,18 @@ export default function Tags() {
   if (selectedTag === null) {
     return null
   }
+  const isTagsPage = window.location.pathname.split('/').slice(-2)[0] === 'tags'
   return (
     <Page>
       <main>
         <div className="article-container">
-          <CategoriesNav
-            categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
-            activeCategoryId={selectedTag.tagId}
-          />
-
-          {selectedTag === null ? null : (
+          {mobile && !isTagsPage ? null : (
+            <CategoriesNav
+              categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
+              activeCategoryId={selectedTag.tagId}
+            />
+          )}
+          {(mobile && isTagsPage) || selectedTag === null ? null : (
             <article>
               <h1 className="padding-bottom-40">{selectedTag.name}</h1>
               <div className="padding-bottom-24">

From b26d0bb9e17b624deeb0ab9cbcad15a0620e47a1 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Wed, 28 Feb 2024 06:17:51 +0200
Subject: [PATCH 2/3] lint

---
 app/hooks/isMobile.tsx | 2 +-
 app/routes/tags.$.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/hooks/isMobile.tsx b/app/hooks/isMobile.tsx
index 478d4186..565e3c0b 100644
--- a/app/hooks/isMobile.tsx
+++ b/app/hooks/isMobile.tsx
@@ -1,6 +1,6 @@
 import {useState, useEffect} from 'react'
 
-export default function isMobile() {
+export default function useIsMobile() {
   const mobileWidth = 640
   const [windowWidth, setWindowWidth] = useState<number>(0)
 
diff --git a/app/routes/tags.$.tsx b/app/routes/tags.$.tsx
index 1677b191..b2617700 100644
--- a/app/routes/tags.$.tsx
+++ b/app/routes/tags.$.tsx
@@ -5,7 +5,7 @@ import ListTable from '~/components/Table'
 import {loader} from '~/routes/tags.all'
 import {CategoriesNav} from '~/components/CategoriesNav/Menu'
 import type {Tag as TagType} from '~/server-utils/stampy'
-import isMobile from '~/hooks/isMobile'
+import useIsMobile from '~/hooks/isMobile'
 export {loader}
 
 export const sortFuncs = {
@@ -15,7 +15,7 @@ export const sortFuncs = {
 }
 
 export default function Tags() {
-  const mobile = isMobile()
+  const mobile = useIsMobile()
   const {data} = useLoaderData<ReturnType<typeof loader>>()
   const {currentTag, tags} = data
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null)

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 3/3] 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',
     })
   }