= 0 ? '' : 'none' }}>
diff --git a/src/containers/SearchBar/actions.js b/src/containers/SearchBarBGroup/actions.js
similarity index 100%
rename from src/containers/SearchBar/actions.js
rename to src/containers/SearchBarBGroup/actions.js
diff --git a/src/containers/SearchBar/constants.js b/src/containers/SearchBarBGroup/constants.js
similarity index 100%
rename from src/containers/SearchBar/constants.js
rename to src/containers/SearchBarBGroup/constants.js
diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBarBGroup/index.js
similarity index 94%
rename from src/containers/SearchBar/index.js
rename to src/containers/SearchBarBGroup/index.js
index f7ed9138ccdbb52cfb915857b4a4382f7528c353..d3a48cf92fbd01dcfa14c08a6d89f72d53793403 100644
--- a/src/containers/SearchBar/index.js
+++ b/src/containers/SearchBarBGroup/index.js
@@ -1,9 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Geocoder from 'react-mapbox-gl-geocoder';
-import {
- Row, Col, Nav, NavItem,
-} from 'reactstrap';
+import { Row, Col, Nav, NavItem } from 'reactstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
@@ -18,6 +16,10 @@ const mapAccess = {
mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_TOKEN,
};
+const queryParams = {
+ country: 'us',
+};
+
class SearchBar extends Component {
constructor(props) {
super(props);
@@ -73,6 +75,7 @@ class SearchBar extends Component {
addressData = (
-
+
{addressData}
diff --git a/src/containers/SearchBar/propTypes.js b/src/containers/SearchBarBGroup/propTypes.js
similarity index 100%
rename from src/containers/SearchBar/propTypes.js
rename to src/containers/SearchBarBGroup/propTypes.js
diff --git a/src/containers/SearchBar/sagas.js b/src/containers/SearchBarBGroup/sagas.js
similarity index 100%
rename from src/containers/SearchBar/sagas.js
rename to src/containers/SearchBarBGroup/sagas.js
diff --git a/src/containers/SearchBarBGroup/styles.css b/src/containers/SearchBarBGroup/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..ae86686a139407b1f88e251b5cb16dc36901c784
--- /dev/null
+++ b/src/containers/SearchBarBGroup/styles.css
@@ -0,0 +1,133 @@
+
+.building-search {
+ background-color: #222;
+ padding: 40px;
+}
+
+.input-group {
+ width: inherit !important;
+}
+
+.btn.dropdown-toggle:hover {
+ background-color: #E9E4E4 !important;
+}
+
+.dropdown-selection {
+ height: 100%;
+ display: table-cell;
+ vertical-align: middle;
+ background-color: white;
+ border-top-right-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+ line-height: 1.5;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+}
+
+li.navbar-input {
+ -webkit-padding-start: 20px;
+}
+
+li.navbar-input>form {
+ height: 100%;
+}
+
+.pr-1 {
+ margin-top: 0.5rem;
+}
+
+.addressSearchInputBGroup {
+ width: 750px !important;
+ position: relative;
+ padding-left: '15px';
+ margin-top: '2px';
+}
+
+.addressSearchInputBGroup .addressDisplay {
+ height: 35px;
+ font-size: 14px;
+ width: 100% !important;
+ padding: 10px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.addressSearchInputBGroup .react-geocoder {
+ position: relative;
+}
+
+.addressSearchInputBGroup .react-geocoder input {
+ height: 35px;
+ width: 100% !important;
+ padding: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ font-size: 14px;
+}
+
+.addressSearchInputBGroup .react-geocoder-results {
+ background: #FFFFFF;
+ width: 100% !important;
+}
+
+.addressSearchInputBGroup .react-geocoder-item {
+ width: 100% !important;
+ margin-left: 0px;
+ height: auto !important;
+ border-bottom: 0.5px solid #EEEEEE !important;
+ border-left: 0.5px solid #EEEEEE !important;
+ border-right: 0.5px solid #EEEEEE !important;
+ height: 30px !important;
+ padding: 1% 2% 4% 2% !important;
+ font-size: 14px !important;
+ margin-left: 0px;
+ cursor: pointer;
+ color: #000000;
+ overflow: visible;
+ position: relative;
+}
+
+.addressSearchInputBGroup .react-geocoder-item:hover {
+ border-bottom: 0.5px solid #DDDDDD !important;
+ cursor: pointer;
+ background: #EEEEEE;
+}
+
+@media screen and (max-width: 992px) {
+ .addressSearchInputBGroup {
+ width: 600px !important;
+ }
+ .addressSearchInputBGroup .react-geocoder-item {
+ font-size: 13px !important;
+ font-weight: normal;
+ }
+ .addressSearchInputBGroup .react-geocoder input {
+ font-size: 13px !important;
+ font-weight: normal;
+ }
+ .addressSearchInputBGroup .addressDisplay {
+ height: 35px;
+ font-size: 13px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .addressSearchInputBGroup {
+ width: 335px !important;
+ margin-bottom: 15px;
+ }
+ .addressSearchInputBGroup .react-geocoder-item {
+ font-size: 11px !important;
+ font-weight: normal;
+ }
+ .addressSearchInputBGroup .react-geocoder input {
+ font-size: 11px !important;
+ font-weight: normal;
+ }
+ .addressSearchInputBGroup .addressDisplay {
+ height: 35px;
+ font-size: 11px;
+ }
+}
diff --git a/src/containers/SearchBarBuildings/actions.js b/src/containers/SearchBarBuildings/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..623714c82f02a98eca78aee661e7f07ec46d7cdf
--- /dev/null
+++ b/src/containers/SearchBarBuildings/actions.js
@@ -0,0 +1,46 @@
+import ReactGA from 'react-ga';
+
+import {
+ SEARCH_BUILDINGS,
+ SEARCH_BUILDINGS_SUCCESS,
+ SEARCH_BUILDINGS_ERROR,
+} from './constants';
+
+/**
+ * Load the list of buildings, this action starts the request saga
+ *
+ * @param {dict} args The args to send to the backend
+ * @returns {object} An action object with a type of LOAD_BUILDINGS
+ * and filterName and value
+ */
+export function searchBuildings(address) {
+ return {
+ type: SEARCH_BUILDINGS,
+ address,
+ };
+}
+
+// TODO: Add doctring
+export function buildingsSearched(buildings, args) {
+ if (args) {
+ const address = `Address searched: ${args.address}`;
+ if (buildings.length > 0) {
+ ReactGA.event({ category: 'Search', action: 'Success', label: `${address}` });
+ } else {
+ ReactGA.event({ category: 'Search', action: 'Fail', label: `${address} not found` });
+ }
+ }
+ return {
+ type: SEARCH_BUILDINGS_SUCCESS,
+ payload: buildings,
+ };
+}
+
+// TODO: Add doctring
+export function buildingsSearchingError(error, args) {
+ ReactGA.event({ category: 'Search', action: 'Error', label: `Searched for ${args.address}, Failed due to ${error}` });
+ return {
+ type: SEARCH_BUILDINGS_ERROR,
+ error,
+ };
+}
diff --git a/src/containers/SearchBarBuildings/constants.js b/src/containers/SearchBarBuildings/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0a679aade6039ffeee9046c19a158697d64d6a6
--- /dev/null
+++ b/src/containers/SearchBarBuildings/constants.js
@@ -0,0 +1,5 @@
+export const FETCH_BUILDINGS = 'FETCH_BUILDINGS';
+export const UPDATE_BUILDING_SEARCH_PARAMS = 'UPDATE_BUILDING_SEARCH_PARAMS';
+export const SEARCH_BUILDINGS = 'SEARCH_BUILDINGS';
+export const SEARCH_BUILDINGS_SUCCESS = 'SEARCH_BUILDINGS_SUCCESS';
+export const SEARCH_BUILDINGS_ERROR = 'SEARCH_BUILDINGS_ERROR';
diff --git a/src/containers/SearchBarBuildings/index.js b/src/containers/SearchBarBuildings/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6ddf2ef9c0961c5abe15debd7f16430829c04b15
--- /dev/null
+++ b/src/containers/SearchBarBuildings/index.js
@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Geocoder from 'react-mapbox-gl-geocoder';
+import { Row, Col, Nav, NavItem } from 'reactstrap';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+ searchBuildings,
+ buildingsSearched,
+} from './actions';
+import './styles.css';
+import { buildingListPropTypes } from './propTypes';
+
+
+const mapAccess = {
+ mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_TOKEN,
+};
+
+const queryParams = {
+ country: 'us',
+};
+
+class SearchBar extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ viewport: {},
+ addressFound: false,
+ address: '',
+ loadingAddressSearchBtn: false,
+ disabledAddressSearchBtn: true,
+ subscribed: false,
+ };
+ }
+
+ componentDidMount() {
+ // Use the buildings stored in cookies to populate the buildingList
+ const buildingList = localStorage.activeBuildings;
+ if (buildingList !== undefined) {
+ this.props.buildingsSearched(JSON.parse(buildingList));
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (
+ this.props.buildingList !== nextProps.buildingList
+ ) {
+ this.setState({
+ address: nextProps.buildingList.address,
+ });
+ }
+ }
+
+ handleOnSelected = (viewport, item) => {
+ this.setState({
+ viewport,
+ address: item.place_name,
+ addressFound: true,
+ }, () => {
+ this.props.searchBuildings(this.state.address);
+ });
+ }
+
+ handleOnChange = (event) => {
+ this.setState({
+ address: event.target.value,
+ addressFound: false,
+ });
+ }
+
+ render() {
+ let addressData = '';
+ const { viewport } = this.state;
+ if (this.state.addressFound === false) {
+ addressData = (
+
+ );
+ } else {
+ addressData = (
+
+ );
+ }
+
+ const content = (
+
+
+
+ {addressData}
+
+
+
+ );
+
+ return (
+
+ );
+ }
+}
+
+SearchBar.propTypes = {
+ buildingList: buildingListPropTypes,
+ searchBuildings: PropTypes.func,
+ buildingsSearched: PropTypes.func,
+};
+
+function mapDispatchToProps(dispatch) {
+ return bindActionCreators({
+ searchBuildings,
+ buildingsSearched,
+ }, dispatch);
+}
+
+function mapStateToProps({ buildingList }) {
+ return { buildingList };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
diff --git a/src/containers/SearchBarBuildings/propTypes.js b/src/containers/SearchBarBuildings/propTypes.js
new file mode 100644
index 0000000000000000000000000000000000000000..2eafabeacf08308372414b0225b061c701c531c6
--- /dev/null
+++ b/src/containers/SearchBarBuildings/propTypes.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+
+const { string, number, bool, shape, arrayOf, oneOfType } = PropTypes;
+
+export const loadErrorPropTypes = {
+ loading: bool,
+ error: oneOfType([
+ bool,
+ PropTypes.instanceOf(Error),
+ ]),
+};
+
+export const buildingList = arrayOf(
+ shape({
+ street_address: string,
+ bbl: number,
+ bin: number,
+ building_id: number,
+ lot_id: number,
+ borough_id: number,
+ zipcode: string,
+ })
+);
+
+export const searchParams = shape({
+ type: string,
+ borough: string,
+ term: string,
+});
+
+export const buildingListPropTypes = PropTypes.shape({
+ ...searchParams,
+ buildings: buildingList,
+ ...loadErrorPropTypes,
+});
diff --git a/src/containers/SearchBar/reducer.js b/src/containers/SearchBarBuildings/reducer.js
similarity index 100%
rename from src/containers/SearchBar/reducer.js
rename to src/containers/SearchBarBuildings/reducer.js
diff --git a/src/containers/SearchBar/ring.svg b/src/containers/SearchBarBuildings/ring.svg
similarity index 100%
rename from src/containers/SearchBar/ring.svg
rename to src/containers/SearchBarBuildings/ring.svg
diff --git a/src/containers/SearchBarBuildings/sagas.js b/src/containers/SearchBarBuildings/sagas.js
new file mode 100644
index 0000000000000000000000000000000000000000..d74337fe0c31af29fd5888ebf7342c73b07004de
--- /dev/null
+++ b/src/containers/SearchBarBuildings/sagas.js
@@ -0,0 +1,56 @@
+import { put, takeLatest } from 'redux-saga/effects';
+// import request from '../../utils/request';
+// import { getHeaders, buildingsURL } from '../../utils/restServices';
+
+import {
+ SEARCH_BUILDINGS,
+} from './constants';
+
+import {
+ buildingsSearched,
+ buildingsSearchingError,
+} from './actions';
+
+/**
+ * TODO: doctring
+ */
+function* getBuildingsByFilter(action) {
+ const placeName = action.address;
+ // const res = yield call(
+ // request,
+ // `${buildingsURL}?$place_name=${placeName}limit=300`, {
+ // method: 'GET',
+ // headers: getHeaders(),
+ // }
+ // );
+
+ // For now, we commented out http call and hard coded the response data
+ const res = {
+ data: [
+ {
+ bbl: 3012410005,
+ bin: 3031524,
+ borough: 'BROOKLYN',
+ building_id: 181794,
+ lot_id: 759242,
+ street_address: '838 PARK PLACE',
+ targeting_score: 73.9496248660236,
+ zipcode: '11216',
+ placeName,
+ },
+ ],
+ };
+
+ if (!res.err) {
+ yield put(buildingsSearched(res.data, placeName));
+ } else {
+ yield put(buildingsSearchingError(res.err, placeName));
+ }
+}
+
+/**
+ * TODO: docstring
+ */
+export default function* buildingsWatcher() {
+ yield takeLatest(SEARCH_BUILDINGS, getBuildingsByFilter);
+}
diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBarBuildings/styles.css
similarity index 83%
rename from src/containers/SearchBar/styles.css
rename to src/containers/SearchBarBuildings/styles.css
index 386d97812d0eba8c99046b5e5f2871f5a14f3d1d..684107179c3e110b819bb3882d3c2f3035f9dd87 100644
--- a/src/containers/SearchBar/styles.css
+++ b/src/containers/SearchBarBuildings/styles.css
@@ -1,6 +1,7 @@
+
.building-search {
- background-color: #222;
- padding: 40px;
+ background-color: #222;
+ padding: 40px;
}
.input-group {
@@ -33,12 +34,14 @@ li.navbar-input>form {
height: 100%;
}
-.addressSearchInput {
+.addressSearchInputBuildings {
width: 700px !important;
position: relative;
+ padding-left: '15px';
+ margin-top: '2px';
}
-.addressDisplay {
+.addressSearchInputBuildings .addressDisplay {
height: 35px;
font-size: 16px;
font-weight: bold;
@@ -48,11 +51,11 @@ li.navbar-input>form {
margin-bottom: 5px;
}
-.react-geocoder {
+.addressSearchInputBuildings .react-geocoder {
position: relative;
}
-.react-geocoder input {
+.addressSearchInputBuildings .react-geocoder input {
height: 35px;
width: 100% !important;
padding: 5px;
@@ -62,13 +65,13 @@ li.navbar-input>form {
font-size: 16px;
}
-.react-geocoder-results {
+.addressSearchInputBuildings .react-geocoder-results {
position: absolute;
background: #333333;
width: 100% !important;
}
-.react-geocoder-item {
+.addressSearchInputBuildings .react-geocoder-item {
width: 100% !important;
margin-left: 0px;
height: auto !important;
@@ -84,7 +87,7 @@ li.navbar-input>form {
position: relative;
}
-.react-geocoder-item:hover {
+.addressSearchInputBuildings .react-geocoder-item:hover {
color: #FFFFFF;
border-bottom: 0.5px solid #555555 !important;
}
@@ -105,7 +108,7 @@ li.navbar-input>form {
height: 35px;
font-size: 13px;
}
- }
+}
@media screen and (max-width: 600px) {
.addressSearchInput {
@@ -123,4 +126,4 @@ li.navbar-input>form {
height: 35px;
font-size: 11px;
}
- }
+}
diff --git a/src/reducers.js b/src/reducers.js
index 1cf26ccab1c433a6480c75b43073611c31ca1cf9..ab87b30201b77ea76c2126c16c0b981b00f15c53 100644
--- a/src/reducers.js
+++ b/src/reducers.js
@@ -1,7 +1,7 @@
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
-import SearchBarReducer from './containers/SearchBar/reducer';
+import SearchBarReducer from './containers/SearchBarBuildings/reducer';
import ProjectSearchBarReducer from './containers/Project/reducer';
import BuildingReducer from './containers/Building/reducer';
import DimensionsReducer from './containers/Dimensions/reducer';
diff --git a/src/sagas.js b/src/sagas.js
index 364d621ad15a4d561579a54531409413a3d1e3ad..cb7dca6ebcc808fafa6abf53ebd9d5079754172c 100644
--- a/src/sagas.js
+++ b/src/sagas.js
@@ -1,6 +1,7 @@
import buildingSaga from './containers/Building/sagas';
import dimensionsSaga from './containers/Dimensions/sagas';
-import buildingsSearchSaga from './containers/SearchBar/sagas';
+import buildingsSearchSaga from './containers/SearchBarBuildings/sagas';
+import bGroupSearchSaga from './containers/SearchBarBGroup/sagas';
import projectsSearchSaga from './containers/Project/sagas';
import reportsSaga from './containers/Reports/sagas';
import documentsSaga from './containers/Documents/sagas';
@@ -23,6 +24,7 @@ export default function* rootSaga() {
buildingSaga(),
dimensionsSaga(),
buildingsSearchSaga(),
+ bGroupSearchSaga(),
projectsSearchSaga(),
documentsSaga(),
engSaga(),
diff --git a/src/screens/BuildingsHomePage/index.js b/src/screens/BuildingsHomePage/index.js
index 66e2e412cb16b814ac50add607baa21676aa4b2f..6dacc26f2fac4c18916f9b539642bab8ad2fb5e3 100644
--- a/src/screens/BuildingsHomePage/index.js
+++ b/src/screens/BuildingsHomePage/index.js
@@ -2,15 +2,14 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-
import NavBar from '../../components/NavBar';
-import SearchBar from '../../containers/SearchBar';
+import SearchBar from '../../containers/SearchBarBuildings';
import BuildingListTable from '../../components/BuildingListTable';
-import { buildingListPropTypes } from '../../containers/SearchBar/propTypes';
+import { buildingListPropTypes } from '../../containers/SearchBarBuildings/propTypes';
import {
searchBuildings,
buildingsSearched,
-} from '../../containers/SearchBar/actions';
+} from '../../containers/SearchBarBuildings/actions';
import userPropType from '../../containers/User/propTypes';
import NotAuthorized from '../../components/NotAuthorized';