Change tags buttons to links

StampyAI · Nov 9, 2023 · f48ed0f · f48ed0f
1 parent 60fe1a3
commit f48ed0f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 46 deletions.
diff --git a/app/root.css b/app/root.css
@@ -857,10 +857,10 @@ a[target='_blank']:not(.icon-link, .transparent-link):after {
   font-size: 15px;
 }
 
-.all-tags-container .tag {
+.tag {
   all: unset;
 }
-.all-tags-container .tag {
+.tag {
   display: inline-block;
   border-radius: 30px;
   background: var(--colorTagBody);
@@ -875,6 +875,13 @@ a[target='_blank']:not(.icon-link, .transparent-link):after {
   font-size: 18px;
   padding-right: 10px;
 }
+.tags-container .tag {
+  padding: 2px 1px;
+}
+.tags-container .tag .tag-name {
+  font-size: inherit;
+  padding: 2px 10px;
+}
 
 .cache button {
   margin: 0 5px;

diff --git a/app/routes/tags/$tag.tsx b/app/routes/tags/$tag.tsx
@@ -1,7 +1,7 @@
-import {useState, ReactNode} from 'react'
+import {useState, useEffect, ReactNode} from 'react'
 import {LoaderFunction} from '@remix-run/cloudflare'
 import {reloadInBackgroundIfNeeded} from '~/server-utils/kv-cache'
-import {loadTag, Tag as TagType} from '~/server-utils/stampy'
+import {loadTag, Tag as TagType, QuestionState, RelatedQuestions} from '~/server-utils/stampy'
 import Dialog from '~/components/dialog'
 
 type Props = {
@@ -41,6 +41,36 @@ export async function fetchTag(tagName: string): Promise<TagType | never[]> {
   })
 }
 
+export function Tag({
+  name,
+  questions: tqs,
+  showCount,
+}: {
+  name: string
+  questions?: RelatedQuestions
+  showCount?: boolean
+}) {
+  const [questions, setQuestions] = useState(tqs)
+  const pageIds = questions?.map((q) => q.pageid).join(QuestionState.COLLAPSED)
+
+  useEffect(() => {
+    const fetcher = async () => {
+      if (!questions) {
+        const tag = (await fetchTag(name)) as TagType
+        if (tag) setQuestions(tag.questions)
+      }
+    }
+    fetcher()
+  }, [questions, name])
+
+  return (
+    <a className="tag" href={`/?state=${pageIds}${QuestionState.COLLAPSED}`} key={name}>
+      <span className="tag-name">{name}</span>
+      {showCount && <span className="tag-stat">({questions?.length})</span>}
+    </a>
+  )
+}
+
 export function TagQuestions({
   tag,
   selectQuestion,
@@ -90,37 +120,10 @@ export function TagQuestions({
   )
 }
 
-export function Tags({tags, selectQuestion}: Props) {
-  const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
-
-  const setTag = async (tagName: string) => {
-    setSelectedTag({name: tagName} as TagType)
-
-    try {
-      const tag = (await fetchTag(tagName)) as TagType
-      setSelectedTag(tag)
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
+export function Tags({tags}: Props) {
   return (
     <div className="tags-container">
-      {selectedTag && (
-        <TagQuestions
-          tag={selectedTag}
-          selectQuestion={selectQuestion}
-          clearTag={() => setSelectedTag(null)}
-        />
-      )}
-      <div>
-        {tags &&
-          tags.map((t) => (
-            <button className="question-tag" key={t} onClick={() => setTag(t)}>
-              {t}
-            </button>
-          ))}
-      </div>
+      <div>{tags && tags.map((name) => <Tag key={name} name={name} />)}</div>
     </div>
   )
 }
diff --git a/app/routes/tags/index.tsx b/app/routes/tags/index.tsx
@@ -1,10 +1,10 @@
 import {useState} from 'react'
 import type {LoaderFunction} from '@remix-run/cloudflare'
 import {useLoaderData} from '@remix-run/react'
-import {loadTags, Tag as TagType, QuestionState} from '~/server-utils/stampy'
+import {loadTags, Tag as TagType} from '~/server-utils/stampy'
 import {Header, Footer} from '~/components/layouts'
 import {MagnifyingGlass} from '~/components/icons-generated'
-import {TagQuestions} from './$tag'
+import {TagQuestions, Tag} from './$tag'
 import {Undo} from '../../components/icons-generated'
 
 export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
@@ -16,16 +16,6 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
   }
 }
 
-function Tag(tag: TagType) {
-  const pageIds = tag.questions.map((q) => q.pageid).join(QuestionState.COLLAPSED)
-  return (
-    <a className="tag" href={`/?state=${pageIds}${QuestionState.COLLAPSED}`} key={tag.tagId}>
-      <span className="tag-name">{tag.name}</span>
-      <span className="tag-stat">({tag.questions.length})</span>
-    </a>
-  )
-}
-
 interface SortFunc {
   [key: string]: (a: TagType, b: TagType) => number
 }
@@ -87,7 +77,9 @@ export default function App() {
             .filter((tag) => tag.questions.length > 0)
             .filter((tag) => tag.name.toLowerCase().includes(tagsFilter.toLowerCase()))
             .sort(sortFuncs[sortBy])
-            .map(Tag)}
+            .map(({name, questions}) => (
+              <Tag key={name} name={name} questions={questions} showCount />
+            ))}
         </div>
       </main>