Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finance: date filters remove default selection #819

Merged
merged 8 commits into from
Apr 23, 2019
Merged

Finance: date filters remove default selection #819

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6db7231
TransferFilters: remove duplicate margin rules
AquiGorka Apr 22, 2019
180b1f8
DatePicker: update today border color
AquiGorka Apr 22, 2019
b4ce388
DateRangePicker: update to allow null values on dates
AquiGorka Apr 22, 2019
b1caf4e
Transfers: refactor to no default date selection
AquiGorka Apr 22, 2019
8370001
DateRangeInput: fix font family declaration
bpierre Apr 23, 2019
e62b73d
Transfers: recover non-breaking space
AquiGorka Apr 23, 2019
fd11289
DateRangeInput: improve placeholder logic and add input placeholder f…
AquiGorka Apr 23, 2019
96b2340
DateRangeInput: improve on placeholder for accesibility
AquiGorka Apr 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/finance/app/src/components/DateRange/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ const DayView = styled.li`
${props =>
props.today &&
css`
border: 1px solid ${theme.disabled};
border: 1px solid ${mainColor};
`}

${props =>
Expand Down
53 changes: 29 additions & 24 deletions apps/finance/app/src/components/DateRange/DateRangeInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ 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'
Expand All @@ -29,13 +29,20 @@ class DateRangeInput extends React.PureComponent {
get formattedStartDate() {
const { startDate } = this.state

return isDate(startDate) ? formatDate(startDate, this.props.format) : ''
return isDate(startDate)
? formatDate(startDate, this.props.format)
: '--/--/----'
}

get formattedEndDate() {
const { endDate } = this.state

return isDate(endDate) ? formatDate(endDate, this.props.format) : ''
const { endDate, startDate } = this.state
const { format } = this.props

return isDate(endDate)
? formatDate(endDate, format)
: startDate
? '--/--/----'
AquiGorka marked this conversation as resolved.
Show resolved Hide resolved
: formatDate(new Date(), format)
}

componentWillUnmount() {
Expand All @@ -59,36 +66,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) })
}
}

Expand Down Expand Up @@ -153,7 +157,8 @@ const StyledContainer = styled.div`
`

const StyledTextInput = styled(TextInput)`
width: 13rem;
width: 28ch;
fontfamily: ${font({ monospace: true })};
AquiGorka marked this conversation as resolved.
Show resolved Hide resolved
`

const StyledDatePickersContainer = styled.div`
Expand Down
31 changes: 16 additions & 15 deletions apps/finance/app/src/components/Transfers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
format,
isWithinInterval,
startOfDay,
subDays,
} from 'date-fns'
import {
Button,
Expand All @@ -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 }) => {
Expand All @@ -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,
Expand Down Expand Up @@ -75,9 +72,10 @@ class Transfers extends React.PureComponent {
})
}
handleResetFilters = () => {
this.setState({
this.setState(({ selectedDateRange }) => ({
...initialState,
})
selectedDateRange,
}))
}
handleDateRangeChange = selectedDateRange => {
this.setState({ selectedDateRange })
Expand Down Expand Up @@ -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 ||
Expand Down Expand Up @@ -200,12 +199,14 @@ 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
Clear filters
AquiGorka marked this conversation as resolved.
Show resolved Hide resolved
</a>
)}
</p>
Expand Down
2 changes: 0 additions & 2 deletions apps/finance/app/src/components/TransfersFilters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand Down