1995-update-address-search

src/components/layout/Main/Desktop/FilterMenu.jsx

@@ -12,12 +12,13 @@ import Collapse from '@mui/material/Collapse';
 import Typography from '@mui/material/Typography';
 import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
 import DateSelector from '@components/DateSelector/DateSelector';
+import MapSearch from '../../../../features/Map/controls/MapSearch';
+// import ShareableLinkCreator from '@components/main/Desktop/ShareableLinkCreator';
 import TypeSelector from '@components/layout/Main/Desktop/TypeSelector';
 import StatusSelector from '@components/layout/Main/Desktop/StatusSelector';
 import CouncilSelector from '@components/layout/Main/Desktop/CouncilSelector';
 import ExportButton from '@components/layout/Main/Desktop/Export/ExportButton';
 
-// import GearButton from '@components/common/GearButton';
 // import clsx from 'clsx';
 
 import sharedStyles from '@theme/styles';
@@ -26,8 +27,8 @@ const useStyles = makeStyles(theme => ({
   card: {
     width: 325,
     backgroundColor: theme.palette.primary.main,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
+    borderTopLeftRadius: theme.borderRadius.md,
+    borderTopRightRadius: theme.borderRadius.md,
     borderBottomLeftRadius: theme.borderRadius.md,
     borderBottomRightRadius: theme.borderRadius.md,
   },
@@ -70,7 +71,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 // const FilterMenu = ({ toggleMenu }) => { //toggleMenu used with GearButton
-function FilterMenu({ resetMap, resetAddressSearch }) {
+function FilterMenu({ resetMap, resetAddressSearch, map, geoFilterType, councils, onGeocoderResult, onChangeTab, onReset, canReset }) {
   const [expanded, setExpanded] = useState(true);
   const classes = useStyles();
   const sharedClasses = sharedStyles();
@@ -86,7 +87,6 @@ function FilterMenu({ resetMap, resetAddressSearch }) {
         }}
         title={(
           <div className={classes.headerContent}>
-            {/* <GearButton aria-label="toggle map menu" onClick={toggleMenu} /> */}
             <div className={classes.headerMargin}>
               <Typography className={sharedClasses.headerTitle} variant="h6">
                 FILTERS
@@ -108,27 +108,37 @@ function FilterMenu({ resetMap, resetAddressSearch }) {
         )}
       />
       <Collapse in={expanded}>
-        <CardContent className={classes.content}>
+        <CardContent className={classes.content} style={{ borderTop: `1px solid #7A5B21`, paddingBottom: '8px' }}>
           <div className={classes.selectorWrapper}>
-            <CouncilSelector
-              resetMap={resetMap}
-              resetAddressSearch={resetAddressSearch}
-            />
-          </div>
-          <div className={classes.selectorWrapper}>
-            <DateSelector range />
-          </div>
-          <div className={classes.selectorWrapper}>
-            <TypeSelector />
-          </div>
-          <div className={classes.selectorWrapper}>
-            <StatusSelector />
-          </div>
-          {/* <div className={classes.selectorWrapper}>
-            <ShareableLinkCreator />
-          </div> */}
-          <div className={`${classes.selectorWrapper} ${classes.export}`}>
-            <ExportButton />
+            <div className={classes.selectorWrapper}>
+               <MapSearch
+                map={map}
+                geoFilterType={geoFilterType}
+                councils={councils}
+                onGeocoderResult={onGeocoderResult}
+                onChangeTab={onChangeTab}
+                onReset={onReset}
+                canReset={canReset}
+              />
+            </div>
+            <div className={classes.selectorWrapper}>
+              <CouncilSelector
+                resetMap={resetMap}
+                resetAddressSearch={resetAddressSearch}
+              />
+            </div>
+            <div className={classes.selectorWrapper}>
+              <DateSelector range />
+            </div>
+            <div className={classes.selectorWrapper}>
+              <TypeSelector />
+            </div>
+            <div className={classes.selectorWrapper}>
+              <StatusSelector />
+            </div>
+            <div className={`${classes.selectorWrapper} ${classes.export}`}>
+              <ExportButton />
+            </div>
           </div>
         </CardContent>
       </Collapse>
@@ -145,10 +155,24 @@ export default connect(null, mapDispatchToProps)(FilterMenu);
 FilterMenu.defaultProps = {
   resetMap: () => {},
   resetAddressSearch: () => {},
+  map: null,
+  geoFilterType: '',
+  councils: [],
+  onGeocoderResult: () => {},
+  onChangeTab: () => {},
+  onReset: () => {},
+  canReset: false
 };
 
 FilterMenu.propTypes = {
   resetMap: PropTypes.func,
   resetAddressSearch: PropTypes.func,
-  // toggleMenu: PropTypes.func.isRequired,
+  toggleMenu: PropTypes.func.isRequired,
+  map: PropTypes.shape({}),          
+  geoFilterType: PropTypes.string,  
+  councils: PropTypes.arrayOf(PropTypes.shape({})),      
+  onGeocoderResult: PropTypes.func,
+  onChangeTab: PropTypes.func,
+  onReset: PropTypes.func,
+  canReset: PropTypes.bool
 };

src/features/Map/Map.jsx

@@ -821,19 +821,17 @@ class Map extends React.Component {
         {this.state.mapReady && requestTypes && (
           <>
             <div className={classes.menuWrapper}>
-              <MapSearch
-                map={this.map}
+              <FilterMenu
+                resetMap={this.reset}
+                resetAddressSearch={this.resetAddressSearch}
+				map={this.map}
                 geoFilterType={geoFilterType}
                 councils={councils}
                 onGeocoderResult={this.onGeocoderResult}
                 onChangeTab={this.onChangeSearchTab}
                 onReset={this.reset}
                 canReset={!!filterGeo && canReset}
               />
-              <FilterMenu
-                resetMap={this.reset}
-                resetAddressSearch={this.resetAddressSearch}
-              />
             </div>
           </>
         )}

src/features/Map/controls/MapSearch.jsx

@@ -3,24 +3,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '@mui/styles/withStyles';
+import Typography from '@mui/material/Typography';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 import { GEO_FILTER_TYPES } from '../constants';
 import settings from '@settings'
+import { margin } from '@mui/system';
 
 const TABS = Object.values(GEO_FILTER_TYPES);
 
 const styles = theme => ({
   geocoder: {
-    width: 325,
+    width: 300,
     backgroundColor: theme.palette.primary.dark,
-    borderTopRightRadius: '10px',
-    borderTopLeftRadius: '10px',
-    padding: '10px 15px 10px 15px',
+    borderTopRightRadius: '5px',
+    borderTopLeftRadius: '5px',
+    borderBottomRightRadius: '5px',
+    borderBottomLeftRadius: '5px',
+    margin: '10px 5px 5px 0px',
+    padding: '2px',
     '& div.mapboxgl-ctrl': {
       width: '100%',
       borderRadius: 0,
-      borderBottom: `1px solid ${theme.palette.primary.focus}`,
+      borderBottom: 'none', 
       '& svg': {
         color: theme.palette.primary.focus,
         fill: theme.palette.primary.focus,
@@ -55,6 +60,12 @@ const styles = theme => ({
     backgroundColor: theme.palette.primary.main,
     color: theme.palette.text.secondaryLight,
   },
+  header: {
+      fontSize: '12.47px',
+      fontWeight: theme.typography.fontWeightMedium,
+      marginBottom: '8px',
+      marginTop: '12px'
+  }
 });
 
 class MapSearch extends React.Component {
@@ -82,7 +93,7 @@ class MapSearch extends React.Component {
       flyTo: false,
       marker: false,
       minLength: 1,
-      placeholder: "Enter an address or location",
+      placeholder: "Search Address",
       localGeocoder: searchTerm => {
         const { geoFilterType } = this.props;
         const searchFilter = new RegExp(searchTerm, 'i');
@@ -173,6 +184,7 @@ class MapSearch extends React.Component {
             </Button>
         ))}
         </div> */}
+         <Typography className={classes.header}>Search by Address</Typography>
         <div id="geocoder" className={classes.geocoder} />
       </div>
     );