Transaction_Filter.js

import React from 'react'
import {
  View,
  StyleSheet,
} from 'react-native'
import { connect } from 'react-redux'
import { NavigationScreenProp } from 'react-navigation'
import Colors from '../../common/Colors'
import Header from '../../common/Header'
import Transactions from './Transactions'
import {
  selectGroups,
  selectFilters,
} from '../../store/selectors/transactions'
import SearchForm from '../../common/SearchForm'
import {
  loadPOSOrders,
  groupTransactions,
  filterTransactions,
} from '../../store/actions/transactionActions'
import FilterDropdown from '../../components/Transactions/FilterDropdown'


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.white,
  },
  filterDropdown: {
    right: 55,
  },
  groupDropdown: {
    right: 10,
  },
})

type Props = {
  navigation?: NavigationScreenProp,
  loadPOSOrders: () => void,
  filterTransactions: () => void,
  groupTransactions: () => void,
  selectedFilters: [string],
  selectedGroups: [string],
}

type State = {
  displayFilterDropdown: boolean,
  displayGroupDropdown: boolean,
}

class TransactionScreen extends React.Component<Props, State> {
  constructor(props) {
    super(props)
    this.state = {
      displayFilterDropdown: false,
      displayGroupDropdown: false,
    }
    this.toggleFilterDropdown = () => {
      this.setState({
        displayFilterDropdown: !this.state.displayFilterDropdown,
      })
    }
    this.toggleGroupDropdown = () => {
      this.setState({
        displayGroupDropdown: !this.state.displayGroupDropdown,
      })
    }
    this.props.loadPOSOrders()
  }

  render() {
    return (
      <View style={styles.container}>
        <Header
          title="Transactions"
          hasMenuButton
          actions={[{
            title: 'Filter',
            show: 'always',
            iconName: 'filter-list',
            onPress: this.toggleFilterDropdown,
            iconColor: this.props.selectedFilters.length > 0 ? Colors.kiuRed : Colors.black,
          }, {
            title: 'Group',
            show: 'always',
            iconName: 'folder-open',
            onPress: this.toggleGroupDropdown,
            iconColor: this.props.selectedGroups.length > 0 ? Colors.kiuRed : Colors.black,
          }]}
        />
        <SearchForm placeholder="Search transations" />
        <Transactions />
        {this.state.displayFilterDropdown && (
          <FilterDropdown
            style={styles.filterDropdown}
            onRequestClose={this.toggleFilterDropdown}
            onLinePressed={this.props.filterTransactions}
            options={[{
              key: 'draft',
              value: 'New',
            }, {
              key: 'done',
              value: 'Done',
            }, {
              key: 'invoiced',
              value: 'Invoiced',
            }, {
              key: 'posted',
              value: 'Posted',
            }]}
            selectedItems={this.props.selectedFilters}
          />
        )}
        {this.state.displayGroupDropdown && (
          <FilterDropdown
            style={styles.groupDropdown}
            onRequestClose={this.toggleGroupDropdown}
            onLinePressed={this.props.groupTransactions}
            options={[{
              key: 'partner_id',
              value: 'Customer',
            }, {
              key: 'user_id',
              value: 'Salesman',
            }, {
              key: 'session_id',
              value: 'Session',
            }, {
              key: 'state',
              value: 'Status',
            }, {
              key: 'date_order',
              value: 'Order Month',
            }]}
            selectedItems={this.props.selectedGroups}
          />
        )}
      </View>
    )
  }
}

const mapStateToProps = state => ({
  selectedGroups: selectGroups(state),
  selectedFilters: selectFilters(state),
})

function mapDispatchToProps(dispatch) {
  return {
    loadPOSOrders: () => dispatch(loadPOSOrders()),
    filterTransactions: key => dispatch(filterTransactions(key)),
    groupTransactions: key => dispatch(groupTransactions(key)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TransactionScreen)