-
Notifications
You must be signed in to change notification settings - Fork 128
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Wip * Program search required fields * Search by program components * Testing * Testing * Testing, require distance field * Testing and focusLocationInput on location modal close * Distance dropdown validation message, testing * Toggle
- Loading branch information
Showing
14 changed files
with
444 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 0 additions & 75 deletions
75
src/applications/gi/updated-gi/components/SearchByProgram.jsx
This file was deleted.
Oops, something went wrong.
26 changes: 26 additions & 0 deletions
26
src/applications/gi/updated-gi/components/school-and-employers/UseMyLocation.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
|
|
||
| export const UseMyLocation = ({ geolocationInProgress, handleLocateUser }) => { | ||
| return ( | ||
| <> | ||
| {geolocationInProgress ? ( | ||
| <div className="vads-u-display--flex vads-u-align-items--center vads-u-color--primary"> | ||
| <va-icon size={3} icon="autorenew" aria-hidden="true" /> | ||
| <span aria-live="assertive">Finding your location...</span> | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| {/* eslint-disable-next-line @department-of-veterans-affairs/prefer-button-component */} | ||
| <button | ||
| type="button" | ||
| className="vads-u-line-height--3 vads-u-padding--0 vads-u-margin--0 vads-u-color--primary vads-u-background-color--white vads-u-font-weight--normal" | ||
| onClick={handleLocateUser} | ||
| > | ||
| <va-icon icon="near_me" size={3} /> | ||
| Use my location | ||
| </button> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
30 changes: 30 additions & 0 deletions
30
src/applications/gi/updated-gi/components/school-and-employers/UseMyLocationModal.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from 'react'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { VaModal } from '@department-of-veterans-affairs/component-library/dist/react-bindings'; | ||
| import { clearGeocodeError } from '../../../actions'; | ||
|
|
||
| export const UseMyLocationModal = ({ geocodeError, focusLocationInput }) => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| return ( | ||
| <VaModal | ||
| modalTitle={ | ||
| geocodeError === 1 | ||
| ? 'We need to use your location' | ||
| : "We couldn't locate you" | ||
| } | ||
| onCloseEvent={() => { | ||
| focusLocationInput(); | ||
| dispatch(clearGeocodeError()); | ||
| }} | ||
| status="warning" | ||
| visible={geocodeError > 0} | ||
| > | ||
| <p> | ||
| {geocodeError === 1 | ||
| ? 'Please enable location sharing in your browser to use this feature.' | ||
| : 'Sorry, something went wrong when trying to find your location. Please make sure location sharing is enabled and try again.'} | ||
| </p> | ||
| </VaModal> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
125 changes: 125 additions & 0 deletions
125
src/applications/gi/updated-gi/containers/SearchByProgram.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import React, { useEffect, useRef, useState } from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import recordEvent from 'platform/monitoring/record-event'; | ||
| import { | ||
| VaButton, | ||
| VaSelect, | ||
| VaTextInput, | ||
| } from '@department-of-veterans-affairs/component-library/dist/react-bindings'; | ||
| import { geolocateUser, fetchSearchByLocationResults } from '../../actions'; | ||
| import { UseMyLocation } from '../components/school-and-employers/UseMyLocation'; | ||
| import { UseMyLocationModal } from '../components/school-and-employers/UseMyLocationModal'; | ||
|
|
||
| const SearchByProgram = () => { | ||
| const locationRef = useRef(null); | ||
| const distanceDropdownOptions = [ | ||
| { value: '5', label: 'within 5 miles' }, | ||
| { value: '15', label: 'within 15 miles' }, | ||
| { value: '25', label: 'within 25 miles' }, | ||
| { value: '50', label: 'within 50 miles' }, | ||
| { value: '75', label: 'within 75 miles' }, | ||
| ]; | ||
| const dispatch = useDispatch(); | ||
| const search = useSelector(state => state.search); | ||
| const [distance, setDistance] = useState(search.query.distance); | ||
| const [location, setLocation] = useState(search.query.location); | ||
| const [programName, setProgramName] = useState(null); | ||
| const [searchDirty, setSearchDirty] = useState(false); | ||
|
|
||
| const focusLocationInput = () => { | ||
| locationRef?.current?.shadowRoot?.querySelector('input').focus(); | ||
| }; | ||
|
|
||
| const handleLocateUser = e => { | ||
| e.preventDefault(); | ||
| recordEvent({ | ||
| event: 'map-use-my-location', | ||
| }); | ||
| dispatch(geolocateUser()); | ||
| }; | ||
|
|
||
| const handleSearch = () => { | ||
| if (!searchDirty) { | ||
| setSearchDirty(true); | ||
| return; | ||
| } | ||
| const description = programName; | ||
| dispatch( | ||
| fetchSearchByLocationResults(location, distance, null, null, description), | ||
| ); | ||
| // Show program results... | ||
| }; | ||
|
|
||
| useEffect( | ||
| () => { | ||
| const { searchString } = search.query.streetAddress; | ||
| if (searchString) { | ||
| setLocation(searchString); | ||
| focusLocationInput(); | ||
| } | ||
| }, | ||
| [search], | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="vads-u-display--flex mobile:vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row vads-u-justify-content--space-between mobile:vads-u-align-items--flex-start medium-screen:vads-u-align-items--flex-end"> | ||
| <UseMyLocationModal | ||
| geocodeError={search.geocodeError} | ||
| focusLocationInput={focusLocationInput} | ||
| /> | ||
| <VaTextInput | ||
| className="tablet:vads-u-flex--3 mobile:vads-u-width--full vads-u-margin-right--2p5 mobile:vads-u-margin-top--neg2p5" | ||
| name="program-name" | ||
| type="text" | ||
| label="Name of program" | ||
| required | ||
| value={programName} | ||
| error={ | ||
| searchDirty && !programName ? 'Please fill in a program name.' : null | ||
| } | ||
| onInput={e => setProgramName(e.target.value)} | ||
| /> | ||
| <VaTextInput | ||
| ref={locationRef} | ||
| className="tablet:vads-u-flex--3 mobile:vads-u-width--full vads-u-margin-right--2p5" | ||
| name="program-location" | ||
| type="text" | ||
| label="City, state, or postal code" | ||
| required | ||
| value={location} | ||
| error={ | ||
| searchDirty && !location | ||
| ? 'Please fill in a city, state, or postal code.' | ||
| : null | ||
| } | ||
| onInput={e => setLocation(e.target.value)} | ||
| /> | ||
| <div className="medium-screen:vads-u-flex--2 tablet:vads-u-flex--auto vads-u-margin-right--2p5 mobile:vads-u-margin-top--2p5"> | ||
| <UseMyLocation | ||
| geolocationInProgress={search.geolocationInProgress} | ||
| handleLocateUser={handleLocateUser} | ||
| /> | ||
| <VaSelect | ||
| name="program-distance" | ||
| onVaSelect={e => setDistance(e.target.value)} | ||
| value={distance} | ||
| required | ||
| error={searchDirty && !distance ? 'Please select a distance' : null} | ||
| > | ||
| {distanceDropdownOptions.map(option => ( | ||
| <option value={option.value} key={option.value}> | ||
| {option.label} | ||
| </option> | ||
| ))} | ||
| </VaSelect> | ||
| </div> | ||
| <VaButton | ||
| className="vads-u-flex--auto mobile:vads-u-margin-top--2p5" | ||
| onClick={handleSearch} | ||
| text="Search" | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SearchByProgram; |
Oops, something went wrong.