diff --git a/package.json b/package.json index 402a22a..4f33a2c 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,8 @@ "build": "INLINE_RUNTIME_CHUNK=false react-scripts build", "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!metar-taf-parser)/\"", "deploy": "aws s3 sync --exclude index.html build/ s3://ppg.report && aws s3 sync --include index.html build/ s3://ppg.report", - "analyze": "source-map-explorer 'build/static/js/*.js'", + "deploy-beta": "aws s3 sync --exclude index.html build/ s3://beta.ppg.report && aws s3 sync --include index.html build/ s3://beta.ppg.report", + "analyze": "NODE_OPTIONS=--no-experimental-fetch source-map-explorer 'build/static/js/*.js'", "format": "prettier --check src/", "lint": "eslint --max-warnings=0 src/", "splash": "pwa-asset-generator --type png --index public/index.html --splash-only --path-override '%PUBLIC_URL%/splash' public/splash.png ./public/splash --padding '30vh 20vw 50vh' -b 'linear-gradient(0deg, #0e0e0e, #001931)' && prettier -w public/index.html", diff --git a/src/features/alerts/Alerts.tsx b/src/features/alerts/Alerts.tsx index 6a9562c..c717eed 100644 --- a/src/features/alerts/Alerts.tsx +++ b/src/features/alerts/Alerts.tsx @@ -4,12 +4,11 @@ import { MapContainer, GeoJSON, useMap } from "react-leaflet"; import { useEffect, useRef } from "react"; import Header from "./Header"; -// eslint-disable-next-line -import "leaflet/dist/leaflet.css"; import BaseLayer from "../../map/BaseLayer"; import RadarLayer from "../../map/RadarLayer"; import Linkify from "linkify-react"; import { linkifyOptions } from "../rap/extra/Discussion"; +import { undoFixedWidthText } from "../../helpers/weather"; const AlertsContainer = styled.div` display: flex; @@ -111,14 +110,3 @@ const MapController = ({ alert }: MapControllerProps) => { return alert.geometry && ; }; - -/** - * Try to format out some of the random line breaks the - * National Weather Service includes (for fixed width displays) - * that doesn't work well for mobile - * - * Try to preserve all sensible line breaks - */ -export function undoFixedWidthText(text: string): string { - return text.replace(/([^\n\\.])(\n)([^\n])/g, "$1 $3"); -} diff --git a/src/features/rap/extra/Discussion.tsx b/src/features/rap/extra/Discussion.tsx index a3108b5..1d83723 100644 --- a/src/features/rap/extra/Discussion.tsx +++ b/src/features/rap/extra/Discussion.tsx @@ -1,9 +1,9 @@ import styled from "@emotion/styled/macro"; import Linkify from "linkify-react"; import { outputP3ColorFromRGB } from "../../../helpers/colors"; +import { undoFixedWidthText } from "../../../helpers/weather"; import { useAppSelector } from "../../../hooks"; import Loading from "../../../shared/Loading"; -import { undoFixedWidthText } from "../../alerts/Alerts"; export const linkifyOptions = { nl2br: true, diff --git a/src/features/rap/extra/Extra.tsx b/src/features/rap/extra/Extra.tsx index 864bf95..79188d1 100644 --- a/src/features/rap/extra/Extra.tsx +++ b/src/features/rap/extra/Extra.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { lazy, Suspense } from "react"; import styled from "@emotion/styled/macro"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { @@ -11,10 +11,14 @@ import { css } from "@emotion/react/macro"; import { outputP3ColorFromRGB } from "../../../helpers/colors"; import { faSearch } from "@fortawesome/pro-regular-svg-icons"; import BottomSheet from "../../../bottomSheet/BottomSheet"; -import ReportInformation from "./reportInformation/ReportInformation"; import Discussion from "./Discussion"; import { useAppSelector } from "../../../hooks"; import Settings from "./settings/Settings"; +import Loading from "../../../shared/Loading"; + +const ReportInformation = lazy( + () => import("./reportInformation/ReportInformation") +); const Container = styled.div` padding: 0.7rem 0; @@ -49,7 +53,9 @@ export default function Extra() { } title="Report Metadata" > - + }> + + isWithinInterval(new Date(date), { start: startOfHour(new Date(alert.properties.onset)), - end: new Date( - alert.properties.ends || alert.properties.expires + end: addMinutes( + new Date(alert.properties.ends || alert.properties.expires), + -1 ), }) ) diff --git a/src/features/weather/header/AlertsIcon.tsx b/src/features/weather/header/AlertsIcon.tsx index e08cf46..7fd0b93 100644 --- a/src/features/weather/header/AlertsIcon.tsx +++ b/src/features/weather/header/AlertsIcon.tsx @@ -4,8 +4,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Tippy from "@tippyjs/react"; import { Feature } from "../weatherSlice"; import { isTouchDevice } from "../../../helpers/device"; -import Alerts from "../../alerts/Alerts"; import BottomSheet from "../../../bottomSheet/BottomSheet"; +import { lazy, Suspense } from "react"; +import Loading from "../../../shared/Loading"; + +const Alerts = lazy(() => import("../../alerts/Alerts")); const Container = styled.div` margin-right: 0.5rem; @@ -63,7 +66,9 @@ export default function AlertsIcon({ alerts }: AlertsProps) { return ( - {alerts?.length ? : ""} + }> + {alerts?.length ? : ""} + ); } diff --git a/src/helpers/weather.ts b/src/helpers/weather.ts index 55f2888..0aef793 100644 --- a/src/helpers/weather.ts +++ b/src/helpers/weather.ts @@ -14,3 +14,14 @@ export function isAlertDangerous(alert: Feature): boolean { export function alertsBySeveritySortFn(a: Feature, b: Feature): number { return (isAlertDangerous(b) ? 1 : 0) - (isAlertDangerous(a) ? 1 : 0); } + +/** + * Try to format out some of the random line breaks the + * National Weather Service includes (for fixed width displays) + * that doesn't work well for mobile + * + * Try to preserve all sensible line breaks + */ +export function undoFixedWidthText(text: string): string { + return text.replace(/([^\n\\.])(\n)([^\n])/g, "$1 $3"); +} diff --git a/src/map/BaseLayer.tsx b/src/map/BaseLayer.tsx index 8830cc5..0d6556b 100644 --- a/src/map/BaseLayer.tsx +++ b/src/map/BaseLayer.tsx @@ -2,6 +2,9 @@ import React from "react"; import styled from "@emotion/styled/macro"; import { TileLayer } from "react-leaflet"; +// eslint-disable-next-line +import "leaflet/dist/leaflet.css"; + const InvertedTileLayer = styled(TileLayer)` filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); `; diff --git a/src/routes/Report.tsx b/src/routes/Report.tsx index f133c31..eabb034 100644 --- a/src/routes/Report.tsx +++ b/src/routes/Report.tsx @@ -38,6 +38,7 @@ function ValidParamsReport({ lat, lon }: ValidParamsReportProps) { const elevationLoading = useAppSelector( (state) => state.weather.elevationLoading ); + const elevation = useAppSelector((state) => state.weather.elevation); useEffect(() => { if (!isLatLonTrimmed(lat, lon)) return; @@ -80,7 +81,7 @@ function ValidParamsReport({ lat, lon }: ValidParamsReportProps) { /> ); default: - if (!timeZone) return connectionError; + if (!timeZone || elevation == null) return connectionError; return ; } } diff --git a/src/services/weather.ts b/src/services/weather.ts index 4206277..c50b1ef 100644 --- a/src/services/weather.ts +++ b/src/services/weather.ts @@ -88,7 +88,7 @@ export async function getDiscussion(gridId: string) { `/api/weather/products/types/AFD/locations/${gridId}` ); - const discussionUrl = discussionsData["@graph"][0]["@id"]; + const discussionUrl = normalize(discussionsData["@graph"][0]["@id"]); let { data } = await axios.get(discussionUrl);