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.

Sign up for GitHub

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
+496 −311
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f516816
VACMS-18444 Facility Locator: add click functionality for mobile map …
randimays Jan 30, 2025
a88a46b
Fix function name for mobile map selection
randimays Jan 30, 2025
63204dc
Extract results cards into a utility function
randimays Jan 30, 2025
a18ad5d
Using resultsMapping logic for mobile
randimays Jan 30, 2025
e74b785
Clean up search result component
randimays Jan 30, 2025
c38a813
Add tests for results mapper
randimays Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/applications/facility-locator/actions/actionTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,5 @@ export const GEOCODE_CLEAR_ERROR = 'GEOCODE_CLEAR_ERROR';
export const GEOLOCATE_USER = 'GEOLOCATE_USER';

export const MAP_MOVED = 'MAP_MOVED';

export const MOBILE_MAP_PIN_SELECTED = 'MOBILE_MAP_PIN_SELECTED';
8 changes: 8 additions & 0 deletions src/applications/facility-locator/actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ import { getProviderSpecialties } from './locations/getProviderSpecialties';
import { mapMoved } from './mapbox/mapMoved';
import { searchWithBounds } from './search/searchWithBounds';
import { updateSearchQuery } from './search/updateSearchQuery';
import { MOBILE_MAP_PIN_SELECTED } from './actionTypes';

export const selectMobileMapPin = data => {
return {
type: MOBILE_MAP_PIN_SELECTED,
payload: data,
};
};

export { clearGeocodeError };
export { clearSearchResults };
Expand Down
39 changes: 39 additions & 0 deletions src/applications/facility-locator/components/MobileMapSearchResult.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { focusElement } from 'platform/utilities/ui';
import { resultMapper } from '../utils/resultMapper';

const MobileMapSearchResult = ({ mobileMapPinSelected, query }) => {
const headerRef = useRef(null);

useEffect(
() => {
if (headerRef?.current) {
focusElement(headerRef.current);
}
},
[headerRef],
);

return (
<>
{!mobileMapPinSelected && (
<p className="vads-u-margin-y--3">
Select a number to show information about that location.
</p>
)}
{mobileMapPinSelected && (
<div className="mobile-search-result">
{resultMapper(mobileMapPinSelected, query, 0)}
</div>
)}
</>
);
};

MobileMapSearchResult.propTypes = {
mobileMapPinSelected: PropTypes.object,
query: PropTypes.object,
};

export default MobileMapSearchResult;
145 changes: 3 additions & 142 deletions src/applications/facility-locator/components/ResultsList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,12 @@
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import DelayedRender from 'platform/utilities/ui/DelayedRender';
import { facilityTypes } from '../config';
import {
CLINIC_URGENTCARE_SERVICE,
PHARMACY_RETAIL_SERVICE,
LocationType,
Error,
Covid19Vaccine,
EMERGENCY_CARE_SERVICES,
} from '../constants';

import { Error } from '../constants';
import { recordSearchResultsEvents } from '../utils/analytics';
import { resultMapper } from '../utils/resultMapper';
import { updateSearchQuery, searchWithBounds } from '../actions';

import VaFacilityResult from './search-results-items/VaFacilityResult';
import CCProviderResult from './search-results-items/CCProviderResult';
import PharmacyResult from './search-results-items/PharmacyResult';
import UrgentCareResult from './search-results-items/UrgentCareResult';
import EmergencyCareResult from './search-results-items/EmergencyCareResult';
import Covid19Result from './search-results-items/Covid19Result';
import SearchResultMessage from './SearchResultMessage';

export const ResultsList = ({
Expand Down Expand Up @@ -53,7 +38,7 @@
})),
);
},
[results],

Check warning on line 41 in src/applications/facility-locator/components/ResultsList.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/facility-locator/components/ResultsList.jsx:41:5:React Hook useEffect has missing dependencies: 'currentPage' and 'searchString'. Either include them or remove the dependency array. If 'setResultsData' needs the current value of 'searchString', you can also switch to useReducer instead of useState and read 'searchString' in the reducer.
);

useEffect(
Expand All @@ -62,20 +47,9 @@
recordSearchResultsEvents(props, resultsData);
}
},
[resultsData],

Check warning on line 50 in src/applications/facility-locator/components/ResultsList.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/facility-locator/components/ResultsList.jsx:50:5:React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array.
);

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)

function isHealthAndHealthConnect(apiResult, searchQuery) {
let final = false;
if (
searchQuery?.facilityType === 'health' &&
apiResult?.attributes?.phone?.healthConnect !== null
) {
final = true;
}
return final;
}

/**
* Returns Result items by type
* @param query object
Expand All @@ -84,119 +58,7 @@
*/
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.

let item;
const showHealthConnectNumber = isHealthAndHealthConnect(result, query);

switch (searchQuery.facilityType) {
case 'health':
case 'cemetery':
case 'benefits':
case 'vet_center':
item =
searchQuery.serviceType === Covid19Vaccine ? (
<Covid19Result location={result} key={result.id} index={index} />
) : (
<VaFacilityResult
location={result}
query={searchQuery}
key={result.id}
index={index}
showHealthConnectNumber={showHealthConnectNumber}
/>
);
break;
case 'provider':
// Support non va urgent care search through ccp option
if (searchQuery.serviceType === CLINIC_URGENTCARE_SERVICE) {
item = (
<UrgentCareResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
} else if (searchQuery.serviceType === PHARMACY_RETAIL_SERVICE) {
item = (
<PharmacyResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
} else if (
EMERGENCY_CARE_SERVICES.includes(searchQuery.serviceType)
) {
item = (
<EmergencyCareResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
} else {
item = (
<CCProviderResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
}
break;
case 'pharmacy':
item = (
<PharmacyResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
break;
case 'emergency_care':
if (result.type === LocationType.CC_PROVIDER) {
item = (
<EmergencyCareResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
} else {
item = (
<VaFacilityResult
location={result}
query={searchQuery}
key={result.id}
index={index}
/>
);
}
break;
case 'urgent_care':
if (result.type === LocationType.CC_PROVIDER) {
item = (
<UrgentCareResult
provider={result}
query={searchQuery}
key={result.id}
/>
);
} else {
item = (
<VaFacilityResult
location={result}
query={searchQuery}
key={result.id}
index={index}
/>
);
}
break;
default:
item = null;
}

return item;
return resultMapper(result, searchQuery, index);
});
};

Expand Down Expand Up @@ -304,7 +166,6 @@
pagination: state.searchResult.pagination,
position,
searchString,
selectedResult: state.searchResult.selectedResult,
resultTime: state.searchResult.resultTime,
};
}
Expand Down
14 changes: 12 additions & 2 deletions src/applications/facility-locator/components/SearchAreaControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import React from 'react';
import { SearchAreaControlTypes } from '../types';
import { MAX_SEARCH_AREA } from '../constants';

const SearchAreaControl = ({
isMobile,
isEnabled,
handleSearchArea,
isEnabled,
isMobile,
mobileMapUpdateEnabled,
query,
selectMobileMapPin,
}) => {
const containerClass = () => {
const mobileClass = isMobile
Expand All @@ -23,6 +26,11 @@ const SearchAreaControl = ({

const handleClick = e => {
if (e) e.preventDefault();

if (isMobile && mobileMapUpdateEnabled) {
selectMobileMapPin(null);
}

if (isEnabled) {
handleSearchArea();
}
Expand All @@ -49,4 +57,6 @@ const SearchAreaControl = ({
);
};

SearchAreaControl.propTypes = SearchAreaControlTypes;

export default SearchAreaControl;
8 changes: 5 additions & 3 deletions src/applications/facility-locator/components/SearchControls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@

const SearchControls = props => {
const {
clearGeocodeError,
clearSearchText,
currentQuery,
geolocateUser,
onChange,
onSubmit,
clearSearchText,
geolocateUser,
clearGeocodeError,
selectMobileMapPin,
} = props;

const [selectedServiceType, setSelectedServiceType] = useState(null);
Expand Down Expand Up @@ -121,6 +122,7 @@
'fl-current-zoom-depth': zoomLevel,
});

selectMobileMapPin(null);
onSubmit();
};

Expand Down Expand Up @@ -167,7 +169,7 @@
<span aria-live="assertive">Finding your location...</span>
</div>
) : (
<button

Check warning on line 172 in src/applications/facility-locator/components/SearchControls.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/facility-locator/components/SearchControls.jsx:172:13:The <va-button> Web Component should be used instead of the button HTML element.
onClick={handleGeolocationButtonClick}
type="button"
className="use-my-location-link"
Expand Down Expand Up @@ -196,7 +198,7 @@
title="Your location: Street, City, State or Postal code"
/>
{searchString?.length > 0 && (
<button

Check warning on line 201 in src/applications/facility-locator/components/SearchControls.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/facility-locator/components/SearchControls.jsx:201:13:The <va-button> Web Component should be used instead of the button HTML element.
aria-label="Clear your city, state or postal code"
type="button"
id="clear-input"
Expand Down
50 changes: 0 additions & 50 deletions src/applications/facility-locator/components/SearchResult.jsx
View file
Open in desktop

This file was deleted.

Loading
Loading