From cb254e38393a2552a71a1629420f6fa66372b8c7 Mon Sep 17 00:00:00 2001 From: Dorian Date: Tue, 29 Oct 2024 13:15:02 -0700 Subject: [PATCH 1/5] Add initialStartDate to DatePicker.jsx --- components/common/DatePicker/DatePicker.jsx | 4 +- .../common/ReactDayPicker/ReactDayPicker.jsx | 45 +++++++++++++++---- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/components/common/DatePicker/DatePicker.jsx b/components/common/DatePicker/DatePicker.jsx index 813f8cc56..3c9e90642 100644 --- a/components/common/DatePicker/DatePicker.jsx +++ b/components/common/DatePicker/DatePicker.jsx @@ -84,7 +84,7 @@ const renderSelectedDays = (dates, classes, range) => { }; function DatePicker({ - open, onToggle, range, startDate, endDate, + open, onToggle, range, startDate, endDate, setInitialStartDate, setInitialEndDate }) { const [showCalendar, setShowCalendar] = useState(() => open); const classes = useStyles(); @@ -95,6 +95,8 @@ function DatePicker({ useEffect(() => { setShowCalendar(false); + setInitialStartDate(startDate) + setInitialEndDate(endDate) }, [open]); const getCoordinates = () => { diff --git a/components/common/ReactDayPicker/ReactDayPicker.jsx b/components/common/ReactDayPicker/ReactDayPicker.jsx index 6fdad9b83..02b67f801 100644 --- a/components/common/ReactDayPicker/ReactDayPicker.jsx +++ b/components/common/ReactDayPicker/ReactDayPicker.jsx @@ -176,10 +176,16 @@ function ReactDayPicker({ return; } - // Our date range selection logic is very simple: the user is selecting the - // first day in their date range if from and to are set, or if they're both - // unset. Otherwise, they are selecting the last day. - if (!(startDate && endDate)) { + + + + //If both startDate and endDate were already selected. Start a new range selection. + if(startDate && endDate){ + setFromDay(day); + updateEndDate(null); + setEnteredTo(null); + //If startDate is selected and endDate is unselected, complete the range selection. + } else if(startDate && !endDate){ // If the user picks the first date then picks the second date that is before the first date // Reassign the From and To Day if (moment(day).format(INTERNAL_DATE_SPEC) < startDate) { @@ -191,11 +197,32 @@ function ReactDayPicker({ } else { setToDay(day); } - return; - } - setFromDay(day); - updateEndDate(null); - setEnteredTo(null); + } else { + //This should never happen. Log a warning. + console.warn('Try to set a new date selection. Dates were in an invalid state. StartDate: ', startDate, " endDate: ", endDate); + } + + + // Our date range selection logic is very simple: the user is selecting the + // first day in their date range if from and to are set, or if they're both + // unset. Otherwise, they are selecting the last day. + // if (!startDate || !endDate) { + // // If the user picks the first date then picks the second date that is before the first date + // // Reassign the From and To Day + // if (moment(day).format(INTERNAL_DATE_SPEC) < startDate) { + // const tempDate = startDate; + // setToDay(moment(tempDate).toDate()); + // setFromDay(day); + // updateEndDate(tempDate); + // setEnteredTo(moment(tempDate).toDate()); + // } else { + // setToDay(day); + // } + // return; + // } + // setFromDay(day); + // updateEndDate(null); + // setEnteredTo(null); }; const handleDayMouseEnter = day => { From a6f2b40bc575391239458664799a054bb1233d08 Mon Sep 17 00:00:00 2001 From: Dorian Date: Wed, 30 Oct 2024 19:30:48 -0700 Subject: [PATCH 2/5] Updated imports to DatePicker.jsx --- components/common/DatePicker/DatePicker.jsx | 35 ++++++++++++++++--- .../common/ReactDayPicker/ReactDayPicker.jsx | 10 +++--- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/components/common/DatePicker/DatePicker.jsx b/components/common/DatePicker/DatePicker.jsx index 3c9e90642..ca3593b91 100644 --- a/components/common/DatePicker/DatePicker.jsx +++ b/components/common/DatePicker/DatePicker.jsx @@ -9,7 +9,10 @@ import IconButton from '@mui/material/IconButton'; import makeStyles from '@mui/styles/makeStyles'; import useOutsideClick from '@components/common/customHooks/useOutsideClick'; import ReactDayPicker from '@components/common/ReactDayPicker'; - +import { + updateEndDate as reduxUpdateEndDate, + updateStartDate as reduxUpdateStartDate, +} from '@reducers/filters'; // TODO: Apply gaps (margin, padding) from theme const useStyles = makeStyles(theme => ({ @@ -82,15 +85,30 @@ const renderSelectedDays = (dates, classes, range) => { ); return selectedDaysElements; }; - +//TODO: Why is it important that open is being passed as a prop? function DatePicker({ - open, onToggle, range, startDate, endDate, setInitialStartDate, setInitialEndDate + open, onToggle, range, startDate, endDate, updateStartDate, updateEndDate, }) { const [showCalendar, setShowCalendar] = useState(() => open); + const [initialStartDate, setInitialStartDate] = useState(startDate); + const [initialEndDate, setInitialEndDate] = useState(); const classes = useStyles(); const ref = useRef(null); - const closeCalendar = useCallback(() => setShowCalendar(false), []); + // const closeCalendar = useCallback(() => setShowCalendar(false), []); + const closeCalendar = useCallback( + () => { + if (startDate && endDate){ + setShowCalendar(false); + } else if (startDate && !endDate){ + //We need to restart startDate and endDate to their initial values + //TODO: Make sure the formats are consistent + updateStartDate(initialStartDate); + updateEndDate(initialEndDate); + console.log("StartDate", startDate) + console.log("initial StartDate", initialStartDate) + } + }, []); useOutsideClick(ref, closeCalendar); useEffect(() => { @@ -134,6 +152,8 @@ function DatePicker({ {showCalendar ? ( ) : null} @@ -162,4 +182,9 @@ const mapStateToProps = state => ({ endDate: state.filters.endDate, }); -export default connect(mapStateToProps)(DatePicker); +const mapDispatchToProps = dispatch => ({ + updateStartDate: date => dispatch(reduxUpdateStartDate(date)), + updateEndDate: date => dispatch(reduxUpdateEndDate(date)), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(DatePicker); diff --git a/components/common/ReactDayPicker/ReactDayPicker.jsx b/components/common/ReactDayPicker/ReactDayPicker.jsx index 02b67f801..714683625 100644 --- a/components/common/ReactDayPicker/ReactDayPicker.jsx +++ b/components/common/ReactDayPicker/ReactDayPicker.jsx @@ -275,14 +275,14 @@ ReactDayPicker.defaultProps = { endDate: null, }; -const mapDispatchToProps = dispatch => ({ - updateStartDate: date => dispatch(reduxUpdateStartDate(date)), - updateEndDate: date => dispatch(reduxUpdateEndDate(date)), -}); +// const mapDispatchToProps = dispatch => ({ +// updateStartDate: date => dispatch(reduxUpdateStartDate(date)), +// updateEndDate: date => dispatch(reduxUpdateEndDate(date)), +// }); const mapStateToProps = state => ({ startDate: state.filters.startDate, endDate: state.filters.endDate, }); -export default connect(mapStateToProps, mapDispatchToProps)(ReactDayPicker); +export default connect(mapStateToProps)(ReactDayPicker); From 7780f0922fcc8cfd392efd6efb4d359d1d7f817a Mon Sep 17 00:00:00 2001 From: Dorian Date: Thu, 31 Oct 2024 12:24:10 -0700 Subject: [PATCH 3/5] removed redux imports from ReactDayPicker.jsx --- components/common/ReactDayPicker/ReactDayPicker.jsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/components/common/ReactDayPicker/ReactDayPicker.jsx b/components/common/ReactDayPicker/ReactDayPicker.jsx index 714683625..c958d72ef 100644 --- a/components/common/ReactDayPicker/ReactDayPicker.jsx +++ b/components/common/ReactDayPicker/ReactDayPicker.jsx @@ -7,10 +7,10 @@ import DayPicker from 'react-day-picker'; import { connect } from 'react-redux'; import makeStyles from '@mui/styles/makeStyles'; import clsx from 'clsx'; -import { - updateEndDate as reduxUpdateEndDate, - updateStartDate as reduxUpdateStartDate, -} from '@reducers/filters'; +// import { +// updateEndDate as reduxUpdateEndDate, +// updateStartDate as reduxUpdateStartDate, +// } from '@reducers/filters'; import fonts from '@theme/fonts'; import colors from '@theme/colors'; @@ -175,9 +175,6 @@ function ReactDayPicker({ setFromDay(day); return; } - - - //If both startDate and endDate were already selected. Start a new range selection. if(startDate && endDate){ From b25884e5e465fd0900be416b1f2e0592aca45451 Mon Sep 17 00:00:00 2001 From: Dorian Date: Mon, 11 Nov 2024 15:00:09 -0800 Subject: [PATCH 4/5] Updated comments, fixed closeCalendar dependency array --- components/DateSelector/DateSelector.jsx | 10 ++--- components/common/DatePicker/DatePicker.jsx | 38 ++++++++++++------- .../common/ReactDayPicker/ReactDayPicker.jsx | 36 +----------------- 3 files changed, 32 insertions(+), 52 deletions(-) diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx index 5f65a4515..a03f098af 100644 --- a/components/DateSelector/DateSelector.jsx +++ b/components/DateSelector/DateSelector.jsx @@ -21,7 +21,7 @@ function DateSelector({ updateStartDate, updateEndDate, }) { - const [expanded, setExpanded] = useState(false); + const [expandedMenu, setExpandedMenu] = useState(false); const classes = useStyles(); const handleOptionSelect = optionDates => { @@ -29,11 +29,11 @@ function DateSelector({ const formattedEnd = moment(optionDates[1]).format(dateFormat); updateStartDate(formattedStart); updateEndDate(formattedEnd); - setExpanded(false); + setExpandedMenu(false); }; const closeOptionsOnDateToggle = useCallback(() => { - setExpanded(false); + setExpandedMenu(false); }, []); const { @@ -64,12 +64,12 @@ function DateSelector({ - setExpanded(!expanded)} expanded={expanded}> + setExpandedMenu(!expandedMenu)} expanded={expandedMenu}>
diff --git a/components/common/DatePicker/DatePicker.jsx b/components/common/DatePicker/DatePicker.jsx index ca3593b91..41921d34d 100644 --- a/components/common/DatePicker/DatePicker.jsx +++ b/components/common/DatePicker/DatePicker.jsx @@ -85,32 +85,39 @@ const renderSelectedDays = (dates, classes, range) => { ); return selectedDaysElements; }; -//TODO: Why is it important that open is being passed as a prop? + function DatePicker({ - open, onToggle, range, startDate, endDate, updateStartDate, updateEndDate, + open, onTogglePresets, range, startDate, endDate, updateStartDate, updateEndDate, }) { const [showCalendar, setShowCalendar] = useState(() => open); const [initialStartDate, setInitialStartDate] = useState(startDate); const [initialEndDate, setInitialEndDate] = useState(); const classes = useStyles(); - const ref = useRef(null); - // const closeCalendar = useCallback(() => setShowCalendar(false), []); + const closeCalendar = useCallback( () => { if (startDate && endDate){ setShowCalendar(false); } else if (startDate && !endDate){ - //We need to restart startDate and endDate to their initial values - //TODO: Make sure the formats are consistent + //The calendar was closed with an incomplete date range selection so we need to restart + //startDate and endDate to their initial values updateStartDate(initialStartDate); updateEndDate(initialEndDate); - console.log("StartDate", startDate) - console.log("initial StartDate", initialStartDate) + setShowCalendar(false); + } else { + //This should never happen. Log a warning. + console.warn('Try to set a new date selection. Dates were in an invalid state. StartDate: ', startDate, " endDate: ", endDate); } - }, []); + }, [startDate, endDate]); useOutsideClick(ref, closeCalendar); + const openCalendar = () => { + setInitialStartDate(startDate); + setInitialEndDate(endDate); + setShowCalendar(true); + } + useEffect(() => { setShowCalendar(false); setInitialStartDate(startDate) @@ -130,9 +137,14 @@ function DatePicker({ }; const toggleCalendar = () => { - setShowCalendar(prevState => !prevState); - if (onToggle) onToggle(); + if(showCalendar) { + closeCalendar(); + } else { + openCalendar(); + } + if (onTogglePresets) onTogglePresets(); }; + return (
@@ -164,7 +176,7 @@ function DatePicker({ DatePicker.propTypes = { range: PropTypes.bool, open: PropTypes.bool, - onToggle: PropTypes.func, + onTogglePresets: PropTypes.func, startDate: PropTypes.string, endDate: PropTypes.string, }; @@ -172,7 +184,7 @@ DatePicker.propTypes = { DatePicker.defaultProps = { open: false, range: false, - onToggle: null, + onTogglePresets: null, startDate: null, endDate: null, }; diff --git a/components/common/ReactDayPicker/ReactDayPicker.jsx b/components/common/ReactDayPicker/ReactDayPicker.jsx index c958d72ef..7bd1dcc8a 100644 --- a/components/common/ReactDayPicker/ReactDayPicker.jsx +++ b/components/common/ReactDayPicker/ReactDayPicker.jsx @@ -7,11 +7,6 @@ import DayPicker from 'react-day-picker'; import { connect } from 'react-redux'; import makeStyles from '@mui/styles/makeStyles'; import clsx from 'clsx'; -// import { -// updateEndDate as reduxUpdateEndDate, -// updateStartDate as reduxUpdateStartDate, -// } from '@reducers/filters'; - import fonts from '@theme/fonts'; import colors from '@theme/colors'; import { INTERNAL_DATE_SPEC } from '../CONSTANTS'; @@ -183,8 +178,8 @@ function ReactDayPicker({ setEnteredTo(null); //If startDate is selected and endDate is unselected, complete the range selection. } else if(startDate && !endDate){ - // If the user picks the first date then picks the second date that is before the first date - // Reassign the From and To Day + // If the user selects the startDate then chooses an endDate that precedes it, + // swap the values of startDate and endDate if (moment(day).format(INTERNAL_DATE_SPEC) < startDate) { const tempDate = startDate; setToDay(moment(tempDate).toDate()); @@ -198,28 +193,6 @@ function ReactDayPicker({ //This should never happen. Log a warning. console.warn('Try to set a new date selection. Dates were in an invalid state. StartDate: ', startDate, " endDate: ", endDate); } - - - // Our date range selection logic is very simple: the user is selecting the - // first day in their date range if from and to are set, or if they're both - // unset. Otherwise, they are selecting the last day. - // if (!startDate || !endDate) { - // // If the user picks the first date then picks the second date that is before the first date - // // Reassign the From and To Day - // if (moment(day).format(INTERNAL_DATE_SPEC) < startDate) { - // const tempDate = startDate; - // setToDay(moment(tempDate).toDate()); - // setFromDay(day); - // updateEndDate(tempDate); - // setEnteredTo(moment(tempDate).toDate()); - // } else { - // setToDay(day); - // } - // return; - // } - // setFromDay(day); - // updateEndDate(null); - // setEnteredTo(null); }; const handleDayMouseEnter = day => { @@ -272,11 +245,6 @@ ReactDayPicker.defaultProps = { endDate: null, }; -// const mapDispatchToProps = dispatch => ({ -// updateStartDate: date => dispatch(reduxUpdateStartDate(date)), -// updateEndDate: date => dispatch(reduxUpdateEndDate(date)), -// }); - const mapStateToProps = state => ({ startDate: state.filters.startDate, endDate: state.filters.endDate, From 14db20aae698a97893040df7984262b2a193d21a Mon Sep 17 00:00:00 2001 From: Dorian Date: Mon, 25 Nov 2024 17:42:19 -0800 Subject: [PATCH 5/5] Added spaces after 'if' and after the start of the comments --- components/common/DatePicker/DatePicker.jsx | 8 ++++---- components/common/ReactDayPicker/ReactDayPicker.jsx | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/common/DatePicker/DatePicker.jsx b/components/common/DatePicker/DatePicker.jsx index 41921d34d..b7944a7b8 100644 --- a/components/common/DatePicker/DatePicker.jsx +++ b/components/common/DatePicker/DatePicker.jsx @@ -100,13 +100,13 @@ function DatePicker({ if (startDate && endDate){ setShowCalendar(false); } else if (startDate && !endDate){ - //The calendar was closed with an incomplete date range selection so we need to restart - //startDate and endDate to their initial values + // The calendar was closed with an incomplete date range selection so we need to restart + // startDate and endDate to their initial values updateStartDate(initialStartDate); updateEndDate(initialEndDate); setShowCalendar(false); } else { - //This should never happen. Log a warning. + // This should never happen. Log a warning. console.warn('Try to set a new date selection. Dates were in an invalid state. StartDate: ', startDate, " endDate: ", endDate); } }, [startDate, endDate]); @@ -137,7 +137,7 @@ function DatePicker({ }; const toggleCalendar = () => { - if(showCalendar) { + if (showCalendar) { closeCalendar(); } else { openCalendar(); diff --git a/components/common/ReactDayPicker/ReactDayPicker.jsx b/components/common/ReactDayPicker/ReactDayPicker.jsx index 7bd1dcc8a..b1569fcd8 100644 --- a/components/common/ReactDayPicker/ReactDayPicker.jsx +++ b/components/common/ReactDayPicker/ReactDayPicker.jsx @@ -171,13 +171,13 @@ function ReactDayPicker({ return; } - //If both startDate and endDate were already selected. Start a new range selection. - if(startDate && endDate){ + // If both startDate and endDate were already selected. Start a new range selection. + if (startDate && endDate){ setFromDay(day); updateEndDate(null); setEnteredTo(null); - //If startDate is selected and endDate is unselected, complete the range selection. - } else if(startDate && !endDate){ + // If startDate is selected and endDate is unselected, complete the range selection. + } else if (startDate && !endDate){ // If the user selects the startDate then chooses an endDate that precedes it, // swap the values of startDate and endDate if (moment(day).format(INTERNAL_DATE_SPEC) < startDate) { @@ -190,7 +190,7 @@ function ReactDayPicker({ setToDay(day); } } else { - //This should never happen. Log a warning. + // This should never happen. Log a warning. console.warn('Try to set a new date selection. Dates were in an invalid state. StartDate: ', startDate, " endDate: ", endDate); } };