diff --git a/src/containers/SearchBar/actions.js b/src/containers/SearchBar/actions.js index ba21d8b3e9ebdced625895e31153c4617d3d3715..345cd562f429086189efa77f9e252182c5ba7c12 100644 --- a/src/containers/SearchBar/actions.js +++ b/src/containers/SearchBar/actions.js @@ -1,45 +1,48 @@ import { - SEARCH_TERM_ADDRESS, - SEARCH_TERM_BBL, + UPDATE_SEARCH_TERM, + UPDATE_SEARCH_TYPE, LOAD_BUILDINGS, LOAD_BUILDINGS_SUCCESS, LOAD_BUILDINGS_ERROR, } from './constants'; /** - * Update search term with new address + * Update search term with new term * - * @param {string} address The new search address - * @returns {object} An action object with a type of SEARCH_TERM_ADDRESS - * and the address + * @param {string} term The new search term + * @returns {object} An action object with a type of SEARCH_TERM + * and the term */ -export function searchTermAddress(address) { +export function updateSearchTerm(term) { return { - type: SEARCH_TERM_ADDRESS, - address, + type: UPDATE_SEARCH_TERM, + term, }; } /** - * Update bbl term with new bbl + * Update search type with new type + * type must be called sType to make sure it doesn't overlap + * with the other type parameter * - * @param {string} address The new search bbl - * @returns {object} An action object with a type of SEARCH_TERM_BBL - * and the address + * @param {string} type The new search type + * @returns {object} An action object with a type of SEARCH_TYPE + * and the type as sType */ -export function searchTermBbl(bbl) { +export function updateSearchType(type) { return { - type: SEARCH_TERM_BBL, - bbl, + type: UPDATE_SEARCH_TYPE, + sType: type, }; } /** * Load the list of buildings, this action starts the request saga * - * @param {string} address The address to be searched + * @param {string} filterName The name of the filter with which to search + * @param {string} value The value of the search query * @returns {object} An action object with a type of LOAD_BUILDINGS - * and the address + * and filterName and value */ export function loadBuildings(filterName, value) { return { diff --git a/src/containers/SearchBar/constants.js b/src/containers/SearchBar/constants.js index 581d918d13773d2e97b130cd8555b5bb4d7a9904..6da79e8249359e0d471254b9ec3d93002bbca5f6 100644 --- a/src/containers/SearchBar/constants.js +++ b/src/containers/SearchBar/constants.js @@ -1,6 +1,6 @@ export const FETCH_BUILDINGS = 'FETCH_BUILDINGS'; -export const SEARCH_TERM_ADDRESS = 'SEARCH_TERM_ADDRESS'; -export const SEARCH_TERM_BBL = 'SEARCH_TERM_BBL'; +export const UPDATE_SEARCH_TERM = 'UPDATE_SEARCH_TERM'; +export const UPDATE_SEARCH_TYPE = 'UPDATE_SEARCH_TYPE'; export const LOAD_BUILDINGS = 'LOAD_BUILDINGS'; export const LOAD_BUILDINGS_SUCCESS = 'LOAD_BUILDINGS_SUCCESS'; export const LOAD_BUILDINGS_ERROR = 'LOAD_BUILDINGS_ERROR'; diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index a2a1dda8d4afc8cb6288eca009ea1b495b4504e2..2bbeedfddce8a54b40d7775ef30cb030667cf661 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -2,60 +2,116 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { searchTermAddress, searchTermBbl, loadBuildings } from './actions'; +import { updateSearchTerm, updateSearchType, loadBuildings } from './actions'; import './styles.css'; -import { SearchSVG } from '../../components/bpl'; +import { SearchSVG, CaretSVG } from '../../components/bpl'; import loadingRing from './ring.svg'; +const SEARCH_TYPE_LIST = [{ actual: 'address', display: 'address' }, + { actual: 'bbl', display: 'bbl' }, + { actual: 'building_id', display: 'building id' }, + { actual: 'lot_id', display: 'lot id' }]; + class BuildingList extends Component { constructor(props) { super(props); this.state = { - term: { - address: this.props.buildingList.term.address, - bbl: this.props.buildingList.term.bbl, - }, + type: this.props.buildingList.type, + term: this.props.buildingList.term, }; } componentDidMount() { - this.getBuildingsByAddress(); + this.getBuildings(); } onInputChange = (event) => { this.setState({ - term: { - ...this.state.term, - [event.target.name]: event.target.value, - }, + term: event.target.value, }); } - onAddressFormSubmit = (event) => { + onFormSubmit = (event) => { event.preventDefault(); - this.getBuildingsByAddress(); + this.getBuildings(); } - onBblFormSubmit = (event) => { - event.preventDefault(); - this.getBuildingsByBbl(); + getBuildings = () => { + this.props.updateSearchTerm(this.state.term); + this.props.updateSearchType(this.state.type); + // Input the actual search type parameter here + const actualType = this.getTypeActualFromDisplay(this.state.type); + this.props.loadBuildings(actualType, this.state.term); } - getBuildingsByAddress = () => { - this.props.searchTermAddress(this.state.term.address); - this.props.loadBuildings('address', this.state.term.address); + getTypeActualFromDisplay = (display) => { + const actual = SEARCH_TYPE_LIST.reduce((acc, val) => { + if (!acc) { + if (val.display === display) { + return val.actual; + } + } + return acc; + }, ''); + return actual; } - getBuildingsByBbl = () => { - this.props.searchTermBbl(this.state.term.bbl); - this.props.loadBuildings('bbl', this.state.term.bbl); + generateTypeList = () => { + const html = SEARCH_TYPE_LIST.map((val) => { + /* TODO: Remove tag and make it a - - -
-
-
bbl
+ +
{this.state.type}
@@ -106,25 +149,23 @@ class BuildingList extends Component { BuildingList.propTypes = { buildingList: PropTypes.shape({ - term: PropTypes.shape({ - address: PropTypes.string, - bbl: PropTypes.string, - }), + type: PropTypes.string, + term: PropTypes.string, loading: PropTypes.bool, error: React.PropTypes.oneOfType([ PropTypes.instanceOf(Error), PropTypes.bool, ]), }), - searchTermAddress: PropTypes.func, - searchTermBbl: PropTypes.func, + updateSearchTerm: PropTypes.func, + updateSearchType: PropTypes.func, loadBuildings: PropTypes.func, }; function mapDispatchToProps(dispatch) { return bindActionCreators({ - searchTermAddress, - searchTermBbl, + updateSearchTerm, + updateSearchType, loadBuildings, }, dispatch); } diff --git a/src/containers/SearchBar/reducer.js b/src/containers/SearchBar/reducer.js index 390e3b19f71bdb38ec8009c9a4d1e4867dde7852..e93255d8c752fd7905afa643ea874d3a77582ca4 100644 --- a/src/containers/SearchBar/reducer.js +++ b/src/containers/SearchBar/reducer.js @@ -1,16 +1,14 @@ import { - SEARCH_TERM_ADDRESS, - SEARCH_TERM_BBL, + UPDATE_SEARCH_TERM, + UPDATE_SEARCH_TYPE, LOAD_BUILDINGS, LOAD_BUILDINGS_SUCCESS, LOAD_BUILDINGS_ERROR, } from './constants'; const initState = { - term: { - address: '', - bbl: '', - }, + type: 'address', + term: '', buildings: [], loading: false, error: false, @@ -18,21 +16,15 @@ const initState = { export default function (state = initState, action) { switch (action.type) { - case SEARCH_TERM_ADDRESS: + case UPDATE_SEARCH_TERM: return { ...state, - term: { - ...state.term, - address: action.address, - }, + term: action.term, }; - case SEARCH_TERM_BBL: + case UPDATE_SEARCH_TYPE: return { ...state, - term: { - ...state.term, - bbl: action.bbl, - }, + type: action.sType, }; case LOAD_BUILDINGS: return { diff --git a/src/screens/HomePage/index.js b/src/screens/HomePage/index.js index 069a5df14dbb4014b4e2865bef20484f225c1515..86c716f6258762a83b28ecaba418c623a1e8e8f6 100644 --- a/src/screens/HomePage/index.js +++ b/src/screens/HomePage/index.js @@ -35,10 +35,8 @@ HomePage.propTypes = { zipcode: PropTypes.number, }), ), - term: PropTypes.shape({ - address: PropTypes.string, - bbl: PropTypes.string, - }), + term: PropTypes.string, + type: PropTypes.string, loading: PropTypes.bool, error: PropTypes.oneOfType([ PropTypes.instanceOf(Error),