Legistator page (framework)

components/legislator/LegislatorPage.tsx

@@ -0,0 +1,110 @@
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { collectionGroup, getDocs, query, where } from "firebase/firestore"
+import { useTranslation } from "next-i18next"
+import ErrorPage from "next/error"
+import { useEffect, useState } from "react"
+import styled from "styled-components"
+
+import { Role, useAuth } from "../auth"
+import { Col, Container, Row, Spinner } from "../bootstrap"
+import { usePublicProfile, usePublishedTestimonyListing } from "../db"
+import {
+  Back,
+  ButtonContainer,
+  FeatureCalloutButton
+} from "../shared/CommonComponents"
+import { Banner } from "../shared/StyledSharedComponents"
+import ViewTestimony from "../TestimonyCard/ViewTestimony"
+
+import { LegislatorSidebar } from "./SidebarComponents/LegislatorSidebar"
+//import { OrgContactInfo } from "./OrgContactInfo"
+//import { ProfileAboutSection } from "./ProfileAboutSection"
+//import { ProfileHeader } from "./ProfileHeader"
+//import { ProfileLegislators } from "./ProfileLegislators"
+//import { VerifyAccountSectionLegacy } from "./VerifyAccountSectionLegacy"
+
+import { useFlags } from "components/featureFlags"
+import { firestore } from "components/firebase"
+import { Internal } from "components/links"
+import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
+import { VerifyAccountSection } from "components/shared"
+import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext"
+
+const DirectoryPath = styled.div`
+  font-size: 12px;
+`
+
+const HeaderBlock = styled.div`
+  background-color: white;
+  border: "1px #ced4da solid";
+  border-radius: 5px;
+  margin-top: 8px;
+  padding: 16px;
+`
+
+const StatBlock = styled(Col)`
+  background-color: white;
+  border: 1px #ced4da solid;
+  border-radius: 5px;
+  margin-top: 4px;
+  padding: 16px;
+`
+
+export function LegislatorPage(props: { id: string }) {
+  const { t } = useTranslation("legislators")
+  const { result: profile, loading } = usePublicProfile(props.id)
+
+  console.log("Pro: ", profile)
+
+  if (loading) {
+    return (
+      <Row>
+        <Spinner animation="border" className="mx-auto" />
+      </Row>
+    )
+  }
+  if (!profile) {
+    return <ErrorPage statusCode={404} withDarkMode={false} />
+  }
+
+  return (
+    <Container className="mt-3 mb-3">
+      <DirectoryPath className="align-items-center d-flex flex-nowrap">
+        <Internal className="text-decoration-none" href="/">
+          {t("home")}
+        </Internal>
+        <FontAwesomeIcon className="fa-2xs px-2 " icon={faChevronRight} />
+        <div style={{ color: "#6c757d" }}>{t("legislators")}</div>
+        <FontAwesomeIcon className="fa-2xs px-2 " icon={faChevronRight} />
+        <div style={{ color: "#6c757d" }}>{profile.fullName}</div>
+      </DirectoryPath>
+
+      <HeaderBlock className="">Header Info Goes Here</HeaderBlock>
+
+      <div className="d-flex flex-wrap gap-2 justify-content-between mt-2">
+        <StatBlock className="col-4 flex-grow-1" md="2">
+          Stat
+        </StatBlock>
+        <StatBlock className="col-4 flex-grow-1" md="2">
+          Info
+        </StatBlock>
+        <StatBlock className="col-4 flex-grow-1" md="2">
+          Goes
+        </StatBlock>
+        <StatBlock className="col-4 flex-grow-1" md="2">
+          Here
+        </StatBlock>
+      </div>
+
+      <Row>
+        <Col className={`mt-4`} md="9">
+          Tabs
+        </Col>
+        <Col className={`mt-4`} md="3">
+          <LegislatorSidebar />
+        </Col>
+      </Row>
+    </Container>
+  )
+}

components/legislator/SidebarComponents/Biography.tsx

@@ -0,0 +1,3 @@
+export function Biography() {
+  return <div>- Biography</div>
+}

components/legislator/SidebarComponents/LegislatorSidebar.tsx

@@ -0,0 +1,14 @@
+import { Biography } from "./Biography"
+import { OtherTestimony } from "./OtherTestimony"
+import { UpcomingHearings } from "./UpcomingHearings"
+
+export function LegislatorSidebar() {
+  return (
+    <>
+      Sidebar Components
+      <OtherTestimony />
+      <UpcomingHearings />
+      <Biography />
+    </>
+  )
+}

components/legislator/SidebarComponents/OtherTestimony.tsx

@@ -0,0 +1,3 @@
+export function OtherTestimony() {
+  return <div>- Other Testimony</div>
+}

components/legislator/SidebarComponents/UpcomingHearings.tsx

@@ -0,0 +1,3 @@
+export function UpcomingHearings() {
+  return <div>- Upcoming Hearings</div>
+}

components/legislator/index.ts

@@ -0,0 +1 @@
+export * from "./LegislatorPage"

pages/hearing/[hearingId].tsx

@@ -9,7 +9,7 @@ import { fetchHearingData, HearingData } from "components/hearing/hearing"
 const Query = z.object({ hearingId: z.coerce.number() })
 
 export default createPage<{ hearingData: HearingData }>({
-  titleI18nKey: "Hearing",
+  titleI18nKey: "navigation.hearing",
   Page: ({ hearingData }) => {
     return <HearingDetails hearingData={hearingData} />
   }

pages/legislators/profile.tsx

@@ -0,0 +1,73 @@
+import { useTranslation } from "next-i18next"
+import { useEffect, useState } from "react"
+import { Spinner } from "react-bootstrap"
+
+import { useAuth } from "components/auth"
+import { LegislatorPage } from "components/legislator"
+import { createPage } from "components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+export default createPage({
+  titleI18nKey: "navigation.legislator",
+  Page: () => {
+    const { id, loading } = useProfileRouting()
+    const { authenticated, user } = useAuth()
+    const { t } = useTranslation("profile")
+
+    return (
+      <div>
+        {loading ? (
+          <div className={`d-grid place-content-center`}>
+            <Spinner animation={"border"} />
+          </div>
+        ) : !loading && !id && authenticated ? (
+          <LegislatorPage id={user!.uid} />
+        ) : id ? (
+          <LegislatorPage id={id} />
+        ) : (
+          <div>{t("noUser")}</div>
+        )}
+      </div>
+    )
+  }
+})
+
+const useProfileRouting = () => {
+  const { user } = useAuth()
+
+  const [id, setId] = useState<string>("od")
+  const [loading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    if (window) {
+      const urlParams = new URLSearchParams(window.location?.search)
+      const urlid = urlParams.get("id")
+
+      if (urlid === null) {
+        if (user?.uid) {
+          setId(user.uid)
+          urlParams.set("id", user.uid)
+        }
+      }
+
+      if (typeof urlid === "string") {
+        setId(urlid)
+      }
+      if (urlid !== undefined) {
+        setLoading(false)
+      }
+    }
+  }, [id, user?.uid])
+
+  return { id, loading }
+}
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "legislators",
+  "profile"
+  // "editProfile",
+  // "testimony"
+])

public/locales/en/common.json

@@ -119,10 +119,12 @@
     "editProfile": "Edit Profile",
     "faq": "FAQ",
     "followingTab": "Followed Content",
+    "hearing": "Hearing",
     "hearings": "Hearings",
     "home": "Home",
     "learnAboutTestimony": "Learn About Testimony",
     "legislativeProcess": "About the MA Legislative Process",
+    "legislator": "Legislator",
     "logo": "Massachusetts Platform for Legislative Engagement home",
     "main": "Main navigation",
     "missionAndGoals": "Mission & Goals",

public/locales/en/legislators.json

@@ -0,0 +1,6 @@
+{
+  "home": "Home",
+  "legislators": "Legislators",
+  "test": "Test",
+  "test2": "Hello World"    
+}