From 3686697237b930de867a00fd811751a6b99cd056 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Thu, 20 Jan 2022 12:59:13 -0600
Subject: [PATCH] Show tags on fold page

---
 common/fold.ts                   |  2 +-
 web/components/contract-card.tsx | 11 ++---------
 web/components/tags-list.tsx     | 15 +++++++++++++++
 web/pages/fold/[foldSlug].tsx    |  6 ++++++
 4 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 web/components/tags-list.tsx

diff --git a/common/fold.ts b/common/fold.ts
index 9ef27fd4..c9df3389 100644
--- a/common/fold.ts
+++ b/common/fold.ts
@@ -5,7 +5,7 @@ export type Fold = {
   curatorId: string // User id
   createdTime: number
 
-  tags: string
+  tags: string[]
 
   contractIds: string[]
   excludedContractIds: string[]
diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 5b07119f..3bbceb63 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link'
 import { Row } from '../components/layout/row'
 import { formatMoney } from '../lib/util/format'
 import { UserLink } from './user-page'
-import { Linkify } from './linkify'
 import {
   Contract,
   contractMetrics,
@@ -14,6 +13,7 @@ import { parseTags } from '../../common/util/parse'
 import dayjs from 'dayjs'
 import { TrendingUpIcon, ClockIcon } from '@heroicons/react/solid'
 import { DateTimeTooltip } from './datetime-tooltip'
+import { TagsList } from './tags-list'
 
 export function ContractCard(props: {
   contract: Contract
@@ -187,14 +187,7 @@ export function ContractDetails(props: { contract: Contract }) {
       {tags.length > 0 && (
         <>
           <div className="hidden sm:block">•</div>
-
-          <Row className="gap-2 flex-wrap">
-            {tags.map((tag) => (
-              <div key={tag} className="bg-gray-100 px-1">
-                <Linkify text={tag} gray />
-              </div>
-            ))}
-          </Row>
+          <TagsList tags={tags} />
         </>
       )}
     </Col>
diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx
new file mode 100644
index 00000000..81e818e4
--- /dev/null
+++ b/web/components/tags-list.tsx
@@ -0,0 +1,15 @@
+import { Row } from './layout/row'
+import { Linkify } from './linkify'
+
+export function TagsList(props: { tags: string[] }) {
+  const { tags } = props
+  return (
+    <Row className="gap-2 flex-wrap">
+      {tags.map((tag) => (
+        <div key={tag} className="bg-gray-100 px-1">
+          <Linkify text={tag} gray />
+        </div>
+      ))}
+    </Row>
+  )
+}
diff --git a/web/pages/fold/[foldSlug].tsx b/web/pages/fold/[foldSlug].tsx
index cd984f47..b6d7d36c 100644
--- a/web/pages/fold/[foldSlug].tsx
+++ b/web/pages/fold/[foldSlug].tsx
@@ -7,6 +7,7 @@ import { getRecentComments, listAllComments } from '../../lib/firebase/comments'
 import { Contract } from '../../lib/firebase/contracts'
 import { getFoldBySlug, getFoldContracts } from '../../lib/firebase/folds'
 import { ActivityFeed, findActiveContracts } from '../activity'
+import { TagsList } from '../../components/tags-list'
 
 export async function getStaticProps(props: { params: { foldSlug: string } }) {
   const { foldSlug } = props.params
@@ -50,9 +51,14 @@ export default function FoldPage(props: {
   const { fold, activeContracts, activeContractBets, activeContractComments } =
     props
 
+  const { tags } = fold
+
   return (
     <Page>
       <Title text={fold.name} />
+
+      <TagsList tags={tags} />
+
       <ActivityFeed
         contracts={activeContracts}
         contractBets={activeContractBets}