[Legislator Page] Upcoming Hearings

components/HearingsScheduled/HearingsScheduled.tsx

@@ -9,6 +9,7 @@ export type EventData = {
   index: number
   type: "hearing" | "session"
   name: string
+  code?: string | null
   id: number
   location?: string
   fullDate: Date // TODO: Could be a timestamp

components/LegislatorProfile/LegislatorProfilePage.tsx

@@ -376,6 +376,7 @@ export function LegislatorProfilePage({
         </Col>
         <Col md="3">
           <LegislatorSidebar
+            committeeList={member.Committees}
             court={court}
             legislatorData={legislatorData}
             legislatorId={legislatorId}

components/LegislatorProfile/LegislatorSidebar.tsx

@@ -1,13 +1,17 @@
+import styled from "styled-components"
+
 import { Biography } from "./SidebarComponents/Biography"
 import { OtherTestimony } from "./SidebarComponents/OtherTestimony"
 import { UpcomingHearings } from "./SidebarComponents/UpcomingHearings"
 
 export function LegislatorSidebar({
+  committeeList,
   court,
   legislatorData,
   legislatorId,
   memberCode
 }: {
+  committeeList: any[]
   court: number
   legislatorData: any[]
   legislatorId: string
@@ -16,7 +20,7 @@ export function LegislatorSidebar({
   return (
     <>
       <OtherTestimony />
-      <UpcomingHearings />
+      <UpcomingHearings committeeList={committeeList} />
       <Biography
         court={court}
         legislatorData={legislatorData}
@@ -26,3 +30,21 @@ export function LegislatorSidebar({
     </>
   )
 }
+
+export const SidebarBlock = styled.div`
+  background-color: white;
+  border-color: #b8c0c9;
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 1px;
+  font-size: 11px;
+  padding: 16px;
+`
+
+export const SidebarTitle = styled.div`
+  font-weight: 700;
+  color: #0b0a3e;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 10px;
+`

components/LegislatorProfile/SidebarComponents/Biography.tsx

@@ -6,36 +6,19 @@ import styled from "styled-components"
 import { Form } from "../../bootstrap"
 import { Profile, ProfileHook, useProfile } from "../../db"
 import Input from "../../forms/Input"
+import { SidebarBlock, SidebarTitle } from "../LegislatorSidebar"
 
 import { useAuth } from "components/auth"
 import {
   updateProfile,
   UpdateProfileData
 } from "components/EditProfilePage/PersonalInfoTab"
 
-const BioBlock = styled.div`
-  background-color: white;
-  border-color: #b8c0c9;
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 1px;
-  font-size: 11px;
-  padding: 16px;
-`
-
 const BioButton = styled.button`
   font-size: 9px;
   padding: 2px;
 `
 
-const BioTitle = styled.div`
-  font-weight: 700;
-  color: #0b0a3e;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 10px;
-`
-
 export function Biography({
   court,
   legislatorData,
@@ -108,12 +91,12 @@ function EditableBiography({
   }, [isDirty, setFormUpdated])
 
   return (
-    <BioBlock>
+    <SidebarBlock>
       <Form onSubmit={onSubmit}>
         <div className={`d-flex justify-content-between`}>
-          <BioTitle className={`align-self-center d-inline my-1`}>
+          <SidebarTitle className={`align-self-center d-inline my-1`}>
             {t("biography")}
-          </BioTitle>
+          </SidebarTitle>
           <BioButton
             type="submit"
             className={`btn btn-primary d-inline m-1 w-auto`}
@@ -131,19 +114,19 @@ function EditableBiography({
           defaultValue={about ? about : t("addBio")}
         />
       </Form>
-    </BioBlock>
+    </SidebarBlock>
   )
 }
 
 function ReadonlyBiography({ legislatorData }: { legislatorData: any[] }) {
   const { t } = useTranslation("legislators")
 
   return (
-    <BioBlock>
-      <BioTitle className={`my-1`}>{t("biography")}</BioTitle>
+    <SidebarBlock>
+      <SidebarTitle className={`my-1`}>{t("biography")}</SidebarTitle>
       <div style={{ whiteSpace: "pre-wrap" }}>
         {legislatorData[0]?.about ? legislatorData[0].about : t("notClaimed")}
       </div>
-    </BioBlock>
+    </SidebarBlock>
   )
 }

components/LegislatorProfile/SidebarComponents/OtherTestimony.tsx

@@ -1,5 +1,14 @@
-import { TabBlock } from "../LegislatorComponents"
+import { useTranslation } from "next-i18next"
+
+import { SidebarBlock, SidebarTitle } from "../LegislatorSidebar"
 
 export function OtherTestimony() {
-  return <TabBlock>- Other Testimony</TabBlock>
+  const { t } = useTranslation("legislators")
+
+  return (
+    <SidebarBlock className="mb-2">
+      <SidebarTitle className={`my-1`}>{t("otherTestimony")}</SidebarTitle>
+      <div>Content To Be Added</div>
+    </SidebarBlock>
+  )
 }

components/LegislatorProfile/SidebarComponents/UpcomingHearings.tsx

@@ -1,5 +1,121 @@
-import { TabBlock } from "../LegislatorComponents"
+import { DateTime } from "luxon"
+import { useTranslation } from "next-i18next"
+import styled from "styled-components"
 
-export function UpcomingHearings() {
-  return <TabBlock>- Upcoming Hearings</TabBlock>
+import * as links from "../../links"
+import { Col } from "../../bootstrap"
+import { SidebarBlock, SidebarTitle } from "../LegislatorSidebar"
+
+import { useUpcomingEvents } from "components/db/events"
+import { EventData } from "components/HearingsScheduled"
+import { formatDate } from "components/HearingsScheduled/dateUtils"
+
+const EventBlock = styled.div`
+  border-bottom: 1px solid #b8c0c9;
+  font-size: 12px;
+  font-weight: 700;
+  margin: 0 2px;
+  padding: 8px 0;
+`
+
+const EventDate = styled.div`
+  color: #1a3185;
+`
+
+const EventTitle = styled.div`
+  color: #212529;
+  font-weight: 600;
+  text-decoration: none;
+`
+
+const EventLocation = styled.div`
+  color: #6c757d;
+  margin-top: 1px;
+`
+
+export const HearingsLink = styled(links.Internal)`
+  font-size: 12px;
+  font-weight: 700;
+  color: #1a3185;
+  padding: 10px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+`
+
+export function UpcomingHearings({ committeeList }: { committeeList: any[] }) {
+  const { t } = useTranslation("legislators")
+
+  const events = useUpcomingEvents()
+  const thisMonth = DateTime.now().startOf("month")
+  const eventList: EventData[] = []
+  let latestDate = DateTime.now()
+
+  if (events) {
+    for (let e of events) {
+      const eventDate = DateTime.fromISO(e.content.EventDate)
+
+      if (eventDate > latestDate) latestDate = eventDate
+
+      const index = Math.floor(eventDate.diff(thisMonth, "months").months)
+      const date = formatDate(e.content.EventDate)
+      if (e.type === "hearing") {
+        eventList.push({
+          index,
+          type: e.type,
+          name: e.content.Name ?? "Hearing",
+          code: e.content.HearingHost.CommitteeCode,
+          id: e.content.EventId,
+          location: e.content.Location?.LocationName ?? undefined,
+          fullDate: eventDate.toJSDate(),
+          year: date.year,
+          month: date.month,
+          date: date.date,
+          day: date.day,
+          time: date.time
+        })
+      }
+    }
+  }
+
+  const LegislatorCommitteCodes = committeeList.map(code => code.CommitteeCode)
+
+  let legislatorEvents: any[] = []
+
+  if (events) {
+    eventList.forEach(event => {
+      if (LegislatorCommitteCodes.includes(event.code)) {
+        legislatorEvents.push(event)
+      }
+    })
+  }
+
+  console.log("legislatorEvents", legislatorEvents)
+
+  return (
+    <SidebarBlock className="mb-2">
+      <SidebarTitle className={`my-1`}>{t("upcomingHearings")}</SidebarTitle>
+      {legislatorEvents ? (
+        <>
+          {legislatorEvents.slice(0, 3).map(e => (
+            <EventBlock key={e.id}>
+              <EventDate>
+                {e.month} {e.date} {" · "} {e.time}
+              </EventDate>
+              <EventTitle>{e.name}</EventTitle>
+              <EventLocation>{e.location}</EventLocation>
+            </EventBlock>
+          ))}
+        </>
+      ) : (
+        <div>{t("noEvents")}</div>
+      )}
+      <Col>
+        <HearingsLink href="/hearings">
+          {t("viewAllHearings")}
+          {" ↗"}
+        </HearingsLink>
+      </Col>
+    </SidebarBlock>
+  )
 }

public/locales/en/legislators.json

@@ -44,7 +44,9 @@
   "home": "Home",
   "legislators": "Legislators",
   "loading": "Loading district...",
+  "noEvents": "This legislator does not have hearings in the near term future",
   "notClaimed": "This legislator has not claimed their MAPLE account",
+  "otherTestimony": "Others' testimony on their bills",
   "party": {
     "democratic": "Democratic Party",
     "party": "Party",
@@ -62,5 +64,7 @@
     "testimony": "Testimony",
     "votes": "Votes"
   },
-  "termsServed": "Terms Served"
+  "termsServed": "Terms Served",
+  "upcomingHearings": "Upcoming Hearings",
+  "viewAllHearings": "View all hearings"
 }