FILTER FUN

const FILTERS = {
    'campaignStatuses': {
        activeValue: 'expired',
        filterValues: [
            {
                displayName: 'All',
                ['<filterName or filterValue>']: 'all'
            },
            {
                displayName: 'Drafts',
                ['<filterName or filterValue>']: 'drafts'
            },
            // ...
        ],
        filterType: 'CAMPAIGN_STATUS_FILTER',
        handleChange: handleCampaignStatusFilterChange // expects handleCampaignStatusFilterChange(filterType, filterName)
    },
    'campaignTypes': {
        activeValue: 'dynamic',
        filterValues: [
            {
                displayName: 'All',
                ['<filterName or filterValue>']: 'all'
            },
            {
                displayName: 'Relative',
                ['<filterName or filterValue>']: 'relative'
            }
        ],
        filterType: 'CAMPAIGN_STATUS_FILTER',
        handleChange: handleCampaignTypeFilterChange
    },
    'campaignSorts': {
        activeValue: 'publishTimeAscending',
        filterValues: [
            {
                displayName: 'Create Time - Ascending',
                ['<filterName or filterValue>']: 'createTimeAscending'
            },
            {
                displayName: 'Create Time - Descending',
                ['<filterName or filterValue>']: 'createTimeDescending'
            },
        ],
        filterType: 'CAMPAIGN_STATUS_FILTER',
        handleChange: handleCampaignSortFilterChange
    }
}

export const CampaignFilterBar = props =>
    <div className="campaign-filter-bar row">
        <span className="campaign-filter-bar__filter-list-text">{FILTER_LIST_TEXT}:</span>
        {props.campaignTypes.filterValues &&
            <ul className="campaign-filter-bar__campaign-type-list">
                {props.campaignTypes.filterValues.map((campaignType, i) =>
                    <li className="campaign-filter-bar__list-item" key={i}>
                    <input id={`campaign-type-input-${i}`} type="radio" 
                    onChange={() => props.campaignTypes.handleChange(campaignType.filterName, props.campaignTypes.filterType)}/>
                    <label className="campaign-filter-bar__radio-label" htmlFor={`campaign-type-input-${i}`} 
                        checked={campaignType.filterName === props.campaignTypes.activeValue}>{campaignType.displayName}</label>
                    </li>)
                }
            </ul>
        }