Add leaflet codesplitting, fix elevation API error feedback, add beta…

… deploy option (#52)

* Add leaflet codesplitting, fix elevation API error feedback

* Fix non-proxied request

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",

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 && <GeoJSON data={alert.geometry} ref={geoJsonRef} />;
 };
-
-/**
- * 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");
-}

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,

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"
       >
-        <ReportInformation />
+        <Suspense fallback={<Loading />}>
+          <ReportInformation />
+        </Suspense>
       </BottomSheet>
 
       <BottomSheet

src/features/weather/WeatherHeader.tsx

@@ -15,7 +15,7 @@ import {
   alertsBySeveritySortFn,
   isAlertDangerous,
 } from "../../helpers/weather";
-import { startOfHour } from "date-fns";
+import { addMinutes, startOfHour } from "date-fns";
 
 export enum HeaderType {
   Normal,
@@ -124,8 +124,9 @@ export default function WeatherHeader({ date }: WeatherHeaderProps) {
             .filter((alert) =>
               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
                 ),
               })
             )

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 (
     <BottomSheet openButton={renderAlertIcon()} title="Active Weather Alerts">
-      {alerts?.length ? <Alerts alerts={alerts} /> : ""}
+      <Suspense fallback={<Loading />}>
+        {alerts?.length ? <Alerts alerts={alerts} /> : ""}
+      </Suspense>
     </BottomSheet>
   );
 }

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");
+}

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%);
 `;

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 <Hours rap={rap} />;
   }
 }

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);