More Sidebar Tweaks (#1985)

* tweaks

* additional changes

* cleanup

Author: mertbagt

components/bill/Back.tsx

@@ -1,9 +1,8 @@
-import { useFlags } from "components/featureFlags"
+import { useTranslation } from "next-i18next"
 import { useAuth } from "../auth"
 import { Col, Container, Row } from "../bootstrap"
 import { TestimonyFormPanel } from "../publish"
 import { Banner } from "../shared/StyledSharedComponents"
-import { Back } from "./Back"
 import { BillNumber, Styled } from "./BillNumber"
 import { BillTestimonies } from "./BillTestimonies"
 import BillTrackerConnectedView from "./BillTracker"
@@ -12,10 +11,11 @@ import { Committees, Hearing, Sponsors } from "./SponsorsAndCommittees"
 import { Status } from "./Status"
 import { Summary } from "./Summary"
 import { BillProps } from "./types"
-import { useTranslation } from "next-i18next"
-import { isCurrentCourt } from "functions/src/shared"
+import { Back } from "components/shared/CommonComponents"
+import { useFlags } from "components/featureFlags"
 import { FollowBillButton } from "components/shared/FollowButton"
 import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
+import { isCurrentCourt } from "functions/src/shared"
 
 export const BillDetails = ({ bill }: BillProps) => {
   const { t } = useTranslation("common")

components/bill/BillDetails.tsx

@@ -7,12 +7,13 @@ import { Transcriptions } from "./Transcriptions"
 import { Col, Container, Image, Row } from "../bootstrap"
 import { firestore } from "../firebase"
 import * as links from "../links"
+import { Back } from "../shared/CommonComponents"
 
 const ButtonContainer = styled.div`
   width: fit-content;
 `
 
-export const CommitteeButton = styled.button`
+export const FeatureCalloutButton = styled.button`
   border-radius: 12px;
   font-size: 12px;
 `
@@ -43,6 +44,11 @@ export const HearingDetails = ({
   hearingId: string | string[] | undefined
 }) => {
   const { t } = useTranslation(["common", "hearing"])
+  const [transcriptData, setTranscriptData] = useState(null)
+
+  const handleTranscriptData = (data: any) => {
+    setTranscriptData(data)
+  }
 
   const [videoLoaded, setVideoLoaded] = useState(false)
   const handleVideoLoad = () => {
@@ -85,30 +91,32 @@ export const HearingDetails = ({
 
   return (
     <Container className="mt-3 mb-3">
-      <h1>
-        {t("hearing", { ns: "hearing" })} {hearingId}
-      </h1>
-
-      <h5 className={`mb-3`}>{description}</h5>
+      <Row className={`mb-3`}>
+        <Col>
+          <Back href="/hearings">{t("back_to_hearings")}</Back>
+        </Col>
+      </Row>
 
-      {committeeName ? (
-        <ButtonContainer>
+      {transcriptData ? (
+        <ButtonContainer className={`mb-2`}>
           {/* ButtonContainer contrains clickable area of link so that it doesn't exceed
               the button and strech invisibly across the width of the page */}
-          <links.External
-            href={`https://malegislature.gov/Committees/Detail/${committeeCode}/${generalCourtNumber}`}
+          <FeatureCalloutButton
+            className={`btn btn-secondary d-flex text-nowrap mt-1 mx-1 p-1`}
           >
-            <CommitteeButton
-              className={`btn btn-secondary d-flex text-nowrap mt-1 mx-1 p-1`}
-            >
-              &nbsp; {committeeName} &nbsp;
-            </CommitteeButton>
-          </links.External>
+            &nbsp;{" "}
+            {t("video_and_transcription_feature_callout", { ns: "hearing" })}{" "}
+            &nbsp;
+          </FeatureCalloutButton>
         </ButtonContainer>
       ) : (
         <></>
       )}
 
+      {committeeName ? <h1>{committeeName}</h1> : <></>}
+
+      <h5 className={`mb-3`}>{description}</h5>
+
       <Row>
         <Col className={`col-md-8 mt-4`}>
           <LegalContainer className={`pb-2 rounded`}>
@@ -160,6 +168,7 @@ export const HearingDetails = ({
           )}
 
           <Transcriptions
+            handleTranscriptData={handleTranscriptData}
             setCurTimeVideo={setCurTimeVideo}
             videoLoaded={videoLoaded}
             videoRef={videoRef}

components/hearing/HearingDetails.tsx

@@ -115,11 +115,13 @@ const SearchWrapper = styled.div`
 `
 
 export const Transcriptions = ({
+  handleTranscriptData,
   setCurTimeVideo,
   videoLoaded,
   videoRef,
   videoTranscriptionId
 }: {
+  handleTranscriptData: (data: any) => void
   setCurTimeVideo: any
   videoLoaded: boolean
   videoRef: any
@@ -149,6 +151,7 @@ export const Transcriptions = ({
 
     if (transcriptData.length === 0 && docList.length != 0) {
       setTranscriptData(docList)
+      handleTranscriptData(docList)
     }
   }, [subscriptionRef, transcriptData])
 

components/hearing/Transcriptions.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components"
 import { Container } from "../bootstrap"
+import * as links from "../links"
 
 export const MemberItem = ({
   name,
@@ -21,11 +22,23 @@ export const MemberItem = ({
   )
 }
 
-const StyledContainer = styled(Container)`
-  //border-top: 1px solid #979797;
-  background: white;
-  border-radius: 0 0 10px 10px;
+export const Back = styled(links.Internal)`
+  margin-right: auto;
 `
+
+export const DescrContainer = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.015em;
+  text-align: left;
+`
+
+export const Divider = styled.hr`
+  border: 1px solid #979797;
+  margin: 0;
+`
+
 const EmailContainer = styled.a`
   color: #1a3185;
   font-size: 20px;
@@ -35,6 +48,7 @@ const EmailContainer = styled.a`
   text-align: left;
   text-decoration: underline;
 `
+
 export const NameContainer = styled.div`
   color: #1a3185;
   font-size: 25px;
@@ -43,18 +57,6 @@ export const NameContainer = styled.div`
   letter-spacing: 0em;
   text-align: left;
 `
-export const DescrContainer = styled.div`
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0.015em;
-  text-align: left;
-`
-
-export const Divider = styled.hr`
-  border: 1px solid #979797;
-  margin: 0;
-`
 
 export const PageDescr = styled.div`
   font-weight: 700;
@@ -65,6 +67,7 @@ export const PageTitle = styled.div`
   font-weight: 600;
   font-size: 60px;
 `
+
 export const SectionContainer = styled.div`
   border-radius: 10px;
   background: white;
@@ -77,3 +80,9 @@ export const SectionTitle = styled.div`
   font-size: 26px;
   border-radius: 10px 10px 0 0;
 `
+
+const StyledContainer = styled(Container)`
+  //border-top: 1px solid #979797;
+  background: white;
+  border-radius: 0 0 10px 10px;
+`

components/shared/CommonComponents.tsx

@@ -1,19 +1,20 @@
 import { GetStaticProps } from "next"
-import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { useTranslation } from "next-i18next"
+import { serverSideTranslations } from "next-i18next/serverSideTranslations"
+
 import { Container } from "components/bootstrap"
-import { HearingSearch } from "components/search"
-import { createPage } from "components/page"
 import { flags } from "components/featureFlags"
+import { createPage } from "components/page"
+import { HearingSearch } from "components/search"
 
 const HearingsPage = createPage({
   titleI18nKey: "navigation.browseHearings",
   Page: () => {
-    const { t } = useTranslation("search")
+    const { t } = useTranslation("common")
 
     return (
       <Container fluid="md" className="mt-3">
-        <h1>{t("browse_hearings")}</h1>
+        <h1>{t("navigation.browseHearings")}</h1>
         <HearingSearch />
       </Container>
     )
@@ -31,10 +32,10 @@ export const getStaticProps: GetStaticProps = async ctx => {
     props: {
       ...(await serverSideTranslations(locale, [
         "auth",
-        "search",
         "common",
         "footer",
-        "hearing"
+        "hearing",
+        "search"
       ]))
     }
   }

pages/hearings/index.tsx

@@ -1,6 +1,7 @@
 {
   "about": "About",
   "back_to_bills": "back to list of bills",
+  "back_to_hearings": "back to list of hearings",
   "bill": {
     "and_others_one": "and {{count}} other",
     "and_others_other": "and {{count}} others",

public/locales/en/common.json

@@ -3,7 +3,6 @@
   "bills_consideration": "Bills under consideration",
   "chairs": "Chairs",
   "committee_members": "Committee members",
-  "hearing": "Hearing ",
   "hearing_details": "Hearing details",
   "house_chair": "House Chair",
   "member": "Member",
@@ -23,6 +22,7 @@
   "see_less": "See less",
   "senate_chair": "Senate Chair",
   "transcription_not_on_file": "This hearing does not yet have a transcription on file",
+  "video_and_transcription_feature_callout": "Hearing Video + Transcription",
   "view_bill": "View Bill Details",
   "view_votes": "View hearing votes",
   "votes": "Votes",

public/locales/en/hearing.json

@@ -1,7 +1,6 @@
 {
   "another_term": "Try another search term",
   "browse_bills": "Browse Bills",
-  "browse_hearings": "Browse Hearings",
   "filter": "Filter",
   "topics": "Topics",
   "zero_results": "Your search has yielded zero results!",