From e70029976257d4bce0c28812ea24b6ad2173a35e Mon Sep 17 00:00:00 2001 From: davidlstarr Date: Wed, 18 Oct 2023 15:30:30 -0400 Subject: [PATCH] corrected issue with datepicker --- .../IntegratedAlertControls.tsx | 28 +++++++++++++++++-- .../helpers/IntegratedAlertControlsHelper.ts | 25 ----------------- 2 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/js/components/sharedComponents/IntegratedAlertControls.tsx b/src/js/components/sharedComponents/IntegratedAlertControls.tsx index fc2be01c7..9690c4e11 100644 --- a/src/js/components/sharedComponents/IntegratedAlertControls.tsx +++ b/src/js/components/sharedComponents/IntegratedAlertControls.tsx @@ -43,6 +43,13 @@ const IntegratedAlertControls = (props: GladControlsProps): JSX.Element => { const gfwIntegratedEnd = useSelector((store: RootState) => store.appState.leftPanel.gfwIntegratedEnd); const integratedAlertLayer = useSelector((store: RootState) => store.appState.leftPanel.integratedAlertLayer); const allAvailableLayers = useSelector((store: RootState) => store.mapviewState.allAvailableLayers); + const glad2Start = useSelector((store: RootState) => store.appState.leftPanel.glad2Start); + const glad2End = useSelector((store: RootState) => store.appState.leftPanel.glad2End); + const gladStart = useSelector((store: RootState) => store.appState.leftPanel.gladStart); + const gladEnd = useSelector((store: RootState) => store.appState.leftPanel.gladEnd); + const raddAlertStart = useSelector((store: RootState) => store.appState.leftPanel.raddAlertStart); + const raddAlertEnd = useSelector((store: RootState) => store.appState.leftPanel.raddAlertEnd); + const gfwIntegratedStart = useSelector((store: RootState) => store.appState.leftPanel.gfwIntegratedStart); const [startDate, setStartDate] = React.useState(String(DATE_PICKER_START_DATES.GFW_INTEGRATED_ALERTS)); const [startDateUnformatted, setStartDateUnformatted] = React.useState( @@ -71,7 +78,6 @@ const IntegratedAlertControls = (props: GladControlsProps): JSX.Element => { const dFormat = date; setEndDate(dFormat); - onEndDateChange(date, dFormat); } @@ -95,6 +101,22 @@ const IntegratedAlertControls = (props: GladControlsProps): JSX.Element => { } } + const handleDateToggle = () => { + if (integratedAlertLayer === LAYER_IDS.GFW_INTEGRATED_ALERTS) { + return { start: gfwIntegratedStart, end: gfwIntegratedEnd }; + } + if (integratedAlertLayer === LAYER_IDS.GLAD_S2_ALERTS) { + return { start: glad2Start, end: glad2End }; + } + if (integratedAlertLayer === LAYER_IDS.GLAD_ALERTS) { + return { start: gladStart, end: gladEnd }; + } + if (integratedAlertLayer === LAYER_IDS.RADD_ALERTS) { + return { start: raddAlertStart, end: raddAlertEnd }; + } + return { start: startDate, end: endDate }; + }; + async function showGeographicCoverage() { dispatch(setGeographicCoverage(!geographicCoverage)); displayGeographicCoverageLayer(integratedAlertLayer, geographicCoverage); @@ -151,7 +173,7 @@ const IntegratedAlertControls = (props: GladControlsProps): JSX.Element => { dropdownMode="select" placeholderText="select a day" onChange={(date) => handleStartDateChange(date)} - selected={new Date(handleDateToggle(startDate, endDate)?.start)} + selected={new Date(handleDateToggle()?.start)} minDate={new Date(DATE_PICKER_START_DATES.GFW_INTEGRATED_ALERTS)} maxDate={new Date(endDate)} /> @@ -164,7 +186,7 @@ const IntegratedAlertControls = (props: GladControlsProps): JSX.Element => { dropdownMode="select" placeholderText="select a day" onChange={(date) => handleEndDateChange(date)} - selected={new Date(handleDateToggle(startDate, endDate).end)} + selected={new Date(handleDateToggle().end)} minDate={new Date(startDateUnformatted)} maxDate={new Date()} /> diff --git a/src/js/components/sharedComponents/helpers/IntegratedAlertControlsHelper.ts b/src/js/components/sharedComponents/helpers/IntegratedAlertControlsHelper.ts index fd258add5..1df767f63 100644 --- a/src/js/components/sharedComponents/helpers/IntegratedAlertControlsHelper.ts +++ b/src/js/components/sharedComponents/helpers/IntegratedAlertControlsHelper.ts @@ -5,7 +5,6 @@ import { createGladS2Layer } from '../../../layers/GladS2Layer'; import { createRadd } from '../../../layers/RaddLayer'; import store from '../../../../../src/js/store'; import { - setGeographicCoverage, setGlad2End, setGlad2Start, setGladEnd, @@ -16,18 +15,10 @@ import { setRaddAlertStart, } from '../../../store/appState/actions'; -const integratedAlertLayer = store.getState().appState.leftPanel.integratedAlertLayer; const gfwIntegratedStart = store.getState().appState.leftPanel.gfwIntegratedStart; -const gfwIntegratedEnd = store.getState().appState.leftPanel.gfwIntegratedEnd; const glad2Start = store.getState().appState.leftPanel.glad2Start; -const glad2End = store.getState().appState.leftPanel.glad2End; const gladStart = store.getState().appState.leftPanel.gladStart; -const gladEnd = store.getState().appState.leftPanel.gladEnd; const raddAlertStart = store.getState().appState.leftPanel.raddAlertStart; -const raddAlertEnd = store.getState().appState.leftPanel.raddAlertEnd; -const geographicCoverage = store.getState().appState.leftPanel.geographicCoverage; -const highConfidenceConfirmed = store.getState().appState.leftPanel.highConfidenceConfirmed; -const allAvailableLayers = store.getState().mapviewState.allAvailableLayers; export const onStartDateChange = async (dFormat: string, endDate: string) => { const integratedAlertLayer = store.getState().appState.leftPanel.integratedAlertLayer; @@ -131,19 +122,3 @@ export const displayGeographicCoverageLayer = async (layerId: string, isVisible: mapController._map?.add(layer); } }; - -export const handleDateToggle = (startDate: string, endDate: string) => { - if (integratedAlertLayer === LAYER_IDS.GFW_INTEGRATED_ALERTS) { - return { start: gfwIntegratedStart, end: gfwIntegratedEnd }; - } - if (integratedAlertLayer === LAYER_IDS.GLAD_S2_ALERTS) { - return { start: glad2Start, end: glad2End }; - } - if (integratedAlertLayer === LAYER_IDS.GLAD_ALERTS) { - return { start: gladStart, end: gladEnd }; - } - if (integratedAlertLayer === LAYER_IDS.RADD_ALERTS) { - return { start: raddAlertStart, end: raddAlertEnd }; - } - return { start: startDate, end: endDate }; -};