DEV - Address details modal #1960
Description
Dependency
Overview
We need to create an address details modal that indicates which neighborhood council the pin is located in, or if the pin is not within NC boundaries.
Action Items
-
Create a new Component, AddressDetail
- File Path:
components > Map > AddressDetail.jsx
- File Path:
-
Integrate this component into the Map Component
- use RequestDetail implementation as a guide
-
The
AddressDetailscomponent will need to receive the NC name and the address of the selected location- Use Redux to populate the data unless address and NC data can be passed as props
-
Implement logic to render component on click
-
Implement logic to close modal on outside click
-
Implement logic to determine whether or not an address falls within NC boundaries
-
Use MUI components where applicable
- Adhere to the MUI withStyles styling convention that can be seen in
RequestDetail.jsx
- Adhere to the MUI withStyles styling convention that can be seen in
-
Implement fade-in on component render
-
DEPENDENCY: Implement logic to notify user when an address outside of a NC has been Selected
-
Optional Document the component with JSDoc
Resources/Instructions
-
https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/
-
https://github.com/hackforla/311-data/blob/main/components/common/customHooks/useOutsideClick.js
Developer Resources
Request Detail Example Snippets
How to render the component...
<div ref={(el) => (this.requestDetail = el)}>
<RequestDetail
requestId={selectedRequestId}
loadingCallback={this.setRequestDetailLoading}
/>
</div>How to define the Mapbox Popup
addPopup = (coordinates, requestId) => {
this.setState({ selectedRequestId: requestId });
this.popup = new mapboxgl.Popup({closeButton: false, anchor: 'left'})
.setLngLat(coordinates)
.setDOMContent(this.requestDetail)
.addTo(this.map);
};
removePopup = () => {
if (this.popup) {
this.popup.remove();
this.popup = null;
this.setState({ selectedRequestId: null });
}
};Design Hand Off Materials
- Figma Section: https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=16722-4542&t=viKkRgqNWRIVpHrP-4
- Related Design Ticket: UXD - Create address details modal #1924
Screenshots
Screenshot before proposed changes
Screenshot of Figma
Zoomed Out
Zoomed In
Screenshot of new feature from localhost
[insert screenshot here]