581 filter menu - error handling for data and comparison forms

client/components/common/InfoTitle.jsx

@@ -14,7 +14,7 @@ const InfoTitle = ({
     {
       style: {
         display: 'inline-block',
-        marginRight: 6,
+        margin: '15px 5px 5px 0',
       },
     },
     title,

client/components/main/menu/ErrorMessage.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import propTypes from 'proptypes';
+
+const ErrorMessage = ({
+  errorType,
+}) => {
+  const setErrorMessage = () => {
+    switch (errorType) {
+      case 'selectone': {
+        return '* Please choose at least one selection';
+      }
+      case 'data': {
+        return '* Please select a date range';
+      }
+      case 'districtset': {
+        return '* Please choose two districts';
+      }
+      default: return null;
+    }
+  };
+
+  const errorMessage = setErrorMessage();
+
+  const missingSelectorWarning = React.createElement('p', {
+    style: {
+      color: 'red',
+      margin: '0 0 10px 0',
+      fontSize: '0.75rem',
+    },
+  }, errorMessage);
+
+  return (
+    missingSelectorWarning
+  );
+};
+
+export default ErrorMessage;
+
+ErrorMessage.propTypes = {
+  errorType: propTypes.string.isRequired,
+};

client/components/main/menu/Menu.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
 import clx from 'classnames';
@@ -17,6 +17,7 @@ import Button from '@components/common/Button';
 import InfoTitle from '@components/common/InfoTitle';
 import HoverOverInfo from '@components/common/HoverOverInfo';
 import Submit from './Submit';
+import ErrorMessage from './ErrorMessage';
 import DateSelector from './DateSelector/DateSelector';
 import NCSelector from './NCSelector';
 import RequestTypeSelector from './RequestTypeSelector';
@@ -33,6 +34,39 @@ const Menu = ({
     MENU_TABS.MAP,
     MENU_TABS.VISUALIZATIONS,
   ];
+  const [dataErrors, setDataErrors] = useState({
+    missingStartDate: false,
+    missingEndDate: false,
+    missingCouncils: false,
+    missingRequestTypes: false,
+  });
+
+  const [comparisonErrors, setComparisonErrors] = useState({
+    missingStartDate: false,
+    missingEndDate: false,
+    missingChart: false,
+    missingDistrictOne: false,
+    missingDistrictTwo: false,
+    missingRequestTypes: false,
+  });
+  const setDErrors = (startDate, endDate, councils, requestTypes) => {
+    setDataErrors({
+      missingStartDate: startDate,
+      missingEndDate: endDate,
+      missingCouncils: councils,
+      missingRequestTypes: requestTypes,
+    });
+  };
+  const setCErrors = (startDate, endDate, chart, districtOne, districtTwo, requestTypes) => {
+    setComparisonErrors({
+      missingStartDate: startDate,
+      missingEndDate: endDate,
+      missingChart: chart,
+      missingDistrictOne: districtOne,
+      missingDistrictTwo: districtTwo,
+      missingRequestTypes: requestTypes,
+    });
+  };
 
   return (
     <div className="menu-container">
@@ -71,77 +105,102 @@ const Menu = ({
         <Route path="/comparison">
           <div className="menu-content">
             <h1>Comparison Filters</h1>
+            <p>* Indicates to make at least one selection</p>
+
             <InfoTitle
-              title="Date Range Selection"
+              title="Date Range Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to choose a date range for 311 comparison data.',
                 '* Please click to make a selection.',
               ]}
             />
+            {
+              comparisonErrors.missingEndDate && <ErrorMessage errorType="data" />
+            }
             <DateSelector comparison key="comparison-dateselector" />
             <InfoTitle
-              title="District Selection"
+              title="District Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to select specific district boundaries for comparison.',
                 '* Please click to select districts for comparison.',
               ]}
             />
+            {
+              (comparisonErrors.missingDistrictOne || comparisonErrors.missingDistrictTwo)
+                && <ErrorMessage errorType="districtset" />
+            }
             <DistrictSelector />
             <InfoTitle
-              title="Chart Selection"
+              title="Chart Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to select a chart for comparison.',
                 '* Please click on a chart type to make a selection.',
               ]}
             />
+            {
+              comparisonErrors.missingChart && <ErrorMessage errorType="selectone" />
+            }
             <ChartSelector />
             <InfoTitle
-              title="Request Type Selection"
+              title="Request Type Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to select specific 311 request types for comparison.',
                 '* Please check box to make one or more selections.',
               ]}
             />
+            {
+              comparisonErrors.missingRequestTypes && <ErrorMessage errorType="selectone" />
+            }
             <RequestTypeSelector comparison />
-            <Submit />
+            <Submit setCErrors={setCErrors} setDErrors={setDErrors} />
           </div>
         </Route>
         <Route path="/data">
           <div className="menu-content with-tabs">
             <h1>Filters</h1>
+            <p>* Indicates to make at least one selection</p>
             <InfoTitle
-              title="Date Range Selection"
+              title="Date Range Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to choose a date range for 311 data.',
                 '* Please click to make a selection.',
               ]}
             />
+            {
+              dataErrors.missingEndDate && <ErrorMessage errorType="data" />
+            }
             <DateSelector key="data-dateselector" />
             <InfoTitle
-              title="Neighborhood Council (NC) Selection"
+              title="Neighborhood Council (NC) Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to select specific neighborhood councils.',
                 '* Please check box to make one or more selections.',
               ]}
               position="top"
             />
+            {
+              dataErrors.missingCouncils && <ErrorMessage errorType="selectone" />
+            }
             <NCSelector />
             <InfoTitle
-              title="Request Type Selection"
+              title="Request Type Selection *"
               element="h2"
               infoText={[
                 'This filter allows the user to select specific 311 request types.',
                 '* Please check box to make one or more selections.',
               ]}
             />
+            {
+              dataErrors.missingRequestTypes && <ErrorMessage errorType="selectone" />
+            }
             <RequestTypeSelector />
-            <Submit />
+            <Submit setCErrors={setCErrors} setDErrors={setDErrors} />
           </div>
         </Route>
       </Switch>

client/components/main/menu/Submit.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import propTypes from 'proptypes';
 import { useLocation } from 'react-router-dom';
@@ -7,73 +7,80 @@ import { getComparisonDataRequest } from '@reducers/comparisonData';
 import Button from '@components/common/Button';
 
 const Submit = ({
+  setCErrors,
+  setDErrors,
   getData,
   getComparisonData,
   filters,
   comparisonFilters,
 }) => {
   const { pathname } = useLocation();
-  const [disableSubmit, setDisableSubmit] = useState(true);
+  const validateDataForm = () => {
+    const {
+      startDate,
+      endDate,
+      councils,
+      requestTypes,
+    } = filters;
 
-  const handleSubmit = () => {
-    switch (pathname) {
-      case '/data': return getData();
-      case '/comparison': return getComparisonData();
-      default: return null;
+    const noStartDate = !startDate;
+    const noEndDate = !endDate;
+    const noCouncils = councils.length <= 0;
+    const noRequestTypes = !(Object.values(requestTypes).includes(true));
+    setDErrors(noStartDate, noEndDate, noCouncils, noRequestTypes);
+
+    if (!noStartDate && !noEndDate && !noCouncils && !noRequestTypes) {
+      return true;
+    }
+    return false;
+  };
+
+  const validateComparisonForm = () => {
+    const {
+      startDate,
+      endDate,
+      comparison: {
+        chart,
+        set1,
+        set2,
+      },
+      requestTypes,
+    } = comparisonFilters;
+
+    const noStartDate = !startDate;
+    const noEndDate = !endDate;
+    const noChart = !chart;
+    const noDistrictOneSet = set1.list.length === 0;
+    const noDistrictTwoSet = set2.list.length === 0;
+    const noRequestTypes = !(Object.values(requestTypes).includes(true));
+    setCErrors(noStartDate, noEndDate, noChart, noDistrictOneSet, noDistrictTwoSet, noRequestTypes);
+
+    if (!noStartDate && !noEndDate && !noChart
+    && !noDistrictOneSet && !noDistrictTwoSet && !noRequestTypes) {
+      return true;
     }
+
+    return false;
   };
 
-  useEffect(() => {
+  const handleSubmit = () => {
     switch (pathname) {
       case '/data': {
-        const {
-          startDate,
-          endDate,
-          councils,
-          requestTypes,
-        } = filters;
-
-        if (startDate
-            && endDate
-            && councils.length > 0
-            && Object.values(requestTypes).includes(true)) {
-          setDisableSubmit(false);
-        } else {
-          setDisableSubmit(true);
+        if (validateDataForm()) {
+          return getData();
         }
         break;
       }
       case '/comparison': {
-        const {
-          startDate,
-          endDate,
-          comparison: {
-            chart,
-            set1,
-            set2,
-          },
-          requestTypes,
-        } = comparisonFilters;
-
-        if (startDate
-            && endDate
-            && chart
-            && set1.district
-            && set1.list.length > 0
-            && set2.district
-            && set2.list.length > 0
-            && Object.values(requestTypes).includes(true)) {
-          setDisableSubmit(false);
-        } else {
-          setDisableSubmit(true);
+        if (validateComparisonForm()) {
+          return getComparisonData();
         }
         break;
       }
-      default: return undefined;
+      default: return false;
     }
-
-    return () => {};
-  }, [disableSubmit, filters, comparisonFilters, pathname]);
+    return null;
+  };
 
   return (
     <div className="level" style={{ padding: '25px 192px 15px' }}>
@@ -82,7 +89,6 @@ const Submit = ({
           id="sidebar-submit-button"
           label="Submit"
           handleClick={handleSubmit}
-          disabled={disableSubmit}
         />
       </div>
     </div>
@@ -100,6 +106,8 @@ const mapDispatchToProps = dispatch => ({
 });
 
 Submit.propTypes = {
+  setCErrors: propTypes.func,
+  setDErrors: propTypes.func,
   getData: propTypes.func,
   getComparisonData: propTypes.func,
   filters: propTypes.shape({
@@ -129,6 +137,8 @@ Submit.propTypes = {
 Submit.defaultProps = {
   getData: () => null,
   getComparisonData: () => null,
+  setCErrors: () => null,
+  setDErrors: () => null,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Submit);

node_modules_non_es5

@@ -0,0 +1 @@
+/[\\/]node_modules[\\/](?!(@react-pdf\/renderer|bulma|bulma-checkradio|bulma-switch|dotenv|gh-pages|jest)[\\/])/