Platform pages using Next.js app router

.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import type { Preview } from "@storybook/react"
-import { MemoryRouter } from "react-router-dom"
 
 import "../src/index.scss"
 
@@ -12,6 +11,12 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/",
+      },
+    },
   },
 }
 

app/(noMap)/about/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 
-import { WagtailBlock } from "Features/WagtailApi/WagtailBlock.next"
+import { WagtailBlock } from "Features/WagtailApi/WagtailBlock"
 
 export default function About() {
   return <WagtailBlock pageId="5" />

app/(platformMap)/@belowMap/default.tsx

@@ -0,0 +1,3 @@
+export default function BelowMapDefault() {
+  return null
+}

app/(platformMap)/@belowMap/home.tsx

@@ -0,0 +1,13 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { Superlatives } from "Features/ERDDAP/Superlatives/index"
+
+export function HomeSuperlatives() {
+  const path = usePathname()
+
+  if (path === "/") {
+    return <Superlatives />
+  }
+
+  return null
+}

app/(platformMap)/@belowMap/page.tsx

@@ -0,0 +1,11 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { HomeSuperlatives } from "./home"
+
+export default async function IndexBelowMap() {
+  return (
+    <DehydratedPlatforms>
+      <HomeSuperlatives />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/default.tsx

@@ -0,0 +1,3 @@
+export default function CatchAll() {
+  return null
+}

app/(platformMap)/@bottom/platform/[platformId]/current_conditions.tsx

@@ -0,0 +1,11 @@
+"use client"
+import { UsePlatform } from "Features/ERDDAP/hooks"
+import { ErddapCurrentPlatformConditions } from "Features/ERDDAP/Platform/Observations/CurrentConditions"
+
+export function CurrentConditions({ platformId }: { platformId: string }) {
+  return (
+    <UsePlatform platformId={platformId}>
+      {({ platform }) => <ErddapCurrentPlatformConditions platform={platform} />}
+    </UsePlatform>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/forecast/[standardName]/forecast.tsx

@@ -0,0 +1,14 @@
+"use client"
+import { UsePlatform } from "Features/ERDDAP/hooks"
+import { useUnitSystem } from "Features/Units"
+import { Forecast } from "Features/ERDDAP/Platform/Forecasts/Page"
+
+export function ForecastChart({ platformId, standardName }: { platformId: string; standardName: string }) {
+  const unitSystem = useUnitSystem()
+
+  return (
+    <UsePlatform platformId={platformId}>
+      {({ platform }) => <Forecast platform={platform} forecast_type={standardName} unitSystem={unitSystem} />}
+    </UsePlatform>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/forecast/[standardName]/page.tsx

@@ -0,0 +1,11 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { ForecastChart } from "./forecast"
+
+export default function ForecastPage({ params }: { params: { platformId: string; standardName: string } }) {
+  return (
+    <DehydratedPlatforms>
+      <ForecastChart {...params} />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/layout.tsx

@@ -0,0 +1,14 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { PlatformTabs } from "./tabs"
+
+export default async function PlatformTabsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <DehydratedPlatforms>
+      <div style={{ marginTop: "1rem" }}>
+        <PlatformTabs />
+        {children}
+      </div>
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/observations/[standardName]/chart.tsx

@@ -0,0 +1,11 @@
+"use client"
+import { ErddapObservedCondition } from "Features/ERDDAP/Platform/Observations/Condition"
+import { UsePlatform } from "Features/ERDDAP/hooks"
+
+export function ObservationChart({ platformId, standardName }: { platformId: string; standardName: string }) {
+  return (
+    <UsePlatform platformId={platformId}>
+      {({ platform }) => <ErddapObservedCondition platform={platform} standardName={standardName} />}
+    </UsePlatform>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/observations/[standardName]/page.tsx

@@ -0,0 +1,15 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { ObservationChart } from "./chart"
+
+export default function ObservedPlot({
+  params: { platformId, standardName },
+}: {
+  params: { platformId: string; standardName: string }
+}) {
+  return (
+    <DehydratedPlatforms>
+      <ObservationChart platformId={platformId} standardName={standardName} />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/observations/all/all_observations.tsx

@@ -0,0 +1,14 @@
+"use client"
+import { UsePlatform } from "Features/ERDDAP/hooks"
+import { useUnitSystem } from "Features/Units"
+import { ErddapAllObservationsTable } from "Features/ERDDAP/Platform/Observations/Table/all"
+
+export function AllObservations({ platformId }: { platformId: string }) {
+  const unitSystem = useUnitSystem()
+
+  return (
+    <UsePlatform platformId={platformId}>
+      {({ platform }) => <ErddapAllObservationsTable platform={platform} unitSystem={unitSystem} />}
+    </UsePlatform>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/observations/all/page.tsx

@@ -0,0 +1,11 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { AllObservations } from "./all_observations"
+
+export default function AllObservationsPage({ params: { platformId } }: { params: { platformId: string } }) {
+  return (
+    <DehydratedPlatforms>
+      <AllObservations platformId={platformId} />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/observations/wind/chart.tsx

@@ -0,0 +1,11 @@
+"use client"
+import { ErddapWindObservedCondition } from "Features/ERDDAP/Platform/Observations/WindCondition"
+import { UsePlatform } from "Features/ERDDAP/hooks"
+
+export function WindChart({ platformId }: { platformId: string }) {
+  return (
+    <UsePlatform platformId={platformId}>
+      {({ platform }) => <ErddapWindObservedCondition platform={platform} />}
+    </UsePlatform>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/observations/wind/page.tsx

@@ -0,0 +1,11 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { WindChart } from "./chart"
+
+export default function WindPlot({ params: { platformId } }: { params: { platformId: string } }) {
+  return (
+    <DehydratedPlatforms>
+      <WindChart platformId={platformId} />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/page.tsx

@@ -0,0 +1,11 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { CurrentConditions } from "./current_conditions"
+
+export default function CurrentConditionsPage({ params: { platformId } }: { params: { platformId: string } }) {
+  return (
+    <DehydratedPlatforms>
+      <CurrentConditions platformId={platformId} />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@bottom/platform/[platformId]/tabs.tsx

@@ -0,0 +1,68 @@
+"use client"
+import Link from "next/link"
+import { usePathname, useParams } from "next/navigation"
+import * as React from "react"
+import { Col, Nav, NavItem, NavLink, Row } from "reactstrap"
+
+import { paths } from "Shared/constants"
+import { urlPartReplacer } from "Shared/urlParams"
+
+import { ErddapObservedDropdown } from "Features/ERDDAP/Platform/Observations/Menu"
+import { ForecastDropdown } from "Features/ERDDAP/ForecastsMetadata/Menu"
+import { ErddapMoreInfoDropdown } from "Features/ERDDAP/Platform/MoreInfoMenu/index"
+import { UsePlatform } from "Features/ERDDAP/hooks/BuoyBarnComponents"
+
+export function PlatformTabs() {
+  const path = usePathname()
+  const { platformId }: { platformId?: string } = useParams()
+
+  if (typeof platformId === "undefined" || !path.startsWith("/platform")) {
+    return null
+  }
+
+  return (
+    <UsePlatform platformId={platformId}>
+      {(platform_props) => (
+        <React.Fragment>
+          <Row style={{ paddingBottom: "1rem" }}>
+            <Col>
+              <Nav tabs={true}>
+                <ErddapObservedDropdown {...platform_props} />
+                <Tab to={paths.platforms.platform} path={path} name="Latest Conditions" id={platformId} />
+                <ForecastDropdown platformId={platformId} />
+                <ErddapMoreInfoDropdown {...platform_props} />
+              </Nav>
+            </Col>
+          </Row>
+        </React.Fragment>
+      )}
+    </UsePlatform>
+  )
+}
+
+interface TabProps {
+  to: string
+  id: string
+  name: string
+  path: string
+}
+
+/**
+ * Mini component for Tabs that are part of the navbar.
+ */
+// tslint:disable-next-line:max-classes-per-file
+function Tab(props: TabProps) {
+  const { to, name, path, id } = props
+
+  return (
+    <NavItem>
+      <NavLink
+        tag={Link}
+        href={urlPartReplacer(to, ":id", id)}
+        className={to === path ? "nav-link active" : "nav-link"}
+      >
+        {name}
+      </NavLink>
+    </NavItem>
+  )
+}

app/(platformMap)/@sidebar/default.tsx

@@ -0,0 +1,14 @@
+"use client"
+import { useParams } from "next/navigation"
+
+import PlatformSidebar from "./platform/[platformId]/page"
+
+export default function SidebarDefault() {
+  const params = useParams()
+
+  if ("platformId" in params) {
+    return <PlatformSidebar params={params as { platformId: string }} />
+  }
+
+  return null
+}

app/(platformMap)/@sidebar/page.tsx

@@ -0,0 +1,5 @@
+import { WagtailBlock } from "Features/WagtailApi/WagtailBlock"
+
+export default function HomeSidebar() {
+  return <WagtailBlock pageId="4" />
+}

app/(platformMap)/@sidebar/platform/[platformId]/page.tsx

@@ -0,0 +1,13 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { PlatformInfo } from "Pages/Platforms/platformInfo"
+
+export default async function PlatformSidebar({ params }: { params: { platformId: string } }) {
+  const platformId = decodeURIComponent(params.platformId)
+
+  return (
+    <DehydratedPlatforms>
+      <PlatformInfo id={platformId} />
+    </DehydratedPlatforms>
+  )
+}

app/(platformMap)/@sidebar/platform/page.tsx

@@ -0,0 +1,3 @@
+export default function PlatformList() {
+  return <div>List of platforms</div>
+}

app/(platformMap)/@sidebar/region/[regionId]/page.tsx

@@ -0,0 +1,31 @@
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
+
+import { regionList } from "Shared/constants"
+import { Region } from "Shared/regions"
+
+import { RegionList } from "./region"
+
+export default async function RegionSidebar({ params }: { params: { regionId: string } }) {
+  const regionId = decodeURIComponent(params.regionId)
+
+  let region: Region | undefined = regionList.find((r) => r.slug === regionId)
+
+  if (typeof region === "undefined") {
+    return null
+  }
+
+  return (
+    <div>
+      <h2>Platforms in {region.name}</h2>
+      <DehydratedPlatforms>
+        <RegionList region={region} />
+      </DehydratedPlatforms>
+    </div>
+  )
+}
+
+export async function generateStaticParams() {
+  return regionList.map((region) => ({
+    regionId: region.slug,
+  }))
+}

app/(platformMap)/@sidebar/region/[regionId]/region.tsx

@@ -0,0 +1,7 @@
+"use client"
+import { Region } from "Shared/regions"
+import { ErddapPlatformList } from "Features/ERDDAP"
+
+export function RegionList({ region }: { region: Region }) {
+  return <ErddapPlatformList boundingBox={region.bbox} />
+}

app/(platformMap)/layout.tsx

@@ -0,0 +1,41 @@
+"use client"
+import * as React from "react"
+import { Col, Row } from "reactstrap"
+import { useMeasure } from "react-use"
+import { usePathname } from "next/navigation"
+
+import { Map } from "./map"
+
+export default function Layout({
+  children,
+  sidebar,
+  belowMap,
+  bottom,
+}: {
+  children: React.ReactNode
+  sidebar: React.ReactNode
+  bottom: React.ReactNode
+  belowMap: React.ReactNode
+}) {
+  const [ref, { height }] = useMeasure<HTMLDivElement>()
+  const path = usePathname()
+
+  return (
+    <React.Fragment>
+      <Row>
+        <Col sm={{ size: true, order: 2 }}>
+          <div ref={ref} style={{ marginBottom: ".5rem" }}>
+            {sidebar}
+          </div>
+        </Col>
+
+        <Col sm={{ size: true, order: 1 }}>
+          <Map height={height} />
+          {belowMap ?? <React.Fragment>{belowMap}</React.Fragment>}
+        </Col>
+      </Row>
+
+      {(path.startsWith("/platform") && bottom) ?? <Row>{bottom}</Row>}
+    </React.Fragment>
+  )
+}