Hearing Transcriptions base page

components/hearing/HearingDetails.tsx

@@ -0,0 +1,56 @@
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  orderBy,
+  query
+} from "firebase/firestore"
+import { useTranslation } from "next-i18next"
+import { useCallback, useEffect, useRef, useState } from "react"
+import styled from "styled-components"
+import { Col, Container, Image, Row } from "../bootstrap"
+import { firestore } from "components/firebase"
+
+const StyledContainer = styled(Container)`
+  font-family: "Nunito";
+`
+
+export const HearingDetails = () => {
+  const { t } = useTranslation("common")
+  const hearingId = "hearing-5180"
+
+  const [committeeName, setCommitteeName] = useState("")
+  const [videoTranscriptionId, setVideoTranscriptionId] = useState("")
+  const [videoURL, setVideoURL] = useState("")
+
+  const hearingData = useCallback(async () => {
+    const hearing = await getDoc(doc(firestore, `events/${hearingId}`))
+    const docData = hearing.data()
+    const content = docData?.content ?? "Default Content"
+
+    setCommitteeName(content.Name)
+    setVideoTranscriptionId(
+      docData?.videoTranscriptionId ?? "Default Video Transcripton Id"
+    )
+    setVideoURL(docData?.videoURL ?? "Default URL")
+
+    console.log("data: ", docData)
+    console.log("content: ", content)
+  }, [])
+
+  useEffect(() => {
+    hearingData()
+  }, [hearingData])
+
+  console.log("Committee: ", committeeName)
+  console.log("Id: ", videoTranscriptionId)
+  console.log("url: ", videoURL)
+
+  return (
+    <StyledContainer className="mt-3 mb-3">
+      <h1>{t("hearing_transcription")}</h1>
+      <>Hello Hearing World, {videoURL}</>
+    </StyledContainer>
+  )
+}

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/hearing/1.tsx

@@ -0,0 +1,16 @@
+import { HearingDetails } from "components/hearing/HearingDetails"
+import { createPage } from "../../components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+
+export default createPage({
+  titleI18nKey: "Hearing",
+  Page: () => {
+    return <HearingDetails />
+  }
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer"
+])

public/locales/en/common.json

@@ -41,6 +41,7 @@
     "followed": "Followed"
   },
   "calendar": "Our Calendar",
+  "hearing_transcription": "Hearing Transcription",
   "hideAns": "Hide Answer",
   "joinTraining": "and join an upcoming training session!",
   "learn": "Learn",