Merge pull request #1777 from Mephistic/smart-tag-links

Add hyperlinks to SmartTags on Bill Details page

Author: Mephistic

components/bill/Summary.tsx

@@ -8,6 +8,8 @@ import { SmartDisclaimer } from "./SmartDisclaimer"
 import { SmartIcon } from "./SmartIcon"
 import { TestimonyCounts } from "./TestimonyCounts"
 import { BillProps } from "./types"
+import { currentGeneralCourt } from "functions/src/shared"
+import { BillTopic } from "functions/src/bills/types"
 
 const SummaryContainer = styled(Container)`
   background-color: white;
@@ -49,17 +51,21 @@ const SmartTagButton = styled.button`
   font-size: 12px;
 `
 
-const SmartTag = ({ icon, tagName }: { icon: String; tagName: String }) => {
+const SmartTag = ({ topic }: { topic: BillTopic }) => {
   return (
-    <SmartTagButton
-      className={`btn btn-secondary d-flex text-nowrap mt-1 mx-1 p-1`}
+    <links.Internal
+      href={links.billSearchByTopicLink(currentGeneralCourt, topic)}
     >
-      &nbsp;
-      <SmartIcon icon={icon} />
-      &nbsp;
-      {tagName}
-      &nbsp;
-    </SmartTagButton>
+      <SmartTagButton
+        className={`btn btn-secondary d-flex text-nowrap mt-1 mx-1 p-1`}
+      >
+        &nbsp;
+        <SmartIcon icon={topic.category} />
+        &nbsp;
+        {topic.topic}
+        &nbsp;
+      </SmartTagButton>
+    </links.Internal>
   )
 }
 
@@ -134,7 +140,7 @@ export const Summary = ({
           <Row className="mx-1 mb-3">{bill.summary}</Row>
           <Row className={`d-flex mx-0 my-1`} xs="auto">
             {bill.topics?.map(t => (
-              <SmartTag key={t.topic} icon={t.category} tagName={t.topic} />
+              <SmartTag key={t.topic} topic={t} />
             ))}
           </Row>
         </>

components/links.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link"
 import { forwardRef, PropsWithChildren } from "react"
-import { CurrentCommittee } from "../functions/src/bills/types"
+import { BillTopic, CurrentCommittee } from "../functions/src/bills/types"
 import { Testimony } from "components/db/testimony"
 import { Bill, MemberContent } from "./db"
 import { formatBillId } from "./formatting"
@@ -130,3 +130,11 @@ export const twitterShareLink = (publication: Testimony, t: TFunction) => {
 
   return tweetUrl
 }
+
+export const billSearchByTopicLink = (court: number, topic: BillTopic) => {
+  const params = {
+    "bills/sort/latestTestimonyAt:desc[multiselectHierarchicalMenu][topics.lvl1][0]": `${topic.category} > ${topic.topic}`,
+    "bills/sort/latestTestimonyAt:desc[refinementList][court][0]": `${court}`
+  }
+  return `/bills?${new URLSearchParams(params).toString()}`
+}