Merge branch 'main' into search-component-translations

Author: jicruz96

components/CurrentCommitteeCard/CurrentCommitteeCard.tsx

@@ -27,8 +27,9 @@ import { TestimoniesTab } from "./TestimoniesTab"
 import { useFlags } from "components/featureFlags"
 import LoginPage from "components/Login/login"
 import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
+import { FollowersTab } from "./FollowersTab"
 
-const tabTitle = ["about-you", "testimonies", "following"] as const
+const tabTitle = ["about-you", "testimonies", "following", "followers"] as const
 export type TabTitles = (typeof tabTitle)[number]
 
 export default function EditProfile({
@@ -145,6 +146,11 @@ export function EditProfileForm({
       title: t("tabs.following"),
       eventKey: "following",
       content: <FollowingTab className="mt-3 mb-4" />
+    },
+    {
+      title: t("followersWithCount", { count: 1 }),
+      eventKey: "followers",
+      content: <FollowersTab className="mt-3 mb-4" />
     }
   ]
 

components/EditProfilePage/EditProfilePage.tsx

@@ -0,0 +1,102 @@
+import { useTranslation } from "next-i18next"
+import { useEffect, useMemo, useState } from "react"
+import { useAuth } from "../auth"
+import { Stack } from "../bootstrap"
+import { firestore } from "../firebase"
+import {
+  collection,
+  collectionGroup,
+  getDocs,
+  query,
+  where,
+  addDoc
+} from "firebase/firestore"
+import { FollowedItem, UserElement } from "./FollowingTabComponents"
+import { UnfollowModalConfig } from "./UnfollowModal"
+
+export const FollowersTab = ({ className }: { className?: string }) => {
+  const { user } = useAuth()
+  const uid = user?.uid
+
+  // NEW: build a query over the collection group
+  const followersQuery = useMemo(
+    () =>
+      uid
+        ? query(
+            collectionGroup(firestore, "activeTopicSubscriptions"),
+            where("uid", "==", uid), // they follow *me*
+            where("type", "==", "testimony") // user-to-user follows only
+          )
+        : null,
+    [uid]
+  )
+
+  // query for people *I* follow so we can decide button state
+  const myFollowsQuery = useMemo(
+    () =>
+      uid
+        ? query(
+            collection(firestore, `/users/${uid}/activeTopicSubscriptions/`),
+            where("uid", "==", uid),
+            where("type", "==", "testimony")
+          )
+        : null,
+    [uid]
+  )
+  const [iFollowSet, setIFollowSet] = useState<Set<string>>(new Set())
+
+  const [followers, setFollowers] = useState<UserElement[]>([])
+
+  useEffect(() => {
+    if (!followersQuery) return
+    ;(async () => {
+      const qs = await getDocs(followersQuery)
+      const list: UserElement[] = []
+      qs.forEach(doc => list.push(doc.data().userLookup)) // same field used elsewhere
+      setFollowers(list)
+    })()
+  }, [followersQuery])
+
+  useEffect(() => {
+    if (!myFollowsQuery) return
+    ;(async () => {
+      const qs = await getDocs(myFollowsQuery)
+      const ids = new Set<string>()
+      qs.forEach(doc => ids.add(doc.data().userLookup.uid))
+      setIFollowSet(ids)
+    })()
+  }, [myFollowsQuery])
+
+  const [unfollow, setUnfollow] = useState<UnfollowModalConfig | null>(null)
+
+  const { t } = useTranslation("editProfile")
+
+  return (
+    <Stack>
+      <h2 className={className ? `pb-3 ${className}` : "pb-3"}>
+        {t("follow.orgs")}
+      </h2>
+      {followers.map(element => (
+        <FollowedItem
+          key={element.profileId}
+          element={element}
+          alreadyFollowing={iFollowSet.has(element.profileId)}
+          setFollow={async (targetUid: string) => {
+            if (!uid || iFollowSet.has(targetUid)) return
+            await addDoc(
+              collection(firestore, `/users/${uid}/activeTopicSubscriptions/`),
+              {
+                uid,
+                type: "testimony",
+                userLookup: { uid: targetUid }
+              }
+            )
+            setIFollowSet(new Set([...iFollowSet, targetUid]))
+          }}
+          setUnfollow={setUnfollow}
+          type="org"
+        />
+      ))}
+    </Stack>
+  )
+}

components/EditProfilePage/FollowersTab.tsx

@@ -1,8 +1,3 @@
-import { Timestamp } from "firebase/firestore"
-import { useMediaQuery } from "usehooks-ts"
-import { Testimony } from "../functions/src/testimony/types"
-import { Bill, BillContent } from "./db"
-
 const billIdFormat = /^(?<chamber>\D+)(?<number>\d+)$/
 
 /** Formats H123 as H.123 */
@@ -15,56 +10,5 @@ export const formatBillId = (id: string) => {
   }
 }
 
-const MISSING_TIMESTAMP = Timestamp.fromMillis(0)
-export const formatTimestamp = (t?: Timestamp) => {
-  if (!t || t.toMillis() == MISSING_TIMESTAMP.toMillis()) {
-    return undefined
-  }
-  return t.toDate().toLocaleDateString()
-}
-
-export const FormattedBillTitle = ({ bill }: { bill: Bill | BillContent }) => {
-  const isMobile = useMediaQuery("(max-width: 768px)")
-  const billInfo = "content" in bill ? bill.content : bill
-
-  const { BillNumber, Title } = billInfo
-
-  return (
-    <div className="mt-2">
-      {formatBillId(BillNumber)}:{" "}
-      {isMobile ? Title.substring(0, 45) + "..." : Title}
-    </div>
-  )
-}
-
-export const FormattedTestimonyTitle = ({
-  testimony
-}: {
-  testimony: Testimony
-}) => {
-  const { authorDisplayName, publishedAt, position } = testimony
-
-  return (
-    <div>
-      <span>
-        <b>Author:</b> {authorDisplayName || "anonymous"}
-      </span>
-      <br></br>
-      <span>
-        <b>Published on:</b> {publishedAt.toDate().toLocaleDateString()}
-      </span>
-      <br></br>
-      <span>
-        <b>Position:</b> {position}
-      </span>
-    </div>
-  )
-}
-
-export const decodeHtmlCharCodes = (s: string) =>
-  s.replace(/(&#(\d+);)/g, (match, capture, charCode) =>
-    String.fromCharCode(charCode)
-  )
-
 export const truncateText = (s: string | undefined, maxLength: number) =>
   !!s && s.length > maxLength ? s.substring(0, maxLength) + "..." : s

components/formatting.tsx

@@ -7,23 +7,21 @@ import {
   SearchBox,
   useInstantSearch
 } from "react-instantsearch"
-import { createInstantSearchRouterNext } from "react-instantsearch-router-nextjs"
-import singletonRouter from "next/router"
+import { currentGeneralCourt } from "functions/src/shared"
 import styled from "styled-components"
 import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter"
-import { currentGeneralCourt } from "functions/src/shared"
 import { Col, Container, Row, Spinner } from "../../bootstrap"
 import { NoResults } from "../NoResults"
 import { ResultCount } from "../ResultCount"
 import { SearchContainer } from "../SearchContainer"
 import { SearchErrorBoundary } from "../SearchErrorBoundary"
+import { useRouting } from "../useRouting"
 import { BillHit } from "./BillHit"
 import { useBillRefinements } from "./useBillRefinements"
 import { SortBy, SortByWithConfigurationItem } from "../SortBy"
 import { getServerConfig, VirtualFilters } from "../common"
 import { useBillSort } from "./useBillSort"
 import { FC, useState } from "react"
-import { pathToSearchState, searchStateToUrl } from "../routingHelpers"
 
 const searchClient = new TypesenseInstantSearchAdapter({
   server: getServerConfig(),
@@ -72,16 +70,8 @@ export const BillSearch = () => {
           }
         }}
         searchClient={searchClient}
-        routing={{
-          router: createInstantSearchRouterNext({
-            singletonRouter,
-            routerOptions: {
-              cleanUrlOnDispose: false,
-              createURL: args => searchStateToUrl(args),
-              parseURL: args => pathToSearchState(args)
-            }
-          })
-        }}
+        routing={useRouting()}
+        future={{ preserveSharedStateOnUnmount: true }}
       >
         <VirtualFilters type="bill" />
         <Layout items={items} />

components/search/bills/BillSearch.tsx

@@ -6,8 +6,6 @@ import {
   SearchBox,
   useInstantSearch
 } from "react-instantsearch"
-import { createInstantSearchRouterNext } from "react-instantsearch-router-nextjs"
-import singletonRouter from "next/router"
 import {
   StyledTabContent,
   StyledTabNav
@@ -25,10 +23,10 @@ import { SearchContainer } from "../SearchContainer"
 import { SearchErrorBoundary } from "../SearchErrorBoundary"
 import { SortBy } from "../SortBy"
 import { getServerConfig, VirtualFilters } from "../common"
+import { useRouting } from "../useRouting"
 import { TestimonyHit } from "./TestimonyHit"
 import { useTestimonyRefinements } from "./useTestimonyRefinements"
 import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext"
-import { pathToSearchState, searchStateToUrl } from "../routingHelpers"
 import { useTranslation } from "next-i18next"
 
 const searchClient = new TypesenseInstantSearchAdapter({
@@ -73,16 +71,8 @@ export const TestimonySearch = () => {
           }
         }}
         searchClient={searchClient}
-        routing={{
-          router: createInstantSearchRouterNext({
-            singletonRouter,
-            routerOptions: {
-              cleanUrlOnDispose: false,
-              createURL: args => searchStateToUrl(args),
-              parseURL: args => pathToSearchState(args)
-            }
-          })
-        }}
+        routing={useRouting()}
+        future={{ preserveSharedStateOnUnmount: true }}
       >
         <VirtualFilters type="testimony" />
         <Layout />