add DoNotLike tag page and link in myTags

Author: pwfisher

explorer/components/DrawingPage/DrawingPage.tsx

@@ -16,6 +16,7 @@ import {
   DateLink,
   TagList,
   Tag,
+  MyTagListHeading,
 } from './styles'
 import { getPreviousSlug, getNextSlug } from '../../lib/drawings'
 import { useRouter } from 'next/router'
@@ -57,15 +58,20 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
           {tags.length > 0 && (
             <TagList>
               {tags.map(tag => (
-                <Tag key={tag}>
-                  <Link href='/tag/[id]' as={`/tag/${getTagSlug(tag)}`}>
-                    <a>{tag}</a>
-                  </Link>
-                </Tag>
+                <Tag key={tag}><Link href={`/tag/${getTagSlug(tag)}`}><a>{tag}</a></Link></Tag>
               ))}
             </TagList>
           )}
-          {myTags.length > 0 && <TagList>{myTags.map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
+          {myTags.length > 0 && (
+            <>
+              <MyTagListHeading>myTags</MyTagListHeading>
+              <TagList>
+                {myTags.map(tag => (
+                  <Tag key={tag}><Link href={`/tag/${getTagSlug(tag)}`}><a>{tag}</a></Link></Tag>
+                ))}
+              </TagList>
+            </>
+          )}
           <NavBar>
             <Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
               <ArrowButton title='Previous'><LeftArrow /></ArrowButton>

explorer/components/DrawingPage/styles.tsx

@@ -114,3 +114,11 @@ export const Tag = styled.li.attrs({ classNames: 'Explorer__DrawingPage__Tag'})`
     display: none;
   }
 `
+
+export const MyTagListHeading = styled.h5.attrs({ className: 'Explorer__DrawingPage__MyTagListHeding' })`
+  font-size: 10px;
+  font-weight: 200;
+  margin: -2px 0 -4px;
+  text-align: center;
+  opacity: 0.2;
+`

explorer/lib/tags.ts

@@ -1,15 +1,12 @@
 import { Drawing, TagDrawingSets } from '../types'
-import {
-  tagDrawingSets as fixtureTagDrawingSets,
-  tags as fixtureTags,
-} from '../__fixtures__'
+import { allTags, tagDrawingSets, tags } from '../__fixtures__'
 
 export function getTagsForDrawing(drawing: Drawing): string[] {
-  return fixtureTags.filter(tag => drawingHasTag(drawing, tag))
+  return tags.filter(tag => drawingHasTag(drawing, tag))
 }
 
 export function drawingHasTag(drawing: Drawing, tag: string): boolean {
-  const drawings: Drawing[] = fixtureTagDrawingSets[tag] ?? []
+  const drawings: Drawing[] = tagDrawingSets[tag] ?? []
   return drawings.some(o => o.id === drawing.id)
 }
 
@@ -30,5 +27,5 @@ export function getTagSlug(tag: string): string {
 }
 
 export function getTagFromSlug(slug: string): string | undefined {
-  return fixtureTags.find(tag => getTagSlug(tag) === slug)
+  return allTags.find(tag => getTagSlug(tag) === slug)
 }

explorer/pages/tag/[id].tsx

@@ -1,13 +1,13 @@
 import { TagPage } from '../../components/TagPage'
 import { GetStaticProps, GetStaticPaths } from 'next'
-import { tags } from '../../__fixtures__'
+import { allTags } from '../../__fixtures__'
 import { singleQueryParamValue } from '../../lib/next'
 import { getTagSlug, getTagFromSlug } from '../../lib/tags'
 
 export default TagPage
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const paths = tags.map(tag => ({ params: { id: getTagSlug(tag) }}))
+  const paths = allTags.map(tag => ({ params: { id: getTagSlug(tag) }}))
   return { paths, fallback: false }
 }