+
-
+
{
onStationsChange={onStationsChange}
/>
-
-
+
)
}
+
+export default React.memo(FireWeatherPage)
diff --git a/src/features/fireWeather/slices/modelsSlice.ts b/src/features/fireWeather/slices/modelsSlice.ts
new file mode 100644
index 00000000..b9ba678c
--- /dev/null
+++ b/src/features/fireWeather/slices/modelsSlice.ts
@@ -0,0 +1,63 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { Model, getModels, ModelValue } from 'api/modelAPI'
+import { AppThunk } from 'app/store'
+import { isNoonInPST } from 'utils/date'
+
+interface State {
+ loading: boolean
+ error: string | null
+ modelsByStation: Record
+ noonModelsByStation: Record
+ models: Model[]
+}
+
+const initialState: State = {
+ loading: false,
+ error: null,
+ modelsByStation: {},
+ noonModelsByStation: {},
+ models: []
+}
+
+const modelsSlice = createSlice({
+ name: 'models',
+ initialState,
+ reducers: {
+ getModelsStart(state: State) {
+ state.loading = true
+ },
+ getModelsFailed(state: State, action: PayloadAction) {
+ state.loading = false
+ state.error = action.payload
+ },
+ getModelsSuccess(state: State, action: PayloadAction) {
+ state.loading = false
+ state.error = null
+ state.models = action.payload
+ action.payload.forEach(model => {
+ if (model.station) {
+ const code = model.station.code
+ state.modelsByStation[code] = model.values
+ state.noonModelsByStation[code] = model.values.filter(v =>
+ isNoonInPST(v.datetime)
+ )
+ }
+ })
+ }
+ }
+})
+
+export const { getModelsStart, getModelsFailed, getModelsSuccess } = modelsSlice.actions
+
+export default modelsSlice.reducer
+
+export const fetchModels = (stationCodes: number[]): AppThunk => async dispatch => {
+ try {
+ dispatch(getModelsStart())
+ const forecasts = await getModels(stationCodes)
+ dispatch(getModelsSuccess(forecasts))
+ } catch (err) {
+ dispatch(getModelsFailed(err))
+ }
+}
diff --git a/src/features/fireWeather/slices/readingsSlice.ts b/src/features/fireWeather/slices/readingsSlice.ts
new file mode 100644
index 00000000..149c1893
--- /dev/null
+++ b/src/features/fireWeather/slices/readingsSlice.ts
@@ -0,0 +1,60 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { Reading, ReadingValue, getReadings } from 'api/readingAPI'
+import { AppThunk } from 'app/store'
+
+interface State {
+ loading: boolean
+ error: string | null
+ readingsByStation: Record
+ readings: Reading[]
+}
+
+const initialState: State = {
+ loading: false,
+ error: null,
+ readingsByStation: {},
+ readings: []
+}
+
+const readingsSlice = createSlice({
+ name: 'readings',
+ initialState,
+ reducers: {
+ getReadingsStart(state: State) {
+ state.loading = true
+ },
+ getReadingsFailed(state: State, action: PayloadAction) {
+ state.loading = false
+ state.error = action.payload
+ },
+ getReadingsSuccess(state: State, action: PayloadAction) {
+ state.loading = false
+ state.error = null
+ state.readings = action.payload
+ action.payload.forEach(reading => {
+ if (reading.station) {
+ state.readingsByStation[reading.station.code] = reading.values
+ }
+ })
+ }
+ }
+})
+
+export const {
+ getReadingsStart,
+ getReadingsFailed,
+ getReadingsSuccess
+} = readingsSlice.actions
+
+export default readingsSlice.reducer
+
+export const fetchReadings = (stationCodes: number[]): AppThunk => async dispatch => {
+ try {
+ dispatch(getReadingsStart())
+ const readings = await getReadings(stationCodes)
+ dispatch(getReadingsSuccess(readings))
+ } catch (err) {
+ dispatch(getReadingsFailed(err))
+ }
+}
diff --git a/src/features/hourlies/components/HourlyReadingsDisplay.tsx b/src/features/hourlies/components/HourlyReadingsDisplay.tsx
deleted file mode 100644
index e7a8463a..00000000
--- a/src/features/hourlies/components/HourlyReadingsDisplay.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { makeStyles } from '@material-ui/core/styles'
-
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableRow from '@material-ui/core/TableRow'
-import Paper from '@material-ui/core/Paper'
-import Typography from '@material-ui/core/Typography'
-import moment from 'moment'
-
-import { selectHourlies } from 'app/rootReducer'
-import { ErrorMessage } from 'components/ErrorMessage'
-import { HOURLY_VALUES_DECIMAL, PDT_UTC_OFFSET } from 'utils/constants'
-
-const useStyles = makeStyles({
- table: {
- minWidth: 650
- },
- station: {
- paddingTop: 8,
- paddingLeft: 16
- },
- hourlies: {
- marginBottom: 20
- }
-})
-
-export const HourlyReadingsDisplay = () => {
- const classes = useStyles()
- const { error, hourlies } = useSelector(selectHourlies)
-
- if (error) {
- return (
-
- )
- }
-
- if (hourlies.length === 0) {
- return null
- }
-
- return (
-
- {hourlies.map(({ station, values }) => (
-
-
- Hourly readings for weather station: {`${station.name} (${station.code})`}
-
-
-
-
-
- Date (PDT)
- {values.map(v => (
-
- {moment(v.datetime)
- .utcOffset(PDT_UTC_OFFSET)
- .format('YYYY-MM-DD HH:mm')}
-
- ))}
-
-
- Temperature
- {values.map(v => (
-
- {v.temperature.toFixed(HOURLY_VALUES_DECIMAL)}
-
- ))}
-
-
- Relative Humidity
- {values.map(v => (
-
- {Math.round(v.relative_humidity)}
-
- ))}
-
-
- Wind Speed
- {values.map(v => (
-
- {v.wind_speed.toFixed(HOURLY_VALUES_DECIMAL)}
-
- ))}
-
-
- Wind Direction
- {values.map(v => (
-
- {Math.round(v.wind_direction)}
-
- ))}
-
-
- Precipitation
- {values.map(v => (
-
- {v.precipitation.toFixed(HOURLY_VALUES_DECIMAL)}
-
- ))}
-
-
- FFMC
- {values.map(v => (
-
- {v.ffmc?.toFixed(HOURLY_VALUES_DECIMAL)}
-
- ))}
-
-
- ISI
- {values.map(v => (
-
- {v.isi?.toFixed(HOURLY_VALUES_DECIMAL)}
-
- ))}
-
-
- FWI
- {values.map(v => (
-
- {v.fwi?.toFixed(HOURLY_VALUES_DECIMAL)}
-
- ))}
-
-
-
-
-
- ))}
-