From a760940ae6d4113546293dc20ff7d69dd1030098 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sun, 19 Dec 2021 01:08:12 -0800
Subject: [PATCH] Support hashtags in the question

---
 web/components/contract-overview.tsx | 46 ++--------------------------
 web/components/contracts-list.tsx    |  3 +-
 web/components/linkify.tsx           | 42 +++++++++++++++++++++++++
 web/pages/tag/[tag].tsx              |  6 ++--
 4 files changed, 51 insertions(+), 46 deletions(-)
 create mode 100644 web/components/linkify.tsx

diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 08e5d06f..2def0373 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import {
   compute,
   Contract,
@@ -13,7 +13,7 @@ import router from 'next/router'
 import { useUser } from '../hooks/use-user'
 import { Row } from './layout/row'
 import dayjs from 'dayjs'
-import Link from 'next/link'
+import { Linkify } from './Linkify'
 
 function ContractDescription(props: {
   contract: Contract
@@ -33,46 +33,6 @@ function ContractDescription(props: {
     setDescription(editStatement())
   }
 
-  // Return a JSX span, linkifying @username, #hashtags, and https://...
-  function Linkify(props: { text: string }) {
-    const { text } = props
-    const regex = /(?:^|\s)(?:[@#][a-z0-9_]+|https?:\/\/\S+)/gi
-    const matches = text.match(regex) || []
-    const links = matches.map((match) => {
-      // Matches are in the form: " @username" or "https://example.com"
-      const whitespace = match.match(/^\s/)
-      const symbol = match.trim().substring(0, 1)
-      const tag = match.trim().substring(1)
-      const href =
-        {
-          '@': `/${tag}`,
-          '#': `/tag/${tag}`,
-        }[symbol] ?? match
-
-      return (
-        <>
-          {whitespace}
-          <Link href={href}>
-            <a className="text-indigo-700 hover:underline hover:decoration-2">
-              {symbol}
-              {tag}
-            </a>
-          </Link>
-        </>
-      )
-    })
-    return (
-      <span>
-        {text.split(regex).map((part, i) => (
-          <Fragment key={i}>
-            {part}
-            {links[i]}
-          </Fragment>
-        ))}
-      </span>
-    )
-  }
-
   return (
     <div className="whitespace-pre-line">
       <Linkify text={contract.description} />
@@ -146,7 +106,7 @@ export const ContractOverview = (props: {
       <Col className="justify-between md:flex-row">
         <Col>
           <div className="text-3xl text-indigo-700 mb-4">
-            {contract.question}
+            <Linkify text={contract.question} />
           </div>
 
           <ContractDetails contract={contract} />
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index 915239c5..50f183d2 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -13,6 +13,7 @@ import {
 import { formatMoney } from '../lib/util/format'
 import { User } from '../lib/firebase/users'
 import { UserLink } from './user-page'
+import { Linkify } from './Linkify'
 
 export function ContractDetails(props: { contract: Contract }) {
   const { contract } = props
@@ -59,7 +60,7 @@ function ContractCard(props: { contract: Contract }) {
             <div className="card-body p-6">
               <Row className="justify-between gap-4 mb-2">
                 <p className="font-medium text-indigo-700">
-                  {contract.question}
+                  <Linkify text={contract.question} />
                 </p>
                 <div className={clsx('text-4xl', resolutionColor)}>
                   {resolutionText || (
diff --git a/web/components/linkify.tsx b/web/components/linkify.tsx
new file mode 100644
index 00000000..fd1be879
--- /dev/null
+++ b/web/components/linkify.tsx
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { Fragment } from 'react'
+
+// Return a JSX span, linkifying @username, #hashtags, and https://...
+export function Linkify(props: { text: string }) {
+  const { text } = props
+  const regex = /(?:^|\s)(?:[@#][a-z0-9_]+|https?:\/\/\S+)/gi
+  const matches = text.match(regex) || []
+  const links = matches.map((match) => {
+    // Matches are in the form: " @username" or "https://example.com"
+    const whitespace = match.match(/^\s/)
+    const symbol = match.trim().substring(0, 1)
+    const tag = match.trim().substring(1)
+    const href =
+      {
+        '@': `/${tag}`,
+        '#': `/tag/${tag}`,
+      }[symbol] ?? match
+
+    return (
+      <>
+        {whitespace}
+        <Link href={href}>
+          <a className="text-indigo-700 hover:underline hover:decoration-2">
+            {symbol}
+            {tag}
+          </a>
+        </Link>
+      </>
+    )
+  })
+  return (
+    <span>
+      {text.split(regex).map((part, i) => (
+        <Fragment key={i}>
+          {part}
+          {links[i]}
+        </Fragment>
+      ))}
+    </span>
+  )
+}
diff --git a/web/pages/tag/[tag].tsx b/web/pages/tag/[tag].tsx
index 67e3d314..0a15c85e 100644
--- a/web/pages/tag/[tag].tsx
+++ b/web/pages/tag/[tag].tsx
@@ -12,8 +12,10 @@ export default function TagPage() {
   let contracts = useContracts()
 
   if (tag && contracts !== 'loading') {
-    contracts = contracts.filter((contract) =>
-      contract.description.toLowerCase().includes(`#${tag.toLowerCase()}`)
+    contracts = contracts.filter(
+      (contract) =>
+        contract.description.toLowerCase().includes(`#${tag.toLowerCase()}`) ||
+        contract.question.toLowerCase().includes(`#${tag.toLowerCase()}`)
     )
   }