Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VACMS-18444 Facility Locator: add click functionality for mobile map markers #34362

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

randimays
Copy link
Contributor

Are you removing, renaming or moving a folder in this PR?

  • No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
  • Yes, I'm removing, renaming or moving a folder

⚠️ TeamSites ⚠️

Did you change site-wide styles, platform utilities or other infrastructure?

Summary

Makes the mobile map markers in Facility Locator clickable. When clicked, the details for the facility should appear below the map and the title of the facility should be focused (yellow outline when screenreader is on).

Related issue(s)

  • Link to ticket created in va.gov-team repo
    department-of-veterans-affairs/va.gov-team#0000
  • Link to previous change of the code/bug (if applicable)
    department-of-veterans-affairs/vets-website#0000
  • Link to epic if not included in ticket
    department-of-veterans-affairs/va.gov-team#0000

Testing done

  • Describe what the old behavior was prior to the change
  • Describe the steps required to verify your changes are working as expected
  • Describe the tests completed and the results
  • _Exclusively stating 'Specs and automated tests passing' is NOT acceptable as appropriate testing
  • Optionally, provide a link to your test plan and test execution records

Screenshots

Note: This field is mandatory for UI changes (non-component work should NOT have screenshots).

Before After
Mobile
Desktop

What areas of the site does it impact?

(Describe what parts of the site are impacted if code touched other areas)

Acceptance criteria

Quality Assurance & Testing

  • I fixed|updated|added unit tests and integration tests for each feature (if applicable).
  • No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
  • Linting warnings have been addressed
  • Documentation has been updated (link to documentation *if necessary)
  • Screenshot of the developed feature is added
  • Accessibility testing has been performed

Error Handling

  • Browser console contains no warnings or errors.
  • Events are being sent to the appropriate logging solution
  • Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

  • Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

@@ -65,17 +66,6 @@ export const ResultsList = ({
[resultsData],
);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved this function to a utility file as it is now shared between ResultsList (used for desktop and the list view on mobile) and SearchResult (used for the single listing on mobile map view)

@@ -1,55 +0,0 @@
import React from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved this code into SearchResult because it is the only place it was being used (for mobile map single listings).

} from '../actions/actionTypes';

const INITIAL_STATE = {
mobileMapPinSelected: null,
results: [],
selectedResult: null,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that selectedResult is used for whichever facility we're viewing on the Facility Locator detail page (e.g. cemetery or one of the many VBAs that isn't statically-built yet). I couldn't dual-purpose this for the mobile map selected card, unfortunately.

@@ -19,47 +19,6 @@ export const setFocus = (selector, tabIndexInclude = true) => {
}
};

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved these marker-related utilities to a new utility file (mapMarkers.js)

@randimays randimays force-pushed the 18444-mobile-map-markers branch from 848ecec to 6d03d3b Compare January 29, 2025 22:32
@va-vfs-bot va-vfs-bot temporarily deployed to master/18444-mobile-map-markers/main January 29, 2025 23:17 Inactive
@randimays randimays force-pushed the 18444-mobile-map-markers branch from 6d03d3b to f516816 Compare January 30, 2025 17:30
@va-vfs-bot va-vfs-bot temporarily deployed to master/18444-mobile-map-markers/main January 30, 2025 17:33 Inactive
@va-vfs-bot va-vfs-bot temporarily deployed to master/18444-mobile-map-markers/main January 30, 2025 18:13 Inactive
@va-vfs-bot va-vfs-bot temporarily deployed to master/18444-mobile-map-markers/main January 30, 2025 21:57 Inactive
@va-vfs-bot va-vfs-bot temporarily deployed to master/18444-mobile-map-markers/main January 30, 2025 23:04 Inactive
@@ -84,119 +58,7 @@ export const ResultsList = ({
*/
const renderResultItems = (searchQuery, apiResults) => {
return apiResults?.map((result, index) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved the switch statement into resultMapper.jsx because now it needs to be shared between the regular results list and the single result shown when a mobile map pin is clicked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants