rows
+rows
+rows
+rows
+rows
+Events
' + + 'rows
rows
+
+
+ )
+}
+
+export function ListCard({
+ title,
+ meta,
+ children,
+}: {
+ title: React.ReactNode
+ meta?: React.ReactNode
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {title}
+ + {meta !== undefined && {meta}} +{children}
+
{values.map((v, i) => (
- // eslint-disable-next-line react/no-array-index-key
{labels &&
- {barValueLabel(v)}
+ {formatCompactCount(v)}
{labels[i]}
}
@@ -45,7 +45,6 @@ export function Spark({
{heights.map((height, i) => (
{
renderPage()
const c = await findCard("Pins per week")
- expect(await within(c).findByText("1.2k")).toBeInTheDocument()
+ expect(await within(c).findByText("1.2K")).toBeInTheDocument()
expect(within(c).getByText("3")).toBeInTheDocument()
expect(within(c).getByText("Wk A")).toBeInTheDocument()
expect(within(c).getByText("Wk B")).toBeInTheDocument()
diff --git a/apps/admin/src/features/analytics/analytics-rank-cards.tsx b/apps/admin/src/features/analytics/analytics-rank-cards.tsx
index 9c4ee09..2764499 100644
--- a/apps/admin/src/features/analytics/analytics-rank-cards.tsx
+++ b/apps/admin/src/features/analytics/analytics-rank-cards.tsx
@@ -2,7 +2,7 @@
import type { ReactNode } from "react"
-import { INITIALS_MAX_LETTERS } from "@/lib/display"
+import { initials } from "@/lib/display"
import { EMPTY_VALUE } from "@/lib/empty-value"
import { AnalyticsCard } from "@/features/analytics/analytics-card"
import type {
@@ -12,16 +12,6 @@ import type {
const GOOD_VALUE_STYLE = { color: "var(--moss-700)", fontWeight: 700 } as const
-function initials(name: string): string {
- const letters = name
- .split(" ")
- .map((word) => word[0] ?? "")
- .slice(0, INITIALS_MAX_LETTERS)
- .join("")
- .toUpperCase()
- return letters || "?"
-}
-
interface RankRow {
key: string
lead: ReactNode
diff --git a/apps/admin/src/features/analytics/chart-geometry.test.ts b/apps/admin/src/features/analytics/chart-geometry.test.ts
index 8d219db..0deb6b6 100644
--- a/apps/admin/src/features/analytics/chart-geometry.test.ts
+++ b/apps/admin/src/features/analytics/chart-geometry.test.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vitest"
-import { barHeightPcts, barValueLabel, sparkHeightPcts } from "./chart-geometry"
+import { barHeightPcts, sparkHeightPcts } from "./chart-geometry"
describe("bar chart geometry", () => {
it("scales every bar against the tallest one", () => {
@@ -14,12 +14,6 @@ describe("bar chart geometry", () => {
it("returns no heights for an empty series", () => {
expect(barHeightPcts([])).toEqual([])
})
-
- it("abbreviates values from one thousand up", () => {
- expect(barValueLabel(999)).toBe("999")
- expect(barValueLabel(1000)).toBe("1.0k")
- expect(barValueLabel(1540)).toBe("1.5k")
- })
})
describe("sparkline geometry", () => {
diff --git a/apps/admin/src/features/analytics/chart-geometry.ts b/apps/admin/src/features/analytics/chart-geometry.ts
index e9e533f..2e03769 100644
--- a/apps/admin/src/features/analytics/chart-geometry.ts
+++ b/apps/admin/src/features/analytics/chart-geometry.ts
@@ -2,8 +2,6 @@
const SPARK_FLOOR_PCT = 10
const SPARK_SPAN_PCT = 88
-const COMPACT_BAR_VALUE_FROM = 1000
-
export function barHeightPcts(values: readonly number[]): number[] {
const max = Math.max(...values, 1)
return values.map((v) => (v / max) * 100)
@@ -14,9 +12,3 @@ export function sparkHeightPcts(values: readonly number[]): number[] {
const min = Math.min(...values)
return values.map((v) => SPARK_FLOOR_PCT + ((v - min) / (max - min || 1)) * SPARK_SPAN_PCT)
}
-
-export function barValueLabel(value: number): string {
- return value >= COMPACT_BAR_VALUE_FROM
- ? `${(value / COMPACT_BAR_VALUE_FROM).toFixed(1)}k`
- : String(value)
-}
diff --git a/apps/admin/src/features/discovery/discovery-page.test.tsx b/apps/admin/src/features/discovery/discovery-page.test.tsx
index 1006ae7..f94d941 100644
--- a/apps/admin/src/features/discovery/discovery-page.test.tsx
+++ b/apps/admin/src/features/discovery/discovery-page.test.tsx
@@ -172,14 +172,14 @@ describe("DiscoveryPage", () => {
expect(laRow).toHaveTextContent("City")
expect(laRow).toHaveTextContent("Needs contact")
expect(laRow).toHaveTextContent("0644000")
- expect(laRow).toHaveTextContent("3899k pop")
+ expect(laRow).toHaveTextContent("3.9M pop")
expect(laRow).toHaveTextContent("4 waiting")
expect(laRow).toHaveTextContent("City limits")
expect(laRow).toHaveTextContent("3d")
const pasadenaRow = screen.getByRole("button", { name: /^Pasadena/ })
expect(pasadenaRow).toHaveTextContent("Routed")
- expect(pasadenaRow).toHaveTextContent("139k pop")
+ expect(pasadenaRow).toHaveTextContent("138.7K pop")
expect(chip(/^Needs mapping/)).toHaveTextContent("2")
expect(chip(/^Routed/)).toHaveTextContent("12")
diff --git a/apps/admin/src/features/discovery/discovery-page.tsx b/apps/admin/src/features/discovery/discovery-page.tsx
index 011b3d6..f2afe97 100644
--- a/apps/admin/src/features/discovery/discovery-page.tsx
+++ b/apps/admin/src/features/discovery/discovery-page.tsx
@@ -5,14 +5,15 @@ import type { JurisdictionDirectoryDTO } from "@civfix/shared"
import { Icons } from "@/components/icons"
import { PageHead, FilterChips, EmptyState } from "@/components/shared/page-primitives"
-import { LoadingState, ErrorState } from "@/components/shared/data-states"
-import { useJurisdictionDirectory } from "@/features/discovery/use-discovery"
+import { ListCard, ListStates, LoadMoreButton, SearchBox } from "@/components/shared/section-list"
+import { useNow } from "@/hooks/use-now"
+import { useSelection } from "@/hooks/use-selection"
+import { useJurisdictionListInfinite } from "@/features/discovery/use-discovery"
import {
directoryCounts,
- getCountDisplay,
- getJurisdictionSort,
+ countDisplay,
+ effectiveJurisdictionSort,
initialDirectoryState,
- pickSelected,
toDirectoryQuery,
type CountDisplay,
type JurisdictionFilter,
@@ -27,9 +28,10 @@ import {
} from "@/features/discovery/jurisdiction-view"
import { UnmappedDetail } from "@/features/discovery/unmapped-detail"
import { SEARCH_DEBOUNCE_MS } from "@/lib/timing"
+import { flatPages } from "@/lib/infinite"
import type { SectionPageProps } from "@/components/shell/page-registry"
-type DirectoryList = ReturnType
+type DirectoryList = ReturnType
function useDirectoryFilters(focusId: string | null) {
const [initial] = React.useState(() => initialDirectoryState(focusId))
@@ -54,50 +56,7 @@ function useDirectoryFilters(focusId: string | null) {
return { filter, setFilter, layer, setLayer, sort, setSort, query, setQuery, debouncedQuery }
}
-// Only the first load picks a jurisdiction on the operator's behalf, and a deep-linked one is never
-// replaced. A pick that a filter or search leaves out stays open as it was last listed; a pick that
-// drops out of the same list after a refetch (a Save & route under Needs mapping) clears, so the pane
-// never shows a stale row or jumps to another jurisdiction's save buttons. Decided only on data
-// fetched for the current params.
-function useJurisdictionSelection({
- focusId,
- items,
- listQuery,
- listKey,
-}: {
- focusId: string | null
- items: JurisdictionDirectoryDTO[]
- listQuery: DirectoryList
- listKey: string
-}) {
- const [selectedId, setSelectedId] = React.useState(focusId)
- const [lastSeen, setLastSeen] = React.useState(null)
- React.useEffect(() => {
- if (focusId) setSelectedId(focusId)
- }, [focusId])
-
- const selected = pickSelected(items, selectedId, lastSeen)
- React.useEffect(() => {
- if (selected && selected !== lastSeen) setLastSeen(selected)
- }, [selected, lastSeen])
-
- const [autoPick, setAutoPick] = React.useState(focusId === null)
- const seenIn = React.useRef<{ id: string; list: string } | null>(null)
- React.useEffect(() => {
- if (!listQuery.isSuccess || listQuery.isFetching) return
- if (selectedId === null) {
- if (autoPick && items[0]) setSelectedId(items[0].geoid)
- return
- }
- setAutoPick(false)
- if (items.some((x) => x.geoid === selectedId)) seenIn.current = { id: selectedId, list: listKey }
- else if (seenIn.current?.id === selectedId && seenIn.current.list === listKey) setSelectedId(null)
- }, [listQuery.isSuccess, listQuery.isFetching, items, selectedId, listKey, autoPick])
-
- const notListed =
- selectedId !== null && selected === null && !listQuery.isLoading && !listQuery.isError
- return { selectedId, setSelectedId, selected, notListed }
-}
+const geoidOf = (item: JurisdictionDirectoryDTO) => item.geoid
function DirectoryToolbar({
filters,
@@ -119,16 +78,12 @@ function DirectoryToolbar({
onChange={(v) => setFilter(v as JurisdictionFilter)}
/>
-
-
+
Type