From d8fa70682bbf0709874d1a81af1873a5d49577aa Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Wed, 18 Mar 2020 17:34:25 -0400 Subject: [PATCH 1/3] Add MapBox building search to dashboard header --- package.json | 1 + src/containers/SearchBar/index.js | 270 ++++++---------------------- src/containers/SearchBar/styles.css | 21 ++- 3 files changed, 74 insertions(+), 218 deletions(-) diff --git a/package.json b/package.json index ec70e9e3..fa67fa9e 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "react-highcharts": "^12.0.0", "react-json-tree": "^0.10.9", "react-leaflet": "^1.4.1", + "react-mapbox-gl-geocoder": "^1.1.0", "react-modal": "^3.8.1", "react-number-format": "^4.2.0", "react-placeholder": "^1.0.6", diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index ee34c163..e15efad7 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -1,9 +1,8 @@ import React, { Component } from 'react'; -import ReactGA from 'react-ga'; import PropTypes from 'prop-types'; +import Geocoder from 'react-mapbox-gl-geocoder'; import { - Nav, NavItem, Form, Input, - Dropdown, DropdownToggle, DropdownMenu, DropdownItem, + Row, Col, Nav, NavItem, } from 'reactstrap'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; @@ -15,51 +14,33 @@ import { import './styles.css'; import { buildingListPropTypes } from './propTypes'; -/* eslint-disable quote-props */ -const SEARCH_TYPE_LIST = { - 'address': 'address', - 'address + zip': 'address', - 'address + borough': 'address', - 'bbl': 'bbl', - 'building id': 'building_id', -}; -const SEARCH_BOROUGH_LIST = { - 'Manhattan': 1, - 'Bronx': 2, - 'Brooklyn': 3, - 'Queens': 4, - 'Staten Island': 5, +const mapAccess = { + mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_TOKEN, }; -const SEARCH_CITY_LIST = { - 'NYC': 1, +const queryParams = { + country: 'us', }; class SearchBar extends Component { constructor(props) { super(props); this.state = { - type: this.props.buildingList.type, - borough: this.props.buildingList.borough, - zipcode: this.props.buildingList.zipcode, - term: this.props.buildingList.term, - city: this.props.buildingList.city, - cityDropdownOpen: false, - searchByDropdownOpen: false, - boroughDropdownOpen: false, + viewport: {}, + addressFound: false, + answer: '', + loadingAddressSearchBtn: false, + disabledAddressSearchBtn: true, + subscribed: false, }; } componentDidMount() { - if (!(this.state.term === '' && this.state.type === 'address')) { - this.getBuildings(this.state); - } else { - // Use the buildings stored in cookies to populate the buildingList - const buildingList = localStorage.activeBuildings; - if (buildingList !== undefined) { - this.props.buildingsSearched(JSON.parse(buildingList)); - } + // Use the buildings stored in cookies to populate the buildingList + const buildingList = localStorage.activeBuildings; + if (buildingList !== undefined) { + this.props.buildingsSearched(JSON.parse(buildingList)); } } @@ -98,26 +79,7 @@ class SearchBar extends Component { } getBuildings = (stateSource) => { - this.props.updateBuildingSearchParams( - stateSource.term, - stateSource.type, - stateSource.borough, - stateSource.zipcode, - stateSource.city, - ); - // Input the actual search type parameter here - const actualType = SEARCH_TYPE_LIST[stateSource.type]; - const args = {}; - args[actualType] = stateSource.term; - ReactGA.event({ category: 'Search', action: 'Request', label: `Address Searched: ${stateSource.term}` }); - ReactGA.event({ category: 'Search Type', action: 'Request', label: `${actualType}` }); - if (stateSource.type === 'address + zip' && stateSource.zipcode) { - args.zip = stateSource.zipcode; - } - if (stateSource.type === 'address + borough' && stateSource.borough) { - args.boro = SEARCH_BOROUGH_LIST[stateSource.borough]; - } - this.props.searchBuildings(args); + this.props.searchBuildings(stateSource); } checkTermLength = () => { @@ -171,176 +133,50 @@ class SearchBar extends Component { return
; } - generateDropdownList = (valuesList, onClickFunction) => { - const html = Object.keys(valuesList).map(display => ( - - {display} - - )); - - return html; - } - - isTypeSelected = (selection) => { - if (selection === this.state.type) { - return 'selected'; - } - return ''; - } - isBoroughSelected = (selection) => { - if (selection === this.state.borough) { - return 'selected'; - } - return ''; - } - isCitySelected = (selection) => { - if (selection === this.state.city) { - return 'selected'; - } - return ''; - } - - 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, - zipcode: '', - borough: '', - term: '', - }); - } - - updateBoroughSelection = (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({ - borough: selection, - }); - } - - updateCitySelection = (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({ - city: selection, - }); - } - - render() { - let searchInputName = this.state.type; - if ( - this.state.type === 'address + zip' || - this.state.type === 'address + borough' - ) { - searchInputName = 'address'; + let addressData = ''; + const { viewport } = this.state; + if (this.state.addressFound === false) { + addressData = ( + + ); + } else { + addressData = ( + + ); } - const boroughDropdown = ( - - { - this.setState({ boroughDropdownOpen: !this.state.boroughDropdownOpen }); - }} - > - - {this.state.borough ? this.state.borough : 'Borough'} - - - {this.generateDropdownList( - SEARCH_BOROUGH_LIST, - this.updateBoroughSelection, - )} - - - + const content = ( +
    + + + {addressData} + + +
    ); - const zipcodeInput = ( - -
    - -
    -     - ); return ( ); diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBar/styles.css index 8dc54417..0ae580e4 100644 --- a/src/containers/SearchBar/styles.css +++ b/src/containers/SearchBar/styles.css @@ -5,7 +5,7 @@ .input-group { width: inherit !important; -} +} .btn.dropdown-toggle:hover { background-color: #E9E4E4 !important; @@ -32,3 +32,22 @@ li.navbar-input { li.navbar-input>form { height: 100%; } + +.addressSearchInput { + width: 500px !important; +} + +.addressDisplay { + height: 35px; + font-size: 14px; + font-weight: bold; + width: 90% !important; + padding: 10px; +} + +.react-geocoder input { + width: 90% !important; + padding: 5px; + margin-top: 5px; + margin-bottom: 5px; +} -- GitLab From c9a59cc3ceb8b6d93b275a76616de8a3c5073ec0 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Wed, 18 Mar 2020 20:51:35 -0400 Subject: [PATCH 2/3] Remove unnecessary code, adjust search input --- package-lock.json | 44 +++++++++++++++- src/containers/SearchBar/index.js | 81 ++--------------------------- src/containers/SearchBar/styles.css | 28 +++++++++- 3 files changed, 72 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index aaa3942e..cac1c10c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "integrity": "sha1-zs/PrXVLTCdl/l0puBswGImtbC4=", "optional": true, "requires": { - "@types/react": "15.6.7" + "@types/react": "*" } }, "abab": { @@ -5008,6 +5008,11 @@ "is-symbol": "^1.0.1" } }, + "es6-promise": { + "version": "4.2.8", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", + "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -6163,6 +6168,11 @@ "assert-plus": "^1.0.0" } }, + "gl-matrix": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.2.1.tgz", + "integrity": "sha512-YYVO8jUSf6+SakL4AJmx9Jc7zAZhkJQ+WhdtX3VQe5PJdCOX6/ybY4x1vk+h94ePnjRn6uml68+QxTAJneUpvA==" + }, "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", @@ -8905,6 +8915,15 @@ "object-visit": "^1.0.0" } }, + "mapbox": { + "version": "1.0.0-beta10", + "resolved": "https://registry.npmjs.org/mapbox/-/mapbox-1.0.0-beta10.tgz", + "integrity": "sha1-A3VhvLlcvcBm0d/34s4dbIU5y44=", + "requires": { + "es6-promise": "^4.0.5", + "rest": "^2.0.0" + } + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -13397,6 +13416,15 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-mapbox-gl-geocoder": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-mapbox-gl-geocoder/-/react-mapbox-gl-geocoder-1.1.0.tgz", + "integrity": "sha512-U8fVUlj7Sb19KOgkKvfr3MPuqiGZ+ldHwwfo4BxBv7cyr397PQ/0o2XiC/Nz4PvN7dbIFHz7JfuVaq/MFZ5oHw==", + "requires": { + "mapbox": "^1.0.0-beta10", + "viewport-mercator-project": "^6.0.0" + } + }, "react-measure": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.0.2.tgz", @@ -14214,6 +14242,11 @@ } } }, + "rest": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/rest/-/rest-2.0.0.tgz", + "integrity": "sha1-bfrfZqQFxJz71bS9JbWf0pzYYbw=" + }, "restore-cursor": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", @@ -16326,6 +16359,15 @@ "extsprintf": "^1.2.0" } }, + "viewport-mercator-project": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/viewport-mercator-project/-/viewport-mercator-project-6.2.3.tgz", + "integrity": "sha512-QQb0/qCLlP4DdfbHHSWVYXpghB2wkLIiiZQnoelOB59mXKQSyZVxjreq1S+gaBJFpcGkWEcyVtre0+2y2DTl/Q==", + "requires": { + "@babel/runtime": "^7.0.0", + "gl-matrix": "^3.0.0" + } + }, "vm-browserify": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index e15efad7..e2748b31 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -29,7 +29,7 @@ class SearchBar extends Component { this.state = { viewport: {}, addressFound: false, - answer: '', + address: '', loadingAddressSearchBtn: false, disabledAddressSearchBtn: true, subscribed: false, @@ -49,90 +49,15 @@ class SearchBar extends Component { this.props.buildingList !== nextProps.buildingList ) { this.setState({ - type: nextProps.buildingList.type, - borough: nextProps.buildingList.borough, - zipcode: nextProps.buildingList.zipcode, - term: nextProps.buildingList.term, - city: nextProps.buildingList.city, + address: nextProps.buildingList.address, }); } } - onTermInputChange = (event) => { - this.setState({ - term: event.target.value, - }); - } - - onZipInputChange = (event) => { - this.setState({ - zipcode: event.target.value, - }); - } - - onFormSubmit = (event) => { - event.preventDefault(); - if (!(this.checkTermLength() || this.checkTermType())) { - this.getBuildings(this.state); - this.props.setNavbar(true); - } - } - getBuildings = (stateSource) => { this.props.searchBuildings(stateSource); } - checkTermLength = () => { - if (this.state.type === 'bbl') return this.state.term.length > 20; - else if (this.state.type === 'building id') return this.state.term.length > 10; - else if (this.state.type === 'lot id') return this.state.term.length > 10; - return false; - } - - checkTermEmpty = () => { - if (this.state.type === 'address + zip') { - if (this.state.zipcode && !this.state.term) { - return true; - } - } - if (this.state.type === 'address + borough') { - if (this.state.borough && !this.state.term) { - return true; - } - } - return false; - } - - checkTermType = () => { - if ( - this.state.type !== 'address' && - this.state.type !== 'address + zip' && - this.state.type !== 'address + borough' - ) { - return isNaN(this.state.term); - } - return false; - } - - showWarning = () => { - let warning = null; - if (this.checkTermLength()) warning = 'is too long'; - if (this.checkTermEmpty()) warning = 'cannot be empty'; - if (this.checkTermType()) warning = 'can only have numbers'; - if (this.checkTermLength() || this.checkTermType() || this.checkTermEmpty()) { - let type = this.state.type; - if (type === 'address + zip' || type === 'address + borough') { - type = 'address'; - } - return ( -
    - {type} {warning} -
    - ); - } - return
    ; - } - render() { let addressData = ''; const { viewport } = this.state; @@ -151,7 +76,7 @@ class SearchBar extends Component { addressData = ( form { } .addressSearchInput { - width: 500px !important; + width: 650px !important; } .addressDisplay { @@ -45,9 +45,33 @@ li.navbar-input>form { padding: 10px; } +.react-geocoder { + position: relative; + /* width: 70% !important; */ +} + .react-geocoder input { - width: 90% !important; + width: 100% !important; padding: 5px; margin-top: 5px; margin-bottom: 5px; } + +.react-geocoder-item { + width: 100% !important; + margin-left: 0px; + height: auto !important; + padding-bottom: 0 !important; + border-bottom: 0.5px solid rgba(160, 160, 160, .5) !important; + height: 30px !important; + font-weight: 700; + padding-top: 1%; + padding-bottom: 3%; + font-size: 14px !important; + width: 90% !important; + margin-left: 0px; + cursor: pointer; + color: #FFFFFF; + overflow: visible; + position: relative; +} -- GitLab From cf2d760122c663df267774df68cc6908f7d5a23c Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Thu, 19 Mar 2020 14:31:46 -0400 Subject: [PATCH 3/3] Make width consistent --- src/containers/SearchBar/styles.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBar/styles.css index 640b5107..9cda773e 100644 --- a/src/containers/SearchBar/styles.css +++ b/src/containers/SearchBar/styles.css @@ -68,7 +68,6 @@ li.navbar-input>form { padding-top: 1%; padding-bottom: 3%; font-size: 14px !important; - width: 90% !important; margin-left: 0px; cursor: pointer; color: #FFFFFF; -- GitLab