diff --git a/components/bill/BillDetails.tsx b/components/bill/BillDetails.tsx index bd82f9229..314084ecc 100644 --- a/components/bill/BillDetails.tsx +++ b/components/bill/BillDetails.tsx @@ -29,6 +29,7 @@ import { useTranslation } from "next-i18next" import { isCurrentCourt } from "functions/src/shared" import { FollowBillButton } from "components/shared/FollowButton" import { PendingUpgradeBanner } from "components/PendingUpgradeBanner" +import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext" const StyledContainer = styled(Container)` font-family: "Nunito"; @@ -47,79 +48,83 @@ export const BillDetails = ({ bill }: BillProps) => { const isPendingUpgrade = useAuth().claims?.role === "pendingUpgrade" const flags = useFlags() + const [followStatus, setFollowStatus] = useState({}) + return ( <> - {isPendingUpgrade && } - {!isCurrentCourt(bill.court) && ( - - this bill is from session {bill.court} - not the current session - - )} + + {isPendingUpgrade && } + {!isCurrentCourt(bill.court) && ( + + this bill is from session {bill.court} - not the current session + + )} - - - - {t("back_to_bills")} - - - {bill.history.length > 0 ? ( - <> - - + + + + {t("back_to_bills")} + + + {bill.history.length > 0 ? ( + <> + + + + + + + + + + + {flags.notifications && } + + + + ) : ( + + - - + + + {flags.notifications && } + - - - {flags.notifications && } - - - - ) : ( - + )} + - + + + + + + + + {flags.lobbyingTable && ( + + )} - - - {flags.notifications && } - + + + + + {flags.billTracker && ( + + )} - )} - - - - - - - - - - {flags.lobbyingTable && ( - - )} - - - - - - {flags.billTracker && ( - - )} - - - + + ) } diff --git a/components/search/testimony/TestimonySearch.tsx b/components/search/testimony/TestimonySearch.tsx index 03397e022..99b26b390 100644 --- a/components/search/testimony/TestimonySearch.tsx +++ b/components/search/testimony/TestimonySearch.tsx @@ -26,6 +26,7 @@ import { getServerConfig } from "../common" import { useRouting } from "../useRouting" import { TestimonyHit } from "./TestimonyHit" import { useTestimonyRefinements } from "./useTestimonyRefinements" +import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext" const searchClient = new TypesenseInstantSearchAdapter({ server: getServerConfig(), @@ -118,54 +119,61 @@ const Layout = () => { }) } + const [followStatus, setFollowStatus] = useState({}) + return ( <> - setKey(k)}> - - {tabs.map((t, i) => ( - - onTabClick(t)} - > -

{t}

-
-
-
- ))} -
- -
- - - - - - {refinements.options} - - - - - {refinements.show} - - + setKey(k)}> + + {tabs.map((t, i) => ( + + onTabClick(t)} + > +

{t}

+
+
+
+ ))} +
+ +
+ + + - {status === "empty" ? ( - - Your search has yielded zero results! -
- Try another search term -
- ) : ( - - )} - - -
-
+
+ + {refinements.options} + + + + + {refinements.show} + + + {status === "empty" ? ( + + Your search has yielded zero results! +
+ Try another search term +
+ ) : ( + + )} + + +
+
+ ) } diff --git a/components/shared/FollowButton.tsx b/components/shared/FollowButton.tsx index 6310fa080..2bfe89739 100644 --- a/components/shared/FollowButton.tsx +++ b/components/shared/FollowButton.tsx @@ -1,10 +1,11 @@ import { StyledImage } from "components/ProfilePage/StyledProfileComponents" import { useTranslation } from "next-i18next" -import { useEffect, useState } from "react" +import { useEffect, useContext } from "react" import { Button } from "react-bootstrap" import { useAuth } from "../auth" import { Bill } from "../db" import { TopicQuery, setFollow, setUnfollow } from "./FollowingQueries" +import { FollowContext } from "./FollowContext" export const BaseFollowButton = ({ topicName, @@ -22,30 +23,35 @@ export const BaseFollowButton = ({ const { user } = useAuth() const uid = user?.uid - const [queryResult, setQueryResult] = useState("") + const { followStatus, setFollowStatus } = useContext(FollowContext) useEffect(() => { uid - ? TopicQuery(uid, topicName).then(result => setQueryResult(result)) + ? TopicQuery(uid, topicName).then(result => { + setFollowStatus(prevOrgFollowGroup => { + return { ...prevOrgFollowGroup, [topicName]: Boolean(result) } + }) + }) : null - }, [uid, topicName, setQueryResult]) + }, [uid, topicName, setFollowStatus]) const FollowClick = async () => { await followAction() - setQueryResult(topicName) + setFollowStatus({ ...followStatus, [topicName]: true }) } const UnfollowClick = async () => { await unfollowAction() - setQueryResult("") + setFollowStatus({ ...followStatus, [topicName]: false }) } - const isFollowing = queryResult + const isFollowing = followStatus[topicName] const text = isFollowing ? t("button.following") : t("button.follow") const checkmark = isFollowing ? ( ) : null - const handleClick = () => { + const handleClick = (event: React.FormEvent) => { + event.preventDefault() isFollowing ? UnfollowClick() : FollowClick() } diff --git a/components/shared/FollowContext.tsx b/components/shared/FollowContext.tsx new file mode 100644 index 000000000..8fc8a64e1 --- /dev/null +++ b/components/shared/FollowContext.tsx @@ -0,0 +1,13 @@ +import { createContext, Dispatch, SetStateAction } from "react" + +export type OrgFollowStatus = Record + +interface FollowContextType { + followStatus: OrgFollowStatus + setFollowStatus: Dispatch> +} + +export const FollowContext = createContext({ + followStatus: {}, + setFollowStatus: () => {} +})