2035-validate-filters-form-load-sr

src/components/DateSelector/DateSelector.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import moment from 'moment';
@@ -13,13 +13,17 @@ import ArrowToolTip from '@components/common/ArrowToolTip';
 import options from './options';
 import useStyles from './useStyles';
 import DateRanges from './DateRanges';
+import { updateEndDate, updateStartDate } from '../../redux/reducers/filters';
 
 const dateFormat = 'YYYY-MM-DD';
 
 function DateSelector({
   range,
   updateStartDate,
   updateEndDate,
+  startDate,
+  endDate,
+  hasError = false // Form Validation for blank map
 }) {
   const [expandedMenu, setExpandedMenu] = useState(false);
   const classes = useStyles();
@@ -44,7 +48,7 @@ function DateSelector({
 
   return (
     <>
-      <Typography className={classes.header}>
+      <Typography className={classes.header} style={{ color: hasError ? '#DE2800' : 'inherit' }}>
         Date Range&nbsp;
         <ArrowToolTip iconStyle={classes.iconStyle}>
           <div>
@@ -64,12 +68,19 @@ function DateSelector({
           </div>
         </ArrowToolTip>
       </Typography>
-      <SelectorBox onToggle={() => setExpandedMenu(!expandedMenu)} expanded={expandedMenu}>
+      <div style={{ 
+        outline: hasError ? '2px solid #DE2800' : 'none',
+        outlineOffset: '-2px', 
+        borderRadius: '5px',
+      }}>
+      <SelectorBox onToggle={() => setExpandedMenu(!expandedMenu)} expanded={expandedMenu} style={{border: hasError ? '1.3px solid #DE2800': undefined}}>
         <SelectorBox.Display>
           <div className={classes.selector}>
-            <DatePicker
+            <DatePicker 
               range={range}
               onTogglePresets={closeOptionsOnDateToggle}
+              startDate={startDate}       
+              endDate={endDate}           
             />
             <div className={classes.separator} />
           </div>
@@ -82,23 +93,31 @@ function DateSelector({
           />
         </SelectorBox.Collapse>
       </SelectorBox>
+      </div>
     </>
   );
 }
 
+const mapStateToProps = state => ({
+  startDate: state.filters.startDate,
+  endDate: state.filters.endDate
+});
+
 const mapDispatchToProps = dispatch => ({
   updateStartDate: date => dispatch(reduxUpdateStartDate(date)),
   updateEndDate: date => dispatch(reduxUpdateEndDate(date)),
 });
 
-export default connect(null, mapDispatchToProps)(DateSelector);
+export default connect(mapStateToProps, mapDispatchToProps)(DateSelector);
 
 DateSelector.propTypes = {
   range: PropTypes.bool,
   updateStartDate: PropTypes.func.isRequired,
   updateEndDate: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
 };
 
 DateSelector.defaultProps = {
   range: false,
+  hasError: false,
 };

src/components/common/DatePicker/DatePicker.jsx

@@ -99,16 +99,23 @@ 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
-      updateStartDate(initialStartDate);
-      updateEndDate(initialEndDate);
-      setShowCalendar(false);
+    // For Blank Map Implementation: no need to reset date range selection for testing purposes for date form validation
+    // } 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
+    //   updateStartDate(initialStartDate);
+    //   updateEndDate(initialEndDate);
+    //   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);
     }
+
+    //Blank Map Implementation
+    if (startDate == null || endDate == null){
+       setShowCalendar(false);
+    }
+
     }, [startDate, endDate]);
   useOutsideClick(ref, closeCalendar);
 
@@ -139,8 +146,10 @@ function DatePicker({
 
   const toggleCalendar = () => {
     if (showCalendar) {
+      console.log("toggle calendar - close")
       closeCalendar();
     } else {
+       console.log("toggle calendar - open")
       openCalendar();
     }
     if (onTogglePresets) onTogglePresets();

src/components/common/ReactDayPicker/ReactDayPicker.jsx

@@ -157,6 +157,7 @@ function ReactDayPicker({
   // enteredTo represents the day that the user is currently hovering over.
   const [enteredTo, setEnteredTo] = useState(endDate);
 
+  // Sets start date
   const setFromDay = day => {
     updateStartDate(moment(day).format(INTERNAL_DATE_SPEC));
   };
@@ -166,13 +167,26 @@ function ReactDayPicker({
   };
 
   const handleDayClick = day => {
-    if (!range) {
-      setFromDay(day);
-      return;
-    }
-
-  // If both startDate and endDate were already selected. Start a new range selection.
-  if (startDate && endDate){
+  //Blank Map Implementation
+  console.warn('Current start date: ', startDate);
+  console.warn('Current end date: ', endDate);
+  var selectedDate = moment(day).format(INTERNAL_DATE_SPEC)
+  console.warn('Date selected: ', selectedDate);
+
+  // Initial state: null startDate and endDate, user first selects start date
+  if(!startDate){
+    console.warn('Start Date Selected: ', day);
+    setFromDay(day);
+    // Case: missing start date, user unselects start date
+  } else if(startDate && startDate == selectedDate) {
+    console.warn('Same start date selected, remove start date: ', selectedDate);
+    updateStartDate(null);
+     // Case: missing end date, user unselects end date
+  } else if(endDate && endDate == selectedDate) {
+    console.warn('Same end date selected, remove end date: ', selectedDate);
+    updateEndDate(null);
+  } // If both startDate and endDate were already selected. Start a new range selection.
+  else if (startDate && endDate){
     setFromDay(day);
     updateEndDate(null);
     setEnteredTo(null);
@@ -191,7 +205,7 @@ function ReactDayPicker({
       }
   } 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);
+      console.warn('ReactDayPicker: Try to set a new date selection. Dates were in an invalid state. StartDate: ', startDate, " endDate: ", endDate);
   } 
   };
 

src/components/layout/Main/Desktop/CouncilSelector/index.jsx

@@ -34,6 +34,7 @@ function CouncilSelector({
   dispatchCloseBoundaries,
   resetMap,
   resetAddressSearch,
+  hasError = false // Form Validation for blank map
 }) {
   const classes = useStyles();
   const [searchTerm, setSearchTerm] = useState('');
@@ -65,10 +66,10 @@ function CouncilSelector({
       const newSelected = [newSelectedCouncil];
       dispatchUpdateSelectedCouncils(newSelected);
       dispatchUpdateUnselectedCouncils(councils);
-      dispatchUpdateNcId(selectedCouncilId);
+      // dispatchUpdateNcId(selectedCouncilId); // Triggers zoom
 
       // Collapse boundaries section
-      dispatchCloseBoundaries();
+      // dispatchCloseBoundaries();
     }
   };
 
@@ -78,9 +79,14 @@ function CouncilSelector({
 
   return (
     <>
-      <Typography className={classes.header}>Boundaries</Typography>
+      <Typography className={classes.header} 
+        style={{ color: hasError ? '#DE2800' : 'inherit' }}
+      >
+        Boundaries
+      </Typography>
+      <div style={{ border: hasError ? '2px solid #DE2800': undefined, borderRadius: '5px' }}>
       <BoundariesSection>
-        <BoundariesSection.Display>
+        <BoundariesSection.Display >
           <SelectedCouncils items={selected} onDelete={debouncedHandleDelete} />
         </BoundariesSection.Display>
         <BoundariesSection.Collapse>
@@ -89,6 +95,7 @@ function CouncilSelector({
           )}
         </BoundariesSection.Collapse>
       </BoundariesSection>
+      </div>
     </>
   );
 }
@@ -115,6 +122,7 @@ CouncilSelector.defaultProps = {
   resetMap: () => {},
   resetAddressSearch: () => {},
   dispatchCloseBoundaries: undefined,
+  hasError: false,
 };
 
 CouncilSelector.propTypes = {
@@ -127,4 +135,5 @@ CouncilSelector.propTypes = {
   resetMap: PropTypes.func,
   resetAddressSearch: PropTypes.func,
   dispatchCloseBoundaries: PropTypes.func,
+  hasError: PropTypes.bool,
 };

src/components/layout/Main/Desktop/Export/ExportButton.jsx

@@ -19,7 +19,7 @@ import requestTypes from '@data/requestTypes';
 import useStyles from './useStyles';
 import ExportDialog from './ExportDialog';
 
-function ExportButton({ filters }) {
+function ExportButton({ filters, disabled = false }) {
   const { conn } = useContext(DbContext);
   const classes = useStyles();
   const [showDialog, setShowDialog] = useState(false);
@@ -274,9 +274,9 @@ function ExportButton({ filters }) {
 
   return (
     <>
-      <Button variant="text" onClick={handleExport} className={classes.exportButton}>
+      <Button variant="outlined" onClick={handleExport} className={classes.exportButton} disabled={disabled}>
         Export
-        <Icon sx={{ fontSize: 18, mb: '3px', ml: '1px' }}>
+        <Icon sx={{ fontSize: 18, mb: '3px', ml: '1px', opacity: disabled ? 0.3 : 1  }}>
           <img src={ExportIcon} alt="export icon" className={classes.imageIcon} />
         </Icon>
       </Button>
@@ -317,4 +317,5 @@ ExportButton.propTypes = {
     }),
     requestTypes: PropTypes.objectOf(PropTypes.bool),
   }).isRequired,
+  disabled: PropTypes.bool,
 };

src/components/layout/Main/Desktop/Export/useStyles.js

@@ -2,12 +2,18 @@ import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
   exportButton: {
+    width: 300,
+    justifyContent: 'center',
     color: theme.palette.text.secondaryLight,
-    textDecoration: 'underline',
+    borderColor: theme.palette.text.secondaryLight,
+    borderRadius: 5,
+    backgroundColor: 'transparent',
+    text: 'black',
+    padding: 3,
     '&:hover': {
-      textDecoration: 'underline',
+      backgroundColor: theme.palette.text.secondaryLight,
+      color: 'black'
     },
-    padding: 0,
   },
   confirmationButton: {
     width: '229px',