[Legislator Page] pipe in Maple profile

components/EditProfilePage/PersonalInfoTab.tsx

@@ -10,7 +10,7 @@ import { TooltipButton } from "components/buttons"
 import { useTranslation } from "next-i18next"
 import styled from "styled-components"
 
-type UpdateProfileData = {
+export type UpdateProfileData = {
   fullName: string
   aboutYou: string
   twitter: string
@@ -37,7 +37,7 @@ type Props = {
   legislatorsProps?: YourLegislatorsProps
 }
 
-async function updateProfile(
+export async function updateProfile(
   { profile, actions, uid }: Props,
   data: UpdateProfileData
 ) {

components/LegislatorProfile/LegislatorComponents.tsx

@@ -130,6 +130,21 @@ export function LinkedIn() {
   )
 }
 
+export function Mastodon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-mastodon"
+      viewBox="0 0 16 16"
+    >
+      <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z" />
+    </svg>
+  )
+}
+
 export function Twitter() {
   return (
     <svg width="14" height="14" viewBox="0 0 24 24" fill="#1a3185">

components/LegislatorProfile/LegislatorProfilePage.tsx

@@ -1,16 +1,20 @@
+import { collection, getDocs, query, where } from "firebase/firestore"
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import ErrorPage from "next/error"
 import { useTranslation } from "next-i18next"
+import { useEffect, useState } from "react"
 import styled from "styled-components"
 
+import { firestore } from "../firebase"
 import * as links from "../links"
 
 import {
   Bluesky,
   DistrictLabel,
   formatPhoneNumber,
   LinkedIn,
+  Mastodon,
   PartyLabel,
   Twitter
 } from "./LegislatorComponents"
@@ -24,25 +28,6 @@ import { Internal } from "components/links"
 import { FollowUserButton } from "components/shared/FollowButton"
 import { CircleImage } from "components/shared/LabeledIcon"
 
-type ProfilePlaceholder = {
-  social?: {
-    blueSky?: string
-    linkedIn?: string
-    twitter?: string
-  }
-  website?: string
-}
-
-const tabs = [
-  "Priorities",
-  "Bills",
-  "Elections",
-  "Finance",
-  "District",
-  "Her testimony",
-  "Votes"
-]
-
 const ButtonContainer = styled(Col).attrs(props => ({
   className: `col-12 justify-content-md-end ${props.className}`,
   md: `3`,
@@ -124,31 +109,38 @@ export function LegislatorProfilePage({
   court: number
   memberCode: string
 }) {
+  const { user } = useAuth()
   const { member, loading: memberLoading } = useMember(court, memberCode)
   const { district, loading: districtLoading } = useDistrict(
     court,
     member?.Branch,
     member?.District
   )
   const { t } = useTranslation("legislators")
-  // const { user } = useAuth() **uncomment when Following Button in enabled**
-
-  /* replace with profile info for legislators with Maple accounts */
-  let profile: ProfilePlaceholder = {
-    // social: {
-    //   blueSky: "blueskyTest",
-    //   linkedIn: "linkedinTest",
-    //   twitter: "twitterTest"
-    // },
-    // website: "test.com"
-    social: {
-      blueSky: "",
-      linkedIn: "",
-      twitter: ""
-    },
-    website: ""
+
+  const [legislatorId, setLegislatorId] = useState("")
+  const [legislatorData, setLegislatorData] = useState<any[]>([])
+
+  async function getLegislatorUID(memberCode: string) {
+    let docList: any[] = []
+    const q = query(
+      collection(firestore, "profiles"),
+      where("memberId", "==", memberCode)
+    )
+    const docData = await getDocs(q)
+
+    docData.forEach(doc => {
+      // doc.data() is never undefined for query doc snapshots
+      docList.push(doc.data())
+      setLegislatorData(docList)
+      setLegislatorId(doc.id)
+    })
   }
 
+  useEffect(() => {
+    getLegislatorUID(memberCode)
+  }, [memberCode])
+
   if (memberLoading) {
     return (
       <Row>
@@ -221,14 +213,14 @@ export function LegislatorProfilePage({
               </links.External>
             </div>
 
-            {profile.website ? (
+            {legislatorData[0]?.website ? (
               <div>
                 <span className="px-2">·</span>
                 <links.External
-                  href={`https://${profile.website}`}
+                  href={`https://${legislatorData[0].website}`}
                   className="text-decoration-none"
                 >
-                  {profile.website}
+                  {legislatorData[0].website}
                 </links.External>
               </div>
             ) : (
@@ -252,17 +244,18 @@ export function LegislatorProfilePage({
             )}
 
             <div>
-              {profile?.social?.twitter ||
-              profile?.social?.linkedIn ||
-              profile?.social?.blueSky ? (
+              {legislatorData[0]?.social.twitter ||
+              legislatorData[0]?.social.linkedIn ||
+              legislatorData[0]?.social.blueSky ||
+              legislatorData[0]?.social.mastodon ? (
                 <span className="px-2">·</span>
               ) : (
                 <></>
               )}
 
-              {profile?.social?.twitter ? (
+              {legislatorData[0]?.social.twitter ? (
                 <a
-                  href={profile.social.twitter}
+                  href={legislatorData[0].social.twitter}
                   className="pe-2"
                   rel="noreferrer"
                   target="_blank"
@@ -273,9 +266,10 @@ export function LegislatorProfilePage({
               ) : (
                 <></>
               )}
-              {profile?.social?.linkedIn ? (
+
+              {legislatorData[0]?.social.linkedIn ? (
                 <a
-                  href={profile.social.linkedIn}
+                  href={legislatorData[0].social.linkedIn}
                   className="pe-2"
                   rel="noreferrer"
                   target="_blank"
@@ -286,9 +280,10 @@ export function LegislatorProfilePage({
               ) : (
                 <></>
               )}
-              {profile?.social?.blueSky ? (
+
+              {legislatorData[0]?.social.blueSky ? (
                 <a
-                  href={profile?.social.blueSky}
+                  href={legislatorData[0].social.blueSky}
                   className="pe-2"
                   rel="noreferrer"
                   target="_blank"
@@ -299,20 +294,32 @@ export function LegislatorProfilePage({
               ) : (
                 <></>
               )}
+
+              {legislatorData[0]?.social.mastodon ? (
+                <a
+                  href={legislatorData[0].social.mastodon}
+                  className="pe-2"
+                  rel="noreferrer"
+                  target="_blank"
+                  title="Mastodon"
+                >
+                  <Mastodon />
+                </a>
+              ) : (
+                <></>
+              )}
             </div>
           </SocialLine>
         </Col>
 
         <ButtonContainer>
-          {/* uncomment when legislator Maple accounts are linked to this page 
-
-          {user && legislatorAccountId ? (
+          {user && legislatorId ? (
             <div className="mb-2">
-              <FollowUserButton profileId={props.id} />
+              <FollowUserButton profileId={legislatorId} />
             </div>
           ) : (
             <></>
-          )} */}
+          )}
           <links.External
             href={`mailto:${member.EmailAddress}`}
             className="border border-2 border-secondary btn btn-lg fw-bold py-1 text-decoration-none text-secondary w-100"
@@ -354,10 +361,17 @@ export function LegislatorProfilePage({
           <LegislatorTabs
             district={district}
             districtLoading={districtLoading}
+            legislatorId={legislatorId}
+            name={member.Name}
           />
         </Col>
         <Col md="3">
-          <LegislatorSidebar />
+          <LegislatorSidebar
+            court={court}
+            legislatorData={legislatorData}
+            legislatorId={legislatorId}
+            memberCode={memberCode}
+          />
         </Col>
       </Row>
     </Container>

components/LegislatorProfile/LegislatorSidebar.tsx

@@ -2,12 +2,27 @@ import { Biography } from "./SidebarComponents/Biography"
 import { OtherTestimony } from "./SidebarComponents/OtherTestimony"
 import { UpcomingHearings } from "./SidebarComponents/UpcomingHearings"
 
-export function LegislatorSidebar() {
+export function LegislatorSidebar({
+  court,
+  legislatorData,
+  legislatorId,
+  memberCode
+}: {
+  court: number
+  legislatorData: any[]
+  legislatorId: string
+  memberCode: string
+}) {
   return (
     <>
       <OtherTestimony />
       <UpcomingHearings />
-      <Biography />
+      <Biography
+        court={court}
+        legislatorData={legislatorData}
+        legislatorId={legislatorId}
+        memberCode={memberCode}
+      />
     </>
   )
 }

components/LegislatorProfile/LegislatorTabs.tsx

@@ -66,10 +66,14 @@ const TabNavItem = ({
 export function LegislatorTabs({
   district,
   districtLoading,
+  legislatorId,
+  name,
   tabCategory
 }: {
   district?: District | undefined
   districtLoading?: boolean
+  legislatorId: string
+  name: string
   tabCategory?: TabCategories
 }) {
   const { t } = useTranslation("legislators")
@@ -103,7 +107,7 @@ export function LegislatorTabs({
     {
       title: t("tabs.testimony"),
       eventKey: "testimony",
-      content: <TestimonyTab />
+      content: <TestimonyTab legislatorId={legislatorId} name={name} />
     },
     {
       title: t("tabs.votes"),