Apply filters to blue button download (#33398)

* MHV-60263: Blue button medications complete

* MHV-60263: blue button reducer adjustments

* MHV-60263: Blue Button appointments pdf done

* MHV-60263: Blue button demographics pdf done

* MHV-60263: BB military service pdf done

* MHV-60263: Blue button account summary complete

* MHV-60263: Unit tests fixed

* MHV-60263: Removed comments

* MHV-60263: Comment cleanup

* MHV-60263: Unit test fix

* mhv-61927 filters stored in redux

* mhv-61927 apply filters to download

* MHV-61927 removed date filter for allergies/conditions

---------

Co-authored-by: Matthew Wright <[email protected]>

src/applications/mhv-medical-records/actions/downloads.js

@@ -0,0 +1,15 @@
+import { Actions } from '../util/actionTypes';
+
+export const updateReportDateRange = (fromDate, toDate) => async dispatch => {
+  dispatch({
+    type: Actions.Downloads.SET_DATE_FILTER,
+    response: `${fromDate}<->${toDate}`,
+  });
+};
+
+export const updateReportRecordType = selectedTypes => async dispatch => {
+  dispatch({
+    type: Actions.Downloads.SET_RECORD_FILTER,
+    response: selectedTypes,
+  });
+};

src/applications/mhv-medical-records/components/DownloadRecords/DowloadDateRange.jsx

@@ -3,13 +3,22 @@ import {
   VaDate,
   VaSelect,
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { subMonths, format } from 'date-fns';
 import NeedHelpSection from './NeedHelpSection';
+import { updateReportDateRange } from '../../actions/downloads';
 
 const DownloadDateRange = () => {
   const history = useHistory();
   const [selectedDate, setSelectedDate] = useState('');
+  const [selectionError, setSelectionError] = useState(null);
+  const [customFromDate, setCustomFromDate] = useState('');
+  const [customToDate, setCustomToDate] = useState('');
+  const [customToError, setCustomToError] = useState(null);
+  const [customFromError, setCustomFromError] = useState(null);
+  const dispatch = useDispatch();
 
   const handleDateSelect = useCallback(
     e => {
@@ -18,11 +27,30 @@ const DownloadDateRange = () => {
         return;
       }
 
+      setSelectionError(null);
       setSelectedDate(e.detail.value);
+      if (e.detail.value !== 'custom') {
+        const currentDate = new Date();
+        dispatch(
+          updateReportDateRange(
+            format(subMonths(currentDate, e.detail.value), 'yyyy-MM-dd'),
+            format(currentDate, 'yyyy-MM-dd'),
+          ),
+        );
+      }
     },
     [setSelectedDate],
   );
 
+  useEffect(
+    () => {
+      if (customFromDate !== '' && customToDate !== '') {
+        dispatch(updateReportDateRange(customFromDate, customToDate));
+      }
+    },
+    [customFromDate, customToDate],
+  );
+
   return (
     <div>
       <h1>Select records and download report</h1>
@@ -39,17 +67,44 @@ const DownloadDateRange = () => {
       </div>
       <h2>Select date range</h2>
       <div className="vads-u-margin-bottom--3">
-        <VaSelect label="Date range" onVaSelect={handleDateSelect} value="">
-          <option value="3">Last 3 months</option>
-          <option value="6">Last 6 months</option>
-          <option value="12">Last 12 months</option>
+        <VaSelect
+          label="Date range"
+          onVaSelect={handleDateSelect}
+          value=""
+          error={selectionError}
+        >
+          <option value={3}>Last 3 months</option>
+          <option value={6}>Last 6 months</option>
+          <option value={12}>Last 12 months</option>
           <option value="custom">Custom</option>
         </VaSelect>
       </div>
       {selectedDate === 'custom' && (
         <div className="vads-u-margin-bottom--3">
-          <VaDate label="Start date" required="true" />
-          <VaDate label="End date" required="true" />
+          <VaDate
+            label="Start date"
+            required="true"
+            error={customFromError}
+            onDateChange={e => {
+              const [year, month, day] = e.target.value.split('-');
+              if (parseInt(year, 10) >= 1900 && month && day) {
+                setCustomFromError(null);
+                setCustomFromDate(e.target.value);
+              }
+            }}
+          />
+          <VaDate
+            label="End date"
+            required="true"
+            error={customToError}
+            onDateChange={e => {
+              const [year, month, day] = e.target.value.split('-');
+              if (parseInt(year, 10) >= 1900 && month && day) {
+                setCustomToError(null);
+                setCustomToDate(e.target.value);
+              }
+            }}
+          />
         </div>
       )}
       <VaButtonPair
@@ -58,6 +113,20 @@ const DownloadDateRange = () => {
           history.push('/download');
         }}
         onPrimaryClick={() => {
+          if (selectedDate === '') {
+            setSelectionError('Please select a valid date range.');
+            return;
+          }
+          if (selectedDate === 'custom') {
+            if (customFromDate === '') {
+              setCustomFromError('Please enter a valid start date.');
+              return;
+            }
+            if (customToDate === '') {
+              setCustomToError('Please enter a valid end date.');
+              return;
+            }
+          }
           history.push('/download/record-type');
         }}
       />