From 9e5245bb518e105a72e1d0dfb59ac03a8b115f21 Mon Sep 17 00:00:00 2001 From: Nicholas Kwon Date: Sat, 23 Jul 2022 15:09:45 -0700 Subject: [PATCH] try getting rid of local date state --- .../components/DateSelector/DateSelector.jsx | 16 --------- .../common/DatePicker/DatePicker.jsx | 34 ++++++++----------- .../common/ReactDayPicker/ReactDayPicker.jsx | 7 +--- 3 files changed, 15 insertions(+), 42 deletions(-) diff --git a/client/components/DateSelector/DateSelector.jsx b/client/components/DateSelector/DateSelector.jsx index 20c805cd3..3e50153e2 100644 --- a/client/components/DateSelector/DateSelector.jsx +++ b/client/components/DateSelector/DateSelector.jsx @@ -15,30 +15,21 @@ import DateRanges from './DateRanges'; const dateFormat = 'YYYY-MM-DD'; function DateSelector({ - onRangeSelect, range, - initialDates, updateStartDate, updateEndDate, }) { - const [dates, setDates] = useState(initialDates); const [expanded, setExpanded] = useState(false); const classes = useStyles(); const handleOptionSelect = optionDates => { const formattedStart = moment(optionDates[0]).format(dateFormat); const formattedEnd = moment(optionDates[1]).format(dateFormat); - setDates(() => optionDates); updateStartDate(formattedStart); updateEndDate(formattedEnd); setExpanded(false); }; - const handleDateSelect = selectedDays => { - setDates(() => selectedDays); - if (typeof onRangeSelect === 'function') onRangeSelect(selectedDays); - }; - const closeOptionsOnDateToggle = useCallback(() => { setExpanded(false); }, []); @@ -53,9 +44,7 @@ function DateSelector({
@@ -65,7 +54,6 @@ function DateSelector({ classes={{ option, selected }} options={options} onSelect={handleOptionSelect} - dates={dates} /> @@ -82,14 +70,10 @@ export default connect(null, mapDispatchToProps)(DateSelector); DateSelector.propTypes = { range: PropTypes.bool, - onRangeSelect: PropTypes.func, - initialDates: PropTypes.arrayOf(Date), updateStartDate: PropTypes.func.isRequired, updateEndDate: PropTypes.func.isRequired, }; DateSelector.defaultProps = { range: false, - onRangeSelect: null, - initialDates: [], }; diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx index aa6a7b026..a16e366f5 100644 --- a/client/components/common/DatePicker/DatePicker.jsx +++ b/client/components/common/DatePicker/DatePicker.jsx @@ -1,6 +1,7 @@ import React, { useRef, useState, useEffect, useCallback, } from 'react'; +import { connect } from 'react-redux'; import ReactDayPicker from '@components/common/ReactDayPicker'; import PropTypes from 'prop-types'; import CalendarIcon from '@material-ui/icons/CalendarToday'; @@ -44,6 +45,7 @@ const useStyles = makeStyles(theme => ({ })); const renderSelectedDays = (dates, classes, range) => { + console.log('dates are ', dates); const [from, to] = dates; const isFromSelected = Boolean(from); const isBothSelected = Boolean(from && to); @@ -79,9 +81,8 @@ const renderSelectedDays = (dates, classes, range) => { }; const DatePicker = ({ - dates, onSelect, open, onToggle, range, + open, onToggle, range, startDate, endDate, }) => { - const [selectedDays, setSelectedDays] = useState(() => dates); const [showCalendar, setShowCalendar] = useState(() => open); const classes = useStyles(); @@ -93,10 +94,6 @@ const DatePicker = ({ setShowCalendar(false); }, [open]); - useEffect(() => { - setSelectedDays(() => dates); - }, [dates]); - const getCoordinates = () => { if (ref.current) { const { left, top, height } = ref.current.getClientRects()[0]; @@ -113,15 +110,9 @@ const DatePicker = ({ setShowCalendar(prevState => !prevState); if (onToggle) onToggle(); }; - - const handleDateChage = incomingDates => { - setSelectedDays(() => incomingDates); - if (onSelect) onSelect(incomingDates); - }; - return (
-
{renderSelectedDays(selectedDays, classes, range)}
+
{renderSelectedDays([startDate, endDate], classes, range)}
) : null}
@@ -145,19 +134,24 @@ const DatePicker = ({ }; DatePicker.propTypes = { - onSelect: PropTypes.func, range: PropTypes.bool, open: PropTypes.bool, onToggle: PropTypes.func, - dates: PropTypes.arrayOf(Date), + startDate: PropTypes.string, + endDate: PropTypes.string, }; DatePicker.defaultProps = { open: false, range: false, onToggle: null, - onSelect: null, - dates: [], + startDate: null, + endDate: null, }; -export default DatePicker; +const mapStateToProps = state => ({ + startDate: state.filters.startDate, + endDate: state.filters.endDate, +}); + +export default connect(mapStateToProps)(ReactDayPicker); diff --git a/client/components/common/ReactDayPicker/ReactDayPicker.jsx b/client/components/common/ReactDayPicker/ReactDayPicker.jsx index 345f03037..602e2cf94 100644 --- a/client/components/common/ReactDayPicker/ReactDayPicker.jsx +++ b/client/components/common/ReactDayPicker/ReactDayPicker.jsx @@ -26,7 +26,7 @@ const getInitialState = initialDates => { const defaultState = { from: null, to: null }; function ReactDayPicker({ - onChange, initialDates, range, updateStartDate, + initialDates, range, updateStartDate, updateEndDate, }) { const [state, setState] = useState(getInitialState(initialDates)); @@ -39,7 +39,6 @@ function ReactDayPicker({ const resetDays = () => { setState(defaultState); - onChange([]); }; const setFromDay = day => { @@ -49,7 +48,6 @@ function ReactDayPicker({ enteredTo: null, })); updateStartDate(moment(day).format(INTERNAL_DATE_SPEC)); - onChange([day]); }; const setFromToDay = day => { @@ -59,7 +57,6 @@ function ReactDayPicker({ enteredTo: day, })); updateEndDate(moment(day).format(INTERNAL_DATE_SPEC)); - onChange([state.from, day]); }; const handleDayClick = day => { @@ -117,7 +114,6 @@ function ReactDayPicker({ ReactDayPicker.propTypes = { range: PropTypes.bool, - onChange: PropTypes.func, initialDates: PropTypes.arrayOf(Date), updateStartDate: PropTypes.func, updateEndDate: PropTypes.func, @@ -125,7 +121,6 @@ ReactDayPicker.propTypes = { ReactDayPicker.defaultProps = { range: false, - onChange: null, initialDates: [], updateStartDate: null, updateEndDate: null,