fix: date selection in filters (#140)

* fix: date selection in filters * fix: share default dates and add component tests * fix: correct date selection behaviour * chore: add comments
Greenstand · Aug 8, 2021 · 06a146f · 06a146f
1 parent 6338583
commit 06a146f
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 26 deletions.
diff --git a/src/common/variables.js b/src/common/variables.js
@@ -1,7 +1,4 @@
 export const drawerWidth = 240;
-//move this variable to react app env
-//export const API_ROOT = 'api/admin'
-//export const API_ROOT = 'http://localhost:3000/'
 export const selectedHighlightColor = '#0af';
 export const documentTitle = 'Treetracker Admin by Greenstand';
 export const verificationStates = {
@@ -13,3 +10,8 @@ export const tokenizationStates = {
   TOKENIZED: 'Tokenized',
   NOT_TOKENIZED: 'Not Tokenized',
 };
+
+// These are the default min/max dates for the MUI KeyboardDatePicker component
+// See https://material-ui-pickers.dev/api/KeyboardDatePicker
+// If we set minDate or maxDate to null on this component, the fwd/back buttons are disabled
+export const datePickerDefaultMinDate = '1900-01-01';
diff --git a/src/components/Filter.js b/src/components/Filter.js
@@ -21,6 +21,9 @@ import {
   getDateFormatLocale,
   convertDateToDefaultSqlDate,
 } from '../common/locale';
+import {
+  datePickerDefaultMinDate,
+} from '../common/variables';
 
 import { verificationStates, tokenizationStates } from '../common/variables';
 
@@ -198,24 +201,6 @@ function Filter(props) {
         value={planterIdentifier}
         onChange={(e) => setPlanterIdentifier(e.target.value)}
       />
-      {/*
-      <GSInputLabel text="Status" />
-      <TextField
-        select
-        placeholder="e.g. 80"
-        value={status ? status : 'All'}
-        InputLabelProps={{
-          shrink: true,
-        }}
-        onChange={(e) => setStatus(e.target.value === 'All' ? '' : e.target.value)}
-      >
-        {['All', 'Planted', 'Hole dug', 'Not a capture', 'Blurry'].map((name) => (
-          <MenuItem key={name} value={name}>
-            {name}
-          </MenuItem>
-        ))}
-      </TextField>
-      */}
       <GSInputLabel text="Verification Status" />
       <TextField
         select
@@ -285,7 +270,7 @@ function Filter(props) {
             value={dateStart}
             onChange={handleDateStartChange}
             format={getDateFormatLocale(true)}
-            maxDate={dateEnd}
+            maxDate={dateEnd || Date()} // Don't allow selection after today
             KeyboardButtonProps={{
               'aria-label': 'change date',
             }}
@@ -298,7 +283,8 @@ function Filter(props) {
             value={dateEnd}
             onChange={handleDateEndChange}
             format={getDateFormatLocale(true)}
-            minDate={dateStart}
+            minDate={dateStart || datePickerDefaultMinDate}
+            maxDate={Date()} // Don't allow selection after today
             KeyboardButtonProps={{
               'aria-label': 'change date',
             }}

diff --git a/src/components/Filter.spec.py.js b/src/components/Filter.spec.py.js
@@ -0,0 +1,52 @@
+/* eslint-disable */
+import { mount } from 'cypress-react-unit-test';
+import React from 'react';
+import theme from './common/theme';
+import { ThemeProvider } from '@material-ui/core/styles';
+
+import Filter from './Filter';
+import FilterModel from '../models/Filter';
+
+describe('Filter', () => {
+  const filterModel = new FilterModel();
+  beforeEach(() => {
+    mount(
+      <ThemeProvider theme={theme}>
+        <Filter
+          filter={filterModel}
+          isOpen={true}
+        />
+      </ThemeProvider>,
+    );
+  });
+
+  it('works', () => {
+    cy.contains(/Filters/i);
+  });
+
+  it('start date picker forward button should be enabled', () => {
+    cy.get('#start-date-picker+* button').then(($buttons) => {
+      $buttons[0].click();
+      // Check forward button is disabled
+      cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1);
+      cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => {
+        $headerButtons[0].click();
+        // Check both buttons are enabled
+        cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0);
+      });
+    });
+  });
+
+  it('end date picker back button should be enabled', () => {
+    cy.get('#end-date-picker+* button').then(($buttons) => {
+      $buttons[0].click();
+      // Check forward button is disabled
+      cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1);
+      cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => {
+        $headerButtons[0].click();
+        // Check both buttons are enabled
+        cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0);
+      });
+    });
+  });
+});
diff --git a/src/components/FilterTop.js b/src/components/FilterTop.js
@@ -11,6 +11,7 @@ import FilterModel, {
   ALL_ORGANIZATIONS,
   ORGANIZATION_NOT_SET,
   TAG_NOT_SET,
+
 } from '../models/Filter';
 import DateFnsUtils from '@date-io/date-fns';
 import { connect } from 'react-redux';
@@ -24,7 +25,11 @@ import {
   convertDateToDefaultSqlDate,
 } from '../common/locale';
 import { getOrganization } from '../api/apiUtils';
-import { verificationStates, tokenizationStates } from '../common/variables';
+import {
+  verificationStates,
+  tokenizationStates,
+  datePickerDefaultMinDate,
+} from '../common/variables';
 
 export const FILTER_WIDTH = 330;
 
@@ -230,7 +235,7 @@ function Filter(props) {
                   format={getDateFormatLocale(true)}
                   value={dateStart}
                   onChange={handleDateStartChange}
-                  maxDate={dateEnd}
+                  maxDate={dateEnd || Date()} // Don't allow selection after today
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
                   }}
@@ -242,7 +247,8 @@ function Filter(props) {
                   format={getDateFormatLocale(true)}
                   value={dateEnd}
                   onChange={handleDateEndChange}
-                  minDate={dateStart}
+                  minDate={dateStart || datePickerDefaultMinDate}
+                  maxDate={Date()} // Don't allow selection after today
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
                   }}

diff --git a/src/components/FilterTop.spec.py.js b/src/components/FilterTop.spec.py.js
@@ -0,0 +1,79 @@
+/* eslint-disable */
+import { mount } from 'cypress-react-unit-test';
+import React from 'react';
+import theme from './common/theme';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { Provider } from 'react-redux';
+import { init } from '@rematch/core';
+
+import FilterTop from './FilterTop';
+import FilterModel from '../models/Filter';
+
+describe('FilterTop', () => {
+  const filterModel = new FilterModel();
+  beforeEach(() => {
+    store = init({
+      models: {
+        species: {
+          state: {
+            speciesList: [],
+          },
+          effects: {},
+        },
+        tags: {
+          state: {
+            tagList: [],
+          },
+          effects: {
+            getTags(_payload, _state) {},
+          },
+        },
+        organizations: {
+          state: {
+            organizationList: [],
+          },
+          effects: {
+            loadOrganizations(_payload, _state) {},
+          },
+        },
+      },
+    });
+
+    mount(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <FilterTop
+            filter={filterModel}
+            isOpen={true}
+          />
+        </ThemeProvider>,
+      </Provider>
+    );
+  });
+
+  it('start date picker forward button should be enabled', () => {
+    cy.get('#start-date-picker+* button').then(($buttons) => {
+      $buttons[0].click();
+      // Check forward button is disabled
+      cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1);
+      cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => {
+        $headerButtons[0].click();
+        // Check both buttons are enabled
+        cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0);
+      });
+    });
+  });
+
+  it('end date picker back button should be enabled', () => {
+    cy.get('#end-date-picker+* button').then(($buttons) => {
+      $buttons[0].click();
+      // Check forward button is disabled
+      cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1);
+      cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => {
+        $headerButtons[0].click();
+        // Check both buttons are enabled
+        cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0);
+      });
+    });
+  });
+});