Redux — How can I make this filter functionality better?

1

Hey guys, I’m trying to make this a bit easier to read and not sure if I am properly fitting this filter functionality in the state of redux, can anyone help me out?

I’ll try to just post the code relevant to this refactor if you don’t want to view the repo above:

./redux/actionTypes.js

export const SET_STATUS_FILTER = 'SET_STATUS_FILTER'

./redux/actions.js

export const setStatusFilter = filter => ({
  type: SET_STATUS_FILTER,
  payload: { filter },
})

// Filters
export const STATUS_FILTERS = {
  ALL: 'All',
  ACTIVE: 'Active',
  INACTIVE: 'Inactive',
}

./redux/reducers/visibilityFilter.js

import { SET_STATUS_FILTER } from '../actionTypes'
import { STATUS_FILTERS } from '../actions'

const initialState = STATUS_FILTERS.ALL

const statusFilter = (state = initialState, action) => {
  switch (action.type) {
      case SET_STATUS_FILTER: {
      return action.payload.filter
    }
    default: {
      return state
    }
  }
}

export default statusFilter

./redux/selectors.js

import { STATUS_FILTERS } from '../redux/actions'

// Filter employee state
export const getEmployeesState = store => store.employees

export const getEmployeeList = store =>
  getEmployeesState(store) ? getEmployeesState(store).employees : []

export const getEmployeesByVisibilityFilter = (store, statusFilter) => {
  const allEmployees = getEmployeeList(store)
  switch (statusFilter) {
    case STATUS_FILTERS.ACTIVE:
      return allEmployees.filter(employee => employee.isActive)
    case STATUS_FILTERS.INACTIVE:
      return allEmployees.filter(employee => !employee.isActive)
    case STATUS_FILTERS.ALL:
    default:
      return allEmployees
  }
}

./components/filterEmployee/FilterEmployees.js

import React from 'react'
import { connect } from 'react-redux'
import { setStatusFilter } from '../../redux/actions'
import { STATUS_FILTERS } from '../../redux/actions'

// Styles
import '../../styles/index.css'

const FilterEmployees = ({ currentFilter, setStatusFilter }) => {
  // console.log('VIS FILTERS', VISIBILITY_FILTERS)
  // console.log('VIS FILTERS OBJ KEYS', Object.keys(VISIBILITY_FILTERS))

  return (
    <div className='filters'>
      {Object.keys(STATUS_FILTERS).map(filterKey => {
        const filterStatus = STATUS_FILTERS[filterKey]
        
        return (
          <button
            key={filterStatus}
            className={
              currentFilter === filterStatus ?
              'active' :
              'non-active'
            }
            onClick={() => {
              setStatusFilter(filterStatus)
            }}>
            {filterStatus}
          </button>
        )
      })}
    </div>
  )
}

const mapStateToProps = state => {
  return { currentFilter: state.statusFilter }
}

export default connect(
  mapStateToProps,
  { setStatusFilter }
)(FilterEmployees)