Merge branch 'main' into testimony-count-translations

Author: jicruz96

components/CurrentCommitteeCard/CurrentCommitteeCard.tsx

@@ -1,8 +1,3 @@
-import { Timestamp } from "firebase/firestore"
-import { useMediaQuery } from "usehooks-ts"
-import { Testimony } from "../functions/src/testimony/types"
-import { Bill, BillContent } from "./db"
-
 const billIdFormat = /^(?<chamber>\D+)(?<number>\d+)$/
 
 /** Formats H123 as H.123 */
@@ -15,56 +10,5 @@ export const formatBillId = (id: string) => {
   }
 }
 
-const MISSING_TIMESTAMP = Timestamp.fromMillis(0)
-export const formatTimestamp = (t?: Timestamp) => {
-  if (!t || t.toMillis() == MISSING_TIMESTAMP.toMillis()) {
-    return undefined
-  }
-  return t.toDate().toLocaleDateString()
-}
-
-export const FormattedBillTitle = ({ bill }: { bill: Bill | BillContent }) => {
-  const isMobile = useMediaQuery("(max-width: 768px)")
-  const billInfo = "content" in bill ? bill.content : bill
-
-  const { BillNumber, Title } = billInfo
-
-  return (
-    <div className="mt-2">
-      {formatBillId(BillNumber)}:{" "}
-      {isMobile ? Title.substring(0, 45) + "..." : Title}
-    </div>
-  )
-}
-
-export const FormattedTestimonyTitle = ({
-  testimony
-}: {
-  testimony: Testimony
-}) => {
-  const { authorDisplayName, publishedAt, position } = testimony
-
-  return (
-    <div>
-      <span>
-        <b>Author:</b> {authorDisplayName || "anonymous"}
-      </span>
-      <br></br>
-      <span>
-        <b>Published on:</b> {publishedAt.toDate().toLocaleDateString()}
-      </span>
-      <br></br>
-      <span>
-        <b>Position:</b> {position}
-      </span>
-    </div>
-  )
-}
-
-export const decodeHtmlCharCodes = (s: string) =>
-  s.replace(/(&#(\d+);)/g, (match, capture, charCode) =>
-    String.fromCharCode(charCode)
-  )
-
 export const truncateText = (s: string | undefined, maxLength: number) =>
   !!s && s.length > maxLength ? s.substring(0, maxLength) + "..." : s

components/formatting.tsx

@@ -7,23 +7,21 @@ import {
   SearchBox,
   useInstantSearch
 } from "react-instantsearch"
-import { createInstantSearchRouterNext } from "react-instantsearch-router-nextjs"
-import singletonRouter from "next/router"
+import { currentGeneralCourt } from "functions/src/shared"
 import styled from "styled-components"
 import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter"
-import { currentGeneralCourt } from "functions/src/shared"
 import { Col, Container, Row, Spinner } from "../../bootstrap"
 import { NoResults } from "../NoResults"
 import { ResultCount } from "../ResultCount"
 import { SearchContainer } from "../SearchContainer"
 import { SearchErrorBoundary } from "../SearchErrorBoundary"
+import { useRouting } from "../useRouting"
 import { BillHit } from "./BillHit"
 import { useBillRefinements } from "./useBillRefinements"
 import { SortBy, SortByWithConfigurationItem } from "../SortBy"
 import { getServerConfig, VirtualFilters } from "../common"
 import { useBillSort } from "./useBillSort"
 import { FC, useState } from "react"
-import { pathToSearchState, searchStateToUrl } from "../routingHelpers"
 
 const searchClient = new TypesenseInstantSearchAdapter({
   server: getServerConfig(),
@@ -72,16 +70,8 @@ export const BillSearch = () => {
           }
         }}
         searchClient={searchClient}
-        routing={{
-          router: createInstantSearchRouterNext({
-            singletonRouter,
-            routerOptions: {
-              cleanUrlOnDispose: false,
-              createURL: args => searchStateToUrl(args),
-              parseURL: args => pathToSearchState(args)
-            }
-          })
-        }}
+        routing={useRouting()}
+        future={{ preserveSharedStateOnUnmount: true }}
       >
         <VirtualFilters type="bill" />
         <Layout items={items} />

components/search/bills/BillSearch.tsx

@@ -6,8 +6,6 @@ import {
   SearchBox,
   useInstantSearch
 } from "react-instantsearch"
-import { createInstantSearchRouterNext } from "react-instantsearch-router-nextjs"
-import singletonRouter from "next/router"
 import {
   StyledTabContent,
   StyledTabNav
@@ -25,10 +23,10 @@ import { SearchContainer } from "../SearchContainer"
 import { SearchErrorBoundary } from "../SearchErrorBoundary"
 import { SortBy } from "../SortBy"
 import { getServerConfig, VirtualFilters } from "../common"
+import { useRouting } from "../useRouting"
 import { TestimonyHit } from "./TestimonyHit"
 import { useTestimonyRefinements } from "./useTestimonyRefinements"
 import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext"
-import { pathToSearchState, searchStateToUrl } from "../routingHelpers"
 
 const searchClient = new TypesenseInstantSearchAdapter({
   server: getServerConfig(),
@@ -65,16 +63,8 @@ export const TestimonySearch = () => (
         }
       }}
       searchClient={searchClient}
-      routing={{
-        router: createInstantSearchRouterNext({
-          singletonRouter,
-          routerOptions: {
-            cleanUrlOnDispose: false,
-            createURL: args => searchStateToUrl(args),
-            parseURL: args => pathToSearchState(args)
-          }
-        })
-      }}
+      routing={useRouting()}
+      future={{ preserveSharedStateOnUnmount: true }}
     >
       <VirtualFilters type="testimony" />
       <Layout />

components/search/routingHelpers.ts

@@ -0,0 +1,55 @@
+import { UiState } from "instantsearch.js"
+import { RouterProps } from "instantsearch.js/es/middlewares"
+import Router from "next/router"
+import qs from "qs"
+import { useMemo } from "react"
+
+const pathToSearchState = (path: string) =>
+  (path.includes("?")
+    ? qs.parse(path.substring(path.indexOf("?") + 1))
+    : {}) as UiState
+
+const searchStateToUrl = (searchState: UiState) => {
+  const base = window.location.pathname
+
+  const flagQueries = Object.fromEntries(
+    Object.entries(qs.parse(window.location.search.slice(1))).filter(
+      ([key]) => !Object.keys(searchState).includes(key)
+    )
+  )
+
+  const query = qs.stringify({
+    ...searchState,
+    ...flagQueries
+  })
+
+  return query ? `${base}?${query}` : base
+}
+
+export function useRouting(): RouterProps<UiState, UiState> {
+  return useMemo(() => {
+    let disposed = false
+    return {
+      router: {
+        createURL: searchStateToUrl,
+        dispose() {
+          disposed = true
+          // Clear back listener
+          Router.beforePopState(() => true)
+        },
+        onUpdate(callback) {
+          Router.beforePopState(({ url }) => {
+            callback(pathToSearchState(url))
+            return true
+          })
+        },
+        read: () => pathToSearchState(window.location.href),
+        write(route) {
+          if (disposed) return
+          const url = searchStateToUrl(route)
+          Router.push(url, url, { shallow: true })
+        }
+      }
+    }
+  }, [])
+}

components/search/testimony/TestimonySearch.tsx

@@ -99,6 +99,12 @@ service cloud.firestore {
         allow read: if true
         allow write: if false
       }
+
+      // public, read-only
+      match /paragraphs/{pid} {
+        allow read: if true
+        allow write: if false
+      }
     }
   }
 }

components/search/useRouting.tsx

@@ -118,7 +118,6 @@
     "react-i18next": "^13.2.2",
     "react-inlinesvg": "^3.0.1",
     "react-instantsearch": "^7.12.4",
-    "react-instantsearch-router-nextjs": "^7.15.5",
     "react-is": "^18.2.0",
     "react-markdown": "^8.0.4",
     "react-overlays": "^5.1.1",

firestore.rules

@@ -156,11 +156,6 @@ folder: billDetail
 grouping: Bill Detail
 figmaUrl: https://www.figma.com/file/3ifz37EOwDfmnEG8320KlD/CS1---MAPLE?node-id=180%3A7916
 ---
-name: CurrentCommitteeCard
-folder: billDetail
-grouping: Bill Detail
-figmaUrl: https://www.figma.com/file/3ifz37EOwDfmnEG8320KlD/CS1---MAPLE?node-id=159%3A4939
----
 name: BillStatus
 folder: billDetail
 grouping: Bill Detail