From f94e36607dca70e9e9de60a85f6417fc76147f70 Mon Sep 17 00:00:00 2001 From: Conrad S Date: Tue, 14 Feb 2017 13:00:53 -0500 Subject: [PATCH 1/7] Remove bbl search, add generic search with dropdown --- src/containers/SearchBar/actions.js | 34 ++++---- src/containers/SearchBar/constants.js | 4 +- src/containers/SearchBar/index.js | 113 +++++++++++++++----------- src/containers/SearchBar/reducer.js | 24 ++---- src/screens/HomePage/index.js | 6 +- 5 files changed, 95 insertions(+), 86 deletions(-) diff --git a/src/containers/SearchBar/actions.js b/src/containers/SearchBar/actions.js index ba21d8b3..6648ea58 100644 --- a/src/containers/SearchBar/actions.js +++ b/src/containers/SearchBar/actions.js @@ -1,36 +1,38 @@ import { - SEARCH_TERM_ADDRESS, - SEARCH_TERM_BBL, + SEARCH_TERM, + 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} address The new search term + * @returns {object} An action object with a type of SEARCH_TERM + * and the term */ -export function searchTermAddress(address) { +export function searchTerm(term) { return { - type: SEARCH_TERM_ADDRESS, - address, + type: 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} address The new search type + * @returns {object} An action object with a type of SEARCH_TYPE + * and the searchType */ -export function searchTermBbl(bbl) { +export function searchType(type) { return { - type: SEARCH_TERM_BBL, - bbl, + type: SEARCH_TYPE, + sType: type, }; } diff --git a/src/containers/SearchBar/constants.js b/src/containers/SearchBar/constants.js index 581d918d..7bcc2c71 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 SEARCH_TERM = 'SEARCH_TERM'; +export const SEARCH_TYPE = '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 a2a1dda8..9c028ba9 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -2,9 +2,9 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { searchTermAddress, searchTermBbl, loadBuildings } from './actions'; +import { searchTerm, searchType, loadBuildings } from './actions'; import './styles.css'; -import { SearchSVG } from '../../components/bpl'; +import { SearchSVG, CaretSVG } from '../../components/bpl'; import loadingRing from './ring.svg'; class BuildingList extends Component { @@ -12,50 +12,82 @@ class BuildingList extends Component { 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.searchTerm(this.state.term); + this.props.searchType(this.state.type); + this.props.loadBuildings(this.state.type, this.state.term); } - getBuildingsByAddress = () => { - this.props.searchTermAddress(this.state.term.address); - this.props.loadBuildings('address', this.state.term.address); + updateSearchSelection = (event) => { + // Getting the innerHTML of the tag + let selection = event.target.innerHTML; + // Need to handle if they click the or the
  • + if (event.target.tagName === 'LI') { + selection = event.target.childNodes[0].innerHTML; + } + this.setState({ + type: selection, + }); } - getBuildingsByBbl = () => { - this.props.searchTermBbl(this.state.term.bbl); - this.props.loadBuildings('bbl', this.state.term.bbl); + isSelected = (selection) => { + if (selection === this.state.type) { + return 'selected'; + } + return ''; } render() { const loading = this.props.buildingList.loading; return (
    +
    +
    +
    -
    -
    -
    bbl
    + +
    {this.state.type}
    @@ -106,25 +125,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, + searchTerm: PropTypes.func, + searchType: PropTypes.func, loadBuildings: PropTypes.func, }; function mapDispatchToProps(dispatch) { return bindActionCreators({ - searchTermAddress, - searchTermBbl, + searchTerm, + searchType, loadBuildings, }, dispatch); } diff --git a/src/containers/SearchBar/reducer.js b/src/containers/SearchBar/reducer.js index 390e3b19..a7c98a28 100644 --- a/src/containers/SearchBar/reducer.js +++ b/src/containers/SearchBar/reducer.js @@ -1,16 +1,14 @@ import { - SEARCH_TERM_ADDRESS, - SEARCH_TERM_BBL, + SEARCH_TERM, + 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 SEARCH_TERM: return { ...state, - term: { - ...state.term, - address: action.address, - }, + term: action.term, }; - case SEARCH_TERM_BBL: + case 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 069a5df1..86c716f6 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), -- GitLab From a1225d4b27a854eb500f24fa51f9eb1e7f20ebfd Mon Sep 17 00:00:00 2001 From: Conrad S Date: Tue, 14 Feb 2017 16:08:08 -0500 Subject: [PATCH 2/7] Update comments to remove reference to address --- src/containers/SearchBar/actions.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/containers/SearchBar/actions.js b/src/containers/SearchBar/actions.js index 6648ea58..3415e673 100644 --- a/src/containers/SearchBar/actions.js +++ b/src/containers/SearchBar/actions.js @@ -9,7 +9,7 @@ import { /** * Update search term with new term * - * @param {string} address The new search term + * @param {string} term The new search term * @returns {object} An action object with a type of SEARCH_TERM * and the term */ @@ -25,9 +25,9 @@ export function searchTerm(term) { * type must be called sType to make sure it doesn't overlap * with the other type parameter * - * @param {string} address The new search type + * @param {string} type The new search type * @returns {object} An action object with a type of SEARCH_TYPE - * and the searchType + * and the type as sType */ export function searchType(type) { return { @@ -39,9 +39,10 @@ export function searchType(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 { -- GitLab From ca1e7bfc18683c6603ad5bdd379035fb0434b1e2 Mon Sep 17 00:00:00 2001 From: Conrad S Date: Wed, 15 Feb 2017 15:13:29 -0500 Subject: [PATCH 3/7] First changes for PR review --- src/containers/SearchBar/constants.js | 4 ++ src/containers/SearchBar/index.js | 59 +++++++++++++++++++-------- 2 files changed, 46 insertions(+), 17 deletions(-) diff --git a/src/containers/SearchBar/constants.js b/src/containers/SearchBar/constants.js index 7bcc2c71..4005a3c7 100644 --- a/src/containers/SearchBar/constants.js +++ b/src/containers/SearchBar/constants.js @@ -4,3 +4,7 @@ export const SEARCH_TYPE = 'SEARCH_TYPE'; export const LOAD_BUILDINGS = 'LOAD_BUILDINGS'; export const LOAD_BUILDINGS_SUCCESS = 'LOAD_BUILDINGS_SUCCESS'; export const LOAD_BUILDINGS_ERROR = 'LOAD_BUILDINGS_ERROR'; +export const SEARCH_TYPE_LIST = [{ actual: 'address', display: 'address' }, + { actual: 'bbl', display: 'bbl' }, + { actual: 'building_id', display: 'building id' }, + { actual: 'lot_id', display: 'lot id' }]; diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index 9c028ba9..d58f468b 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -6,6 +6,7 @@ import { searchTerm, searchType, loadBuildings } from './actions'; import './styles.css'; import { SearchSVG, CaretSVG } from '../../components/bpl'; import loadingRing from './ring.svg'; +import { SEARCH_TYPE_LIST } from './constants'; class BuildingList extends Component { constructor(props) { @@ -40,16 +41,35 @@ class BuildingList extends Component { updateSearchSelection = (event) => { // Getting the innerHTML of the
    tag - let selection = event.target.innerHTML; + let displaySelection = event.target.innerHTML; // Need to handle if they click the or the
  • if (event.target.tagName === 'LI') { - selection = event.target.childNodes[0].innerHTML; + displaySelection = event.target.childNodes[0].innerHTML; } + const actualSelection = SEARCH_TYPE_LIST.reduce((acc, val) => { + if (!acc) { + if (val.display === displaySelection) { + return val.actual; + } + } + return acc; + }, ''); this.setState({ - type: selection, + type: actualSelection, }); } + // Get the display version of a type given the actual + // ex: "building_id" --> "building id" + getDisplayFromActual = (actualType) => { + + } + // Get the display version of a type given the actual + // ex: "building id" --> "building_id" + getActualFromDisplay = (actualType) => { + + } + isSelected = (selection) => { if (selection === this.state.type) { return 'selected'; @@ -57,6 +77,23 @@ class BuildingList extends Component { return ''; } + generateTypeList = () => { + const html = SEARCH_TYPE_LIST.reduce((acc, val) => { + /* TODO: Remove tag and make it a instead of -- GitLab From b630b6830cdf91d5b851a6b6a6c9182ae0952cc4 Mon Sep 17 00:00:00 2001 From: Conrad S Date: Thu, 16 Feb 2017 09:43:57 -0500 Subject: [PATCH 4/7] Add structure in ./constants to allow display values for search types --- src/containers/SearchBar/index.js | 69 ++++++++++++++----------------- 1 file changed, 32 insertions(+), 37 deletions(-) diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index d58f468b..c737ac41 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -36,38 +36,38 @@ class BuildingList extends Component { getBuildings = () => { this.props.searchTerm(this.state.term); this.props.searchType(this.state.type); - this.props.loadBuildings(this.state.type, this.state.term); + // Input the actual search type parameter here + const actualType = this.getTypeActualFromDisplay(this.state.type); + this.props.loadBuildings(actualType, this.state.term); } - updateSearchSelection = (event) => { - // Getting the innerHTML of the tag - let displaySelection = event.target.innerHTML; - // Need to handle if they click the or the
  • - if (event.target.tagName === 'LI') { - displaySelection = event.target.childNodes[0].innerHTML; - } - const actualSelection = SEARCH_TYPE_LIST.reduce((acc, val) => { + getTypeActualFromDisplay = (display) => { + const actual = SEARCH_TYPE_LIST.reduce((acc, val) => { if (!acc) { - if (val.display === displaySelection) { + if (val.display === display) { return val.actual; } } return acc; }, ''); - this.setState({ - type: actualSelection, - }); - } - - // Get the display version of a type given the actual - // ex: "building_id" --> "building id" - getDisplayFromActual = (actualType) => { - + return actual; } - // Get the display version of a type given the actual - // ex: "building id" --> "building_id" - getActualFromDisplay = (actualType) => { + generateTypeList = () => { + const html = SEARCH_TYPE_LIST.map((val) => { + /* TODO: Remove tag and make it a instead of