Finance: date filters remove default selection (aragon#819)

* TransferFilters: remove duplicate margin rules * DatePicker: update today border color * DateRangePicker: update to allow null values on dates * Transfers: refactor to no default date selection * DateRangeInput: fix font family declaration Co-Authored-By: AquiGorka <[email protected]> * Transfers: recover non-breaking space * DateRangeInput: improve placeholder logic and add input placeholder for screen readers * DateRangeInput: improve on placeholder for accesibility
ConsiderItDone · Apr 23, 2019 · 13f3221 · 13f3221
1 parent 1f4b660
commit 13f3221
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 40 deletions.
diff --git a/apps/finance/app/src/components/DateRange/DatePicker.js b/apps/finance/app/src/components/DateRange/DatePicker.js
@@ -220,7 +220,7 @@ const DayView = styled.li`
   ${props =>
     props.today &&
     css`
-      border: 1px solid ${theme.disabled};
+      border: 1px solid ${mainColor};
     `}
 
   ${props =>

diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js
@@ -10,11 +10,13 @@ import {
   startOfDay,
   endOfDay,
 } from 'date-fns'
-import { breakpoint, theme } from '@aragon/ui'
+import { breakpoint, font, theme } from '@aragon/ui'
 import IconCalendar from './Calendar'
 import TextInput from './TextInput'
 import DatePicker from './DatePicker'
 
+const DATE_PLACEHOLDER = '--/--/----'
+
 class DateRangeInput extends React.PureComponent {
   state = {
     showPicker: false,
@@ -33,9 +35,10 @@ class DateRangeInput extends React.PureComponent {
   }
 
   get formattedEndDate() {
-    const { endDate } = this.state
+    const { endDate, startDate } = this.state
+    const { format } = this.props
 
-    return isDate(endDate) ? formatDate(endDate, this.props.format) : ''
+    return isDate(endDate) ? formatDate(endDate, format) : ''
   }
 
   componentWillUnmount() {
@@ -59,36 +62,33 @@ class DateRangeInput extends React.PureComponent {
 
   handleClickOutside = event => {
     if (this.rootRef && !this.rootRef.contains(event.target)) {
-      this.setState({ showPicker: false })
+      this.setState({ showPicker: false }, () => {
+        const { startDate, endDate } = this.state
+        if (startDate && endDate) {
+          this.props.onChange({
+            start: startOfDay(startDate),
+            end: endOfDay(endDate),
+          })
+        }
+      })
     }
   }
 
   handleSelectStartDate = date => {
     const { endDate } = this.state
-    const isValidDate = isBefore(date, endDate) || isEqual(date, endDate)
+    const isValidDate =
+      !endDate || isBefore(date, endDate) || isEqual(date, endDate)
     if (isValidDate) {
-      this.setState(
-        { startDateSelected: true, startDate: startOfDay(date) },
-        () => {
-          this.props.onChange({
-            start: startOfDay(date),
-            end: endOfDay(endDate),
-          })
-        }
-      )
+      this.setState({ startDateSelected: true, startDate: startOfDay(date) })
     }
   }
 
   handleSelectEndDate = date => {
     const { startDate } = this.state
-    const isValidDate = isAfter(date, startDate) || isEqual(date, startDate)
+    const isValidDate =
+      !startDate || isAfter(date, startDate) || isEqual(date, startDate)
     if (isValidDate) {
-      this.setState({ endDateSelected: true, endDate: endOfDay(date) }, () => {
-        this.props.onChange({
-          start: startOfDay(startDate),
-          end: endOfDay(date),
-        })
-      })
+      this.setState({ endDateSelected: true, endDate: endOfDay(date) })
     }
   }
 
@@ -100,18 +100,32 @@ class DateRangeInput extends React.PureComponent {
     ) : (
       <IconCalendar />
     )
+    const value =
+      this.formattedStartDate && this.formattedEndDate
+        ? `${this.formattedStartDate} - ${this.formattedEndDate}`
+        : ''
+    const placeholder = `${
+      this.formattedStartDate ? this.formattedStartDate : DATE_PLACEHOLDER
+    } - ${
+      this.formattedEndDate
+        ? this.formattedEndDate
+        : this.formattedStartDate
+        ? DATE_PLACEHOLDER
+        : formatDate(new Date(), this.props.format)
+    }`
 
     return (
       <StyledContainer
         ref={el => (this.rootRef = el)}
         onClick={this.handleClick}
       >
         <StyledTextInput
-          value={`${this.formattedStartDate} - ${this.formattedEndDate}`}
+          value={value}
           readOnly
           adornment={icon}
           adornmentPosition="end"
           height={39}
+          placeholder={placeholder}
         />
         {this.state.showPicker && (
           <StyledDatePickersContainer>
@@ -153,7 +167,8 @@ const StyledContainer = styled.div`
 `
 
 const StyledTextInput = styled(TextInput)`
-  width: 13rem;
+  width: 28ch;
+  ${font({ monospace: true })};
 `
 
 const StyledDatePickersContainer = styled.div`

diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js
@@ -6,7 +6,6 @@ import {
   format,
   isWithinInterval,
   startOfDay,
-  subDays,
 } from 'date-fns'
 import {
   Button,
@@ -31,8 +30,6 @@ const TRANSFER_TYPES = [
 const TRANSFERS_PER_PAGE = 10
 const TRANSFER_TYPES_STRING = TRANSFER_TYPES.map(TransferTypes.convertToString)
 
-const DEFAULT_DAYS_SELECTED = 90
-
 const formatDate = date => format(date, 'dd/MM/yy')
 
 const reduceTokenDetails = (details, { address, decimals, symbol }) => {
@@ -45,8 +42,8 @@ const reduceTokenDetails = (details, { address, decimals, symbol }) => {
 
 const initialState = {
   selectedDateRange: {
-    start: subDays(new Date(), DEFAULT_DAYS_SELECTED),
-    end: new Date(),
+    start: null,
+    end: null,
   },
   selectedToken: 0,
   selectedTransferType: 0,
@@ -75,9 +72,10 @@ class Transfers extends React.PureComponent {
     })
   }
   handleResetFilters = () => {
-    this.setState({
+    this.setState(({ selectedDateRange }) => ({
       ...initialState,
-    })
+      selectedDateRange,
+    }))
   }
   handleDateRangeChange = selectedDateRange => {
     this.setState({ selectedDateRange })
@@ -136,10 +134,11 @@ class Transfers extends React.PureComponent {
     const transferType = TRANSFER_TYPES[selectedTransferType]
     return transactions.filter(
       ({ token, isIncoming, date }) =>
-        isWithinInterval(new Date(date), {
-          start: startOfDay(selectedDateRange.start),
-          end: endOfDay(selectedDateRange.end),
-        }) &&
+        (!selectedDateRange.start || !selectedDateRange.end ||
+          isWithinInterval(new Date(date), {
+            start: startOfDay(selectedDateRange.start),
+            end: endOfDay(selectedDateRange.end),
+          })) &&
         (selectedToken === 0 ||
           addressesEqual(token, tokens[selectedToken - 1].address)) &&
         (transferType === TransferTypes.All ||
@@ -200,9 +199,11 @@ class Transfers extends React.PureComponent {
         {filteredTransfers.length === 0 ? (
           <NoTransfers compactMode={compactMode}>
             <p css="text-align: center">
-              No transfers match your filter and period (
-              {formatDate(selectedDateRange.start)} to{' '}
-              {formatDate(selectedDateRange.end)}) selection.{' '}
+              No transfers match your filter{' '}
+              {selectedDateRange.start &&
+                `and period (${formatDate(
+                  selectedDateRange.start
+                )} to ${formatDate(selectedDateRange.end)}) selection. `}
               {filtersActive && (
                 <a role="button" onClick={this.handleResetFilters}>
                   Clear filters

diff --git a/apps/finance/app/src/components/TransfersFilters.js b/apps/finance/app/src/components/TransfersFilters.js
@@ -131,8 +131,6 @@ const Filters = styled.div`
           width: 100%;
           margin: 0;
           justify-content: space-between;
-          margin-left: 0;
-          margin-right: 0;
 
           /* Easier than passing compactMode to every Filter & FilterLabel */
           ${Filter} {