vibe-coded first go

Author: jicruz96

components/EditProfilePage/EditProfilePage.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/FollowersTab.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>
+  )
+}

public/locales/en/editProfile.json

@@ -8,6 +8,7 @@
   "enabled": "Enabled",
   "disable": "Disable",
   "disabled": "Disabled",
+  "followersWithCount": "Followers ({{count}})",
   "viewMyProfile": "View My Profile",
   "viewOrgProfile": "View My Organization",
   "saveChanges": "Save Personal Information",
@@ -38,7 +39,7 @@
     "weekly": "Weekly",
     "monthly": "Monthly"
   },
-  "emailIconAlt":"open envelope with letter, toggles update frequency options",
+  "emailIconAlt": "open envelope with letter, toggles update frequency options",
   "legislator": {
     "representative": "Representative",
     "searchRepresentative": "Search your representative",
@@ -100,4 +101,4 @@
     "admin": "Your profile is currently public. Others can view your profile page. Admin accounts cannot set their profile to private.",
     "default": "The publicity of your profile is unknown. Please contact the admin for more information."
   }
-}
+}