|
1 | 1 | import { Hit } from "instantsearch.js" |
2 | | -import { maple } from "components/links" |
3 | 2 | import Link from "next/link" |
4 | | -import { Testimony } from "components/db/testimony" |
5 | | -import { trimContent } from "components/TestimonyCallout/TestimonyCallout" |
6 | | -import { formatBillId } from "components/formatting" |
7 | | -import { useBill } from "components/db/bills" |
8 | | -import { FollowUserButton } from "components/shared/FollowButton" |
| 3 | +import { useTranslation } from "next-i18next" |
9 | 4 | import { Image } from "react-bootstrap" |
10 | | -import { useFlags } from "components/featureFlags" |
| 5 | +import { useMediaQuery } from "usehooks-ts" |
| 6 | + |
11 | 7 | import { useAuth } from "components/auth" |
12 | | -import { useTranslation } from "next-i18next" |
| 8 | +import { useBill } from "components/db/bills" |
| 9 | +import { Testimony } from "components/db/testimony" |
| 10 | +import { useFlags } from "components/featureFlags" |
| 11 | +import { formatBillId, truncateText } from "components/formatting" |
| 12 | +import { maple } from "components/links" |
| 13 | +import { FollowUserButton } from "components/shared/FollowButton" |
| 14 | +import { trimContent } from "components/TestimonyCallout/TestimonyCallout" |
13 | 15 |
|
14 | 16 | export const TestimonyHit = ({ hit }: { hit: Hit<Testimony> }) => { |
15 | 17 | const url = maple.testimony({ publishedId: hit.id }) |
@@ -44,6 +46,7 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => { |
44 | 46 | const { user } = useAuth() |
45 | 47 | const { followOrg } = useFlags() |
46 | 48 | const isCurrentUser = user?.uid === hit.authorUid |
| 49 | + const isMobile = useMediaQuery("(max-width: 768px)") |
47 | 50 |
|
48 | 51 | return ( |
49 | 52 | <div |
@@ -71,7 +74,7 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => { |
71 | 74 | <span style={{ flexGrow: 1 }}> |
72 | 75 | <b>Written by {writtenBy}</b> |
73 | 76 | </span> |
74 | | - {!isCurrentUser && followOrg && user && ( |
| 77 | + {hit.public && !isCurrentUser && followOrg && user && ( |
75 | 78 | <FollowUserButton profileId={hit.authorUid} /> |
76 | 79 | )} |
77 | 80 | </div> |
@@ -104,14 +107,16 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => { |
104 | 107 | padding: "5px 10px" |
105 | 108 | }} |
106 | 109 | > |
107 | | - {committee.name} |
| 110 | + {isMobile ? truncateText(committee.name, 35) : committee.name} |
108 | 111 | </span> |
109 | 112 | )} |
110 | 113 | </div> |
111 | 114 | <h6 style={{ color: "var(--bs-blue)", fontWeight: 600 }}> |
112 | 115 | {bill?.content.Title} |
113 | 116 | </h6> |
114 | | - <p>"{trimContent(hit.content, 500)}"</p> |
| 117 | + <p style={{ wordBreak: "break-all" }}> |
| 118 | + "{trimContent(hit.content, 500)}" |
| 119 | + </p> |
115 | 120 | <div style={{ display: "flex", justifyContent: "space-between" }}> |
116 | 121 | {/* {hit.content.trim().length > 0 && <a className="w-20">Read More</a>} */} |
117 | 122 | <span style={{ marginLeft: "auto" }}>{`Posted ${date}`}</span> |
|
0 commit comments