bcgov · conbrad · Jul 25, 2023 · Jul 24, 2023 · Jul 24, 2023 · Jul 24, 2023
diff --git a/web/package.json b/web/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "engines": {
     "node": ">=16.13.1",
-    "npm": "~9.6.0"
+    "npm": "~9.8.0"
   },
   "license": "Apache-2.0",
   "licenses": [
@@ -16,15 +16,15 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.5.1",
-    "@mui/material": "5.12.2",
+    "@mui/material": "5.14.1",
     "@mui/x-data-grid": "^6.0.0",
     "@mui/x-date-pickers": "^6.0.0",
     "@reduxjs/toolkit": "^1.8.0",
     "@types/esri-leaflet": "^2.1.6",
     "@types/leaflet": "^1.7.0",
     "@types/lodash": "^4.14.173",
     "@types/luxon": "^3.0.2",
-    "@types/react": "18.0.29",
+    "@types/react": "18.2.15",
     "@types/react-dom": "^17.0.3",
     "@types/react-plotly.js": "^2.2.4",
     "@types/react-router-dom": "^5.3.0",

diff --git a/web/src/components/DateRangeSelector.tsx b/web/src/components/DateRangeSelector.tsx
@@ -1,4 +1,4 @@
-import { Dialog, IconButton, InputAdornment, TextField } from '@mui/material'
+import { Button, Dialog, IconButton, InputAdornment, TextField } from '@mui/material'
 import * as materialIcons from '@mui/icons-material'
 import DateRangePickerWrapper from 'components/dateRangePicker/DateRangePickerWrapper'
 import { DateRange } from 'components/dateRangePicker/types'
@@ -26,32 +26,38 @@
 
   return (
     <React.Fragment>
-      <TextField
-        data-testid="date-range-picker-text-field"
-        sx={{ minWidth: 280 }}
-        size={size}
-        variant="outlined"
-        disabled={true}
-        label={label}
+      <Button
+        sx={{ textTransform: 'capitalize' }}
+        data-testid="date-range-picker-button"
         onClick={() => setDateRangePickerOpen(!dateRangePickerOpen)}
-        value={
-          isUndefined(dateRange) || isUndefined(dateRange.startDate) || isUndefined(dateRange.endDate)
-            ? ''
-            : `${DateTime.fromJSDate(dateRange.startDate).toFormat(dateDisplayFormat)} - ${DateTime.fromJSDate(
-                dateRange.endDate
-              ).toFormat(dateDisplayFormat)}
+      >
+        <TextField
+          data-testid="date-range-picker-text-field"
+          sx={{ minWidth: 280 }}
+          size={size}
+          variant="outlined"
+          disabled={true}
+          label={label}
+          onClick={() => setDateRangePickerOpen(!dateRangePickerOpen)}
+          value={
+            isUndefined(dateRange) || isUndefined(dateRange.startDate) || isUndefined(dateRange.endDate)
+              ? ''
+              : `${DateTime.fromJSDate(dateRange.startDate).toFormat(dateDisplayFormat)} - ${DateTime.fromJSDate(
+                  dateRange.endDate
+                ).toFormat(dateDisplayFormat)}
                         `
-        }
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <IconButton edge="end" size="large">
-                <materialIcons.DateRange />
-              </IconButton>
-            </InputAdornment>
-          )
-        }}
-      />
+          }
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <IconButton edge="end" size="large">
+                  <materialIcons.DateRange />
+                </IconButton>
+              </InputAdornment>
+            )
+          }}
+        />
+      </Button>
       <Dialog open={dateRangePickerOpen} onClose={toggleDateRangePicker}>
         <DateRangePickerWrapper
           initialDateRange={{ startDate, endDate }}

diff --git a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx b/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
@@ -84,43 +84,47 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
   }
 
   useEffect(() => {
-    dispatch(fetchSFMSRunDates(runType, dateOfInterest.toISODate()))
+    const doiISODate = dateOfInterest.toISODate()
+    if (!isNull(doiISODate)) {
+      dispatch(fetchSFMSRunDates(runType, doiISODate))
+    }
   }, [runType]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     dispatch(fetchFireCenters())
-    dispatch(fetchSFMSRunDates(runType, dateOfInterest.toISODate()))
+    const doiISODate = dateOfInterest.toISODate()
+    if (!isNull(doiISODate)) {
+      dispatch(fetchSFMSRunDates(runType, doiISODate))
+    }
     dispatch(fetchWxStations(getStations, StationSource.wildfire_one))
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    dispatch(fetchSFMSRunDates(runType, dateOfInterest.toISODate()))
+    const doiISODate = dateOfInterest.toISODate()
+    if (!isNull(doiISODate)) {
+      dispatch(fetchSFMSRunDates(runType, doiISODate))
+    }
   }, [dateOfInterest]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (!isNull(mostRecentRunDate) && !isUndefined(mostRecentRunDate) && !isUndefined(selectedFireZone)) {
-      dispatch(
-        fetchHighHFIFuels(
-          runType,
-          dateOfInterest.toISODate(),
-          mostRecentRunDate.toString(),
-          selectedFireZone.mof_fire_zone_id
-        )
-      )
+    const doiISODate = dateOfInterest.toISODate()
+    if (
+      !isNull(mostRecentRunDate) &&
+      !isNull(doiISODate) &&
+      !isUndefined(mostRecentRunDate) &&
+      !isUndefined(selectedFireZone)
+    ) {
+      dispatch(fetchHighHFIFuels(runType, doiISODate, mostRecentRunDate.toString(), selectedFireZone.mof_fire_zone_id))
       dispatch(
-        fetchfireZoneElevationInfo(
-          selectedFireZone.mof_fire_zone_id,
-          runType,
-          dateOfInterest.toISODate(),
-          mostRecentRunDate.toString()
-        )
+        fetchfireZoneElevationInfo(selectedFireZone.mof_fire_zone_id, runType, doiISODate, mostRecentRunDate.toString())
       )
     }
   }, [mostRecentRunDate, selectedFireZone]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (!isNull(mostRecentRunDate) && !isUndefined(mostRecentRunDate)) {
-      dispatch(fetchFireZoneAreas(runType, mostRecentRunDate.toString(), dateOfInterest.toISODate()))
+    const doiISODate = dateOfInterest.toISODate()
+    if (!isNull(mostRecentRunDate) && !isNull(doiISODate) && !isUndefined(mostRecentRunDate)) {
+      dispatch(fetchFireZoneAreas(runType, mostRecentRunDate.toString(), doiISODate))
       setIssueDate(DateTime.fromISO(mostRecentRunDate))
     } else {
       setIssueDate(null)

diff --git a/web/src/features/fba/slices/valueAtCoordinateSlice.ts b/web/src/features/fba/slices/valueAtCoordinateSlice.ts
@@ -105,7 +105,7 @@ const fbpValueEncoder = (value: number): string => {
 export const fetchValuesAtCoordinate =
   (latitude: number, longitude: number, date: DateTime): AppThunk =>
   async dispatch => {
-    const isoDate = date.toISODate().replaceAll('-', '')
+    const isoDate = date.toISODate()?.replaceAll('-', '')
     try {
       dispatch(getValueAtCoordinateStart())
       const actions = [

diff --git a/web/src/features/hfiCalculator/components/PrepDateRangeSelector.tsx b/web/src/features/hfiCalculator/components/PrepDateRangeSelector.tsx
@@ -1,11 +1,12 @@
 import {
   createTheme,
   Dialog,
-  IconButton,
   InputAdornment,
   TextField,
   ThemeProvider,
-  StyledEngineProvider
+  StyledEngineProvider,
+  Icon,
+  Button
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import * as materialIcons from '@mui/icons-material'
@@ -92,34 +93,39 @@ const PrepDateRangeSelector = ({ dateRange, setDateRange }: PrepDateRangeSelecto
     <div>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={dateRangePickerTheme}>
-          <DateRangePickerTextField
-            data-testid="date-range-picker-text-field"
-            size="small"
-            id="outlined-basic"
-            variant="outlined"
-            disabled={true}
-            label={'Set prep period'}
+          <Button
+            sx={{ textTransform: 'capitalize' }}
+            data-testid="date-range-picker-button"
             onClick={() => setDateRangePickerOpen(!dateRangePickerOpen)}
-            value={
-              isUndefined(dateRange) || isUndefined(dateRange.start_date) || isUndefined(dateRange.end_date)
-                ? ''
-                : `${DateTime.fromISO(dateRange.start_date).toFormat(dateDisplayFormat).trim()} - ${DateTime.fromISO(
-                    dateRange.end_date
-                  )
-                    .toFormat(dateDisplayFormat)
-                    .trim()}
-                        `
-            }
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <IconButton edge="end" size="large">
-                    <materialIcons.DateRange />
-                  </IconButton>
-                </InputAdornment>
-              )
-            }}
-          />
+          >
+            <DateRangePickerTextField
+              data-testid="date-range-picker-text-field"
+              size="small"
+              id="outlined-basic"
+              variant="outlined"
+              disabled={true}
+              label={'Set prep period'}
+              value={
+                isUndefined(dateRange) || isUndefined(dateRange.start_date) || isUndefined(dateRange.end_date)
+                  ? ''
+                  : `${DateTime.fromISO(dateRange.start_date).toFormat(dateDisplayFormat).trim()} - ${DateTime.fromISO(
+                      dateRange.end_date
+                    )
+                      .toFormat(dateDisplayFormat)
+                      .trim()}
+                            `
+              }
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Icon>
+                      <materialIcons.DateRange />
+                    </Icon>
+                  </InputAdornment>
+                )
+              }}
+            />
+          </Button>
         </ThemeProvider>
       </StyledEngineProvider>
       <Dialog open={dateRangePickerOpen} onClose={toggleDateRangePicker}>

diff --git a/web/src/features/hfiCalculator/pages/HfiCalculatorPage.tsx b/web/src/features/hfiCalculator/pages/HfiCalculatorPage.tsx
@@ -114,21 +114,24 @@ const HfiCalculatorPage: React.FunctionComponent = () => {
 
   const setNewFireStarts = (planningAreaId: number, dayOffset: number, newFireStarts: FireStartRange) => {
     if (!isUndefined(result) && !isUndefined(result.date_range)) {
-      dispatch(
-        fetchSetNewFireStarts(
-          result.selected_fire_center_id,
-          result.date_range.start_date,
-          result.date_range.end_date,
-          planningAreaId,
-          DateTime.fromISO(result.date_range.start_date + 'T00:00+00:00', {
-            setZone: true
-          })
-            .plus({ days: dayOffset })
-            .toISODate(),
-          newFireStarts.id,
-          { planning_area_id: planningAreaId }
+      const prepDayDate = DateTime.fromISO(result.date_range.start_date + 'T00:00+00:00', {
+        setZone: true
+      })
+        .plus({ days: dayOffset })
+        .toISODate()
+      if (!isNull(prepDayDate)) {
+        dispatch(
+          fetchSetNewFireStarts(
+            result.selected_fire_center_id,
+            result.date_range.start_date,
+            result.date_range.end_date,
+            planningAreaId,
+            prepDayDate,
+            newFireStarts.id,
+            { planning_area_id: planningAreaId }
+          )
         )
-      )
+      }
     }
   }
 

diff --git a/web/src/features/moreCast2/util.ts b/web/src/features/moreCast2/util.ts
@@ -57,7 +57,7 @@ export const createDateInterval = (fromDate: DateTime, toDate: DateTime) => {
   const interval = Interval.fromDateTimes(fromDate, toDate.plus({ days: 1 }))
   const dateTimeArray = interval.splitBy({ day: 1 }).map(d => d.start)
   const dates = dateTimeArray.map(date => {
-    return `${date.toISODate()}T20:00:00+00:00`
+    return `${date?.toISODate()}T20:00:00+00:00`
   })
   return dates
 }

diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
@@ -1,14 +1,10 @@
 import { DateTime } from 'luxon'
 
 import { PST_ISO_TIMEZONE, PST_UTC_OFFSET } from './constants'
+import { isNull } from 'lodash'
 
 const UTC_NOON_HOUR = Math.abs(PST_UTC_OFFSET) + 12
 
-export const toISO = (dtDateTime: DateTime): string => {
-  // Use for consistent ISO formatting.
-  return dtDateTime.toISO({ suppressMilliseconds: true, includeOffset: true })
-}
-
 export const isNoonInPST = (dt: string): boolean => DateTime.fromISO(dt).setZone('UTC').hour === UTC_NOON_HOUR
 
 export const formatDatetimeInPST = (dt: string | Date | DateTime, format?: string): string => {
@@ -47,13 +43,15 @@ export const formatDateInUTC00Suffix = (dtISO: string): string => {
   dtJS.setMinutes(0)
   dtJS.setSeconds(0)
   dtJS.setMilliseconds(0)
-  const isoNoon = toISO(DateTime.fromJSDate(dtJS).setZone('UTC'))
-  return isoNoon.substring(0, isoNoon.length - 1) + '+00:00'
+  const isoNoon = DateTime.fromJSDate(dtJS).setZone('UTC').toISO({ suppressMilliseconds: true, includeOffset: true })
+  return isoNoon?.substring(0, isoNoon.length - 1) + '+00:00'
 }
 
 export const pstFormatter = (fromDate: DateTime): string => {
-  return DateTime.fromObject(
+  const pstFormattedDate = DateTime.fromObject(
     { year: fromDate.year, month: fromDate.month, day: fromDate.day },
     { zone: `UTC${PST_UTC_OFFSET}` }
   ).toISO()
+
+  return !isNull(pstFormattedDate) ? pstFormattedDate : ''
 }
diff --git a/web/src/utils/url.ts b/web/src/utils/url.ts
@@ -2,6 +2,7 @@ import { DateTime } from 'luxon'
 
 import { PST_UTC_OFFSET } from './constants'
 import { suppressMilliInISO } from './date'
+import { isNull } from 'lodash'
 
 export const stationCodeQueryKey = 'codes'
 export const timeOfInterestQueryKey = 'toi'
@@ -18,7 +19,7 @@ export const getTimeOfInterestFromUrl = (search: string): string => {
 
   const iso = datetime.setZone(`UTC${PST_UTC_OFFSET}`).toISO()
 
-  return suppressMilliInISO(iso)
+  return !isNull(iso) ? suppressMilliInISO(iso) : ''
 }
 
 export const getStationCodesFromUrl = (search: string): number[] => {