1283 date range selector should display the date range for the past week by default

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({
           <div className={classes.selector}>
             <DatePicker
               range={range}
-              dates={dates}
               onToggle={closeOptionsOnDateToggle}
-              onSelect={handleDateSelect}
             />
             <div className={classes.separator} />
           </div>
@@ -65,7 +54,6 @@ function DateSelector({
             classes={{ option, selected }}
             options={options}
             onSelect={handleOptionSelect}
-            dates={dates}
           />
         </SelectorBox.Collapse>
       </SelectorBox>
@@ -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: [],
 };

client/components/common/DatePicker/DatePicker.jsx

@@ -1,6 +1,8 @@
 import React, {
   useRef, useState, useEffect, useCallback,
 } from 'react';
+import { connect } from 'react-redux';
+import moment from 'moment';
 import ReactDayPicker from '@components/common/ReactDayPicker';
 import PropTypes from 'prop-types';
 import CalendarIcon from '@material-ui/icons/CalendarToday';
@@ -52,17 +54,17 @@ const renderSelectedDays = (dates, classes, range) => {
 
   if (isBothSelected) {
     selectedDaysElements.push(
-      <span key="from">{from.toLocaleDateString('en-US')}</span>,
+      <span key="from">{moment(from).format('L')}</span>,
       <span key="delimiter"> - </span>,
-      <span key="to">{to.toLocaleDateString('en-US')}</span>,
+      <span key="to">{moment(to).format('L')}</span>,
     );
     return selectedDaysElements;
   }
   if (isFromSelected) {
     selectedDaysElements.push(
       <span key="from">
         {' '}
-        {from.toLocaleDateString('en-US')}
+        {moment(from).format('L')}
         {' '}
       </span>,
     );
@@ -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 (
     <div ref={ref} className={classes.selector}>
-      <div>{renderSelectedDays(selectedDays, classes, range)}</div>
+      <div>{renderSelectedDays([startDate, endDate], classes, range)}</div>
       <IconButton
         className={classes.button}
         aria-label="toggle calendar datepicker"
@@ -135,8 +126,6 @@ const DatePicker = ({
         {showCalendar ? (
           <ReactDayPicker
             range={range}
-            initialDates={selectedDays}
-            onChange={handleDateChage}
           />
         ) : null}
       </div>
@@ -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)(DatePicker);

client/components/common/ReactDayPicker/ReactDayPicker.jsx

@@ -26,9 +26,10 @@ const getInitialState = initialDates => {
 const defaultState = { from: null, to: null };
 
 function ReactDayPicker({
-  onChange, initialDates, range, updateStartDate,
+  initialDates, range, updateStartDate,
   updateEndDate,
 }) {
+  // TODO: consider getting rid of this local date state in favor of Redux.
   const [state, setState] = useState(getInitialState(initialDates));
 
   const isSelectingFirstDay = (from, to, day) => {
@@ -39,7 +40,6 @@ function ReactDayPicker({
 
   const resetDays = () => {
     setState(defaultState);
-    onChange([]);
   };
 
   const setFromDay = day => {
@@ -49,7 +49,6 @@ function ReactDayPicker({
       enteredTo: null,
     }));
     updateStartDate(moment(day).format(INTERNAL_DATE_SPEC));
-    onChange([day]);
   };
 
   const setFromToDay = day => {
@@ -59,7 +58,6 @@ function ReactDayPicker({
       enteredTo: day,
     }));
     updateEndDate(moment(day).format(INTERNAL_DATE_SPEC));
-    onChange([state.from, day]);
   };
 
   const handleDayClick = day => {
@@ -117,15 +115,13 @@ function ReactDayPicker({
 
 ReactDayPicker.propTypes = {
   range: PropTypes.bool,
-  onChange: PropTypes.func,
   initialDates: PropTypes.arrayOf(Date),
   updateStartDate: PropTypes.func,
   updateEndDate: PropTypes.func,
 };
 
 ReactDayPicker.defaultProps = {
   range: false,
-  onChange: null,
   initialDates: [],
   updateStartDate: null,
   updateEndDate: null,