Merge pull request #456 from StampyAI/stampy-redesign-419

mobile categories + routes

app/components/Article/article.css

@@ -141,4 +141,7 @@ article .footer-comtainer > * {
   article .footer-comtainer > div:nth-child(-n + 2) {
     flex: 1 1;
   }
+  article {
+    margin: 0;
+  }
 }

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 {
   /**
@@ -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={styles.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" />
@@ -30,9 +34,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>

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;
+  }
+}

app/hooks/isMobile.tsx

@@ -0,0 +1,25 @@
+import {useState, useEffect} from 'react'
+
+export default function useIsMobile() {
+  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
+}

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 useIsMobile from '~/hooks/isMobile'
 export {loader}
 
 export const sortFuncs = {
@@ -15,29 +15,32 @@ export const sortFuncs = {
 }
 
 export default function Tags() {
+  const mobile = useIsMobile()
   const {data} = useLoaderData<ReturnType<typeof loader>>()
   const {currentTag, tags} = data
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
 
   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
-  }
+
   return (
     <Page>
       <main>
         <div className="article-container">
           <CategoriesNav
             categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
-            activeCategoryId={selectedTag.tagId}
+            activeCategoryId={selectedTag?.tagId || 0}
+            className={mobile && selectedTag !== null ? 'desktop-only' : ''}
           />
-
           {selectedTag === null ? null : (
             <article>
               <h1 className="padding-bottom-40">{selectedTag.name}</h1>

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