Skip to content
Permalink
Browse files

feat(channels): add ability to change sort direction

  • Loading branch information...
korhaliv authored and mrfelton committed Apr 20, 2019
1 parent 782c1b2 commit e917da32f41fc8c4661622eb81eb810454fae222
@@ -35,6 +35,8 @@ class Channels extends React.Component {
setSelectedChannel: PropTypes.func.isRequired,
sort: PropTypes.string.isRequired,
sorters: PropTypes.array.isRequired,
sortOrder: PropTypes.string.isRequired,
switchSortOrder: PropTypes.func.isRequired,
updateChannelSearchQuery: PropTypes.func.isRequired,
}

@@ -66,6 +68,8 @@ class Channels extends React.Component {
updateChannelSearchQuery,
searchQuery,
changeSort,
sortOrder,
switchSortOrder,
...rest
} = this.props

@@ -86,6 +90,8 @@ class Channels extends React.Component {
setChannelViewMode={setChannelViewMode}
sort={sort}
sorters={sorters}
sortOrder={sortOrder}
switchSortOrder={switchSortOrder}
updateChannelSearchQuery={this.updateChannelSearchQuery}
/>
</Panel.Header>
@@ -8,6 +8,8 @@ import ChannelSort from './ChannelSort'
import ChannelSearch from './ChannelSearch'
import ChannelsRefresh from './ChannelsRefresh'
import ChannelsViewSwitcher from './ChannelsViewSwitcher'
import ChannelSortDirectionButton from './ChannelSortDirectionButton'

import messages from './messages'

const ChannelsActions = ({
@@ -16,10 +18,12 @@ const ChannelsActions = ({
filters,
sort,
sorters,
sortOrder,
searchQuery,
channelViewMode,
changeFilter,
changeSort,
switchSortOrder,
updateChannelSearchQuery,
setChannelViewMode,
openModal,
@@ -39,14 +43,13 @@ const ChannelsActions = ({
filter={filter}
filters={filters}
mr={1}
width={2.5 / 16}
width={2.6 / 16}
/>

<ChannelSort changeSort={changeSort} mr={1} sort={sort} sorters={sorters} width={2.5 / 16} />

<ChannelSort changeSort={changeSort} mr={1} sort={sort} sorters={sorters} width={2.6 / 16} />
<ChannelSortDirectionButton isAsc={sortOrder === 'asc'} onClick={switchSortOrder} />
<ChannelsViewSwitcher
channelViewMode={channelViewMode}
ml={3}
setChannelViewMode={setChannelViewMode}
/>
<ChannelsRefresh bg="blue" ml={2} onClick={fetchChannels} />
@@ -70,6 +73,8 @@ ChannelsActions.propTypes = {
setChannelViewMode: PropTypes.func.isRequired,
sort: PropTypes.string.isRequired,
sorters: PropTypes.array.isRequired,
sortOrder: PropTypes.string.isRequired,
switchSortOrder: PropTypes.func.isRequired,
updateChannelSearchQuery: PropTypes.func.isRequired,
}

@@ -19,6 +19,8 @@ const ChannelsHeader = ({
setChannelViewMode,
searchQuery,
openModal,
sortOrder,
switchSortOrder,
...rest
}) => (
<Box as="header" mb={3} {...rest}>
@@ -35,6 +37,8 @@ const ChannelsHeader = ({
setChannelViewMode={setChannelViewMode}
sort={sort}
sorters={sorters}
sortOrder={sortOrder}
switchSortOrder={switchSortOrder}
updateChannelSearchQuery={updateChannelSearchQuery}
/>
</Box>
@@ -54,6 +58,8 @@ ChannelsHeader.propTypes = {
setChannelViewMode: PropTypes.func.isRequired,
sort: PropTypes.string.isRequired,
sorters: PropTypes.array.isRequired,
sortOrder: PropTypes.string.isRequired,
switchSortOrder: PropTypes.func.isRequired,
updateChannelSearchQuery: PropTypes.func.isRequired,
}

@@ -9,6 +9,7 @@ import {
showCloseChannelDialog,
setSelectedChannel,
setChannelViewMode,
switchSortOrder,
updateChannelSearchQuery,
} from 'reducers/channels'
import { infoSelectors } from 'reducers/info'
@@ -24,6 +25,7 @@ const mapStateToProps = state => ({
filters: state.channels.filters,
sort: state.channels.sort,
sorters: state.channels.sorters,
sortOrder: state.channels.sortOrder,
networkInfo: infoSelectors.networkInfo(state),
searchQuery: state.channels.searchQuery,
selectedChannel: channelsSelectors.selectedChannel(state),
@@ -36,6 +38,7 @@ const mapDispatchToProps = {
setSelectedChannel,
setChannelViewMode,
openModal,
switchSortOrder,
updateChannelSearchQuery,
fetchChannels,
}
@@ -2,7 +2,6 @@ import { createSelector } from 'reselect'
import throttle from 'lodash.throttle'
import { proxyValue } from 'comlinkjs'
import orderBy from 'lodash.orderby'
import { send } from 'redux-electron-ipc'
import { requestSuggestedNodes } from '@zap/utils/api'
import { grpcService } from 'workers'
import config from 'config'
@@ -21,6 +20,7 @@ export const SET_SELECTED_CHANNEL = 'SET_SELECTED_CHANNEL'
export const CHANGE_CHANNEL_FILTER = 'CHANGE_CHANNEL_FILTER'

export const CHANGE_CHANNEL_SORT = 'CHANGE_CHANNEL_SORT'
export const CHANGE_CHANNEL_SORT_ORDER = 'CHANGE_CHANNEL_SORT_ORDER'

export const UPDATE_SEARCH_QUERY = 'UPDATE_SEARCH_QUERY'

@@ -209,13 +209,38 @@ export function changeFilter(filter) {
filter,
}
}

export function changeSort(sort) {
return {
type: CHANGE_CHANNEL_SORT,
sort,
}
}

/**
*
*
* @export
* @param {string} sortOrder asc or desc
* @returns action
*/
export function changeSortOrder(sortOrder) {
return {
type: CHANGE_CHANNEL_SORT_ORDER,
sortOrder,
}
}

/**
* Switches between sort modes (asc<->desc)
*/
export function switchSortOrder() {
return (dispatch, getState) => {
const sortOrder = channelSortOrderSelector(getState())
return dispatch(changeSortOrder(sortOrder === 'asc' ? 'desc' : 'asc'))
}
}

export function getChannels() {
return {
type: GET_CHANNELS,
@@ -533,6 +558,10 @@ const ACTION_HANDLERS = {
...state,
sort,
}),
[CHANGE_CHANNEL_SORT_ORDER]: (state, { sortOrder }) => ({
...state,
sortOrder,
}),

[ADD_LOADING_PUBKEY]: (state, { data }) => ({
...state,
@@ -593,6 +622,7 @@ const totalLimboBalanceSelector = state => state.channels.pendingChannels.total_
const closingChannelIdsSelector = state => state.channels.closingChannelIds
const channelSearchQuerySelector = state => state.channels.searchQuery
const channelSortSelector = state => state.channels.sort
const channelSortOrderSelector = state => state.channels.sortOrder
const filterSelector = state => state.channels.filter
const nodesSelector = state => state.network.nodes
const viewModeSelector = state => state.channels.viewMode
@@ -796,9 +826,9 @@ channelsSelectors.allChannelsRaw = createSelector(
}
)

const applyChannelSort = (channels, sort) => {
const applyChannelSort = (channels, sort, sortOrder) => {
const SORTERS = {
[OPEN_DATE]: () => {},
[OPEN_DATE]: c => c.index,
[REMOTE_BALANCE]: c => c.remote_balance || 0,
[LOCAL_BALANCE]: c => c.local_balance || 0,
[ACTIVITY]: c => c.activity,
@@ -808,7 +838,12 @@ const applyChannelSort = (channels, sort) => {
const sorter = SORTERS[sort]

const result = sorter
? orderBy(channels, [c => Boolean(c.active), sorter], ['desc', 'asc'])
? orderBy(
// add indices to be able to provide reverse initial sorting (which corresponds to sorting by date)
channels.map((c, index) => ({ ...c, index })),
[c => Boolean(c.active), sorter],
['desc', sortOrder]
)
: channels
return result
}
@@ -823,6 +858,7 @@ channelsSelectors.currentChannels = createSelector(
filterSelector,
channelSearchQuerySelector,
channelSortSelector,
channelSortOrderSelector,
(
allChannelsArr,
activeChannelsArr,
@@ -832,7 +868,8 @@ channelsSelectors.currentChannels = createSelector(
nonActiveChannelsArr,
channelFilter,
searchQuery,
sort
sort,
sortOrder
) => {
// Helper function to deliver correct channel array based on filter
const filteredArray = filterKey => {
@@ -856,7 +893,7 @@ channelsSelectors.currentChannels = createSelector(
const filterChannel = channel => channelMatchesQuery(channel, searchQuery)

const result = filteredArray(channelFilter).filter(filterChannel)
return applyChannelSort(result, sort)
return applyChannelSort(result, sort, sortOrder)
}
)

@@ -902,7 +939,7 @@ const initialState = {
{ key: 'OPEN_PENDING_CHANNELS', name: 'Pending' },
{ key: 'CLOSING_PENDING_CHANNELS', name: 'Closing' },
],

sortOrder: 'asc',
sort: 'OPEN_DATE',
sorters: [
{ key: OPEN_DATE, name: 'Open date' },

0 comments on commit e917da3

Please sign in to comment.
You can’t perform that action at this time.