feat: bill follow and unfollow functionality to testimony page

components/bill/BillDetails.tsx

@@ -37,11 +37,8 @@ export const BillDetails = ({ bill }: BillProps) => {
   const isPendingUpgrade = useAuth().claims?.role === "pendingUpgrade"
   const flags = useFlags()
 
-  const [followStatus, setFollowStatus] = useState<OrgFollowStatus>({})
-
   return (
     <>
-      <FollowContext.Provider value={{ followStatus, setFollowStatus }}>
         {isPendingUpgrade && <PendingUpgradeBanner />}
         {!isCurrentCourt(bill.court) && (
           <Banner>{t("bill.old_session", { billCourt: bill.court })}</Banner>
@@ -111,7 +108,6 @@ export const BillDetails = ({ bill }: BillProps) => {
             </Col>
           </Row>
         </StyledContainer>
-      </FollowContext.Provider>
     </>
   )
 }

components/layout.tsx

@@ -7,6 +7,7 @@ import AuthModal from "./auth/AuthModal"
 import { DesktopNav } from "./DesktopNav"
 import PageFooter from "./Footer/Footer"
 import { MobileNav } from "./MobileNav"
+import { FollowContext, OrgFollowStatus } from "./shared/FollowContext"
 
 export const PageContainer: FC<React.PropsWithChildren<unknown>> = ({
   children
@@ -36,6 +37,8 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
     setIsClient(true)
   }, [])
 
+  const [followStatus, setFollowStatus] = useState<OrgFollowStatus>({})
+
   return (
     <>
       {isClient ? (
@@ -44,6 +47,7 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
             <title>{formattedTitle}</title>
             <link rel="icon" href="/favicon.ico" />
           </Head>
+          <FollowContext.Provider value={{ followStatus, setFollowStatus }}>
           <PageContainer>
             {isMobile ? <MobileNav /> : <DesktopNav />}
             <AuthModal />
@@ -54,6 +58,7 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
               signOut={signOutAndRedirectToHome}
             />
           </PageContainer>
+          </FollowContext.Provider>
         </>
       ) : (
         <>

components/testimony/TestimonyDetailPage/PolicyActions.tsx

@@ -3,15 +3,22 @@ import { useFlags } from "components/featureFlags"
 import { formatBillId } from "components/formatting"
 import { formUrl } from "components/publish"
 import { isNotNull } from "components/utils"
-import { FC, ReactElement } from "react"
+import { FC, FormEvent, ReactElement, useContext, useEffect } from "react"
 import { useCurrentTestimonyDetails } from "./testimonyDetailSlice"
 import { useTranslation } from "next-i18next"
+import { useAuth } from "components/auth"
+import { TopicQuery } from "components/shared/FollowingQueries"
+import { StyledImage } from "components/ProfilePage/StyledProfileComponents"
+import { FollowContext } from "components/shared/FollowContext"
 
 interface PolicyActionsProps {
   className?: string
   isUser?: boolean
   isReporting: boolean
   setReporting: (boolean: boolean) => void
+  topicName: string
+  followAction: () => Promise<void>
+  unfollowAction: () => Promise<void>
 }
 
 const PolicyActionItem: FC<React.PropsWithChildren<ListItemProps>> = props => (
@@ -22,19 +29,58 @@ export const PolicyActions: FC<React.PropsWithChildren<PolicyActionsProps>> = ({
   className,
   isUser,
   isReporting,
-  setReporting
+  setReporting,
+  topicName,
+  followAction,
+  unfollowAction,
 }) => {
   const { bill } = useCurrentTestimonyDetails(),
     billLabel = formatBillId(bill.id)
   const { notifications } = useFlags()
 
+  const { user } = useAuth()
+  const uid = user?.uid
+
+  const { followStatus, setFollowStatus } = useContext(FollowContext)
+
+  useEffect(() => {
+    uid
+      ? TopicQuery(uid, topicName).then(result => {
+          setFollowStatus(prevOrgFollowGroup => {
+            return { ...prevOrgFollowGroup, [topicName]: Boolean(result) }
+          })
+        })
+      : null
+  }, [uid, topicName, setFollowStatus])
+
+  const FollowClick = async () => {
+    await followAction()
+    setFollowStatus({ ...followStatus, [topicName]: true })
+  }
+
+  const UnfollowClick = async () => {
+    await unfollowAction()
+    setFollowStatus({ ...followStatus, [topicName]: false })
+  }
+
+  const isFollowing = followStatus[topicName]
+  console.log(isFollowing)
+  const text = isFollowing ? "Unfollow" : "Follow"
+  const checkmark = isFollowing ? (
+    <StyledImage src="/check-white.svg" alt="" />
+  ) : null
+  const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {
+    event.preventDefault()
+    isFollowing ? UnfollowClick() : FollowClick()
+  }
+
   const items: ReactElement[] = []
   if (notifications)
     items.push(
       <PolicyActionItem
-        onClick={() => window.alert("TODO")} // TODO: add follow action here
+        onClick={(e) => handleClick(e)}
         key="follow"
-        billName={`Follow ${billLabel}`}
+        billName={`${text} ${billLabel}`}
       />
     )
   items.push(

components/testimony/TestimonyDetailPage/TestimonyDetailPage.tsx

@@ -15,6 +15,7 @@ import { TestimonyDetail } from "./TestimonyDetail"
 import { VersionBanner } from "./TestimonyVersionBanner"
 import { useAuth } from "components/auth"
 import { useMediaQuery } from "usehooks-ts"
+import { setFollow, setUnfollow } from "components/shared/FollowingQueries"
 
 export const TestimonyDetailPage: FC<React.PropsWithChildren<unknown>> = () => {
   const [isReporting, setIsReporting] = useState(false)
@@ -29,6 +30,15 @@ export const TestimonyDetailPage: FC<React.PropsWithChildren<unknown>> = () => {
   }
   const { t } = useTranslation("testimony", { keyPrefix: "reportModal" })
 
+  const { bill } = useCurrentTestimonyDetails()
+
+  const uid = user?.uid
+  const { id: billId, court: courtId } = bill
+  const topicName = `bill-${courtId}-${billId}`
+  const followAction = () =>
+    setFollow(uid, topicName, bill, billId, courtId, undefined)
+  const unfollowAction = () => setUnfollow(uid, topicName)
+
   return (
     <>
       <VersionBanner fluid="xl" />
@@ -49,6 +59,9 @@ export const TestimonyDetailPage: FC<React.PropsWithChildren<unknown>> = () => {
                 isUser={isUser}
                 isReporting={isReporting}
                 setReporting={handleReporting}
+                topicName={topicName}
+                followAction={followAction}
+                unfollowAction={unfollowAction}
               />
             )}
             <RevisionHistory />