From 596c6fe33d8045aed40af22a9c68d1bc0f20e34e Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 4 Jan 2022 16:09:03 -0600
Subject: [PATCH] Show tags in contract details.

---
 web/components/contract-card.tsx     | 56 +++++++++++++++++++---------
 web/components/contract-overview.tsx |  2 +-
 web/components/linkify.tsx           |  9 +++--
 web/components/tweet-button.tsx      |  2 +-
 4 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 8fc729f7..70e5df9f 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -6,10 +6,11 @@ import { UserLink } from './user-page'
 import { Linkify } from './linkify'
 import { Contract, compute, path } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
+import { parseTags } from '../lib/util/parse'
 
 export function ContractCard(props: { contract: Contract }) {
   const { contract } = props
-  const { resolution } = contract
+  const { question, resolution } = contract
   const { probPercent } = compute(contract)
 
   return (
@@ -19,9 +20,7 @@ export function ContractCard(props: { contract: Contract }) {
           <div className="card">
             <div className="card-body p-6">
               <Row className="justify-between gap-4 mb-2">
-                <p className="font-medium text-indigo-700">
-                  <Linkify text={contract.question} />
-                </p>
+                <p className="font-medium text-indigo-700">{question}</p>
                 <ResolutionOrChance
                   className="items-center"
                   resolution={resolution}
@@ -86,21 +85,44 @@ export function ResolutionOrChance(props: {
   )
 }
 
-export function ContractDetails(props: { contract: Contract }) {
-  const { contract } = props
+export function ContractDetails(props: {
+  contract: Contract
+  inlineTags?: boolean
+}) {
+  const { contract, inlineTags } = props
+  const { question, description } = contract
   const { truePool, createdDate, resolvedDate } = compute(contract)
 
+  const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`)
+
   return (
-    <Row className="flex-wrap text-sm text-gray-500">
-      <div className="whitespace-nowrap">
-        <UserLink username={contract.creatorUsername} />
-      </div>
-      <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">
-        {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
-      </div>
-      <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
-    </Row>
+    <Col
+      className={clsx(
+        'text-sm text-gray-500 gap-2',
+        inlineTags && 'sm:flex-row sm:flex-wrap'
+      )}
+    >
+      <Row className="gap-2 flex-wrap">
+        <div className="whitespace-nowrap">
+          <UserLink username={contract.creatorUsername} />
+        </div>
+        <div className="">•</div>
+        <div className="whitespace-nowrap">
+          {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
+        </div>
+        <div className="">•</div>
+        <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+      </Row>
+
+      {inlineTags && <div className="hidden sm:block">•</div>}
+
+      <Row className="gap-2 flex-wrap">
+        {tags.map((tag) => (
+          <div className="bg-gray-100 px-1">
+            <Linkify text={tag} gray />
+          </div>
+        ))}
+      </Row>
+    </Col>
   )
 }
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index e36b3d79..b3703dd3 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -67,7 +67,7 @@ export const ContractOverview = (props: {
             large
           />
 
-          <ContractDetails contract={contract} />
+          <ContractDetails contract={contract} inlineTags />
         </Col>
 
         <ResolutionOrChance
diff --git a/web/components/linkify.tsx b/web/components/linkify.tsx
index 3ee4650f..ccb63a61 100644
--- a/web/components/linkify.tsx
+++ b/web/components/linkify.tsx
@@ -2,8 +2,8 @@ import { Fragment } from 'react'
 import { SiteLink } from './site-link'
 
 // Return a JSX span, linkifying @username, #hashtags, and https://...
-export function Linkify(props: { text: string }) {
-  const { text } = props
+export function Linkify(props: { text: string; gray?: boolean }) {
+  const { text, gray } = props
   const regex = /(?:^|\s)(?:[@#][a-z0-9_]+|https?:\/\/\S+)/gi
   const matches = text.match(regex) || []
   const links = matches.map((match) => {
@@ -20,7 +20,10 @@ export function Linkify(props: { text: string }) {
     return (
       <>
         {whitespace}
-        <SiteLink className="text-indigo-700" href={href}>
+        <SiteLink
+          className={gray ? 'text-gray-500' : 'text-indigo-700'}
+          href={href}
+        >
           {symbol}
           {tag}
         </SiteLink>
diff --git a/web/components/tweet-button.tsx b/web/components/tweet-button.tsx
index fb20fc53..b9db405e 100644
--- a/web/components/tweet-button.tsx
+++ b/web/components/tweet-button.tsx
@@ -4,7 +4,7 @@ export function TweetButton(props: { tweetText?: string }) {
   return (
     <a
       className="twitter-share-button"
-      href={`https://twitter.com/intent/tweet?text=${encodeURI(
+      href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
         tweetText ?? ''
       )}`}
       data-size="large"