-
Notifications
You must be signed in to change notification settings - Fork 9
[OSDEV-1373] SLC. Implement search page for name & address search (FE). #437
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
Merged
Innavin369
merged 13 commits into
main
from
OSDEV-1373-implement-search-page-for-name-address-search
Dec 9, 2024
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
6145ae9
added styles, components, task description
13328c7
fixed release notes
ae76a36
fixed react test
202183c
added real data insted of mock
c30e160
added red color for placeholder
5c5ee97
merged main
29b6caa
replaced duplicated styles
11b82ce
code refactoring
3c94f44
refactored error class style
7e4cdf6
merged main
cb4f475
minor changes after code review
38a8d07
refactored url creation
490eda5
Merge branch 'main' into OSDEV-1373-implement-search-page-for-name-ad…
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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
242 changes: 242 additions & 0 deletions
242
src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx
This file contains hidden or 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,242 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { bool, string, func, object } from 'prop-types'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import { withStyles } from '@material-ui/core/styles'; | ||
| import { connect } from 'react-redux'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; | ||
| import CircularProgress from '@material-ui/core/CircularProgress'; | ||
| import StyledSelect from '../Filters/StyledSelect'; | ||
|
|
||
| import { makeSearchByNameAddressTabStyles } from '../../util/styles'; | ||
|
|
||
| import { countryOptionsPropType } from '../../util/propTypes'; | ||
| import { fetchCountryOptions } from '../../actions/filterOptions'; | ||
|
|
||
| const InputHelperText = ({ classes }) => ( | ||
| <span className={classes.helperTextWrapStyles}> | ||
| <InfoOutlinedIcon className={classes.iconInfoStyles} /> | ||
| <Typography component="span" className={classes.inputHelperTextStyles}> | ||
| This field is required. | ||
| </Typography> | ||
| </span> | ||
| ); | ||
|
|
||
| const defaultCountryOption = { | ||
| label: "What's the country?", | ||
| value: '', | ||
| }; | ||
|
|
||
| const selectStyles = { | ||
| control: provided => ({ | ||
| ...provided, | ||
| height: '56px', | ||
| }), | ||
| }; | ||
|
|
||
| const SearchByNameAndAddressTab = ({ | ||
| classes, | ||
| countriesData, | ||
| fetchCountries, | ||
| fetching, | ||
| error, | ||
| }) => { | ||
| const [inputName, setInputName] = useState(''); | ||
| const [inputAddress, setInputAddress] = useState(''); | ||
| const [inputCountry, setInputCountry] = useState(defaultCountryOption); | ||
| const [nameTouched, setNameTouched] = useState(false); | ||
| const [addressTouched, setAddressTouched] = useState(false); | ||
|
|
||
| const history = useHistory(); | ||
| const validate = val => val.length > 0; | ||
| const handleNameChange = event => { | ||
| setNameTouched(true); | ||
| setInputName(event.target.value); | ||
| }; | ||
| const handleAddressChange = event => { | ||
| setAddressTouched(true); | ||
| setInputAddress(event.target.value); | ||
| }; | ||
| const handleCountryChange = event => { | ||
| setInputCountry(event || defaultCountryOption); | ||
| }; | ||
|
|
||
| const handleSearch = () => { | ||
| const baseUrl = '/contribute/production-location/search/'; | ||
| const params = new URLSearchParams({ | ||
| name: inputName, | ||
| address: inputAddress, | ||
| country: inputCountry.value ?? '', | ||
| }); | ||
| const url = `${baseUrl}?${params.toString()}`; | ||
|
|
||
| history.push(url); | ||
| }; | ||
| const isFormValid = | ||
| validate(inputName) && | ||
| validate(inputAddress) && | ||
| validate(inputCountry.value); | ||
|
|
||
| useEffect(() => { | ||
| if (!countriesData) { | ||
| fetchCountries(); | ||
| } | ||
| }, [countriesData, fetchCountries]); | ||
|
|
||
| if (fetching) { | ||
| return <CircularProgress />; | ||
| } | ||
|
|
||
| if (error) { | ||
| return ( | ||
| <Typography variant="body2" className={classes.errorStyle}> | ||
| {error} | ||
| </Typography> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Typography className={classes.instructionStyles}> | ||
| Check if the production location is already on OS Hub. Enter the | ||
| production location’s name, address and country in the fields | ||
| below and click “Search”. | ||
| </Typography> | ||
| <Paper className={classes.searchWrapStyles}> | ||
| <Typography component="h2" className={classes.titleStyles}> | ||
| Production Location Details | ||
| </Typography> | ||
| <Typography component="h4" className={classes.subTitleStyles}> | ||
| Enter the Name | ||
| </Typography> | ||
| <TextField | ||
| id="name" | ||
| className={classes.textInputStyles} | ||
| value={inputName} | ||
| onChange={handleNameChange} | ||
| placeholder="Type a name" | ||
| variant="outlined" | ||
| aria-label="Type a name" | ||
| InputProps={{ | ||
| classes: { | ||
| input: `${classes.searchInputStyles} | ||
| ${ | ||
| nameTouched && | ||
| !validate(inputName) && | ||
| classes.errorStyle | ||
| }`, | ||
| notchedOutline: classes.notchedOutlineStyles, | ||
| }, | ||
| inputProps: { | ||
| type: 'text', | ||
| }, | ||
| }} | ||
| helperText={ | ||
| nameTouched && | ||
| !validate(inputName) && ( | ||
| <InputHelperText classes={classes} /> | ||
| ) | ||
| } | ||
| error={nameTouched && !validate(inputName)} | ||
| /> | ||
| <Typography component="h4" className={classes.subTitleStyles}> | ||
| Enter the Address | ||
| </Typography> | ||
| <TextField | ||
| id="address" | ||
| className={classes.textInputStyles} | ||
| value={inputAddress} | ||
| onChange={handleAddressChange} | ||
| placeholder="Address" | ||
| variant="outlined" | ||
| aria-label="Address" | ||
| InputProps={{ | ||
| classes: { | ||
| input: `${classes.searchInputStyles} | ||
| ${ | ||
| addressTouched && | ||
| !validate(inputAddress) && | ||
| classes.errorStyle | ||
| }`, | ||
| notchedOutline: classes.notchedOutlineStyles, | ||
| }, | ||
| inputProps: { | ||
| type: 'text', | ||
| }, | ||
| }} | ||
| helperText={ | ||
| addressTouched && | ||
| !validate(inputAddress) && ( | ||
| <InputHelperText classes={classes} /> | ||
| ) | ||
| } | ||
| error={addressTouched && !validate(inputAddress)} | ||
| /> | ||
| <Typography component="h4" className={classes.subTitleStyles}> | ||
| Select the Country | ||
| </Typography> | ||
| <StyledSelect | ||
| id="countries" | ||
| name="What's the country?" | ||
| aria-label="Select country" | ||
| label={null} | ||
| options={countriesData || []} | ||
| value={inputCountry} | ||
| onChange={handleCountryChange} | ||
| className={`basic-multi-select notranslate ${classes.selectStyles}`} | ||
| styles={selectStyles} | ||
| placeholder="What's the country?" | ||
| isMulti={false} | ||
| /> | ||
|
|
||
| <Button | ||
| color="secondary" | ||
| variant="contained" | ||
| onClick={handleSearch} | ||
| className={classes.searchButtonStyles} | ||
| classes={{ | ||
| label: classes.buttonLabel, | ||
| }} | ||
| disabled={!isFormValid} | ||
| > | ||
| Search | ||
| </Button> | ||
| </Paper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| SearchByNameAndAddressTab.defaultProps = { | ||
| countriesData: null, | ||
| error: null, | ||
| }; | ||
|
|
||
| SearchByNameAndAddressTab.propTypes = { | ||
| countriesData: countryOptionsPropType, | ||
| fetching: bool.isRequired, | ||
| error: string, | ||
| fetchCountries: func.isRequired, | ||
| classes: object.isRequired, | ||
| }; | ||
|
|
||
| const mapStateToProps = ({ | ||
| filterOptions: { | ||
| countries: { data: countriesData, error, fetching }, | ||
| }, | ||
| }) => ({ | ||
| countriesData, | ||
| fetching, | ||
| error, | ||
| }); | ||
|
|
||
| const mapDispatchToProps = dispatch => ({ | ||
| fetchCountries: () => dispatch(fetchCountryOptions()), | ||
| }); | ||
|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| mapDispatchToProps, | ||
| )(withStyles(makeSearchByNameAddressTabStyles)(SearchByNameAndAddressTab)); |
This file contains hidden or 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 hidden or 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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.